Our Latest News

Tuesday, 8 May 2012

Top 10 Tips to optimise your website for mobile devices.

#1: Simplicity is the key

The major rule of thumb you must consider when optimising a website for mobile devices is to keep file sizes as low as possible. Nobody likes waiting around for anything and this includes a website loading up on a mobile. Identify the main pieces of information your visitors will probably be searching for.


#2 Mobile searches usually contain fewer Keywords/Phrases

There is a lot of information on the web that claims that searches made on a mobile device tend to use less keywords than that of a individual on a desktop computer. Keypads on mobile devices are getting better but they can still be awkward to use when typing out long pieces of text, this is a key factor why the majority of search queries tend to be shorter. Aim to rank well in shorter search queries and watch your website traffic increase.


#3 Avoid Flash and Java

Unless you are considering optimising your website for each mobile phone, we would suggest you stay away from flash and java. The obvious reason for avoiding Flash is that Apple products do not support Flash and if you are using Air or Flash Lite remember to check the file size. Leading away from Apple and their 40% market share in the UK there is still a large percentage of mobile devices that do not support Java, and even if they do, using Java can be a huge drag on load time.


#4 Comply with Mobile Standards

Search engines like Google will love that you are promoting your website by optimising it for Mobile but what will mark you down is if your mobile website is not following mobile standards. Of course you want your mobile website indexed by search engines but by not following the mobile guidelines your mobile site may be transcoded by the search engine and the results are not always that aesthetically pleasing.


#5 Make full use of Meta tags

Remember that your potential visitors will be may be searching for your website rather than coming to your site directly. Make full use of the Meta tags to give your mobile website and chance in climbing up the search engine rankings. Unique content is a major plus for search engines so think carefully about what content you are going to use in your mobile website.


#6 Promote Your Mobile-Friendly Site

Once your mobile website is ready to go live remember to promote it everywhere, submit your mobile website to any and all search engines, mobile portals and directories. Even though Google processes around 97% of all mobile searches in the UK, there are still around 250,000 people that choose to search for a website on their mobile elsewhere. This may seem like a small percentage but is it really worth forgetting about ¼ of a million people in the UK alone? QR codes are also a great idea of gaining more access to your mobile website.


#7: Use Mobile Redirects

Your website is optimised for mobile great but have you used mobile redirects to tell the mobile browser which webpage to load. Forgetting to do this simple step is like wasting all the time you have spent on designing and developing your mobile website. Do yourself and your visitors a favour and put a mobile redirect in your site. There are many ways to do this and you can even send different phones to different pages. The example below uses JavaScript and links iPhones and iPods to http://your-website-goes-here/iphone.html:


<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {   location.replace("http://your-website-goes-here/iphone.html");
}
-->
</script>


#8: Use Your Branding and Corporate Identity

Even though your mobile site is a slimmed down version of your standard website you still want to combine the same branding elements. This is vital because users will know they have got the right website even before reading the content and also enables you to build on your branding identity.
Using the same colour palette and branding imagery between your mobile site and your standard site will result in users that are familiar with your standard site and your mobile site and therefore create an increased user-friendly experience.


#9: Utilize White Space

Current web design trends of 2012 seem to be based around a clean looking website with lots of website space. Remember as mentioned earlier simplicity is the key. Only write content that is absolutely crucial for mobile users. That little bit of text you have put into your standard site to fill up some space is not needed on your mobile version. Try to keep the number of pages as minimal as possible and remember websites load slower on a mobile than they do on a desktop computer or laptop, think about your visitors data allowances and make the page file sizes as low as possible.


#10 Test Your Site on Mobile Devices

This may seem like a silly tip but please test your website on mobile devices. Having errors on your mobile website is unacceptable and can influence people to leave your site and may even damage your standard website hits. We understand that like most people you will not have a bundle of every phone that can connect to the internet so instead try your mobile site out on emulators such as Adobe BrowserLab.

You may also be interest to know what the top 10 most used mobile phones in the UK (according to USwitch) are, if so click here



That’s it for our Top 10 Tips to optimise your website for mobile devices. Your comments are greatly appreciated and always welcome, tell us what you thought of this post and if these tips helped you in your pursuit of optimising your website for mobile devices.

If you need any help optimising your website for mobile devices get in touch with us at Media City Way, we are only a phone call or email away.


4 comments:

  1. Is there anyway to direct all mobile traffic to a specific page, rather than typing navigator.user ipod, blackberry etc.

    Any help would be great.

    Thanks Dave

    ReplyDelete
  2. Hi Dave,

    Try the following code. Place it in between the head tags on the pages you want to redirect to the mobile website.

    <script type="text/javascript">

      var mobile =(/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

      if (mobile) {

        window.location = "mobile/";

      } else {

        window.location = "pc";

      }

    </script>


    In this example if the page is accessed by a mobile the browser will redirect to the mobile directory, if the page is accessed on a desktop computer or laptop the page will be redirected to the pc directory.

    You can change the directory to anything you like, or choose to remain on the page rather than redirecting, if needed you could redirect the mobile or PC users to a different domain name all together.

    All the best

    ReplyDelete
  3. WOW thanks for the quick response, I have just put your code into my homepage and it redirected my blackberry bold as it should of done. If I want to redirect to a different website in the future would you just change the directory name with the domain name?

    Thank you so much for your help.

    ReplyDelete
  4. If you would like to redirect mobiles to another domain name in the example above then I would replace:

    window.location = "mobile/";
    With
    document.location = "http://www.YOURMOBILESITEURLHERE.com";

    Glad to be of some help to you, keep up the good work.

    ReplyDelete

S c r o l l h e r e