A Business Case for Responsive Websites

2012.04.09

This article is translated to Serbo-Croatian language by Anja Skrba from Webhostinggeeks.com.

The last two years have been very interesting for people who own or manage websites. New technologies have taken the medium by storm; HTML5, CSS3, the emergence of tablets, and the explosive growth of smartphones are all major game-changers. There is a lot to stay on top of! Two years ago Ethan Marcotte wrote Responsive Web Design for A List Apart in what would become one of the most talked about techniques in the industry - ever.

Let's just forget the hype around responsive web design for a minute and figure out if this is actually a worth while idea from a business standpoint. For the last two years responsive web design has been a buzz word, but that alone is not a sound business case for jumping on the bandwagon. Let's take a closer look at why it's an important option, and figure out if it's the right solution for you.

Responsive Design is a Response

In itself, the technology behind responsive web design isn't monumental - if it had been available ten years ago it would have been rarely used. What makes it important is that it’s a reaction to a surge in marketplace adoption of mobile devices like tablets and smartphones. Mobile is making steady gains in global market share, and is projected to overtake desktop surfing sometime in late 2013 (gartner.com). The tablet space has been exploding with new devices, which speak to a consumer demand for content catered to this context as well. 

Responsive design is merely a tool to give the web designer a way to have the visual style of the site change based on the context of different screen sizes: Mobile typically has small screens, tablets medium, and desktops increasingly larger displays. 

So here's the big question: Why wouldn't you want your website to look great regardless of whether it’s viewed on a desktop, smartphone, or any other kind of device?

Other Approaches

It's safe to say that everyone who owns or manages a website wants it to be viewable by any user; however they are surfing your site. Responsive design isn't the only option. Let's quickly compare some other approaches. 

1. Desktop Only Website

Your first option is to do nothing. Today if you go to Apple.com on a phone there is still no mobile optimized site. I think the purpose here was to show off that their mobile browser works well with zooming in and managing desktop sites. The site does seem to be designed with the small screen in mind though - even though it's not a perfect user experience the call-outs are large enough to understand even when zoomed out. 

  • Pro: This is the least expensive option. 
  • Con: This isn't catering to your user on a mobile or tablet device. Your competition may be doing a better job. 

This is a good option when it's not in the budget to upgrade, or your analytics don't yet support the investment (which would surprise me). There's no way around the fact that this is not a great user experience for mobile, particularly if it makes your content hard to access.

2. Native Apps

Let's take a look at making an app for the device.

  • Pro: If the user so chooses, apps on device get a nice icon on the home screen keeping you top of mind, and the app can take advantage of the devices hardware like camera, accelerometer, multitasking etc. 
  • Con: Native apps have a surprisingly low adoption - The average user installs less than two apps a month, less than 15% of users will ever use it past 6 month. They also have high development costs - higher if you want to reach all of your users (all of the platforms will need a different code base). Dealing with the various app stores can be a time consuming nightmare.

Making a native app is a good solution if time, cost and resources aren't an issue and you want the highest level of optimization for each device. The pain of rewriting the app for BlackBerry, iOS, Android, Windows (etc.) combined with dealing with the various app store outlets leaves me feeling like this will rarely be the ideal choice.

3. Mobile / Tablet Specific Versions Of A Site

If Native App programming costs and app store headaches are deal breakers, this is a very close option in giving you more control, while still keeping things simple by relying on the web to bypass the proprietary apps and their marketplaces.  Normally there’s a common backend system that sends the same content to multiple versions of a website. Typically these are the desktop, and mobile sites. Desktop usually has as a normal website address, and the mobile often appears as “m.website.com” or “website.mobi”.

  • Pro: You have full control over your site and how updates are made. With user agent device detection you have a high level of customization you can do per device platform and screen size. 
  • Con: Updates are more costly than the ‘Desktop Only’ approach as you will now have multiple code bases to maintain. You will essentially now be managing several websites, each with unique size requirements & interface conventions.

Having a distinct mobile and/or tablet version is a good choice when you want to have total control of the content, even at the expense of added cost and time. This option has some key strengths over the others, and is a great option for sites with a high level of mobile traffic. 

4. Responsive Web Design (RWD)

You're reading this on responsivewebdesign.ca, so you likely know that this is an exciting option! 

  • Pro: One code base and one set of content to manage. It is the least expensive option second only to "Desktop Only". A moderately high level of customizability; responsive web design generally changes the layout based on the screen size; meaning that your one site should work perfectly on desktop, mobile devices, tablets - and whatever the world thinks of next.  
  • Con: One set of content means you are serving desktop-ready images to tiny screens that can never take advantage of those file sizes. 

Responsive web design is a great option when you want a site that is easy to manage for all contexts, and you either don't have media-heavy content, or aren't concerned about the media size to mobile users. Responsive is also a great interim solution if you have a more time consuming development to do like RESS or Mobile Specific Version.   

5. Responsive Web Design + Server Side Components (RESS)

