Adapting your site for mobiles

There are a few modifications that I generally do to a site to make it more compatible with mobile devices. I do this using the CSS 'handheld' media type.

Most mobile browsers now recognise the 'handheld' CSS media type, and the media type should be ignored by normal desktop browsers. It does mean that the mobile will still download the complete page though, and not a special 'optimised' version of the page.

The things I do for my 'mobile versions' of sites are:

• Remove (make invisible) any unnecessary content (sidebars, most adverts and decorative images).
• Following on from that, make the content one column - mobile devices aren't wide enough for multi-column layouts.
• Restyle the navigation bar, it's probably horizontal at the moment and we want to make it vertical to fit better on the device.
• Remove any fixed width definitions from the main body. Mobile browsers sometimes do this resizing though.
• Move desktop-only styles to a 'screen' media type CSS.

As an example, I'll use Darla Mack's homepage.

Making things disappear

For simplicity, add class="hideonmobile" to the elements of the page that you want to hide. You can then use the following small piece of CSS:

@handheld
{
.hideonmobile
{
visibility: hidden;
}
}

A lot of your page may already have enough identifiers though, so you can also add those identifiers to the CSS you use, rather than adding the extra class all over your pages:

@handheld
{
#chromemenu div, /* This is the Google search box */
.hideonmobile
{
visibility: hidden;
}
}

Transform the navigation

You should have already seen the recommendations by W3C and several other web design sites that navigation should go in a list, and certainly not a table. If you've done this, you can modify the layout of the list using the '!important' rule.

#chromemenu li {
list-style: none !important;
margin: 0px !important;
}

You should also move the standard version of the navigation CSS into another CSS file and link it to the 'screen' media type. This will reduce the risk of confusion between which style should be used.

The same method can be applied to the widths of the content. What you want to do is either move the width definitions for the standard version into the 'screen' CSS or add an !important rule to the mobile CSS to change it to 100%.

Attach the new CSS to the page

Because of the use of @handheld we can attach this CSS to the page the same way you would any other CSS, but it is advisable to also specify the media type in the XHTML anyway, which will save the device/desktop from attempting to download the other's CSS:

<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

You might also want to use this same stylesheet for when people print your pages, in which case you can also attach it to the 'print' media type:

<link rel="stylesheet" type="text/css" media="handheld, print" href="handheld.css">

Need more information?

This is a brief overview of the process. If you need more information or have any questions, feel free to ask in the comments and I'll endeavour to update this page with more information.