What if you only had to build one website design and it would fit all devices, big or small? You can, with a Responsive Web Design. Responsive Web Design (RWD) essentially indicates that a website is crafted to use W3C CSS3 media queries with fluid proportion-based grids to adapt the layout to the users viewing environment. While it is still in the early stages of acceptance, this new standard in web development could be the future. Here we get you up-to-speed.
It all started with an article by Ethan Marcotte on A List Apart. It’s hard to talk about responsive design without mentioning Marcotte. The thinking was new for web designers because the status quo has been to re-design and/or create multiple versions of a single website for several devices. For example, many clients will often pay for a new website, then a mobile version, then an iPad version, and on and on. But this isn’t the way forward; there is no way to anticipate what new device will hit the market and how it will affect designs. What Marcotte proposed was addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive websites. In short, a one-size-fits-all web design.
In the very aptly put words of Jeffrey Zeldman: "It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck."
Ever since the days of CSS 2.1, designers have been able to get a modicum of device awareness through media types. Example:
<link rel=”stylesheet” type=”text/css” media="print, handheld" href=”path/to/print.css”>
However, most devices and browsers never really took this option into account, leaving web developers with using media types in the dark, often implemented imperfectly or just completely ignored. But thankfully, WC3 came to the rescue in CSS3 with media queries as a part of its specifications. Now, the designer could inspect the physical characteristics of the device rendering our work. For Example:
@media screen and (min-width: 480px) {
.special-content {
float: left;
margin:10px 5px 17px 5px;
}
.social_icons {
display: none
}
// and so on...
}
The CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered. However, only Firefox and the Internet Explorer 10 Platform Preview currently implement media query listeners, so they aren’t a reality for standard web development and design right now.
A Flexible Grid Layout is another key component behind creating a Responsive Web Design. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another. However, with most company’s using Content Management Systems like Joomla!, Wordpress and Hubspot to build their websites, sometimes a fluid grid won’t be supported through their rigid back-end dimensions (which developers don’t often have access to) or a lack of support for HTML5, CSS3 and others.
The ultimate purpose is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence Responsive Web Design.
Of course, Responsive Web Design is not without its detractors, who argue it is more of a feature than a standard. Their argument is that any well-designed, non-responsive site looks great in mobile Safari. Yes, you have to double-tap and zoom in. Yes, it serves up content that, in some cases, is useless and weighty to the user on a mobile device. But while a nicely designed, non-responsive site isn’t the best user experience by any means, they would also submit that it isn’t a bad user experience either.
Also, don’t forget the golden rule in the development world: time = money. Building and testing a responsive site takes considerably longer than doing the same for a static site. Fluid layout means more layout break points; serving up specific layouts to specific devices (eg. desktop browser, tablet in portrait mode, smartphone) means more wireframes, more mockups, and more testing. Using advanced web design techniques – the foundation of Responsive Web Design is the CSS3 media query declaration – means even more testing and problem-solving on older browsers. Yes, responsive design takes much more time, including the afore-mentioned maintenance or dealing with a client-handled CMS.
So based on the detractor’s thinking, Responsive Web Design is a feature to be up-sold to prospective clients as ultimately a more affordable solution to optimizing for all the devices out there. The key selling point is that they won’t need a mobile site, or an iPad site, etc, if the client is willing to pay more up front and offer more development time for their website. This allows you to keep your base web development prices low, instead of remodeling your entire pricing structure to account for the increased development time.
The truth is no one really knows where this is going. But at the very least, you are now up-to-speed with this topic as it continues to develop. The idea definitely has traction among developers around the Web. But will it be a practical solution that can be universally developed for the large number of SaaS and CMS solutions out there? Only time will tell.
The bottom line question for now - should I commission my new or redesigned website to use responsive web design? For now, we would advise against it. The majority of web browsers are not up-to-speed with HTML5 and CSS3, the building blocks of RWD. Same with the vast majority of content management systems. We assume that all of the above will eventually move to the new standards, but when and how consistently? Again, only time will tell.
What do you think? Have you had any positive or negative experiences with Responsive Web Design? Let us know in the comments below.
Photo credit: axbom
Jesse is a Web Developer at Kuno Creative who regularly contributes his technical expertise to Kuno's blog. He carries a Master of Science in Mass Communcations and has over 3 years of experience in web development and design.
| Follow @Jesseworldwide |
| Follow @Kuno |
