• Home  / 
  • Usability
  •  /  5 Reasons to Optimise Your Site for Mobile

Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! ยป

5 Reasons to Optimise Your Site for Mobile

It seems like the whole world has a smartphone these days. As of December 2010, a reported 31% of all US mobile phones were smartphones.

That means there’s likely to be a LOT of people viewing your website on a mobile device. Do you know what kind of experience those people have on your site? Does your site have a dedicated mobile version?

Here’s 5 reasons why we think it should.

1. Horizontal Scrolling/Swiping sucks

Sure, most smartphones have full web browsers, which will display your site exactly the same as it appears on a computer screen. But on a much smaller screen you won’t be able to view the whole page at once.

This means you have to zoom in to one small section of the page at a time. If your phone doesn’t have a fancy new responsive display (which reflows text as you zoom), then you’ll have to repeatedly scroll or swipe from left to right as well as up and down to read an article.

Desktop vs Mobile display

Our site as viewed on an iPhone. Desktop theme (left) vs. Mobile theme (right)

The image above shows you how our site displays on an iPhone, using the regular desktop theme (left) and the dedicated mobile theme (right).

As you can see, in the desktop version, half the title is cut off, and once you get past the image, half of the article text is also obscured. You would have to zoom in or swipe horizontally to read all of the text.

The mobile version, however, fits the width of your phone’s screen, so that you only need to scroll down to read the whole article.

2. Fingers Aren’t Precision Instruments

With a mouse, we’ve become quite accustomed to clicking fairly small areas, sometimes no more than a few pixels square.

But accomplishing the same task with your index finger can be a frustrating experience. I can’t count the number of mobile-unfriendly sites I’ve abandoned because they have a whole load of tiny links clustered together, and it’s near impossible to tap the one you want with your finger.

Wherever possible on a mobile-optimised site, links should be large enough to be targeted with a fingertip, and preferably designed to be button-like, so you can clearly see the area you are targeting, rather than hunting for pixels.

3. Mobile Networks Can Be Slow

We may be just around the corner from everyone having high speed 4G broadband on their phones, but for the time being, the reality is that browsing on a mobile data network can be painfully slow.

If your site doesn’t have a mobile-optimised version, it may be wasting precious bandwidth downloading unnecessary scripts, plugins and images, thereby taking much longer to load, and increasing the chances of a visitor abandoning the site because they simply can’t be bothered to wait for it to load.

4. Interaction is Different on a Mobile

A very common feature on websites for desktop computers is the dropdown menu, which reveals more items for you to click on when you hover the mouse pointer over it.

The problem here is that you can’t hover over something with your finger (well, you can, but it won’t do anything.)

If you use the :hover pseudo-class anywhere on your site to display content on hover, you should consider an alternative method of displaying that content to users with touchscreens, who don’t have hover capabilities.

5. It’s Ridiculously Easy to Do

If your site is on WordPress, creating a mobile version is as easy as installing a plugin.

We use WPtouch Pro from BraveNewCode, a WordPress plugin that automatically detects when your site is being viewed in a touchscreen device, and serves up a stripped down, lightweight theme, like the one you can see on the right of the screenshot above.

They have a free version, but for $39 I would definitely recommend grabbing the Pro version. It supports WordPress custom menus, threaded comments, has a build in iPad theme, and a multitude of other cool features.

Get WPtouch Pro

About the author

Dan Johnson

Dan used to be a WordPress developer at WDFS, but now he has gone off to pursue his passion for art, and he blogs about making a living from creativity at Right Brain Rockstar

Doug Roberts - 3 years ago

Ah, but not all mobile devices are iphones or even touchscreen. You don’t get to see this mobile theme when viewing from my blackberry for instance.

Accurate detection of the mobile device is important – as is giving the visitor the option of viewing the mobile or standard version of the site – irrespective of the device they’re using.

    ItsBuiltForYou - 3 years ago

    I have a blackberry, and I HATE going on the web with it. Basically every site sucks and looks like crap and takes forever to load, just saying.

    In any case, check this site out:

    http://www.onbile.com/

    Actually uses the look of your current site and displays it neatly on the phone.

      Dan Johnson - 3 years ago

      Thanks for that, Jon. Have you actually used it? Any good?

    Dan Johnson - 3 years ago

    Good point, Doug. The WPtouch theme we use does give the option of viewing the standard version, but it does only work on touchscreen devices.

Ryan Leaper - 3 years ago

As browsing the internet on mobile devices becomes ever more popular taking this into account when building sites is becoming increasingly important. I totally agree with the five points outlined. Navigating a site by finger movements alone can become very frustrating. If your building a site from scratch then the newer versions of Dreamweaver has a handy split screen view of what a site will look like in mobile devices. Of course the almighty WordPress makes life a lot easier with the plugins you’ve mentioned.

    Doug Roberts - 3 years ago

    Site navigation is one of the biggest concerns and I suspect the prevalence of mobile browsing will mean the demise of multi-level drop down menus and the increased use of buttons/links with large target areas.

Comments are closed