This post will look at what you can do to optimize your website for mobile visitors, mobile visitors are users who are accessing your website via a mobile device such as a tablet (iPad) or a mobile phone (iPhone). The number of users accessing the web via a mobile device has dramatically increased in recent years mainly due to the improvements in technology that make it possible to do nearly everything you do on a desktop on a mobile device.

Mobile phone web access has grown dramatically in recent years, rising from 0.2% of all UK web traffic in 2009 to 15% in 2011 Source

With this rise in mobile visitors set to continue it is more important then ever to ensure you are catering to the mobile market, in this post we will look at what you can do to make mobile visitors enjoy the experience they get while on your website.

Do nothing

The first mobile visitor strategy we will look at is doing nothing, this may sound a strange way to to approach the problem however in some cases it may be the best option, the creators of mobile devices such as Apple with their iPad and iPhone know that the web is full of content that has not been optimized for the smaller screens and have built into their devices the capability to render full size websites and automatically adjust some features to make them more mobile friendly, an example of this on the iPhone is the auto linking of phone numbers – the iPhone will automatically link any numbers so when a user clicks on them they will automatically call the number.

This means that most websites will be usable on mobile devices already the important thing here is to try it out and see how the devices deal with your website, some can work well especially on the tablet devices and may not need any further input but others do not transfer well onto the mobile platform – those that rely on hover over effects that can’t be duplicated on touch screens for example or content that is created using flash (see below)

 Remove Flash content

The majority of mobile devices do not support flash this means that a website using it will not display correctly when being viewed on a mobile device, if the content being deployed via flash is not vital to the websites structure or the rest of the page content it may not be a problem however many sites deploy flash to power features such as their navigation with the end result being mobile visitors can’t browse past the home page of your website. The solution? to remove flash content from your website or provide alternatives for devices that do not support flash content,  if you are unsure on how to do this contact your website developer for more information. Modern websites make use of JavaScript to achieve the same effects that older website deploy flash to achieve and with the rising popularity of JQuery a JavaScript framework there are large numbers of freely available plugins to achieve the effects without needing to know how to program in JavaScript.

Responsive website design

The biggest limitation of mobile devices is the small screen size, this means that websites need to make the most of the screen real estate that is on offer, the best way of doing this is to upgrade your website so that is is responsive simply put what this will do is let your website adjust its layout automatically to the different screen sizes your visitors are using to view the website. To learn more about responsive website design check out this blog post.

Other options

To create a truly mobile device optimized experience there is other options that may need your needs better however they will both require creating a separate version of your website which may not be the most efficient method as it will require separate updates.

Native App

This option will involve creating a native application for all of the device operating systems you wish to target, the native app will then be distributed via the devices authorized software store – for example the Apple App Store. Creating a native application will give you access to the devices features such as the camera and GPS that the other options will not, the downside being for each device platform you wish to target you will need to produce a separate native app. For example if you wanted to target Apple, Blackberry, Windows and Android  you would need to create 4 different native apps.

Web App

An alternative to creating native apps for each mobile platform is to create a single web app, this would mean that apart from only needing to create a single app in the start when you update the content of your app you will only have one app to update. A web app is essentially a website that uses a JavaScript frame work such as JQuery Mobile to give the appearance it is running as a native app. What this means is users can add the app to their home screens and unlike websites the app can run in full screen making it look just like a native app. To learn more about web apps check out this blog post.

What to do next?

The next step is to review your site looking at it on the mobile platforms you wish to target and decide on which route to take, if your website works well and does not contain flash content you may not need to do anything but if you want the best performance and access to the GPS and camera you will need to go down the native app route. The majority of websites that need to do something will end up creating a responsive website as this is the most effective option from both an end users view point as it scales to fit different screen sizes but also for the owner of the website as it will be cheaper to implement then the other options but also because there will only be a single ‘system’ to update.

If you are still unsure what to do or would like to get some help with your specific project please feel free to contact me or leave a comment below

Blog post by Alex Wells
Working as a Website developer I love nothing more then working waist deep in code, I have specific interests in PHP and WordPress development but mostly working with local businesses to provide them with a website that meets their needs. Contact me if you have a project in mind and would like to get an input from an experienced website developer.

In this post we will look at adding an icon to your website for use on the iPhone / iPad, these icons will be shown when users add a link to your website to their devices home page and makes the short cut look more like an app which means it fits in nicely with the rest of the apps the user has on the device.

The first thing you will need to do is create the icon, this needs to be 57px by 57px and 72dpi make sure you save the image as a png the image below is the iPhone icon for this website, feel free to save it and design your icon over the top of it:

One thing to note is the icon will have its shine and rounded corners added automatically by the iPhone so you dont need to add these when creating the icon.

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later). Apple

next you need to upload the icon to your website and insert the following code into the head of the site

[code type=html][/code]

The link can be relative if required,

and thats it you now have an icon that will be added to the home page of iOS devices

if you need help with adding the code or creating the icons for your website please feel free to get in touch

Blog post by Alex Wells
Working as a Website developer I love nothing more then working waist deep in code, I have specific interests in PHP and WordPress development but mostly working with local businesses to provide them with a website that meets their needs. Contact me if you have a project in mind and would like to get an input from an experienced website developer.