Mobile Website - May 2012

Mobile websites

What does your website look like on a mobile phone, iPad or tablet?

If a customer visited your website on their tablet or mobile phone, would your website be able to be seen easily and would it work?

With the number of people using their mobile phones to browse the web on the increase, now's a good time to optimise your website for mobile visitors.

What are the more popular mobile phones being used to browse the web?

What can you do to improve your website for mobile phone users?

Not everyone is using the same device to view your content.

Up till now we were designing different size pages to fit the mobile phones or tablets.

Now, we are able to design a mobile website that is clever enough to adapt to the size of the mobile screen or computer screen.

Top Ten Mobile Phones Used to browse the web.

1. Apple iPad
2. Apple iPhone
3. Apple iPod Touch
4. Samsung GT-I9100 Galaxy S II
5. Samsung GT-I9000 Galaxy S
6. Sony Ericsson LT15i Xperia Arc
7. Motorola MB525 DEFY
8. Fujitsu T-01C REGZA Phone T-01C
9. Samsung GT-S5830 Galaxy Ace
10. Samsung GT-P7510 Galaxy Tab

On top of this, the mobile browser applications themselves could vary from phone to phone.

With that in mind, it's essential to make sure you take these different devices into account and test your website on a few different popular mobile phone browsers.

Optimise the Existing Site or Create a Mobile Version?

The first consideration is: to what extent should you invest in optimising your site for mobile devices? There are two key alternatives here:

Ensuring your website's code is up-to-date with modern coding practices, free of errors, and optimised for efficiency and all of your images are optimised for the web to ensure that they load quickly and all have *'alt' tags that display text in the event that images don't load.

*'alt' tags are text that is displayed to screen readers for blind / low vision visitors

It is no longer necessary to design a version of your website specifically to be viewed on mobile device.

Mobile phone and tablet technology is improving and the mobile browsers themselves are designed to cope as well as possible with every-day websites.

However, if mobile phone users are a key user audience for your site or if you really want to maximise the experience for mobile visitors, it could be worth creating a version of your website specifically to be viewed on mobile phones and tablet devices.

Appreciate the Mobile User's Needs
A visitor to your website using their mobile phone could have quite different requirements and needs than one visiting your website on a desktop computer, although don't fall into the trap of thinking that everyone using their mobile phone to browse the web is physically out and about.
A website that recognises and adapts to visitor's needs is one that is more likely to be fully navigated and returned to and so is best placed to get the business' message across to the visitor.

These requirements typically include:
* Optimisation for screen size and resolution
* Optimisation for download speed and cost
* Intuitive navigation and straight-to-the-point-content
* Design for fingers
* Consider redesigning your forms

With the mobile internet growing very quickly these guidelines will help you create or improve your mobile user experience.

1. Reduce the amount of content
Not everything shown on a PC site can fit reasonably onto a mobile web page, where space is short and every pixel counts. It's important to reduce the amount of content shown on the mobile-optimised version.
Only include the most important content or features. Low priority content that can be removed might include content or links that are outside of the main content area, such content typically found in the right hand columns of standard web pages.
Mobile websites should be focused. This makes them easier to read and move around, as well as quicker to load on devices that can sometimes have slow Internet connection speeds.

2. A website that resizes to a single column layout for a phone or a double column format for a tablet or iPad.
Wide web pages are difficult to view on small mobile phone screens. Even on smart phones like the iPhone with their relatively large screens standard web pages load up zoomed out so that they can fit on the screen. Most text is unreadable until users zoom in to the part of the screen they want to view. Zooming in isn't ideal because it adds an extra step and zooming in and out isn't easy to do on all phones.
We design pages that use up the whole width of the screen. To add additional content, the pages expand downwards rather than across, as scrolling down are easier than scrolling across and users generally prefer it.

3. Present the navigation differently
It's difficult to fit the navigation across the top of the screen on a mobile web page. Stacking at the top would push the content too far down. A single column layout on a mobile phone screen page placing the navigation at the top would push the content too far down. Here are some tips for adding navigation to mobile website:

On the homepage place the navigation and site search at the top of the page, and leave content for later pages. This is suitable for sites on which users want to navigate or search straight away, rather than read content. For example, when users visit ecommerce sites they usually have a specific product category in mind and want to tap through it or type it into the search box.
Place the navigation at the bottom. Users can still access the navigation but it doesn't get in the way of reading the page. An anchor link at the top of the page can give quicker access.
Place the navigation in a dropdown link at the top of the page (and possibly at the bottom too).
Only offer a 'Back' button on pages other than the homepage. This keeps the page design simple at the expense of any ability to navigate directly to another section of the mobile website.

4. Minimise text entry

