Responsive Layouts & Information Visualizations

As a web/UI designer, I have been asked to specifically design to fixed width and sometimes flexible/liquid layouts. When there is no specific direction, depending on the amount of information to be displayed on each page, I would either choose fixed width or flexible layout.

About six months ago, I received an email with the subject ‘Responsive Layout’ from my boss. The body of the email had few links, videos, and podcasts about the responsive layout. I was very curious to find out what it really is, so I clicked all the links that opened in my default Chrome browser with separate tabs. I went back to finish reading the rest of my email and in short, my boss had asked me to start thinking about converting our products to responsive layout. Here are the links that my boss had sent me:

http://adactio.com/journal/1696/

http://www.alistapart.com/articles/responsive-web-design/

After that day, I started googling and came across: http://bit.ly/m51JoB and http://www.hicksdesign.co.uk/

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

You might find many other sites that are adapting to the responsive layout design…

So, basically responsive layout design is a technique using flexible grids, images, css, and media queries to adjust layouts. Initially, I misunderstood and thought that this technique is not new. Well, it’s not new. But, how you do it—is, what’s new. Responsive layout adjusts to the size of a browser window, whereas the traditional way of supporting multiple devices would be to detect if a device is a desktop or mobile. For example, go to about.com on your desktop browser and resize the window, and notice the layout adjusts to fit perfectly to your viewing preference. Do the same with cnn.com. You might want to try this in your mobile browser; about.com would adjust to fit, whereas cnn.com would detect if the platform is desktop or mobile.

If I were to design a brand new site or redesign an existing site, I would prefer responsive layout over the platform detection technique. But, if an organization just wants their site to be on a mobile device and does not want to edit their existing source code, then I would choose the platform detection technique. I believe both of these techniques can be very effective if applied properly. But, the responsive layout adds to the list of choices for web/UI designers and probably stacks additional work to be done.