Over the last six years, we have seen a major shift in the use of mobile phones for both businesses and consumers. What had been a device strictly used for making calls and checking e-mail is now a lifeline linking people to their work and private lives through connected services.
The expectation of users today is that they will be able to leave their desks and continue to stay connected in some capacity via their phone. As a result of this shift in technology and expectations, Web traffic from mobile devices has skyrocketed. According to Cisco, traffic from wireless and mobile devices will exceed traffic from wired devices by 2016. This means that businesses—whether marketing to consumers, the enterprise or anyone in between—must have a strategy for making their services and websites mobile.
In the mobile Web development community, few words get thrown around as much as “responsive design.” This technique allows you to build a single site that can be viewable on any screen size and respond to it accordingly to provide an optimal experience for that device. The technique has garnered significant buzz, with its most ardent proponents claiming it as the Holy Grail of mobile Web design.
Well, as with anything, it has its limitations. Should your business utilize responsive design? The answer is that it depends.
Consider www.newsgator.com and www.pittsburghkids.org. Both are well-constructed responsive sites that are easy to browse on any screen size. Clicking around, you will find they are similar in navigation style, providing long scrolling screens of content when displayed on a phone. They do not have a ton of interactive content, just a couple contact forms with some filtering and embedded maps.
If you look under the hood, the load sizes for the NewsGator and Pittsburgh Children’s Museum homepages are 1.9MB and 1MB, respectively. This demonstrates the compromise that has to be made for responsive sites: Either they have large downloads, or trimmed-back functionality on full-sized browsers. With mobile bandwidth improving every day, it is not a huge concern, at least in developed markets, but anything less than a 4G connection would take some time to download an almost 2MB homepage.
An alternative option to responsive design is the dedicated mobile website. This tried-and-true technique provides mobile devices with their own interface separate from what is displayed on a desktop. While this does mean two separate codebases for a website, it also means greater control over the user experiences on both sides.
Consider Facebook.com and ESPN.com. These sites, built with dedicated mobile websites, have a much bigger digital footprint with significantly more content. These examples relate better to internal, back-office applications rather than external, public Internet sites.
For example, Facebook is analogous to an intranet or social enterprise application. ESPN could be analogous to a company intranet portal providing news, information and other services to employees.
At 209KB and 242KB respectively, these sites are a much smaller load than the responsive examples. They also provide an experience that is more like a mobile app, which puts more actions on the screen and less scrolling through content.
It may not seem fair to compare a site like Facebook to the Pittsburgh Children’s Museum, but when it comes to responsive design, not many big content sites are employing it exclusively. This is likely because of the limitations in both the mobile and full versions.
Thunder SEO and Meteor Group developed a nice infographic that lays out some important questions that should be asked when determining whether to pursue a mobile website or a responsive design strategy, including:
• Can you support both mobile and desktop versions of your site?
• Do you have a lot of rich media content like images, videos and animations?
• Do you want to achieve a completely different user experience?
• Do you want to utilize your built-in mobile device capabilities?
This decision doesn’t just stop at your public website either. One must think about intranet, customer-relationship management and other back-office applications needed to empower a mobile workforce.
Responsive design techniques are fantastic. They can even be employed in mobile websites to account for screen orientation. But they are not the end-all be-all solution for the mobile Web. The bottom line is that the decision will hinge on the service being provided and how the users need to interact with it.