Separate Mobile Website Vs. Responsive Website Presidential Smackdown Edition

The US presidential race is heading into full swing, which means well soon see the candidates intensely debate the countrys hot-button issues. While the candidates are busy battling it out, the Web design world is entrenched in its own debate about how to address the mobile Web: creating separate mobile websites versus creating responsive websites.

It just so happens that the two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Republican candidateMitt Romneys dedicated mobile website, and in the blue corner is incumbentBarack Obamas responsive website.

Were going to see how well their mobile Web experiences stack up. But before we do, we need to ask a few questions.

Why Bother With Mobile?

Why are the candidates attempting to create mobile-optimized Web experiences? Well, the US population is sitting at around 311 million. Of those 311 million people, about half of US adults own a smartphone. On top of that, for a whopping 28% of Americans, a mobile device istheir primary way of accessing the Web. So, for a candidate looking to reach potential voters, mobile provides a tremendous opportunity to connect with their constituents.

Whats more is that people are arriving to the mobile Web through more diverse channels than ever before. In addition to direct and referral traffic, candidates are using social networks, email campaigns, SMS campaigns, search and more. Because these activities are increasingly happening on mobile, creating Web experiences optimized for mobile makes even more sense for the candidates.

These are just a few channels that drive people to the Web on mobile devices.

The candidates see mobile as a big opportunity to turn visitors into voters. We can see the candidates incentive, but now we must ask another important Why question.

Why Would Anyone Visit A Candidates Website?

Who is visiting these candidates websites? What are they looking for? Why might they want on a mobile device?

Visitors are generally eitherlooking for information on the candidatesorlooking to take action.

The Information-Oriented Visitor

The information-oriented user might be looking for basic information about the candidate, such as his biography, background or stance on issues. They might also be interested in regularly updated information such as news, locale-specific blog posts and information like myth busting (where the candidate tries to dispel nasty rumors circulating in the media). The official websites give the candidates a chance to deliver information straight from the horses mouth, free from news media bias and inaccuracies that arise from crowd-sourced information.

The Action-Oriented Visitor

The action-oriented user is looking to support the candidate in some way, shape or form. Both websites prominently feature calls to action asking visitors to donate money to the campaign and to sign up for their email newsletter. Action-oriented users might also want to connect with the candidates on social media channels, volunteer their time at an event, make calls on the candidates behalf or shop for merchandise.

The candidates have accounted for these use cases in their Web experiences. Lets look at how they execute on mobile.

Criteria For Judging: Layons Theory of Mobile Motivation

The effectiveness of Romney and Obamas positions on the economy, foreign policy, social issues and other important subjects depends on certain criteria. Likewise, we need to establish a set of criteria to determine the effectiveness of the candidates mobile Web experiences.

Mobile Web designerKristofer Layonhas a clever way of looking at the hierarchy of mobile needs. Histheory of mobile motivationis based onMaslows hierarchy of needs, a psychological theory that identifies the various levels of human needs.

Maslows hierarchy of needs.

Kristofer Layon has applied that theory to the needs of mobile Web users, where primary access and navigation are the most essential aspects of an experience, and at the top of the pyramid are HTML5 enhancements (such as offline storage and a boatload of other features).

Layons hierarchy of mobile needs.

Lets apply a simplified version of Kristofers hierarchy to evaluate how well each candidates website holds up.

My simplified version of Layons hierarchy of mobile needs.

Access

First and foremost, users need to be able to access an experience. The most beautiful design in the world will accomplish nothing if people cant view it. Historically, the mobile Web has been viewed as the Web Lite,whose users get served only a subset of content and functionality.However, a whopping 28% of US residents use a mobile device as theirprimary way to access the Web. With more people relying on their mobile devices to access the Web, achievingcontent parityand giving users access to a full experience regardless of their device or configuration are more important than ever. Lets see how the presidential candidates mobile Web experiences hold up.

Barack Obama

Barack Obamas mobile website has no full site link because it shares the same code base as the desktop website. Content on a responsive website lives under one roof, which gives the website a better chance of achieving content parity. And while responsive designers can (and do) hide content from small-screen users, responsive design affords less opportunity to fork the content and create disparate experiences, which would deprive certain users of valuable information and features.

Mitt Romney

