On Responsive Web Design

A while ago, I stumbled upon an article written by Ethan Marcotte on A List Apart. I only know Ethan’s work on a surface level, but what I’ve learned about him is truly fascinating. Not only is he an amazing front-end developer but every article I’ve read by or about him challenges the way I, as a developer, view my work on the web. I was particularly impressed with the concept Ethan tackles in a recent article: Responsive Web Design.

The concept seems simple at first. You could say that a web developer or designer works like a painter or an architect. Then substitute the canvas or the blueprint by a blank page in a browser. The comparison works so far. But what is happening today is that the web is evolving. Dozens of new devices (smart phones, tablets, etc.) are developed every month and they influence the way we, as users, browse the web. So we have a blank page (or your canvas if you prefer) to build on but the size of it, or what we can actually do with it, depends. It depends on user agents. It depends on the width of your browser. It depends on your bandwidth. (I predict being a caffeine addict will soon be a prerequisite in web development jobs!)

Nevertheless, it is a beautifully challenging problem to solve. How can you make your website look the same – or look great – across all the different devices? There are a few tricks: you can dynamically change your stylesheet using JavaScript with a function bound to a “document.body.onresize” event. Or you can use CSS media queries to apply different style rules for different window widths and then have only one master stylesheet. For IDG’s website, I suggested we go fully responsive for the design with media queries.

Try it now! Resize your browser window, or browse this website on a mobile. It’s all managed by a master stylesheet. Have you thought about how your website behaves across various browsers and devices? Have you tested it recently? There is no time like the present. Visitors can be easily turned off by a site that is not compatible with their device of choice...

There are many ways to execute Responsive Web Design properly. You can also not care about responsive web design like the guys at Stuff and Nonesense. But for those of us who work on the web on behalf of our clients – to help them look their best no matter what the technology being used – it is a reality that needs to be addressed... a vision, a new way of seeing things and programming websites that adapt to the user’s preferences.