Popularized by mobile expert Luke Wroblewski in his post about RESS, adding server side logic to your site will take responsive web design to the next level. Think of it as layering on specific features unique to a particular manufacturer’s device, on top of a RWD site (for example loading high quality images for the  third generation iPad’s retina display).

  • Pro: The pros include all of those listed above for RWD, as well as the ability to customize particular areas of the site to the applicable context.  A common example would be to include the desktop-navigation or the mobile-navigation or the tablet-navigation according to the device it's being served on. You can use RESS to get around the cons mentioned for RWD by adding logic to serve up small & fast loading images better suited for small screens and slower cellular internet connections.
  • Con: The server side setup adds a lot of complexity, and there is more time needed to set this up. This method will have particular web server requirements as well (whereas RWD is all front-end and can literally be run on any server).  As new devices emerge (which happens all the time), regular updates to the user agent detection scripts may be needed.

The RESS approach is a good well-rounded approach that gives a high level of customizability, without the expense of making multiple sites. It's a good approach for teams experienced with user agent device detection and server side logic. It is my feeling that this is a great option for most sites. 

Getting Started

There is a huge advantage to getting in early - responsive and mobile web design are still hot topics that are getting a lot of attention. Doing something beautiful, unique and creative will get you a lot of attention through online conversations and galleries. Being the first in your niche is a huge bonus. It's early 90's gold-rush all over again. 

In Conclusion

Is the timing right for you? I encourage you to investigate what your analytics are telling you. If your site metrics are anything like the ones I've been seeing for client sites lately, 2011 saw a very steady increase in mobile traffic across the board, averaging above 10% of monthly users. I've had to support IE6 for smaller percentages than that! I also encourage you to try using your site on the most popular mobile devices surfing your site today and see what your users are experiencing. While you're at it, have a look at how your competition is handling their mobile site. If you haven't already, contrast this by how some notable mobile sites work by checking out galleries like Mobile Awesomeness

If you're an owner or stakeholder in a website you have a decision to make about your mobile strategy. It's no longer a question of if you need a mobile site, but How Soon?

The great news is you don't have to make this decision blindly! Feel free to ask questions in the comments below. 

Comments

Really informative article.Responsive design continues to get a lot of attention and is remarkably different from traditional designing in terms of technical and creative issues.Thank you so much for this fine piece of quality content. Keep sharing.
Responsive Web Design is a collection of technologies and methodologies. 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. 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.<a href="http://www.interactiveidinc.com/website-design-company-birmingham-al.html">Website Design Birmingham</a> describes all the designing methods and functions for a web designer.
Few days ago I read a research created by PEW research center, they reported that Android and smart phone users go to search engine for what they want to search through their phone instead od desktop search. Now a day website should be optimized for mobile search as the number of going search engine via mobile is increasing day by day. Thanks for sharing McBlain.
You should be aware that the “serbo-croatian translation” is a thinly-veiled SEO scam to get you to put a link to their site (WebHostingGeeks), which will improve their Google ranking. I would recommend removing these links. The translation itself is only marginally better than Google Translate.
Thanks for the heads up - I'll put up a 'no follow' in the link. Can anyone else verify the translation is low quality?
Yup, this is a machine translation in general. I'm a native Serbian language speaker.
These are the very things I explain to new clients every day. And you are right about RWD not being a passing fad… its the new reality just as it used to be ok to just have a web ‘page’ now there is no point unless you are prepared to compete with everyone else in your industry. Well explained and great case studies. Thanks for writing such an informative article!
When building or upgrading an existing website, it really isn't a question of whether to use Responsive design or not, it's which responsive web solutions are you going to use. Great rundown in this article, Arley.
Having a single website that works everywhere offers significant savings over creating multiple native mobile apps <a href="http://www.argentrapidement.sitew.fr">Caroline Cassar</a>
Responsive design is a solution. But think that a native apps is more adapted too and are a really long term solution for your long term mobile marketing. Responsive design is a great option when you want a site that is easy to manage for all device and for all context.
Now a day website should be optimized for mobile search as the number of going search engine via mobile is increasing day by day. Thanks for sharing
Responsive websites is truly a way to go nowadays for anyone who wants to obtain mobile as well as desktop graphics. When we were planning to build our <a href=”http://http://www.wallpapersforiphone5.com/topratedwallpapers/>iPhone 5 Wallpaper </a>project, we know that most visitors will be coming from mobile devices and thus went with responsive design.
Today is the world of responsive websites and online business owners are highly attracting to this new trend of web design. I say that due to its huge benefits, all the existing designers should switch their website to responsive.
The tablet space has been exploding with new devices, which speak to a consumer demand for content catered to this context as well.
The tablet space has been exploding with new devices, which speak to a consumer demand for content.
This is a nice post. 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.
Responsive websites is truly a way to go nowadays for anyone who wants to obtain mobile as well as desktop.
It’s only when we stage off a management or do a bungee wire jump that our traditional primate neurology triumphs over all sensible considered and we are packed with stress.
Your first option is to do nothing. Today if you go to Apple.com on a phone there is still no mobile optimized site.

Share

Author

Arley McBlain

Arley McBlain is a web designer who works at Thrillworks in Burlington, Canada. Arley is an active blogger with contributions on css-tricks.com, and sixrevisions.com.

Follow him on Twitter @ArleyM.

Additional Info

If you're new to Responsive Web Design read this post to learn more.

Image Credits
shutterstock.com