One of the major trends for 2012 in web design is the use of ‘Responsive Web Design’. It will be the key phrase of the year for web designers and developers. As more and more devices like tablets, smartphones, and monitors utilize web applications, having a Responsive Website is, and will be, a necessity. It will be impossible and impractical to try and keep up with endless screen resolutions and devices.

“Responsive Web Design” is a design technique: for a more in-depth definition and understanding of the term Ethan Marcotte has written an insightful article about the way to approach “Responsive Web Design”.

I look at this as a forward thinking approach to web design for the future; as technology pushes the limits so should our thinking. It’s not all about screen resolutions and scalable images on a website.

Understanding Responsive Web Design

Basically a website should “respond” to the device it’s being viewed on, this is a definition of what a ‘Responsive Web Design’ is. There are 3 key elements to ‘Responsive Website Design’:

  1.       Flexible Layouts
    1. Create a separate CSS style sheet or media enquiry
    2. Adjust different screen sizes, from widescreen desktops to smartphones
    3. Choosing what to hide and show for smaller screens or devices, and simplifying the page for specific usage of a device
  2.     Flexible Images
    1. Scalable images to screen resolutions
    2. Don’t create graphics to a particular device ie. iphones
  3.     Media Queries
    1. Use of CSS, CSS3, javascripting
    2. CSS Scalability – apply a different page styling according to certain parameters ie. min-width, device-width, orientation, color, geolocations, etc…

In Conclusion

The concept is simple, the motives are logical, the technology behind it is basic and the results are extremely satisfying.

One thing to always keep in mind is Touchscreens vs. Cursors, I’ll explain more on my next blog.

The bottom line is when creating your next website I recommend you consider a “Responsive Web Design” site, you could argue that this is a just a trend, but it does solve a design problem that I, as a designer, face every day: designing for different resolutions. Who is going to debate making a website more pleasurable and easier to navigate?

Responsive Web Resources

There are a lot more factors in involved. If you want to learn more advanced techniques or complex layouts here are a few articles to read:

Responsive Web Design by Ethan Marcotte  – The Responsive Design movement and how it started.

A tale of two viewports – Article about CSS and how viewports work in mobile devices

Media Queries. The official W3C spec

Responsive Web Design Examples

Note: All of the images are linked to their designated website.

Earth Hour