Mobile Site Usability – 16 Mistakes to Avoid

Mobile Moxie on the Road, Part 3
Presented in Sydney, Australia; April 2011

16 Mistakes to Avoid When Developing a Mobile Website

So, you’re thinking of creating a mobile website. Good idea! Before you get started, learn these 16 mistakes to avoid and you will save yourself from a lot of wasted time and effort.

1. Do not use a different Domain! This is important. The .mobi (dotMobi) is dead; at least in the US. Keep whatever domain you currently use for your website – whether it’s .com, .org, or something else. Utilize a subdomain for your mobile optimized content. Many sites use mobile or simply ‘m’ as their mobile content subdomain. For example, ‘m.yoursitehere.com.’ You can also serve mobile content from a subdirectory if you prefer; ‘yoursitehere.com/m.’

2. Avoid changing the major elements of your website. Do your best to maintain the primary navigation structure, colors and imagery that are used on your conventional website. People who wish to visit your site from their mobile phones are likely current visitors or customers who are familiar with the conventional site’s content. Keep the look and feel consistent, and make sure to make your most visited content readily available on your mobile site. If there are major sections of your site that you cannot convert to a mobile environment, acknowledge it upfront. Your visitors will not appreciate the wasted time and frustration of searching all around for content that doesn’t exist.

3. Leave out content that will diminish the user experience. Heavy code slows the page load, so leave out heavily coded aspects of your website for the mobile version. Also note that JavaScript and AJAX may not work on all mobile browsers, so leave them out if you can. There is little chance that Flash will work – it will only frustrate your visitors. And, by all means, do not serve pop-up ads on pages optimized for mobile phones. They will crash some visitors’ browsers.

4. It isn’t necessary to cram everything onto one page. Taking all of the content from a page and squeezing it into a long, skinny bar will not make for an enjoyable user experience. Pick the best and most used parts of your content and only display those on your mobile pages. Packing everything into one page can also slow down your load times. Try for a single column mobile strategy and never try to cram things into more than two columns. Sideways scrolling is no fun on a mobile device.

5. Don’t leave out the site search function. Put it front and center, right at the top of the page. If any of your site elements aren’t working properly, especially the navigation, this will be a life saver for your visitors. Site search is generally even faster than drop down navigation for some mobile phone users.

6. Test for and remove broken images. In some cases mobile users will turn off images to save on data charges and in other cases carriers or browsers will block some images by file size or file type. Also, with the many different mobile browsers it is difficult to test your image compatibility with every single phone. They could be stacked, re-sized, or not loaded at all.  Avoid creating a mobile site full of broken images. Don’t put text that is necessary for understanding how to use and navigate the site into an image. If they are broken, your visitors will be left in the dark.

7. Avoid confusing your call to action. Mobile users are likely in a hurry or in the middle of doing something. Give them clear instructions and clear calls to action. You have only 17 seconds to convert the average mobile phone user who visits your site. Use under 137 characters in your main message and keep the most important conversion events at the top of the page – less than 4 scrolls down. As a backup, provide alternate conversion solutions such as, ‘complete transaction over the phone,’ ‘we will send you a text message to complete this transaction,’ or ‘we will send you an email to complete this transaction.’

8. Watch out for broken forms. Forms are generally built in JavaScript, and, as covered earlier, JavaScript often sometimes causes problems in mobile browsers. Test forms in several browsers and on several phones. Be very clear in your instructions on forms and provide confirmation messages when a form is properly submitted. Make sure to track all errors and correct them quickly, and if the error is visible to the user, suggest a solution like, ‘come back later,’ or, ‘we have saved your transaction for later.’ If you have long sign up forms that can’t be cut down, encourage that account creation be completed on the web, but ensure that signing in will work on mobile devices.

9. Don’t forget about mobile friendly features. These features are what make the mobile web so cool! Link all phone numbers to make it easier for visitors to call you in just a click. Include store finders, links to maps and directions that interact with phone features and apps and include mobile coupons and incentives whenever possible. Include your hours of operation – a person on the go wants to be sure you’re open.

10. Online and mobile synergy must be considered. Do not forget to use user agent detection for both mobile to traditional formatting and traditional to mobile formatting. This is not a tip for just the home page – do it for all pages of your site! Make sure to include a link in the upper left hand corner of your site with text that says ‘mobile.’ Promote your mobile site on your desktop site with screen shots and feature lists.

11. Do not leave offline mobile synergy out of your strategy. Promote your mobile content in traditional media, including TV, radio and in-store advertising. Use an SMS campaign to promote your mobile site and include links to the site in all your offline messaging. Use image recognition bar scanners to drive visitors to your mobile site.

12. Avoid trusting a mobile platform with your SEO. Search Engine Optimization is important, and most automated mobilization platforms do a bad job of it. Remember that most web endeavors start with a search; don’t leave your visibility up to a platform that likely uses dynamic or temporary file names, omits meta data, uses a different domain, creates bad internal links, etc.  If you do decide to move forward with an automated mobilization platform, request things like permanent filenames and customizable meta data.

13. Don’t ignore local-mobile search. Submit your site and your business to local search engines. Include your address and phone number, pictures, reviews and star rankings, and directions. Submit your site to local search Apps in the App Store. Including your GPS coordinates in an hCard microformat can also be helpful for location based search.

14. Do not forget to integrate with social media. ‘Social’ is what people do on their phones! Include promotions and links to your mobile website from your Facebook page and status updates. Link to mobile versions of your pages on Twitter and Tweet promotion codes and SMS contests. If you have apps, put QR codes on your Facebook page to the app download page.

15. Do not forget to integrate mobile strategy with email strategy. This is not as hard as it sounds. Collect phone numbers and email addresses as part of your acquisition strategy. And don’t worry, you don’t have to abandon HTML emails – you can optimize them to render nicely on mobile phones using fluid design and a single column strategy. You will be reaching your most loyal customers wherever they happen to be!

16. Your apps won’t market themselves! So don’t assume they will. App marketplaces are search engines, so optimize for them. Your app can also rank directly in Google. Learn more about promoting your apps through SEO in this post on Mobile App Store SEO.