Using responsive design to support HTML5 cross-device usability
With the accelerating proliferation of different devices, screen sizes and resolutions, contextual experiences, operating systems and browsers, the only reasonable way forward is to adhere to a set of standards and protocols that all device manufacturers and browser authors can support. Yep. You guessed it. That standard is HTML5 and the rich array of flexible front end technologies being developed and used to enhance its performance.
But, as a practical matter, how should developers approach the challenge of designing for maximum interoperability? The answer is responsive design. The term was coined in May of 2012 by Ethan Marcotte, writing on A List Apart, “Responsive Web Design“:
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. But how?
Responsive design depends on the implementation of “media queries” that extend the functionality of media types by allowing more precise labeling of style sheets in order to tailor the page’s representation to a large range of devices with varying screen resolutions.
The most highly visible pioneers in this area seem to be news and information sites. (I had to think about whether to use the word “sites” or “apps”! Because, as you’ll see, the beauty of responsive design is that the line between site and app is steadily being erased.)
Forbes agrees, and to prove it, they relaunched their mobile site at the end of last year, all built on HTML5.
By using HTML5 and reformatting it, we were able to create a page on a cell phone that is very similar to the page on the web, in terms of branding, contributors and headlines,” said Lewis D’Vorkin, chief product officer with Forbes in this interview. “Instead of embedding some of the elements in the text like on the desktop, the elements are very linear, so they appear underneath. We reformatted to take many of the elements on the page standing side by side and stacked them on top of each other.
And, lo and behold, the site, for all intents and purposes behaves like a mobile app when accessed from a modern mobile device browser.
I saved the best for last… If you are looking for true inspiration about how to use responsive design, you must see this gorgeous collection of sites that behave as apps, and vice versa — introducing Mediaqueri.es! The site is designed so that you can see how the screens are formated for different screens side-to-side. If looking at this site doesn’t get you excited about developing for HTML5, well, there may be no hope for you ;-)
Seriously, HTML5 rocks has this little tutorial to get you started. Then, once you’re fired up, why don’t you sign up to AppsFuel developer community and start to code your own HTML5 mobile app? AppsFuel can help you get discovered and then to monetize your app with one-stop-shop mobile carrier billing.