• Back to Articles
• Comments
• Share on Twitter
• Share on LinkedIn
• Email to a friend
• Subscribe to RSS
• July 5, 2010

Optimise your Website for iPhones and Mobile Devices

The popularity of mobile internet devices, such as the iPhone and iPad, has increased dramatically over the past few years. Is your site ready to tap into this rapidly expanding user segment?

Do you need to optimise your website for mobile devices?

If your website contains purely promotional content, (classified as a 'brochure website') with only a few paragraphs of content per page, then building a mobile phone optimised website is probably unnecessary. However, if your website has a lot of textual content spread over many pages and categories (like a news website), then you would see far greater benefits. You will also need to consider the goals for your site. For example, if it is mainly used to gather sales leads via the use of a contact form, then a mobile website can offer a shorter, optimised path specifically for mobile phone users.

Benefits of having a website optimised for mobile phones

If you are still unsure as to the worth of providing mobile-optimised content for your users, there are a number of clear benefits no matter what kind of site or content you are providing.

• The greatest and most obvious advantage is that users on mobile devices will have a much more positive experience on your site. This is very important, as abandonment rates when viewing websites from mobile devices is far higher than regular desktop users. It becomes an even bigger problem because of the reduced bandwidth of the mobile network, and the much slower rendering on the mobile devices themselves. By offering a smaller, faster website, you can greatly focus the user's attention, and ensure they get to your site faster and with less fuss. This in turn will lead to a positive user experience which your users will associate with your website and your brand, and will keep them coming back in future.
  
• There are, however, some less obvious but just as advantageous benefits. With a correctly built mobile website, Google and other search engines are smart enough to detect that it's a mobile version of your main site, and will ensure that your site receives higher ranking on the mobile versions of their search engines. And fear not, they won't penalise you for having duplicates on your main website.
• A mobile site can also be a great reusable asset if you wish to pursue further mobile-based marketing strategies in the future, such as mobile-based competitions.

Not just for phones

All this talk of mobile-optimised content does not only apply to mobile phones; it applies to any class of mobile device, which includes things like the iPod Touch (which has the same full-featured web browser as the iPhone), the newly released iPad, and rumoured future tablet devices under the Google Android umbrella. If the American reception of the iPad is anything to go by, the Australian release is big news for content providers. Any work done on a mobile site now will leave you and your site well ahead of the pack when it comes to optimisations for these new tablet-style devices. You can be sure that other manufacturers will be releasing similar devices in the very near future as well.

Optimising your website - Getting Started

Once you've decided a mobile-optimised site is for you, the planning and strategy process can begin. There are three main approaches you can take to optimise your site for mobile users.

1. Minor design changes to existing site which will apply to all users, such as narrowing content columns, enlarging clickable areas (to accommodate touch-input) and removing reliance on mouse-activated hover actions.
2. Style changes targeted only at mobile users, such as hiding unnecessary elements, changing font style, narrowing content areas and dynamically resizing images. All content and existing templates remain the same.
3. Build a complete mobile-optimised sister site to compliment your main site, resulting in small file size and faster download, and reorganisation of page content. This option provides the overall best mobile experience.

Before proceeding with any of these changes, a full design process should be carried out.

While not as important, you can also start optimising your website content for mobile devices. Mobile users are generally going to be a time-and-resource-limited version of your regular website user. They will have an even shorter attention span due to the usage conditions of these devices, so it helps to make your content more concise than usual. Keeping small to medium pieces of content contiguous over one page, rather than paginating it, will also help retain visitors for longer sessions.

m.brightlabs.com.au : A Case Study

We recently launched the mobile version of our very own Brightlabs website, using the third strategy outlined above (building a complete mobile-optimised website).

On our regular website homepage there is a bit going on; with three separate content columns and a large flash banner spanning the width of the page. This is what it used to look like on an iPhone:

As you can see, it’s going to be fairly difficult for a mobile user to use the site in its current form. They would have to zoom in and pan around each of the content areas just to read it. Not ideal.

Viola! Here is the mobile optimised version

We went back to the drawing board for the mobile version, and came up with an entirely new design. While it does share some design elements with the desktop version, they layout has totally changed. It now has:

• A single column
  
• Separate navigation after the main content
• Basic contact details at the bottom.

Stay Tuned

If your target audience and website content suit, a well designed mobile website can really help your users and will give your site greater exposure as more users browse on their mobile devices. Even if you think your users or content don't fit the mould exactly, having a mobile-optimised website can really help those who do, which can only mean a higher chance of success for your site.

Stay tuned for a follow-up article, in which I'll discuss some of the technical aspects of designing and building a mobile website.