According to Morgan Stanley’s Mary Meeker, compared to when the desktop internet launched in 1994, the adoption rate of Apple’s iPhone and iPod Touch is 11 times the rate of AOL’s adoption, and five times that of Netscape’s adoption. At this rate, the number of mobile internet users is projected to surpass the number of desktop internet users by mid-2013.
Seeing as how an increasing proportion of users will be visiting websites from their mobile devices, it’s growing increasingly important to have a website dedicated to a mobile experience. Ethan Marcotte’s famous A List Apart post ushered in the responsive web design movement, which is more relevant than ever in today’s landscape of fragmented device screen sizes. According to a study done by Gartner, Android makes up 72% of the current mobile market. With hundreds of different types of devices, ranging in resolution from 240×180 pixels to 2040×1152 pixels, there are a ton of different types of mobile experiences to cover.
The traditional solution to this problem has been to build a mobile-specific version of a website that detects either a device’s screen resolution or a device’s user agent and redirects the user to either a desktop website (e.g., http://tsn.ca) or a mobile website (e.g., http://m.tsn.ca).
However, the various mobile tablets, phones, phablets, and gaming consoles, all with a range of screen resolutions, have made it quite difficult to build websites that are compatible across all of them. Responsive web design provides one highly compelling solution to this problem.
What are the Benefits of Responsive Web Design?
Responsive web design addresses the problem of screen resolution fragmentation. By using CSS3 and media queries to build a website that can adapt to different screen resolutions (e.g., increasing from one column to three columns), the developer only needs to build, maintain, and update one website. Bug fixes, defects, and new features can all be incorporated into one website and rolled out across multiple platforms.
The perks of having only one website to manage extend beyond just the developer. Readers will be able to share one common URL, and the problem of mobile pages opening on desktop browsers (or vice versa) will disappear. This leads to the SEO benefit: if there were two separate sites, there would be separate URLs, which dilutes Pagerank power. With responsive web design, readers, blogs, and other websites that cite your work will link to the same URL, and Pagerank will be unified.
Responsive design also creates a consistent experience across all platforms, while maintaining the optimal format for the device and screen size.
What are the Features of Responsive Web Design?
There are many online magazines, blogs, and news outlets that are outstanding examples of responsive web design. The reason why responsive web design works so well on these types of websites is because it rearranges navigation and elements to fit a specific screen size.
The Boston Globe (as seen in the screenshot above) is one such example. Its site ranges in columns depending on the screen resolution of the mobile browser (dropping down to one column if being accessed from a mobile phone). The navigation becomes less complex and comprehensive as the screen size decreases. The website also layers in extra swipe functionality and allows for horizontal scroll when it’s accessed from a mobile device. (In case you’re curious about other examples, check out John Polacek’s microsite.)
Retailers have also made use of responsive web design to adapt to mobile browsing. Using a hybrid method, some retailers have even used responsive web design within their mobile websites. For example, Best Buy and Future Shop both have mobile websites that can adapt to the screen resolution of a phone and of a tablet. This can be useful as it helps engage consumers by providing context sensitive content and actions, and creating a more effective sales/distribution channel.
Each retail website works well across different screen sizes and serves different needs. They both have full-featured desktop websites for more comprehensive browsing, as well as mobile websites for tablet-usage comparison shopping.
Responsive web design works equally well on corporate websites, which are typically information portals. An example of this is Starbucks’ corporate website. The navigation simplifies itself as the screen resolution decreases, and the grid elements rearrange themselves to fit according to the screen size.
When is Responsive Web Design the Wrong Choice?
Responsive web design typically rearranges or hides elements in order to adjust to a device’s screen size. This doesn’t bode well on design-intensive services, such as a video portfolio. On mobile devices, users usually prefer a limited set of information.
In a content-heavy website, the information doesn’t change significantly; it’s simply realigned. In contrast, a design-based, image-intensive portfolio using responsive web design will be forced to hide many image-based elements. You would have to change practically the entire website, which warrants careful consideration.
Responsive web design is useful for sites where users have a consistent purpose. For example, mobile and desktop users typically turn to content-heavy websites for the same purpose: they want to browse through the news.
However, there are many situations where mobile and desktop users have varying purposes. For example, users frequenting a movie theatre’s website from their desktop computer may want to browse through special offers, view trailers, detailed movie information, or loyalty program policies. However, users on a mobile device are more likely to use it as a quick way to specifically buy tickets.
In banking, desktop website menus cover all available services; on mobile, only the most-used services – account balance, bill payments, transfers – are necessary. This means that navigation flow needs to change between mobile and desktop usage, and can’t be simply rearranged. Responsive web design would not be a good solution in this scenario.
While responsive web design can be an excellent solution in cases where mobile and desktop users are visiting for the same purpose, it can make for a poor alternative when they are not. If you’re not sure whether or not your site should be transformed with responsive web design, we’d love to chat about native web design, adaptive web design, and other options.
Connect with Ricky on Twitter and LinkedIn.
About the Author
