Marcos Lara is the CTO and founder of AudioVroom. In this guest article he explains how AudioVroom utilizes Responsive Design.

Over the years, my work flow has shifted as browsers and design trends have evolved. Recently, mobile and tablet device capabilities and usage has exploded. As a result, it's incredibly important for your web app to look great everywhere, even on small screens. It’s no longer adequate to banish a mobile user to a simplified version of your site.

It’s not just mobile that you must consider. Desktop monitors now have have larger displays. On the horizon, HTML5 will be supported in TVs, game consoles, E-Readers. Many of these devices, like TVs have displays as large as 1080p.

Browsers, including on mobile, have evolved quickly. HTML5 and CSS3 include a lot of functionality that has historically only been available to native apps, including the ability to make your web app look great on any device."

Enter, Responsive Design

So how do you harness this opportunity?

First, you need to change your frame of mind. Rather than approaching the problem using traditional web design techniques that rely on rigid layouts and individual templates for mobile and desktop, you need to approach it from a purely dynamic perspective.

This approach is called Responsive Design. It means a context-sensitive layout that is aware of its own size. Remember, the goal of using HTML5 is that you code once and deploy everywhere.

See it in action

Check out a live demo of Responsive Design at www.audiovroom.com.

Open this in your desktop browser. Once you're logged into the site, grab the bottom right corner so that you can resize the window. Now, drag it diagonally. Notice how elements shift, resize, and disappear based on the size of the window.

AudioVroom uses a resilient, context-sensitive interface that takes traditional fluid design concepts (variable widths and floats), adds new technology (CSS3 media queries, background-size, transitions, and ellipsis) and combines it with JavaScript to deliver a web app that loads in any HTML5-capable device and looks great at any scale. Best of all, the size of the entire app is only 60k.

Keys to a successful Responsive Design

Here are the key takeaways from our development of AudioVroom.

1) Know your Minimal Viable Product (MVP)

Developing a well articulated vision of your MVP is not easy, especially for those who have mature desktop or mobile apps already out there, but this is the single best advice I can offer developers.

Defining your MVP should be an exercise in critical and dispassionate evaluation of your product. The goal: reduce everything to the absolute minimum functionality required to maintain an acceptable user experience on the limited real estate of mobile platforms. Users have very little patience and even less so on small mobile screens. Unless you focus your design, users will simply give up on your product before they even know what it can do.

2) Make the MVC (Model View Controller) design pattern an integral part of your HTML5 application from day one

HTML5 applications like AudioVroom have complex views and data needs and a MVC design pattern was key to being able reduce that complexity.

The MVC approch also allowed us to completely separate our data model from the view layer (UI). The key to success here is to implementing your view layer as purely in CSS3 as you can. You also gain code maintainability and layout flexibility using this approach (more on that in a minute).

Lastly you gain component reuse: For example, in AudioVroom, our “album blocks” under What’s Hot and “friend blocks” under My Friends are actually the same component. They are reusable and programmatically know how to re-flow themselves (both in terms of dimensions and how many to fit in a row).

3) Design to the ‘grid’

The AudioVroom web app employs a single template based on a responsive grid layout. This technique allows us to achieve our primary design goal of “look great on any device”. Great care should be taken to simplify your visual layout as much as possible to allow your design to take full advantage of a CSS3 media queries on a dynamic grid. If you do, you can support any device without having to explicitly define or know the targets dimensions ahead of time.

Visit www.audiovroom.com and resize the window to see the grid at work.

To learn more about a grid-based design, check out the Skeleton framework.

Deeper look at media queries

CSS3 media queries are an important element in creating a fluid layout that is continuously responsive to the users display dimensions by targeting the max and min widths rather than specific device sizes or orientations.

Here are some examples of media queries

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait to Mobile Landscape Size(devices and browsers) */
@media only screen and (max-width: 479px) {}

Advantages of media queries

They’re fast. Pages built on media queries and a grid framework are only drawn once by the target browser and they resize on the fly without refreshing of the page.

A single template. Media queries combined with a responsive grid layout allow you to implement a single template for all views. This means little code duplication, leading to higher productivity and easier maintenance of the code base.

Keeps the back-end separate from the layout. Back-end developers never need to touch or mess with presentation layer. Which in most cases, is a Good Thing.

Drawbacks of media queries

Old browsers. Old browsers like Internet Explorer 6 don’t support media queries. See CanIUse.com for compatibility info. You can use Modernizr to detect if media queries are supported.

The need for styling hooks. Some additional styling hooks are helpful on the body if you need to handle special cases for a specific device type, view port dimension or orientation.

Internet Explorer support. Internet Explorer requires a combination of conditional comments and JavaScript, or, as in the case of AudioVroom, we prompt the user to install the Google chrome frame plugin, which works very well for everything except some modal dialogs and alerts.

To learn more about media queries, check out www.mediaqueri.es.

Last Thoughts

HTML5 has delivered on the promise of write once, run anywhere. As your code begins to find its way into places you never expected it to run, you’re going to come face to face with the issues around formatting for the very small, to the very large screens. The single best way to do adapt to these challenges is through the use of the fluid and Responsive Design philosophies and techniques described in this post.

Introducing Mandible

In the process of building the AudioVroom HTML5 web app we wrote our own toolkit to streamline and manage our workflow. We call it ‘Mandible’ and its great for organizing your HTML5 projects and employs a simple yet effective deployment process that works in concert with the best HTML5 open source projects out there.

You can get it in the Mandible Github repo.

Additional reading

Also, here's additional reading that we found useful as we were developing AudioVroom.

• Responsive Web Design by A List Apart
• Responsive Web Design: What It Is and How To Use It by Smashing Magazine
• How To Build A Site That Looks Great On Every Screen by ReadWriteWeb
• Device Classes & Responsive Design by Luke Wroblewski
  
  

What do you think about Responsive Design? Leave a comment below and we’ll follow up.