Sunday, January 15, 2012

Thoughts About Responsive Design



The concept of Responsive Design has been gaining traction over the last couple of years, mostly due to the growth of mobile and tablet devices (the iPhone and iPad success in particular), and the problem that has arisen in terms of layout design targeting multiple devices and platforms. It seems that the idea is attributed to one of the first pioneers, Ethan Marcotte around the first quarter of 2010. After that, guys like Harry Roberts and Paul Gordon have written about the subject, and of course many more smart people in the interactive and user experience fields.

At a high level it means that design layouts should react and/or adapt according to the device that the content is being viewed in. It is a wide concept that can take many forms. The best responsive designs are the ones that can dynamically react to the device display capabilities and changes and perform a series of “adaptations” like the following:

  • Adapting the layout to suit screen size
  • Resizing images to suit the screen resolution
  • Serving up lower-bandwidth images to mobile devices
  • Simplifying page elements for device specific use 
  • Hiding non-essential elements on smaller screens
  • Providing better experiences according to device capabilities
  • Detecting and responding to location and orientation.

Most current websites are designed to work on a desktop browser assuming that the resolution standard for this times is around 1024 x 768. Basically, rounding up a 1000 pixels wide.


This are a few examples of standard industry resolutions:

  • Desktop—1024 and above
  • Legacy desktop—800×600
  • Tablet—768 on tablets
  • Mobile—<480 on mobile phones

A basic approach to attack this problem is to use fluid layouts, which dynamically adapt to the wide and/or height available resizing content columns to take more or less space from what it is available. However this is only a partial fix, since when screens are radically narrower (mobile) or wider (desktops, big screens, walls) they break.

This is a difficult problem for designers and also developers. There are some many different screen sizes and resolutions these times that it is hard to come up with a working solution. Smartphones, televisions and interactive out of home screens make it even more difficult.

One alternative is to have different web sites for different devices. This was a hot practice a few years ago when you could break apart just two categories: mobiles and desktop (basically everything else). Nowadays however, the categorization doesn’t work. Plus, having different sites for different devices is just too expensive to create and maintain for most companies.

The whole point about responsive layout design is to come up with a layout that can adapt and respond to any screen size and resolution effectively responding to any device displaying capabilities.

As you can see I have been mixing the term responsive with adaptive so far. There seems to be different positions about what is the right terminology and what each term implies. It seems to me that no matter how you put it, it is basically about a layout reacting and changing itself at different level depending on the display medium. You can go as far a trying to deliver a layout that constantly changes itself according to subtle and small changes or just targeting well known standard industry resolutions and screen sizes.

HTML and CSS best practices can help achieve a responsive design, although I think the concept goes beyond the web environment. Windows 8 is applying responsive design using the Metro Framework which allows applications to adapt to layout and display changes effectively enabling applications to mutate from narrower and simpler layouts to full blown features display and even massive out of home experiences.

Although my work has been mostly on interactive applications and not particularly on website development, I’m excited about applying this concepts to web and platform specific development techniques. I’ll keep an eye on this concepts and how do they translate to real application development practices both for Windows, the Web and Mobile.


No comments:

Post a Comment