Over the next few weeks we at A Little Code will be experimenting with best ways to optimize sites for multiple devices. Here are a few initial thoughts.
Hitting the Limits of Responsive Web Design
Initially, we’ve found that for a site with a number of interactive elements, such as drop-down navigation, slideshows, javascript overlays, etc., the approach to Responsive Web Design recommended by Ethan Marcotte — adding media queries for mobile devices at the end of things — isn’t up to the task.
The problem is not a matter of feasibility. These are CSS and JavaScript interactions, well within the grasp of HTML5-friendly devices. With enough screen space — an iPad or similarly sized tablet — all is fine. But once the device is smaller than an iPad, things change drastically. Navs with drop-downs require multiple taps. Drop-downs don’t fit. Javascript overlays are too small, etc., etc.
Adding media queries at the end won’t cut it. The amount of CSS work required to strip out unwanted interactions is too extreme. With one recent project, we were at the point of needing to add a new CSS reset at the top of our mobile media queries. This highlights the chief problem with adding media queries at the end of things: code bloat.
Ferreting out the problems with CSS media queries for mobile devices is easy if you look at what media queries purportedly promise: All you need to do to transform your desktop web design into something optimized for devices with smaller screens, less powerful CPUs, and slower network connections is to add more code. The idea of adding more code—adding more to download—in order to optimize for mobile should be the first clue that this isn’t a good solution. via CSS Media Query for Mobile is Fool’s Gold « Cloud Four.
It was at this point that we bailed and opted for a separate mobile site for visitors with mobile devices. One of the chief benefits of this approach, as Grigsby points out in the above-cited post, is that a mobile site pulls down only the code and assets that are necessary for the mobile device. Thus, the site is not only more user-friendly but much faster-loading.
But our next question is this: What if we’ve been using media queries in the wrong sequence? This is the question raised by Andy Clarke in his 320 and Up approach.
Reversing our Media Queries?
Grigsby’s criticism of media queries begins with the assumption that the rules for mobile devices are added to the end of things. What Andy Clarke suggests in 320 and Up is that we reverse the order.
Clarke brilliantly recommends designing with the basics in mind first:
- First provide the essential functionality, typography, and layout that will work across all devices — including mobile devices — in a way that is entirely agnostic of the device or browser.
- THEN, and only then, add queries that select larger, more capable browsers, and serve your more extensive sets of styles only to these.
Whether this proves to be a silver bullet remains to be seen. But the approach would seem to offer a slew of benefits and solve a number of difficulties. Among other things, it saves the worry of appropriately addressing the huge range of mobile devices. Mobile devices with small screens get the basics, period — nothing more. Gotta love the elegance of that.
We’ll be trying it out, and we intend to report back.
Data Enhanced 