Respond.js

How did I never know about this before? Respond.js is “a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).”

In other words, it makes HTML5Boilerplate even better by eliminating the need to craft a separate, IE8-and-below stylesheet when you don’t want those browsers to see the mobile-first version of your site. Better yet, it works with Modernizr (also part of HTML5Boilerplate) by utilizing its media-query detection code.

I just add it at the bottom of my modernizr.js file (a mere 3K of extra data) so that it starts to run before the DOM is even loaded. Sadly, it uses AJAX to get the CSS file, so there’s still a flash of mobile-first styling. But the convenience is well worth it.

Responsive design with “switch to desktop site” option

In my latest responsive design creation, I wanted to follow Jakob Nielsen’s guidelines and allow mobile users to have easy access to the full desktop site, if desired. This is relatively straightforward to do if you have a CMS, but a static site has to be a bit more creative.

Here’s the solution I came up with. It uses JavaScript, a small browser cookie, and that magical tool no web developer should be without, Modernizr. Continue reading Responsive design with “switch to desktop site” option