Mobile Friendly Doesn’t = Mobile

It’s a common misconception that the good strategies employed on a traditional website naturally make the transition over to a mobile environment. As convenient as that would be, it’s just not the case.

The first step in understanding the differences in strategy between the two is to understand the difference between a mobile website and a
“mobile friendly” website.

“Mobile Friendly” websites on the other hand, utilize traditional web design, but are developed in such a way that they will display accurately on a mobile device. In this way, the website will work on a mobile device, but because of the difference in the size of the display area, the user must manipulate the site to find the information they seek.

Because of this difference in display size, and the poor user experience it can create, a best practice is to account for the mobile user while design your website. This specialized mobile interface is customized to the smaller display areas of mobile devices and is automatically loaded when a user visits your site via a mobile device.

In order to make maximum the use of the smaller display area, while ensuring the smoothest user experience, you should streamline the immediately available information within the mobile design. This is probably done shortening the navigation of the site.

Another difference between a traditional website made to be ‘mobile friendly’ and a truly mobile website, is the bandwidth, and subsequent load times, of a mobile device. With this consideration in mind, you should also look to limit the size and quality of the images you select. Smaller, less high resolution images load faster and, due to the smaller overall display, look no different than their traditional (full high resolution coupled with large display area) counterparts.

Combine all three of these techniques and you’ll have a good looking, fast loading, and easy to navigate version of your website that caters to the mobile user. This leads to a positive user experience and an increased awareness of your company and your products or services.

Let’s take a quick look at Panera Bread as an example. The first photo below is of their traditional website. Large high resolution images highlight a full featured website with a full navigation system. This works splendidly in a traditional desktop environment where a high speed connection
and full display is readily available.

Panera Standard 300x268 Mobile Friendly Doesnt = Mobile

This second photo from Panera Bread is of their mobile website interface. As you can see, they shortened the navigation system and made use of smaller images. This causes the site to load faster, while presenting users with specific information that a mobile user might be looking for. The end result is a great case study on understanding the differences between traditional and mobile environments.

Panera Mobile 230x300 Mobile Friendly Doesnt = Mobile

 

 

 

 

 

 

 

 

Other Related Posts

2 comments on this post

Add a comment

Comments

Comments RSS

  1. Tony Marshall

    Posted On : August 26th, 2011

    Hi Adam,

    Neat article. I agree with what you say. It’s almost like going back in time with mobile web development – we have to worry about image sizes, white space, simplicity. For a breed of site owners hooked on extensive features and plug-ins in can be quite a challenge to accept a simpler route.

    I think a good test when working on a mobile site is to ask the developer to navigate the website using just one thumb (many people hold the phone and tap the button using one hand), then ask them to do the same in a dim light (many users dim the screen to save battery life). Finally ask them to do both of these whilst walking around (many users are on the go when use their phones to browse).

    I’m exaggerating to make the point but these are the things I think you have to think about.

    With regard to website owners usually they are quite shocked by the numbers that are currently visiting via a mobile phone – and getting a pretty poor user experience! It’s not just the numbers (typically 8-15% of visits), but the growth rate – which is phenomenal.

    We deal mostly with e-commerce websites with catalogues of products and after implementation of a mobile website version we see much lower bounce rates, we see increased page views (people like what they see so they stick around) and most importantly we typically see a 3-5 times increase in conversions from “mobile” browsers.

    Finally we built a small tool to show website owners how their website is currently seen on a mobile phone. It’s free for anyone to use I hope it might be of use to you or your readers – http://www.sayuconnect.com/mobile_check.php

    Tony

  2. Tony Marshall

    Posted On : August 26th, 2011

    sorry I forgot to mention…. for an old techie like me with stubby fingers and failing eyesight, I love QR codes – here’s the one for your example site above http://qrrage.com/wp-content/plugins/WPQRCodeGenerator/qr/qrcode1b6f1579ae917aace04c682363604291.png

Add Comment


will not be published