Mobile website optimisation best practices

In this article we look at some of the best practices of mobile optimisation. These include excluding software plug-ins uncommon to mobiles, readable text, content adjustment, and easy navigation. We also look at some design mistakes and why you should to avoid them.

Best practices

  1. Your website must avoid any software not common on mobile devices.

This includes Flash. Typically Flash doesn’t display at all on the iPhone platform so should be avoided to be consistent.

Flash has been used to show animations or videos on a webpage. Instead you can use animations shown via YouTube video, jQuery slide shows, or just animated gifs.

  1. Your website should use text that's readable without a visitor having to zoom in to read it.

Web designing your responsive website, mobile website or App, you must configure a viewport to make sure that the fonts you will use are scaled as expected across various devices.

A viewport controls the width and scaling of a web page and how it will be displayed on a mobile device. Without such as thing a mobile device will display the web page in a typical desktop manner.

Some ideal sizes and settings are listed blow.

  1. Your web page content adjusts to the screen being used so that visitors don't have to scroll along horizontally.

Again, using a view port will show you if your content adjusts well on mobile devices so that your visitors don't have to scroll along horizontally to see the entire content. Visitors hate doing this even just a little.

  1. Place your navigation links far enough apart to aid tapping by visitors who may use fingers or a stylus.

Visitors will most likely use their fingers to tap and navigate around your website. Navigation links therefore must be spaced out well enough to allow this. Visitors may use a stylus in the same way.

  1. For out-of-the-box CMS make sure you use mobile friendly versions

This is for websites that run on platforms that include; WordPress, Joomla, Drupal, Blogger, vBulletin, Tumblr, DataLife Engine, Magento, Prestashop, Bitrix and Google sites

Each of these should have a list of themes available. Make sure that you choose one that is titled “responsive” or “mobile friendly”. If one is available, move to a provider that has one.

Design mistakes to avoid

  1. Do not block any JavaScript, CSS or image files

Google has long advised SEO providers against blocking these types of file in a robots.txt file or any other robots file. This is because vital section s of a website will be stopped from working and as a result said website has a poor ranking for your mobile as well as your desktop website.

You can make sure such files are not blocked by performing the “Fetch as Google” test in Google Webmaster Tools. This tool will allow you to see exactly how Googlebot sees and renders your website and its content. It will help you identify and fix a number of indexing issues on your website.

In order to use this tool you must have a Google account and have your website added to webmaster tools.

  1. Avoid content that is unplayable on mobiles

Mobile browsers may have problem with license-restricted content or content that requires Flash or a similar player to be installed. It is best to avoid these to improve mobile user experience and use alternatives that will work.

For a video to play you can use YouTube or Vemo and source your video from these. For animations you can use videos or animated pictures. For slide shows you can use jQuery versions. Do watch loading times however.

  1. Redirects must be set up properly

Redirects point the mobile user to the mobile equivalent of your website. Badly set up redirects will point the mobile user to the wrong equivalent of the "desktop" URL. This issue will be reported in Google Webmaster Tools and warn you so you can correct it.

  1. Make sure your web pages load quickly

Speed is a crucial factor on mobile because mobile browsers can't handle the bulky pages as effortlessly as desktop browsers. It can very be frustrating if a website loads slowly.

You can test the speed of your website using Google’s own Page Speeds Insights.
You can give it your website URL and it will test the website to see how it loads in terms of speed and user experience.  

It highlights issues that must be fixed, issues you should consider fixing and tests that have been passed.

  1. Mobile-only-404s

You can fine that a web page that loads perfectly on a desktop will return a 404 on mobile device. The best practice here is to ensure the respective mobile page is not a 404 and to always redirect mobile users towards mobile equivalents of your desktop web pages.

A mobile website will lots of 404s will drive away users just like broken links and missing pages on desktop websites.

  1. Irrelevant cross links

If you are using a separate mobile site, you must check that all its internal links are working and that go to mobile optimised pages, not towards the desktop versions.

  1. Do not force users to download you app

If you have an App that you would like to advertise to your mobile users, you should market it in such a way that it does not prevent users from browsing your content. They must be allowed to download the App with being forced to.

This can cause users to have a poor experience on your website.