Mitt Romneys website uses device detection to route mobile users to a separate dedicated website. Creating this separate experience allows the designers to tailor the mobile Web experience, but a separate design and subdomain also opens the door to some serious problems.

The main problem with Mitt Romneys mobile website is thatonly a fraction of the full websites features are included.

Only some of the features from the full website have made it onto the mobile-specific website.

Its a myththat mobile users dont want access to all of the information and functionality available to desktop users. The absence of key content on Romneys mobile website leaves a lot of serious questions unanswered for potential supporters, such as Who is this guy, anyway?, Where does he stand on issues?, Whats his plan for the economy?, What can he do for my state? and Where can I shop?

Another common problem with separate mobile websites is URL management. Because desktop and mobile content live at separate URLs, device detection is required to route users to the appropriate site. Unfortunately, many websites dont go deep enough in their URL redirection, so desktop users will get sent to mobile content and vice versa. This becomes apparent when mobile content gets shared by mobile users on social networks and then gets accessed by desktop users:

Issues arise when a mobile URL is accessed from a desktop.

As we can see, having Web content all under the same roof and URL definitely makes it easier to give visitors access to the content theyre looking for, regardless of the device they happen to be using.

Interact

Basic access to a website is essential, but what happens once the visitor is on the website? They need to be able to interact with the content and get around the website. Lets start with one of the most common and important interactions: navigation.

Navigation

Navigation, especially on mobile, should be like a good friend: there when you need it, but considerate enough to give you your space. When navigation takes up a ton of real estate, it gets in the way and becomes that annoying friend who wont leave you alone. When its inaccessible, hidden or just hard to reach, it becomes that friend whos conveniently absent when youre looking for help to move to your new apartment.

Barack Obama

Obamas website serves navigation at the top for large screens and then transforms it into a left fly-out menu for screens narrower than 1024 pixels.

Obamas website has Facebook-esqueleft fly-out navigationfor small screen resolutions. Among popular responsive techniques, this one is relatively complex and opens the door to problems. As Stephanie Rieger points out in her postA Plea for Progressive Enhancement, Obamas navigation fails on a whole load of mobile devices: And the menu failed. Never even opened. Suddenly, the site was without navigation at all.

These situations, regardless of approach, can be avoided using proper progressive-enhancement techniques, but its a good example of the challenges that arise when creating adaptive experiences.

Mitt Romney

Romneys mobile website has a dashboard home page and Back and Home links for inner pages. The full website has top navigation.

Romneys relatively simple mobile navigation contrasts starkly with Obamas navigation. It sits as a dashboard on the home page, and all inner pages simply include a Back button and a logo that links back to the home page.

This navigation technique certainly solves the problem of limited real estate and avoids complexity, but it creates other issues. Requiring a full page refresh just to jump to another section of the website isnt very efficient. A logo as a button doesnt exactly scream Click me for navigation! And the Back button does nothing if the visitor arrives at the website on a page other than the home page. Its also worth noting that mobile browsers already have their own back buttons, so duplicating that functionality in the header could be regarded as wasted space.

Scrolling

Scrolling is an interesting interaction on mobile devices. The fold as a set pixel value is a myth, but users still need to be able to access the core content as quickly as possible.

Mitt Romney

Romneys mobile website has an acceptable page length. Not much chrome or clutter before you get to the core content, and for the most part the user doesnt have to scroll much to find what they need.

Barack Obama

Obamas pages contain a massive amount of content, often introducing entirely new sections far down in the flow. The result is extremely long pagesthat have serious problems.

Scrolling through disparate content types is not a good experience. How do users figure out that other content exists? Finding what theyre looking for becomes a scavenger hunt. While they might be all right with sifting through one or two content types (for example, a blogs main article and subsequent sidebar), a lot of disparate types makes the content unfindable and the page impractical.

While content parity is essential for mobile users, that doesnt mean websites have to be one size fits all. Techniques like lazy loading andconditional loading enable Web creators to provide access to full content without having to stuff it all on the page at the same time. And while those techniques can be extremely effective, theres no substitute for subtracting supplementary content everywhere to focus on core content.

In addition to the annoyance caused by having to scroll through so much content, these massively long pages have another downside: terrible performance.

Perform

Performance has gotten the short end of the stick. Web creators have assumed too much about the users context (Of course, the user has a fast connection! Of course, their machine is powerful!). As a result of these convenient assumptions, the average page nowweighs a whopping 1 MB.

