Mobile Detection & Optimization

As a kind of follow on from a recent article of mine re Optimising your Website for iPhone viewing, I’d like to expand on a few points and talk about general optimisation for Mobile phones and how to detect which Browser or User Agent your site visitors might be using.

I’ve recently added some detection code to my main (Non WordPress) site that basically looks to see which user agent or mobile phone platform my visitors are using and if it’s a non-iPhone phone then they get redirected to my other site ReverbStudios.Mobi, a site I built specifically to render fast and well on most mobile browsers. If they are not on a phone and at a normal PC or Mac then they just get to see the main site

Mobile Phone

As far as building an optimised site for mobiles is concerned, here’s my best advice:

  • Have very few, if any, Images and Scripts,
  • Make any images you really do need to use smaller than 200px wide max,
  • Specify the dimensions of all images used,
  • Only include basic content such as an outline of services and contact details,
  • Use “Callto:” links on any phone numbers you include so people can click the number to initiate a call,
  • Add links to your main site or social networking precences for users with smartphones.

I use theĀ  WP-Touch plugin for my WordPress blog to allow Smartphone users to choose either a normal view of the site or a simplified version. The plugin handles detection and design.

Here’s the code I’ve used on my main, static site to detect people’s browsers, it’s courtesy of Richard Shepherd but with a few changes with help from Justin Knecht.

Mobile Detection.txt