10 best practices for your mobile website

Examples of Mobile Awesomeness

How to bring awesomeness to your mobile presence

Target audience: Small, mid-size and large businesses, social enterprises, mobile developers, social marketers, educators — and anyone with a mobile website.

Yesterday we discussed some of the choices you have when it comes to creating your mobile website.

Regardless of the solution you choose, there are some best practices that should be applied to all mobile websites.

Here are 10 important tips to get your mobile site off to a roaring start.

Keep it simple and prioritize content

1In general, keeping your site simple means eliminating most images; simplifying navigation, layout, and design elements; eliminating Flash and other proprietary software; keeping your site free of clutter; and breaking up text and other content.

Space is in high demand on a mobile site and site visitors are on the go, so you need to anticipate what content users will most likely want to access. Choose the three most important content items and make those items easy for users to find and act upon.

Recall that users are not browsing your mobile site — so make it easy for them to do the things they most likely want to do, like find store locations, buy or review products, review menu items, place calls to your business, or request additional information.

Take advantage of mobile features

2Like the click-to-call button, there are features specific to mobile devices that can be used to improve your site’s user experience. The most useful of these features is location, both yours and the customer’s. By accessing user location information, you can offer a more personable experience.

Think ‘tap-able,’ not ‘clickable’

3Design your site’s buttons, navigation items, and links for touch screens, not for a mouse. This will improve the user experience and prevent accidental navigation away from your site. Do not use hover-over features on your mobile site. A thumb cannot “hover” over an item on a mobile site.

Minimize scrolling and use vertical navigation

4Mobile users prefer to scroll from top to bottom, so design your site so that left to right scrolling is eliminated. You should keep the need for scrolling — even top to bottom scrolling — to a minimum.

Pay special attention to the navigation on your mobile website. Keep in mind the “tap-able” issues discussed above, as well as scrolling and readability issues. Your navigation menu should not scroll left or right. If your menu items are too long to fit horizontally, create a vertical navigation structure.

Formatting content: Be concise

5Content is still king, even on the mobile Web, and there are plenty of ways to keep your valuable content available to your visitors while still maintaining a simple, readable, error-free mobile site:

• Make headers prominent and concise.
• Text should be readable at arm’s length, and broken up with “read more” links or collapsible navigation.
• Use bulleted lists when formatting your text, and avoid the use of images wherever possible.
• Avoid placing too many links within the body of your text, especially if the links are close together.

Focus on simple usability

6Your mobile website design should focus on simplicity and usability. Designing for a smaller screen can be challenging and requires eliminating many elements we take for granted on desktop sites. The following best practices can help:

• Do not clutter your site with paid ads or unnecessary elements.
• Use CSS to organize content on your mobile site. Do not use HTML tables.
• Use plenty of white space on your site, and use lighter-colored backgrounds.
• Single column layouts are the best choice for mobile websites.

Page size matters

7Page load time — how fast a page renders in a mobile browser — plays a major role in how well a site places in mobile search engines, and can also determine if someone stays on your site or not. A website designed for desktop browsers can take up to 40 seconds to load on a mobile device, a far cry from an optimized mobile site that should take around four seconds.

Images tend to take a long time to load. Mobile users are content motivated — they are not necessarily “browsing” or “admiring” your mobile site, rather, they are there for a purpose. A few images are fine, but excessive use will degrade your site’s efficiency. Use an image cruncher like crunch4Free to cut back on image size.

Just as for images, including video on your mobile site can affect load times and usability. Rather than streaming the video yourself or relying on other proprietary software, consider using YouTube to place video on your mobile site. HTML5 has a video tag that renders video efficiently, too.

URL structure

8You have a few choices for what type of URL to use for your mobile site. You could purchase a domain name using the “dotmobi” or “.mobi” extension so your site would have a URL like “yoursitename.mobi.” Or, you could point a sub-domain name like “m.yoursitename.com” or “mobile.yoursitename.com” to your mobile website. It is becoming standard to find a website’s mobile version at a URL like m.example.com.

Redirecting visitors to your mobile site: Let them choose

9When someone accesses your website using a mobile device, there are ways you can make sure the mobile version of your site is what they see. One way is to redirect them to the mobile version of your website using scripts. Regardless of how you redirect visitors to your mobile site, it is always best to allow them the option of viewing the standard version of the site if they choose.

Test your mobile site

10Mobile browsers are not as forgiving as desktop browsers when it comes to errors. The best place to test your mobile website for errors is the W3C mobileOK Checker. This tool not only checks your site for errors, but checks page sizes, load times, image sizes, and many other factors that can keep your mobile site from displaying properly in mobile browsers.

Taking your mobile site to the next level

So, what can you do on your mobile website?

Granted, the guidelines above are pretty strict, and many of them have older mobile devices in mind. However, you should still attempt to adhere as closely as possible to the suggestions here when developing your mobile website. The mobile audience has a shorter attention span than ever, so every second counts!

There is still a lot you can do to create a beautiful mobile website while adhering to best practices. Check out the sites on Mobile Awesomeness for inspiration. Note: Not every mobile site featured on Mobile Awesomeness adheres to the best practices discussed in this post.

This article is paraphrased from the book The Bootstrapper’s Guide to the Mobile Web, by Deltina Hay, and is a shortened version of a post from Mobile Web Slinger.Deltina Hay, a partner in Socialmedia.biz, is an author and educator who develops online curricula on social media and other Internet marketing topics. She also helps businesses prepare their content for semantic search and big data analysis. Contact her, follow her on Twitter and Google Plus, or leave a comment below.