One MB might not seem like a big deal until we look at the mobile users expectations.71% of mobile users expect mobile websites to load as fast, if not faster, than desktop websites,and 74% of mobile visitors will abandon a website if it takes more than 5 seconds to load. In other words, you have 5 seconds to get someones attention. Make it count.

To evaluate how well the candidates websites perform, well use the excellentBlaze.io mobile performance testto capture performance results on real devices.

Mitt Romney

A typical page on Romneys mobile website is about 687 KB and, as a result, takes about 8.75 seconds to load. While thats over the 5-second mark, the pages still weigh less than the average size.

Barack Obama

A typical page on Obamas responsive website is a massive 4.2 MB, resulting in a 25-second loading time.

Despite the fact that only the most patient of visitors would wait 25 seconds for a page to load, such a large payload creates real accessibility problems. Some devices (such as my cousins company-issued BlackBerry) wont even render the page because its too large.

While some of this is RIMs or my cousins employers doing, its a legitimate constraint that we need to be mindful of.

Unfortunately, poor performance is prevalent among the current crop of responsive designs in the wild. Guy Podjarny, chief product architect at Akamai and CTO ofBlaze.io, discovered that only 3% of small-screen versions of responsive websites are significantly lighter than their large-screen counterparts. This is all the more reason to focus on performance as a key component of adaptive Web design.

Enhance

Weve talked about content parity and the importance of providing access to information and functionality regardless of device or configuration. But that doesnt mean we have to settle on serving a one-size-fits-all experience. Many mobile devices and browsers can do things that desktops cannot. Making the most of these wonderful features will take the mobile experience to the next level.

Mobile Communication

Obamas designers have implemented one huge enhancement: the ability to make calls on the candidates behalf directly from a phone. We tend to forget that mobile phones are, at root, voice-based communication devices and that mobile browsers can initiate a call when the user clicks a tel link. By exploiting this enhancement, Obama is able to mobilize his mobile users into action, which could have a big impact on the campaign.

Obamas call functionality enables users to make calls on the candidates behalf, right from their phones.

Besides enabling phone calls to be initiated from the browser, there are many other opportunities for mobile enhancement. Here are just a few ways that both websites could enhance the experience and make the most of the mobile Web.

Simple Form Enhancements

The great thing about form enhancements is that they require barely any effort. One enhancement for many mobile browsers is to specify an HTML5 input type to pull up the appropriate virtual keyboard forthe user. While this enhancement isnt particularly mind-blowing, anything that allows the user to complete their task more quickly certainly helps and could lead to more conversions.

Setting these forms to input type=number would pull up the appropriate virtual keyboard, thus saving the user an extra step.

Geolocation

Detecting location is an extremely powerful way to provide users with contextually relevant information. Imagine dynamically displaying blog posts, news and upcoming events relevant to the users location. Obamas website smartly allows users to choose their state; perhaps they could take it further and add geolocation as a way to identify it. Geolocation can also save steps when filling out forms, and it creates opportunities for innovative new features.

Touch Events

The beauty of touchscreens is that they give users a way to interact directly with content and can add a layer of fun to the experience. These websites could leverage touch events to allow users to swipe through photos in a gallery or to thumb through a quick overview of the candidates stances on important issues.

Many More

This is just a small sampling of enhancements. Support for atonoffeatures can be detected, and a ton of use cases emerge from the plethora of devices that access the Web. Ask questions. Can I offer features that are useful to users on the go? How might I use offline storage to improve the experience? How can I take advantage of touch events? Lay a solid foundation, and look for opportunities to enhance.

So, Who Wins?

If theres one lesson to learn from analyzing these websites and techniques, its thatthis stuff is genuinely hard. A lot goes into making a great mobile Web experience, and Im personally thrilled that the candidates have taken the important first steps toward making their websites mobile-friendly. Viewing the mobile web as a wonderful journey and not as a destination is absolutely essential. As we step into the deep end of multi-device Web design, we must strive to continually improve our websites and services in order to better serve our users — wherever they may be.

While the design of a candidates website might not determine the outcome of the presidential election, it will certainly influence how the world perceives the candidate. And for a Web-savvy voter like myself, a websites design might just sway my vote.I know who Im voting for in November!

(al)

Brad Frost for Smashing Magazine, 2012.