Is Responsive Web Design Right for Mobile?

I recently came across an article written by Ethan Marcotte on A List apart, which raised some interesting points about the future of web design.  One of the more difficult aspects of working with web design is that web pages, unlike print pages are not static.  Significant programming time has to be dedicated to writing code that is optimized for viewing on the entire range of resolutions, user preferences, and devices that Internet users utilize when viewing the web. While considered a nuisance to some, this defining characteristic of the Internet is also one of its largest strengths, offering users the opportunity for richer, more interactive experiences than any other channel provides for.

Over the years, web designers have learned to adapt their workflow to adhere to the dynamic nature of the web, but recent developments in technology have begun to raise questions about the effectiveness of said techniques.  New smart phones are released on what seems like a daily basis.  In fact, mobile browsing is expected to outpace desktop-based access within the next three to five years. The IPad was released with great fan fare in April of 2010 for the new experience it offered consumers, and we are already beginning to see the introduction of newly developed, Android and Blackberry Tablets into the market.  Most modern TV’s are equipped with wireless access and now come preinstalled with a variety of online apps.  The variety of touch points in which users can access the Internet is becoming too large for web designers to adhere too. Times are changing and it is up to web designers to adapt.

In the past, web designers have chosen to quarantine the mobile experience with a separate sub domain, or use languages such as JavaScript to detect the users’ resolution and accommodate the CSS through this detection.  But with the huge number of different devices that users now use to experience the web, web designers needed a new technology to help them create websites that seamlessly adapt to the device that they are displayed.  The answer to this problem was Responsive Web design.

Responsive web design is design that uses standards-based technologies to make them more flexible, and adaptable to the media that renders them.  The World Wide Web Consortium (W3C) were one of the first organizations to recognize this and as part of CSS3 specifications, created media queries to allow developers to now only target devices, but actual characteristics of the device where the page is displayed.

Web designers familiar with CSS 2.1 should recognize that media queries are just an adaptation of media types.  Media types allowed designers to specify a particular CSS with a certain media type.  If you’ve forgotten, here is an example media type.


Sadly, many browsers and devices never fully embraced the media types specification and many chose to ignore it all together.  Media queries on the other hand, are widely accepted by all current WebKit browsers (Firefox 3.5+, Safari 3+, Chrome, Opera 7+), and Microsoft has committed to including media query support in IE9.

To put it simply, media queries are essentially conditional rules. If a device’s parameters meet the conditions specified in the media query, than the properties outlined in the CSS for that device are applied.  An example media query looks like this:


By expanding the conditions to include other specifications, web developers gain an unprecedented level of control over their designs.  Ethan Marcotte created “The Baker Street Inquirer”, as an example of what responsive web design can accomplish.

responsive-web-design-7 responsive-web-design-4

No matter how you resize the browser window, the website will always display properly.  Images shrink and text boxes constrain to the browser to fit the height and width of the window with no effort.  This is the future of web design!

That all said, media queries are not without fault.  Because responsive web design simply scales images to fit the device, without actually decreasing the file size, users are forced to load the large, image file size over slow, mobile broadband networks.  In many instances, standalone mobile sites are still necessary, because the motivation of mobile visitors vs. desktop visitors differs.  Not only will the design need to change to suit the smaller resolution of the mobile device, but the content and features of the mobile site may be reduced to better align with a mobile visitor’s motivation.

Also, websites with a fixed width may still be practical in situations where cost is an issue.  Fixed width websites are easier to design and code for, which means they are less expensive for your client and less time extensive for you.   To read up more on Responsive web design, check out Nathan’s article by clicking here.

Also check out these other websites that have embraced Responsive web design:

Huff Duffer

Mr. Simon Collison