Lately the team has been spending quite a bit of time solidifying our mobile web offering. There are many tools available to execute a mobile web strategy and each have their strengths. Mobile-specific websites and apps have until recently been the go-to options whether provisioned through a 3rd party mobile service provider like mobify or custom built by your web team. There has, however, been much recent buzz about another option. Responsive Web Design is becoming a viable option for many mobile web strategies and we've put in the time to figure out how to execute Responsive sites with Drupal. Niall from our team touches on this in a recent blog post. The how-to's and Drupal Responsive base themes aside, our clients have been asking questions like âwhy should I consider Responsive Web Design instead of a mobile-specific website?â
It's a good question. Responsive isn't going to be the ideal for every site, but it should be considered.
I've tried to summarize below some of the scenarios where Responsive may or may not have a business case.
First a brief description of Responsive Web Design for those new to the concept
Responsive Web Design is a collection of technologies and methodologies. This post is not intended to give a detailed overview of these. You will find extensive coverage elsewhere. Marcotte's blog post for A List Apart is a great place to start and oft cited by other blogs on the subject. Another good read for the beginner is Nick Pettit's Beginner's Guide to Responsive Web Design. Google it and you'll find plenty more.
Kayla Knight sums things up nicely for the layman in Responsive Web Design: What It Is and How To Use It:
"Responsive Web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user's preferences. This would eliminate the need for a different design and development phase for each new gadget on the market."
So.. we know that Responsive Web Design utilizes CSS3 Media queries and fluid grids to dynamically change the layout of a website based on the width of the browser whether that browser is on a desktop, tablet or smart phone. As with mobile specific websites, content is often prioritized differently giving more importance to what you think (or hopefully know) your mobile clients need to see first. Sometimes that means a trimmed down interface with information tailored to users on the go, other times it may be the full site content with the display of that content optimized for different resolutions.
As you move down from desktop to tablet to smart phone, some imagery, content and navigation elements fall off or display smaller/differently, a three column grid may be come a single column with stacked content and menus may turn into pull down menus. The adaptation for mobile (or vice versa if you are focusing on mobile first) is what you deem to be the most important content and best representation of content for each type of user/device.
When is Responsive not a good idea?
Before I get into some of the advantages of Responsive Web Design and when we think it's good to use it, I think it's worthwhile to talk about why you might not want to consider it.
Not always a substitute for a mobile specific site or app
Responsive web sites are not a fit for every site. Your audience and purpose will need to shape the direction of your mobile strategy and the technology. If, for example, the main function of your site is for users to interact with others or with your site (as with social networking sites), or provide a particular service through a web app (ie. online banking or project management), a Responsive design will likely not be the ideal solution. Simply re-prioritizing and repositioning content may not be enough to provide an effective mobile experience. In these cases, device-specific (ios/android/bb) apps or dedicated mobile web sites will likely serve your users better. Facebook, for example, would not be a great candidate for a Responsive design due to the extensive user interaction required and the comprehensive retooling of the user experience for smaller formats, touch screens, etc that would be required to make it effective. This is something beyond the intent or capabilities of CSS3 and media queries.
Potential for performance issues
One of the major critiques of Responsive Web Design is that because there is a single code base, the mobile user is still being sent all the markup associated with the full desktop version of the site. Depending on whether or not your site is media or image-heavy this could mean the mobile rendering of your Responsive site could be more bandwidth intensive than a dedicated mobile site. We can solve some of this with a mobile-first approach whereby mobile sized images are loaded by default unless a desktop resolution is detected. Economy of code and file sizes are considered first and flow upwards to the desktop. Hopefully this results in a better, quicker loading experience for mobile and desktop users alike. It is, however, something to consider. There is the potential for a Responsive site to be "heavier" than a dedicated mobile site optimized for one purpose.
Not usually a good bolt-on solution
Responsive Web Design is also not usually going to be a good "bolt-on" solution for existing sites. Designing for mobile first is one of the methodologies often employed in a Responsive Web Design workflow. With mobile web traffic expected to eclipse traffic from desktops sometime in 2012, a mobile-first strategy should definitely be considered. It is tough, therefore, to take an existing desktop-first design and do a good job of retrofitting it with a Responsive Design. Possible, but not as effective and probably with compromise. If a full redesign is not on the radar for your site, then a mobile-specific site may be a better option than Responsive.
So...Where do Responsive designs shine?
We would consider Responsive Web Design for new site builds that are focused on presenting content to their audience. Corporate websites and blogs that don't require extensive user input and who's asset/media requirements are minimal immediately come to mind. Once a hierarchy becomes too complex or different than what you want to show mobile users the argument for responsive is less compelling.
Providing your project meets this criteria, there are some distinct advantages to a Responsive design over a standalone mobile site.
One Code Base
This one is simple. One code base means less to maintain. One site that adapts to desktop, tablet & smart phone will save time, money and headaches in the long run. One design and development phase instead of two or more. This keeps developers happier, reduces budgets and in some cases means you have one phone call to make instead of two if you want to make changes and you deal with different companies for your desktop and mobile web sites.
Device Agnostic
Another major advantage of Responsive Web Design is that it is device agnostic. Responsive cares about resolution and not what device it's being viewed on. A properly designed fluid grid means the site will look good on any smartphone, tablet or desktop without building a dedicated mobile website that has to be optimized for multiple devices. Again, this can be considered a major cost savings.
Not just a tool for mobile
Responsive design has the potential to change how desktop users use your site. Like to have multiple browser windows open side by side? My 27â iMac can handle 2 browser windows with 960px optimized sites open next to each other quite nicely. Now, think of how many Responsive sites you could view simultaneously. Admittedly this is a niche advantage, but as the landscape of web design changes and Responsive Design increases in popularity, there is potential for Responsive to change the way a desktop audience uses the web.
Conclusion
Responsive Web Design is one of the tools/techniques you'll want to consider when mapping out your mobile web strategy. It has the potential to save money, simplify management and give multiple platforms a more engaging (a experience. It is, however, only one of the tools in the arsenal. It does not replace the need to do the hard work of figuring out who your users are, how they want to use your site while using different devices and what technologies/methodologies will help you execute best.
I know there are lots of differing opinions out there on Responsive Web Design. As always, your feedback is welcomed.