Entering text onto websites using mobile phones is much more difficult than when using a desktop or laptop keyboard. Physical QWERTY tend to be the easiest mobile keyboards to use, followed by touchscreen QWERTY keyboards followed traditional 12 button physical 12 alphanumeric keypads.
However, users make far more errors and are significantly slower when typing on even the best mobile keyboard than when using a full size PC keyboard. It stands to reason, then, that users don't want to have to type as much on mobile websites.
Allowing users to use stored details in their 'My Account' section when going through a mobile checkout experience e.g. picking from previously entered delivery addresses. Asking users to enter a PIN instead of a password.

5. Decide whether you need more than 1 mobile site

Screens and processing power on mobile phones vary tremendously. For example, a quick check on a leading mobile phone retailer showed phones selling with resolutions ranging from 128 x 160 pixels to up to 480 x 800. And, while many smart phones have the ability to load up full web pages less advanced phones can't cope and would crash trying to do the same.

If your mobile website is only going to be seen by smartphone users with fast download speeds then one mobile version will be ok. However, if you want a broader reach then you should consider creating a paired down version. Facebook goes as far as having 3 main mobile versions. is the main mobile site, is optimized for touchscreen mobile phones and is optimized for users in countries with very slow download speeds.

6. Design for touchscreen and non-touchscreen users
Smartphones account for the majority of mobile Internet usage in many countries, including the UK and USA. So, it's important that your mobile site should be optimized for smartphones. These have typically have large touchscreens screens but may have a more traditional trackball, joystick or directional keys. Therefore, it's important to that your design is easy for both touchscreen and non-touchscreen users.

The most common difficulty with viewing standard web pages on a smartphone is in selecting, particularly tapping, small text links accurately. Fingers tend to be too thick to hit a small link accurately, and if there are 2 or more links close together then it's easy to accidentally tap the wrong one.

Links should be avoided for any important calls to action (it's less of an issue to use them for footer links). Instead, design calls to action that take up more screen space and which can be tapped easily. For example, use thick rows than span the width of the screen or square boxes can both of which can be tapped easily.

7. Take advantage of inbuilt functionality

Many mobile phones have an advantage over PCs - they come with lots of inbuilt functionality that most PCs don't have. You can make it easier for users to perform certain tasks by utilising a mobile's inbuilt functionality and thereby remove the need for manual steps.

Make calls
All phones can, of course, make phone calls by default (PCs require additional software most users won't have purchased credit to make calls from their PC to physical phone). Allow users to automatically ring a number when they tap or click a phone number. This is useful for 'Contact us' or 'Store finder' pages.

See an address on a map
Similarly, it's possible to give the user the option to select an address and automatically open the mobile phone's map application.

Find the nearest...
Users are often away from their home when they use the Internet on their mobiles. Since many mobile phones come with inbuilt location-detection capability (e.g. GPS) you can ask a user to share their current location. High street retailers, for example, can make it easy for customers to detect their nearest stores on a map. Social networking mobile sites can make it easy for users to find people, places or events near them.
We have an example of a store locator on the COYO websites.

Input information in innovative ways
There are innovative ways to allow users to input information that are both fun and useful. QR codes are an example of this.
The number of people accessing websites of their mobile phones is increasingly rapidly. They can be given a much better user experience by following these guidelines:

Reduce the amount of content
Single / double column layouts work best
Present that navigation differently
Minimise text entry
Decide whether you need more than 1 mobile site
Design for touchscreen and non-touchscreen users
Take advantage of inbuilt functionality

End-to-end customer experience

Join up your customer touch phone to deliver the best possible digital experience that is proven to deliver outstanding business results

Customer loyalty & retention

Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

User experience of digital touch phones

Make sure all your customer touch phones consistently deliver the very best in user experience, design and usability.
Online sales & conversion optimisation

Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.
Digital strategy

Get ahead of the competition with a customer-centred digital strategy designed to deliver long-term business success.
Application & product design

Deliver the best experience for your customers with intelligent digital applications tailored to your business goals and customer needs.

Mobile & tablet strategy

Improve your mobile & tablet propositions with innovative, cutting-edge interface designs that work for you and your customers.

Credits to

Frequent Questions Web design homepage Get in touch

Disclaimer based on the Sunshine Coast has prepared the supplied information as a voluntary service to the online community. The information is necessarily website design and small business in nature and is not intended to be relied upon other than as general background material. This should not be used as specific advice, recommendations or guidance, and specialist assistance should be sought by anyone in need of such help. accepts no liability under any circumstances for any loss, expense, damages or costs whether direct or indirect (including loss of profits / damage to business) which may be incurred by any person as a result of relying on or using in whole or in part any of the supplied information.

12website may source content from a number of sources and review this before inclusion in our newsletter. Credits to the University of the Sunshine Coast.