Making your website mobile

Articles

Have you visited your own website using a mobile phone? Were you happy with what you saw? If your site was not designed for mobile users then my guess is your experience was less than wonderful.

So what can you do to improve matters? Let’s start by looking at what the most common problems are, then discuss possible answers.

Why your website doesn’t work on a mobile

  1. It’s too wide. Many websites are designed to be viewed on modern monitors with a width of 1000 pixels or more. Typical modern phone screens are only 200-300 pixels wide, so users will only see a fraction of the page. Some mobile browsers have a zoom feature which allows more of a page to be seen, but at the expense of making text unreadable.
  2. It’s too heavy. It’s not unusual for a web page to contain as much as a megabyte of data, largely made up of images that are purely decorative. When it takes a minute or more to load a page, it’s very frustrating for the user, especially if all they are looking for is a simple item such as a phone number or a link to another page, something that could be returned in seconds even on a slow connection.
  3. It’s too clever. If your page requires Flash or Javascript to work properly, many mobile visitors won’t be able to use it.

Tip: use the mobile readiness tester at ready.mobi to test your site and diagnose any problems.

Solution 1: use a proxy

One simple way to give users a mobile version of your site is to use a mobile proxy service. Such services, also known as “transcoders” try to reduce the size and weight of web pages by removing unnecessary stuff, but they don’t always produce great results. Try Google Mobile, Skweezer or Mowser on your site, and view the same results on as many different phones as possible.

If any of these produces a satisfactory result, then all you need to do now is guide mobile users to it. A simple link at the top of each page, such as Mobile Users Click Here will do the job. Each link should point to the corresponding page of the proxied site.

Solution 2: use a mobile theme

If your site uses CMS software such as Drupal or WordPress, you can take advantage of its built-in ability to display content in different ways. This is usually called “theming” or “templating” the site. So, alongside the regular theme you’ll need to install a second one for mobile use. Such a theme will typically have a very simple, stripped-down layout, with less important elements displayed further down the page. You can either use an off-the-shelf mobile theme or have one created for you. Mobile themes often cost less to develop than desktop ones because of their simplicity.

Once you have a mobile theme installed, you’ll need some way to display it to visitors. There are two basic ways to achieve this:

  1. Using a switcher. This is software that detects whether a visitor is using a mobile device, and if they are, shows them the mobile version of the site.
  2. Using an alternate URL. If your site is at mysite.com you could arrange things so that the mobile version might be at mysite.mobi or m.mysite.com or mysite.com/mobile. In any case you’ll need some software which ensures the mobile version of your site is displayed at the alternate URL. As with using a proxy, you’ll need to include a link on each page so that users can locate the alternative version of it if needed.

These two options are not exclusive, and indeed can be combined: you can use a switcher to automatically redirect from the desktop to the mobile version of a site at an alternate URL.

(The exact means of achieving these will depend on the software your site uses. I shall attempt to cover some particular cases involving WordPress and Drupal in future postings but in the meantime feel free to use the comment facility here to ask questions.)

A switcher will generally provide a better experience for most visitors (since they don’t have to do anything to access the mobile version) but may not correctly identify all mobile devices. It also adds some overhead to the processing cost of the page, so many busy sites only have one on the home page.

The Likemind site uses a switcher, but there is also a link in the footer so users can override it if they want.

Solution 3: create a custom mobile site

If you want to give mobile users a site that is specifically aimed at them, rather than simply a stripped-down version of your desktop site, you might consider having a custom mobile site built. Take a look at Ebay’s mobile home page for an example, which consists of little more than the most commonly used tool, the auction search form.

Anyone whose site provides an information service, especially if it is location-sensitive, should consider providing a mobile version. Development costs will of course vary greatly depending on the exact nature of the site.

As with a mobile theme the other version of the site can be made accessible using either a switcher, an alternate URL, or preferably both.

Solution 4: a mobile “app”

If your site provides a service to a lot of users then you might also think about getting a mobile phone app developed. The advantage of an app over a mobile site is that it can be designed for different types of interaction, such as via the tilt sensor built into the iPhone. The disadvantage is that any such app will only run on a limited range of mobile devices. Development costs can be high, too.

Summary

In most cases a mobile theme will be the most quick and cost-effective way to make your site accessible to mobile users. Call us for help with the creation of such a theme, its installation and all the fiddly technical stuff needed to get it working.

Figure W have built WordPress and Drupal sites that are mobile-friendly. To help get your site ready for mobile use, call us today on 07783 386951.

Share this post:
  • Digg
  • Technorati
  • del.icio.us
  • StumbleUpon
  • Facebook
  • Sphinn
  • TwitThis

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>