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?
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.
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.
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.