Skip to content

24 ways to impress your friends

Responsive Enhancement

13 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Louis

FYI – here is the bug report I filed on css columns not working on elements set to table-caption:

https://bugzilla.mozilla.org/show_bug.cgi?id=1109571

Louis

Further on this, here is a solution that works in Firefox:

http://jsbin.com/tociva/edit?html,css,output

The idea is, you have to nest the list in its own element, on which you apply the columns. That way, the bug that prevents columns on table captions is not present. So you get the same effect, but with one extra element.

Louis

Very nice, Jeremy. I’m surprised this is the first time I’ve seen someone combine the jump-to-footer pattern with an off-canvas enhancement. Kudos, and I’m kicking myself for not thinking of it first. :)

Couple of trifles:

Correct me if I’m wrong, but the multi-column layout for the nav doesn’t seem to work in Firefox (tested on Win7 and Mac), even though you do have what seems to be the correct CSS. After poking around a bit, it seems that Firefox doesn’t want to apply columns to an element with <code>display: table-caption</code>. (I wonder if that’s a bug? Or are the other browsers doing it wrong? I’ll file a bug report with everyone and see what happens!) Because of this, it would be nice if it degraded to show the nav in the footer when it’s in its non-column state. But it doesn’t, so I think (ironically) it’s not quite degrading as best it could.

Also, for your JS, I would favor using classList over the old className method. Although the problem there is that classList is IE10+. So depending on the project, you could just assume IE9 is out of the picture (<3% usage worldwide as of this month) but otherwise it would probably be good to test for that too, just in case. After all, IE8 usage is actually higher than IE9, so you might as well. And of course, there is the option to polyfill both of those, but I’m not really a fan of adding more JavaScript for old clunky browsers. And granted, your solution works in IE9+ so I suppose it’s fine. I just hate that old method of adding and removing classes; if anyone can avoid it, they definitely should.

Ralph

I love this approach, and it’s what I try to follow—albeit in a less sophisticated way.

It’s worth pointing out here that progressive enhancement is not just about people with older devices, or people who have JavaScript turned off, or even JS not being fault-tolerant. I use the most modern browsers, and even in them I find that JS often doesn’t load properly. I don’t know why, but even big sites like Facebook and the various Google services regularly fail to load properly in my slick, modern browsers; and because they are heavily reliant on JS, they basically don’t work at all.

So progressive enhancement is not just a chore we must endure because of weirdos with old devices, old browsers or with JS turned off. It’s important because JS can—and does—fail anywhere, anytime … and for some of us, often.

Seb Duggan

Thanks Jeremy – a couple of nice new ideas for navigation handling that I’d not considered before. I especially like the table/caption method for bringing the navigation to the top of the page!

Avangelist

This is perfect, I left a comment on Josh’s post asking for examples of how to apply the concept of enhancement with JavaScript and here is a fantastic reference with guidance on how to write it.

Jonathon Oates

Thanks for a fantastic essay tut!

One thing I found with your RegEx was that the whitespace (`s`) wasn’t escaped. I was trying with this for ages in Safari and Chrome (latest versions) and the RegEx would just never find a match in the `className` string.

I found double escaping the `s` special character worked a treat though ;-) as per: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp

So the RegEx I’ve ended up with (just for completeness) is:

var regEx = new RegExp(‘(\s|^)’ + activeClassName + ‘(\s|$)’);

Was this just a publishing error or should have your solution worked?

Thanks again,

Jon

Matt Radford

The only fly in the ointment: clients! I still find it difficult to get across the idea that the web is a volatile medium, where you don’t know what sort of device is going to be used to view your website. This is has been evident even when the client is simultaneously viewing a site on their phone and on a desktop, and can clearly see the differences. To quote a grinning war-monger: “Education, education, education”.

Also, how about you enhance 2015 with another Responsive Day Out? ;)

Ryan Boone

This is probably the simplest explanation I’ve read regarding cutting the mustard. Thank you, Jeremy, for a very clear, easy-to-follow proof of concept.

I’m very curious as to how the popular single page application pattern can be progressively enhanced, particularly with a client-side MVC framework. <noscript> + a backend solution handles JS-disabled browsers, but that leaves a huge hole for anemic mobile browsers that have JavaScript enabled.

Brian LePore

I understand what is being done here, and I like the overall approach. I am just curious about the specifics listed in the article. Namely 1) Is there a browser out there that understands media queries that doesn’t support addEventListener? And 2) Is there a mobile browser that actually lets you disable JavaScript (and thus wouldn’t cut the mustard but could understand media query rules)? I mean, I guess with the latter you could argue a desktop browser that is not maximized and has JS turned off might encounter that, and you might be able to enter a flag into about:config on Firefox Mobile, but those seem like odd edge cases.

I know, not really the point of the article. They make good illustrations of what you can do. I just wondered if those examples were actually possible things to look for.

Ralph Echter

Great read! This is really a good and simple example to explain and show to a client about the benefits of developing with progressive enhancement.

+1 too for the table/caption method that brings the nav to the top. I resort to quick to position absolute in circumstances like this>

Impress us

Be friendly / use Textile