Jay Leonard
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.
The Inception
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.”
The Case for RWD as a Universal Standard
Ever since the days of CSS 2.1, designers have been able to get a modicum of device awareness through media types. Example:
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.
The Case for RWD as a Feature
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.
What does this mean to you and your company?
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
Mobile Websites, Mobile Applications, SMS/Text Messaging and QR Codes
This article was written for Business 2 Community by Jay Leonard.
Learn how to publish your content on B2C
Join our Telegram channel to stay up to date on breaking news coverage
Add B2C to your Google News Feed
I think it has a lot of potential, it is very attractive, and works great inside my Joomla Templates.
However, it is not ready for standard implementation and besides I am just thinking if screens in mobile devices like iPad and iPhones keep getting bigger and bigger, in no time they will be matching their desktop counterparts.
So I am just guessing, how necessary will be that responsive template?
I’m a Joomla oriented developer, and though I can’t speak for the others, Joomla is completely template based, both for the front and administrator sides. You can implement multiple templates at once and customize the user experience for the device or client viewing it. On top of that, with Joomla, you can override all application output, and change the structural html to suit you, so the only excuse for having an inflexible layout is that the content itself is not flexible (e.g. a large multi-columned table that squishes into a mess on a Droid phone). To sum this up: if you want a RWD oriented Joomla site, there is absolutely no obstacle to doing so.
Aside from this, the idea of RWD is interesting to me as a developer because most designers I know want pixel perfect control, and having to design for a fluid situation is a major challenge to this mindset.
Well written details and extensive researching
As par the online presence of business organization and the increasing number of competitors, online marketing strategy, the role of web design became changes, instead of mare simple design. Many new concepts are implemented to keep the visitor in website and have some business or provide service whatever wanted.
if you are talking about matchmedia API, then the API is implemented by everyone but Opera see http://caniuse.com/#search=matchmedia It is coming in Opera.
You have to know when it’s best to use Responsive Web Design–it is not “the answer” to “my site looks great on all devices”.
For each media query, there needs to be a design. While frameworks like Twitter Bootstrap will give you “out-of-the-box” responsiveness, they are only generic rules. While the containers will automatically stack as you view the site at different widths, these are only effective for simple layouts. You will need to make considerations for whether you *want* the elements to appear in that order at these widths. Designing each layout will take effort (time, cost). Neither good or bad, but not free.
There are also some issues with including content and elements for different widths all in one HTML file. While you can use media queries to show or hide elements so they display on the right device, all clients are downloading all these assets. Additionally, unless content is one of those hidden elements, a lengthier page on the desktop view will be an extremely long page on the handheld view. While this is convenient, the handheld user is not as likely to want to wade through all that content (nor can they skim).
Which brings me to the main factor to weigh: usability. Responsive web design is best suited to content-only websites (and even then needs to be considered, as we I mentioned above). Application websites need to be separately hosted or designed. Plainly, the device the person is using has inherant usability considerations, and these do not translate to leveraging a simple framework to adjust the layout. What buttons (and even functionality) exist for a desktop will be different for a handheld user. Each device needs to be considered in the light of the needs of the users in that frame of mind.
A great example is the Starbucks website. It is responsive (try resizing your browser using Chrome or Firefox), but all those different layouts did not come out-of-the-box. Additionally, logging in under My Account, trying to use this “application” side of the site in the handheld view is extremely confusing, and certainly not optimized for this experience. Sure it functions, but it’s a terrible experience.
Responsive Web Design has its place, but I believe it has a cost which must be considered–both in development and in long-term maintenance. Knowing the trade-offs is critical for deciding how far to use it on your site.
This is a perfect example for responsive web design. Thank you to sharing the post with us.
The irony of my reading this article on my iPhone (and being annyoed at the experience) was not lost on me.
Perhaps for smaller businesses responsive is optional, but in the larger competitive space Gartners, Forresters, and many others have published several reports that can be summarized like this: Brands who have poor mobile experiences will *loose business* to brands who have optimized mobile experiences.
Small competitive advantages are everything in todays world, and any brand who assumes they can ignore mobile is going to be in trouble.
Does it matter if it’s media-query/responsive? No. What does matter is creating experiences that are designed and optimized for the device the users engage the content with.
Remember, mobile != just view port size. Modality of usage is *at least* as critical as screen size when it comes to optimization for phones and tablets. My mouse and keyboard are a far different tool for input than my thumbs.