201 Proof - Sell More, and Sell More Efficiently.

Mobile-Friendly Web Design and Mobile-Optimized Web Design Are Not the Same

Posted 01/20/2013

Mobile, mobile, mobile. It's the new buzz, the new rage, and the key to the future growth of many businesses. Regardless of whether you are a major brand or a local business, you need to have a mobile website so you can be there for your customers as they handle more and more of their lives through their mobile devices.

Undoubtedly, you've probably had multiple companies come to you pitching mobile web design. The thing is, all mobile sites are not created equal. It's not enough to be “mobile friendly”. You have to be “mobile optimized” if you want to get the best results from your mobile website. Not sure what the difference is? Here's a quick intro:

A “mobile friendly” website is a site that has been developed to display well on a mobile device. This usually means a more flexible design, a different set of graphics and larger text, so that visitors can easily read the screen without zooming or having to scroll horizontally.

A “mobile optimized” website is, by definition, a mobile friendly site. It is also much more than that. A mobile optimized website has been planned and organized from the ground up to fit the needs of a mobile user.

Thomas Jefferson University Hospital Mobile WebsiteThe mobile website for Thomas Jefferson University Hospitals was fully optimized to meet the needs of mobile users.

Respond to needs, not just to screen size

Another buzz word you may have heard recently is “responsive design”. This is a very slick technique that allows a website to reformat itself based on the size of the device it appears on. Designers have rightly picked up on this technique to make sites that automatically adjust from desktop to mobile (the 201 Proof site is built with responsive design as well). The issue is that for many brands, just making the design responsive doesn't meet the full needs of mobile users.

A mobile optimized website reorganizes information, often streamlining it and/or supplementing it with information that is more relevant to the mobile user. Something that is a top priority on a desktop website may not even be appropriate for a mobile website, while something that is a desktop afterthought becomes a main feature on mobile. Since mobile users are on the go, with short attention spans, these little adjustments can make a huge difference.

I am many people

The key to creating truly mobile-optimized websites is to recognize that a single consumer changes based on their location. We are used to segmenting people by demographics, but I am a different person when I am at home, when I am out in my local area, when I am on a train, in a store, or in another city on vacation. My demographics don't change, but my needs sure do.

Here's an example. When architecting the mobile website for the Thomas Jefferson University Hospitals, we analyzed the varying needs of the users based on three location states:

  1. Away from the hospital
  2. En route to the hospital
  3. At the hospital

In each case, we took into account the users' information needs, the urgency of those needs, and their available attention. For example, when organizing the homepage of the mobile site, we prioritized the needs of those en route to the hospital, as they are in the most urgent need of information and have the least attention available to hunt for it. Emergency Services took the top spot, with Directions, Parking, and Frequently Called Numbers filling out half of the homepage buttons.

This thoughtful optimization of both information and interface is the reason Jefferson's mobile website received a Gold Award for best Mobile Communication at the E-healthcare Leadership Awards.

Plotting the right course

If you want to make the most of your mobile website, remember these key steps:

  1. Properly segment your audience based on their location state.
  2. Analyze their needs and adjust your information to provide the best fit.
  3. Modify functionality to properly suit a touch and thumb-driven world.
  4. Use responsive design to provide a flexible interface that adapts to different device formats.

Of course, the easiest way to have a truly mobile-optimized website is to work with a professional (like 201 Proof) that understands the nuances of mobile optimization. To discuss your website and mobile transition, just click here to contact us.