Thursday, March 07, 2013

Why it is important to get your website working well on mobile devices

Being a small business owner as well as a website builder (mostly technical) and owner of an entry level Smartphone and tablet PC has taught me important things about building a company website:
  • Make sure that the core functionality of your website works without having JavaScript enabled. The reasons for this are as follows:
    1. A lot of people where I live own basic Smartphones which often have JavaScript disabled by default. BlackBerry phones in particular are like this. Most of these people do not know about JavaScript or how to enable it.
    2. Limited memory capacity: I had a case when I used to own a BlackBerry phone that a website would not open because it was super heavy and the phone ran out of memory. The site had lots of scripts and other busy stuff.
    3. Device performance when scripts take up too much processing time. This gets so bad that the device responds slowly.
    4. Let the JavaScript libraries load late, that way the page starts rendering early. Scripts can usually wait a second or two. Some scripts also take a long time to initialise while the user already tries to do something that relies on them to be ready. The best is to not having to require them in the first place.
  • Allow the interface to change and re-arrange based on screen size. This also means hiding huge banners if a small screen size is detected. The min-width and max-width CSS options help.
    Example for a wrapper inside of CSS:
    @media only screen and (min-width: 650px) { }
  • This is very important and is for all devices: Compress, minimize, cache, etc.
    1. Let the browser cache images for months since they normally do not get changed once they have been created. The same applies to JavaScript libraries, CSS (once finalised) and other files, but be careful if your content changes, then that should not get cached.
    2. Minimized CSS, JavaScript and HTML is always good to keep downloading times low. The browser also has less parsing to do if there are no extra spaces. Also consider that people with entry level mobile phones are also not able to afford bandwidth and you do not want to get rid of customers due to slow download on a simple device.
    3. Get rid if any extra image data like comments, camera details and EXIF data. This information is totally useless unless you have specific image gallery sections that use this data. For interface images, you sometimes get lucky and strip off between 15% to 30% off the file size. Smaller files download faster and are likely to stay in memory longer due to more free space for extra files before being age flushed.
  • Make sure the fonts are big enough for mobile devices and the interface looks good on a low screen resolution. Many websites look good when designed on a high resolution, but when switching to a lower resolution, then the ugly parts show up. The other way around is much easier. This also means your button text should not be too long or too short. These interface limitations are very likely to cause clutter and confusion, so you have to possibly break your site into smaller components and check each one individually. These components should be able to flow below each other or do something else on smaller screen resolutions without the user having to zoom in five times, preferably no zooming at all because zooming makes people give up quickly.
  • Keep it simple: For search engines your pages should be specific, the same applies to the average user browsing your website. Too many call to actions (CTA's) will just be distracting and are overkill for low resolution interfaces. Enquiry and registration forms should remain simple since anything that looks remotely complicated will let users have second thoughts.
    I can recommend a book about web usability that I have read in regards to this: Don't Make Me Think