November 15, 2011

A Move to Responsive Web Design

Responsive web design is the next big thing in the web world, but why does it have designers and developers doing the happy dance? Let's take a look at what it is and what it means for the future of web development. The concept of responsive web design was pioneered by Ethan Marcotte in his article "Responsive Web Design" which appeared on A List Apart in May of last year. The concept was to design a flexible foundation for your site based on non-fixed layouts. What that means is no matter the size of your browser you are getting an optimized view of the site you are visiting. At the core your site will adjust it's layout, font sizes and image sizes based on the dimensions of your browser. You can find a great example of this magic at work on the Food Sense website. They have created a site which will adjust itself to 4 different layouts optimized for regular browsers, tablets, mobile devices in portrait and landscape orientation. To see the jumps in layout simply grab the corner of your browser and slowly resize it.

Amazing, but how does it work?

The magic of responsive web design is the use of media queries. Media queries are something that has been around since CSS 2.1 in the form of media types but was limited to declaring things like stylesheets for print. When the W3C began working on CSS3 they created the @media query to take it to the next level. In CSS3 media queries allow you to get specific properties of the users browser and operating system such as screen width and screen orientation. With that information we can dynamically change the layout of the site for anything from a 24 inch monitor all the way down to a smart phone.

How can we implement this in to existing site ?

Media queries are handled at the theme level so there is very little you need to change to build some responsive features into your existing site. Here are three methods for adding some media queries to your theme. This is how you would add an additional stylesheet through the head of your html document.



What this tells the browser is to only load the stylesheet if the browser window is 480px wide or less. This would be useful for styling you want applied to the site when it's being viewed on a mobile device in landscape orientation.

If you only have some minor tweaks to add to your site you can use this method to add conditional styles to your existing stylesheet.

@media screen and (max-device-width: 480px) { .first-sidebar { float: none; } }

Lastly you can load the same stylesheet as above using @import in your existing stylesheet.

@import url("mobile-landscape.css") screen and (max-device-width: 480px);

This doesn't do anything different than the first method but simply adds a little more flexibility to your workflow.

Why this is a better alternative to user agent detection.

With the explosion of the smartphone and tablet market it no longer makes sense to use user agent detection. It makes more sense to apply styles based on browser size than by what specific browser or even browser version is being used. This way we will be blanket targeting everything on the market be it iPhone, android, Blackberry or Windows Phone 7. This is especially important in the case of the Windows Phone which currently reports as IE7 through user agent detection. The other advantage to media queries is that unlike user agent detection if you change the orientation of the device or resize the browser it will dynamically update the CSS rather than relying on a page reload.

What tools can we use on the Drupal platform?

Currently there a 2 great base themes available for Drupal 7 that are worth taking a look at, Omega and AdaptiveTheme. Both of these themes are very actively maintained and boast 10,000+ current installs. I'll save my thought on both of these themes for another post where we will look at where theming and design is going at Fuse. For now I encourage you to give them a download and play around with some well organized and feature packed themes.