11.19.12

Three and a Half Strategies for Responding to a Mobile Web

BY JEFF ROBERTSON

Supposedly we're in the"post-PC era". Smartphones and tablets have taken over the computing market in some metrics, leading writers to ponder, "I wonder now if there may soon be a trend of going 'PC-less.'"*
Regardless of where you stand on the mobile device debate (I stand with this guy), the mobile web is here, and it's growing. Mobile devices, including tablets, now make up nearly 10% of web browsing.

However, a majority of phone and tablet web use is casual browsing. We use phones and tablets for "communication and entertainment," says Google, which means things like Facebook, news, gossip, shopping, casual games, etc. (Read Google's full study here - it's fascinating.) We still use a traditional computer for in-depth research. For many of our B2B clients, time and money is best focused on desktops and laptops. That said, businesses can no longer afford to simply ignore mobile.

We're going to take a look at the 3.5 primary ways business websites can embrace, or at least accommodate, mobile devices.

Strategy 1: Ignore Mobile Entirely

So it turns out you actually can ignore mobile. In fact, it's pretty easy.

I started looking through the Fortune 500 to see who would be the first giant corporation to ignore mobile. Turns out it's #1 - ExxonMobil.

Click image for a larger view

Here I have Exxon's site pulled up on my desktop, Nexus 7 tablet (left), Droid Bionic smartphone (center) and iPad 3 tablet (right). I chose these devices to illustrate there is no "standard" screen size anymore - I could get a big smartphone that rivals the size of the smallest tablets; small laptops can get down near the size of an iPad, especially in landscape mode. This means attempting to design for "desktop, tablet, smartphone" can be problematic.

Back to Exxon… as you can ever so slightly see in the photo above, it's the exact same site pulled up on each screen, except of course that the Flash content doesn't load on the iPad or Nexus. To browse Exxon's site, I simply need to zoom in a bit on any of the small devices.

Interestingly, it's not bad. The site has very little content, and it's easy enough to pinch and zip around with my fingers to get what I need.

I tried another Fortune 500 - Arrow Electronics - to find a site with more meat.

img 0182
Click image for a larger view

Browsing to one of the product pages, we see where the "ignore mobile" strategy starts to fall apart. This is a pretty big table. It's easy to browse on the desktop, serviceable (barely) on the tablet, and useless on the phone.

img 0184
Click image for a larger view

And, of course, I can zoom in to make things readable, but without the desktop screen in the background, I lose my sense of space pretty quickly.

img 0185
Click image for a larger view

Strategy 1 Review:

Pros:

  • It's really, really easy.
  • It works reasonably well if have a very small, simple site.

Cons:

  • Everything else.

Strategy 2 (and 2.5): Create a Mobile-Specific Version

n70-aa-site

If a company decided to cater to mobile any time before, say, six months ago, they probably went down the mobile-specific site path. This strategy dates back to the dark days of WAP browsers (image of an awesome WAP site courtesy MobileWebsiteWatch (site no longer available)). Mobile browsers have never been able to support what a PC browser can (and still can't), so the solution was to provide a slimmed down version of a site.

The problem is that too often "slimmed down" means "dumbed down." Website developers supposedly cut content and features in an effort to make the mobile site easier to use. I expect this actually occurs because building and maintaining a separate mobile website is incredibly time consuming.

Let's look at an example from CNN.

img 0186
Click image for a larger view

Here, every device but my phone gets the large version of the site. My phone gets its own, mobile-specific version.

img 0188
Click image for a larger view

What's really interesting, if hard to see in the photo, is the number one story on the web (Armstrong scandal) is different from the top story on my phone (Anti-Syrian official killed).

Actually, the whole site is different. On the web I have far more news categories and far more stories per category. The sports section, for example, shows only two articles on the phone versus seven on the web… and they're not even the same stories.

This is the type of mobile development that really bugs me. My aging Droid Bionic is actually more powerful than my Dell XPS gaming laptop from 2006 - a computer that outpaces many still in use today. Why does CNN need to cut half their content from my mobile experience? It's not for performance reasons. If it's for navigational reasons, I'd argue it's a lot easier for me to scroll through a couple more items on an already-long page than it is for me to tap to a new page and try to find the extra content there.

When I'm given a mobile-specific site on my phone, I find the link to the full version at least 50% of the time. I want to know what I'm missing. Many mobile browsers now provide a menu option to "Request desktop version" of a site so you don't have to hunt for the link. Obviously enough people were annoyed by mobile websites that browsers needed to add an option to skip them.

Strategy 2.5: Mobile-specific apps

I only give this half a strategy because it's the exact same idea as creating a mobile-specific website, and for most business websites, it has the exact same drawbacks. (Note that I'm not talking about sales apps, video-heavy tools, etc… just websites.) Companies that don't need the custom features of a true, native app still build them, in my opinion, because it's cool, and it's easier to get users to download an app that goes front and center on their device screen than it is to get users to come back to a website day after day.

