What every product manager needs to know about designing adaptively for mobile
I’ve been reading up on Skeleton over the past few days and the ideas behind adaptive design1. Created by Dave Gamache, Skeleton is a boilerplate framework for creating pages that look great when viewed on any device or any size — so your website’s design looks different whether viewed on an iPhone, iPad or desktop. It helps you focus on the differences of content: what should be hidden, removed, downgraded in important as the screen size diminishes.
Skeleton and similar boilerplates are a great way for you to help your users get to the content they need. So, if you were a restaurant you might want to feature contact details first if users view your site on an iPhone. On a desktop, you may want to feature large, enticing imagery of your dishes.
It isn’t all roses.
Design that adapts to different screen sizes is called adaptive design. If you wanted to create sites for different devices one of the common methods for designing for different sizes was to create different sites using different source documents. Then you’d create a script on your server to intercept the user-agent, a string sent by your device when requesting a page, and forward the right files to the device.
A few years ago, it was commonplace to create an iphone.myurl.com and forward iPhones to that URL. Everything else mobile went to wap.myurl.com. Today we have a multitude of devices that are just as capable, if not more so, than the iPhone in displaying internet pages and it just isn’t scalable to create a new subdomain for each device family. No, a better approach is needed.
That’s where adaptive design comes in. The elegance of adaptive design is that you don’t have to maintain multiple sets of source files to support each design, you can reuse one set of Javascript and CSS. You don’t need this forwarding depending on user-agent, you don’t need to keep user-agent lists up-to-date (don’t forget new devices is generally a new user-agent that needs to be added to the database). This means that maintenance efforts are kept lower and users still get to have a great experience.
Adaptive design is a little different from flexible or dynamic design in that it adapts to standard screen sizes instead of changing with each minor change in screen size. This means that the design can focus on what the page looks like in mobile portrait, mobile landscape, tablet and desktop rather than a continuous range of sizes. New standards can be added with time, but based on a subset of screen sizes not all of them.
It also means that newer mobile devices that have solid browsers as part of the stack are not forwarded to the ugly feature phone site, but can interact with the fully functional design.
It isn’t all roses. There is additional effort designing for adaptive design: designers have to keep the additional constraint of flexible display sizes in mind at all times while designing. That’s really where frameworks like Skeleton come into play. They help speed up the prototyping and design phase by providing a flexible grid and the tools required to add flexibility.
Adaptive design leverages the flexibility of being able to design a page for different media types, a functionality added to CSS 2.1. For more information, read the W3C’s guidelines on media types. As such adaptive design has only been available since mobile devices have started incorporating newer browsers into their software stack.
As such there are still many devices out there that cannot render full HTML as part of the browser that ships on the device. These devices may support WML or a limited subset of HTML and CSS. Adaptive design using CSS 2.1 cannot address these devices. So, to be particularly inclusive of mobile devices so we need a blended adaptive design.
Blended adaptive design takes the adaptive design properties and marries them with server-side forwarding: if a device cannot support CSS 2.1, then it should be forwarded to a WAP2/simple HTML version of a website that doesn’t incorporate the adaptive styling. This brings the best of both worlds, that of speedy adaptive-sized design for multiple devices, and a lowest common denominator site for any mobile devices that cannot render the adaptive design.
1 Adaptive design was originally coined by Ethan Marcotte in his A List Apart’s article on Responsive Web Design and then further refined by Harry Robert’s in his article Forget Responsive Web Design…. For more information, I suggest that you buy Aaron Gustafson’s excellent book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.
2 For more on designing for how to use media types to design for mobile, please see http://www.howtocreate.co.uk/tutorials/css/mediatypes
