4 Secrets to an Outstanding Mobile Website
As much as the CrazyEgg technology has revolutionized our approach to understanding just what makes our visitors ‘tick’ online, there’s still one thing that remains a tough nut to crack.
What is it?
Making modifications to our company’s mobile website.
Whether using a responsive theme or building an entirely new sub-domain for mobile viewers, most bloggers still can’t figure out how to make an oustanding mobile website.
The world moves at a much faster pace than it did just a few years ago, and there’s no indication of it slowing. Buoyed on by the quick and blanket dissemination of information across the Internet, people are always “on” and perpetually “wired,” even though they are more than likely wireless.
Statistics are frequently quoted to support the contention that the PC will soon become an ancient relic. It is simply too big and, more importantly, not mobile. Tablets, phablets, and smartphones are the new PCs and it takes no more than a cursory glance at what is going on around you to confirm this observation.
All it requires is a ride in a train, a visit to your local mall, or even a drive to the local store to see that people are umbilically connected to their mobile devices.
Implications for Business
Every self-respecting business today has a website. It is by far the easiest and most cost-effective method of marketing to a global audience.
But with more people spending less time on PCs and more on mobile devices, if you don’t have a mobile website, you are at risk of being left behind.
Just look at our own Ranky statistics from the past couple of months:
When was the last time you checked how many of your visitors are using Mobile devices?
Would you ignore improving the user experience for that amount of unique visitors?
Due to the differences in screen size, download times, download costs, and information sought by mobile surfers, a mobile website, by necessity, must differ from your regular website to be effective.
And an ineffective mobile website means a loss in conversion and potentially a loss of customers in a market that is transitioning from home- or office-based to one with no borders.
Real Estate Crash, What Real Estate Crash?
Although the broader economy may have seen a slump in real estate prices over the last five years, screen real estate on mobile devices has gone through the roof.
Those 3.5 – 5 inches of screen space must be utilized to the best of your ability if you want a successful mobile website and the rewards that come with it — or bear the risk of losing your market share. To maximize the user experience, those five inches of screen real estate must be optimized, and whitespace management is vital.
In particular, focus on four things…
An Intuitive Mobile Experience
When considering your mobile page template, ease of use and an intuitive user experience must be foremost in your thoughts.
Single column layouts should become the norm, since vertical scrolling is much more natural than horizontal scrolling.
(Mashable’s Clean Mobile Website Vs. CBS Local’s Mobile Mess)
Select an appropriate font and increase font size to aid readability of small text. Make sure to leave sufficient room around calls to action, links, and other clickable areas too. (You don’t want users to have to work to click your buttons.)
(Mashable’s mobile website again; wouldn’t you click those fat & pretty social share buttons?!)
What calls to action should you consider?
Most mobile devices have telephone capabilities, so a Click-to-Call button is an interactive form of call to action.
A button for Maps and Directions allows you to tap into the power of the mobile device to literally reel in the clients. These buttons should ideally be placed on the landing page.
Call to Actions may also come in the forms of Email newsletter, user registrations and telephone invitations.
(QuickSprout’s Comfy Mobile Newsletter Subscription Box)
Further reading: Tips on designing call-to-action buttons
Mobile users require context-specific content, as opposed to desktop surfers, who are often browsing randomly. Therefore, you must prioritize content accordingly.
Simply remove all “irrelevant” categories such as careers, mission statements, and deeply technical data.
Text should be short and to the point. Advertising should either be kept to a minimum or completely disregarded, as it tends to slow loading time, take up too much bandwidth, and take up too much of the screen.
(The Mobile Huff Post Vs. Nokia. Notice how HP poured anything that’s “too-much” into the ‘MORE’ section, while Nokia left everything lying around for us to stare at… and get confused)
Your mobile website should be consistent in color and theme to your regular website. Also, provide a link to your regular website for those who want to go there.
When designing your web pages, add alt-tags for pictures to assist users who block image downloads to conserve bandwidth. In addition, pictures should not be too big.
Frames take up too much space, so don’t use them. Items like tables that have a fixed size should also be avoided.
It is best to avoid Flash and other scripting languages that aren’t compatible across all platforms. Try to make menu navigation easy and intuitive.
(USAToday’s Mobile Site offers one of the coziest experiences. Big images, less text, no irrelevant sections.)
Further reading: Design and usability trends sparked by Pinterest.
Testing, Testing, One, Two, Three
Once you have your mobile site ready to roll, be sure to test it across the most common platforms – Android, iOS, Windows Phone, and RIM Blackberry.
Once you are fully operational use mobile analytics to keep your site current and the users coming back for more.
Further reading: More mobile website resources