One of the hot topics in our industry these days is the technique of Responsive Web Design via the use of CSS3 Media Queries. The term Responsive Web Design was first coined by Ethan Marcotte in A List Apart. It revolves around the use of CSS3 Media Queries to deliver different CSS properties dependent on the browser’s dimensions. This allows us to create one unified stylesheet that will deliver a unique experience to all browsers; regardless of dimension and device. It’s flawless in application because it only affects devices that understand it, those that don’t fall back to the usual CSS properties they do understand.

But don’t take my word for it. You should really read Ethan Marcotte’s article. And then read Smashing Magazine’s tutorial of how to use CSS3 Media Queries. And then maybe play around with it a bit yourself – check the source code here, I’ve started to myself. I’m not here to teach you the technicalities of using CSS3 Media Queries, so definitely check out those links if you are still confused about the nature of the properties or Responsive Web Design.

So far, there are three really great examples of Responsive Web Design out there, and each reveal a different design approach.

Mobile and Desktop

ex: http://2010.dconstruct.org/

Probably the easiest application of the media query is to design separate layouts for your desktop and mobile views. In the dConstruct example, for browsers under 459px in width the mobile version is shown. For all other browsers, the optimized super glossy desktop version is displayed, complete with that sweet shifting background (you’ll see).

What makes this approach simple to achieve is that there are only two layouts; one for those viewing over 459px in width and one for (mobile) browsers under that width. You can check out their CSS for yourself, but unfortunately in this case they minified it so it’s a bit hard to read – a CSS pro like you should be able to get what’s going on in that single line though. Stop bitching. In practice, you can tell a designer to do what they may be used to doing – separate layouts for mobile and desktop, but with the same content. Designers that do not know HTML and CSS should consult with a developer to ensure the same HTML content structure can be used for both designs. By far the easiest application of media queries in the real life practice of design & development.

Fully Fluid / Liquid Design

ex: http://hicksdesign.co.uk/journal/

This is probably the purest approach to Ethan Marcotte’s original definition of Responsive Web Design as it involves a fully liquid layout. Take the site in your browser, start from the largest size (over 1200px I believe) and slowly resize your browser smaller and smaller until you hit the mobile layout. You’ll notice the containers constantly resize to the width of the browser so there is never horizontal scrolling – this is an example of the old school technique of liquid layouts. Media Queries will kick in dependent on the browser’s window size, and appropriate show / hide / adjust columns and navigation. The images used in the blog posts scale nicely as well – notice they’re set to max-width:100%; so they will never overlap the post container.

What makes this the most difficult approach from a design perspective is the fact that you really have to do a lot of design work in the browser, as the layout is completely liquid and constantly adjusting. A lot of judgement calls must be made while coding when designing these layouts, and it’s impossible for any designer to give you a working comp of a site like this from within the confines of photoshop. I’d agree with plenty others that this should be the future way we design websites – from within the browser – but for today’s common practices, it’s flexibility makes it the most difficult approach to Responsive Web Design.

Separate Static Layouts

ex: http://colly.com/

This design bends Ethan Marcotte’s original definition of Responsive Web Design. Marcotte states the first thing needed for a Responsive Web Design is a liquid layout. Simon Collison’s site proves this isn’t necessarily true. Colly.com features three separate layouts – one for those viewing over 1024 px, one for browsers around 500 px, and one for browsers akin to an iphone’s portrait display. The four main blocks are re-sized and re-aligned as the browser gets smaller, going from four in a row, to a two by two grid, and finally to a single column of four blocks; a very familiar design for those used to the mobile web.

The fact that this design simply switches between three different static layouts is what makes it easiest to design. Simply choose your dimensions, then ask the designer to create three separate layouts using those dimensions. Of course, if the designer doesn’t understand HTML & CSS, there will still be some conversation required to ensure the same HTML content structure can be used throughout each layout. But strictly coming from a design perspective, this is the easiest way to implement a fully responsive website.

It should be said that if you don’t care for varying media queries controlling the desktop experience, the first design example of mobile and desktop is pretty easy too, perhaps even easier than the Colly example. However, only having a mobile and desktop version of the site prevents it from being fully responsive – on desktop versions, certainly some resolutions (anyone still use 800×600?) don’t see the dConstruct site in it’s full glory. But as most of us have agreed by now for the desktop website experience, 800×600 may be unnecessary.

Really, the only difference between the mobile and desktop approach and the separate static layouts approach would be the fact that the latter can cater to multiple desktop resolutions, while the former does not.

In Summation

So far, those sum up the three main layout approaches to designing a cross-device website. Again, while I certainly agree with the sentiment of “die Photoshop, die“, I do feed myself largely by converting a designer’s PSD into code. The more practical approaches to designing a site that will use media queries and cater to all devices would certainly either be the “mobile vs desktop” approach, or the “separate static layout” approach.

The crux that ties all of these layouts together is the fact that they must rely on the same HTML document structure, and apply styles differently. For designers unwitting of HTML and how it works with CSS, this is a hard concept to develop. For now, the more knowledgeable of code must work with those that design what will eventually become code. In the future, I expect media queries and responsive web design to really push the more economic and logical approach of designing a website with technologies that websites actually use. I also expect design schools to begin teaching HTML & CSS with their media-centric MFA programs to make their students more competitive.

What am I trying to get at with this rant? The days of Photoshop being a web designer’s greatest tool are numbered, and responsive web design armed with media queries will be a step towards making this a reality.