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.
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.
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.