img 0189
Click image for a larger view

Above is the desktop version of Facebook, the "mobile web" version on my tablet, and the Facebook app for Android on my phone. Notice below that the mobile web and the app are virtually identical - if you are going to bother making a mobile-specific version (and they must, given Facebook's market), it makes sense to design one interface for all mobile devices.

img 0191
Click image for a larger view

Note that I'm only using Facebook as an example - they would be foolish not to have an app. For content-based sites, like a blog or news site, there's rarely a need.

Strategy 2 and 2.5 Review:

Pros:

  • Mobile-specific sites and apps work really well on mobile devices since that's what they're designed for.
  • Done well, they can enhance the user experience on small devices.

Cons:

  • For companies with limited online marketing teams, imagine maintaining double the number of websites. Note that it is possible to build a mobile-specific site/app that pulls data from the same CMS as the full site, but it still requires separate review with each change.
  • If building a native app, remember you need to build separate versions for iOS and Android, plus Windows Phone and Blackberry if you really have to hit everyone. Oh, and some apps will have random bugs on various devices thanks to the hundred and one versions of Android. But apps are cool, right?
  • Done poorly, users switch back to the full version of the site because it's better to pinch and zoom around rather than do without the features or content they want.

Strategy 3: Responsive Design

Responsive design is the big new thing. It is "responsive" because it morphs itself to the size available. It's not the same as Strategy 2 above because it is not a separate website or app. Content stays pretty much the same… it just reorders itself to be easier to see.

This concept is much easier to show rather than tell - see the video below.

Here is an example of the Boston Globe website on my devices. Same content, different size.

img 0192
Click image for a larger view

What's especially interesting here is how the iPad and Nexus 7 get different layouts. The desktop is three columns, the iPad is two, and the Nexus and Droid are one (the Nexus gets a very wide column, but still just one). The site is smart enough to know that a 7-inch tablet will have a hard time displaying two columns, while a 9-inch tablet is pretty comfortable.

Strategy 3 Review:

Pros:

  • Looks great on almost every device.
  • Keeps the same content on every site for the user.
  • Eliminates the need to maintain multiple versions of a site.

Cons:

  • Expensive and difficult to build. It requires designing and testing 3-4 layouts of every page rather than one.
  • If done poorly, users have no way to escape back to the full site as they can with a mobile-specific siteÉ they're already on the full site. This is especially true for larger tablets where users often have no need for a special layout.

Takeaways for B2B and the Mobile Web

First, assess your site. Is it simply brochureware, or do you have resources people need to use in the field or on the go?

Second, check analytics and see if you actually have any mobile traffic. If so, what parts of your site are people trying to use on mobile? Do they just need your phone number, or are they actually doing something on the site?

A few scenarios:

  • If you have a simple site with few mobile users and the current site is usable on a mobile device, you may be able to do nothing.
  • If you have lots of mobile users, or if you have lots of information useful to people on mobile, consider a responsive design.
  • If you have complex functionality on your site that's frequently used on mobile such as a configuration tool, solution builder, etc., consider a mobile app or, in limited cases, a mobile-specific version. For simple tools that wouldn't benefit from the additional power of a native mobile app, consider responsive design instead.

We are still in the early stages of the mobile web, and it's hard to know how things will change in 3-5 years. For now, take an in-depth look at your web properties and your users and make a decision on a case-by-case basis. There is no one-size-fits-all solution on the mobile web.


* Perhaps, I think, but only for people who don't have to create. Whatever you create - news, video, code, spreadsheets, research, websites, books, or just lots and lots of emails - you can do it faster and more effectively with a set of tools designed specifically for that purposeÉ in other words a real computer. For the same reason the pocket knife has yet to replace the chainsaw, I don't see my phone replacing my laptop without quite a few more years of innovation.

Jeff Robertson
written by JEFF ROBERTSON

Jeff Robertson is an entrepreneur and an online development expert with experience stretching back to dial-up. He is a partner and VP of Technology & Operations at Carbon8. On the development side, he helps bridge the gap between the technical and marketing worlds, and oversees technical infrastructure. On the operations side, he helps optimize team processes, manages finances and buys emergency coffee if the supply runs low.

share this
iamges