Adapting your site for mobiles

If you've got a popular site, you probably want your site to look good (or at least not too bad) on mobiles. You can do this without a total duplicate of your site, using CSS.

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.

Comments

Wednesday 20 June 2007 02:54 | user icon Darla
Wednesday 20 June 2007 10:34 | user icon Duncan Sample
Wednesday 20 June 2007 12:34 | user icon Chanse arrington
Saturday 23 June 2007 12:41 | user icon Brian

If you don't have a Google+ account you can comment using the normal comment form below







About the author

Portrait of the author

On weekdays I'm a Technical Lead at Comparethemarket.com, having previously been a Solution Architect at Nokia & Nokia Siemens Networks, creating creative software solutions for mobile operators around the world.

In my spare time I'm an avid new technology fan, and constantly strive to find innovative uses for the new gadgets I manage to get my hands on. Most recently I've been investigating Mobile Codes, RFID and Home automation (mainly Z-Wave). With a keen eye for usability I'm attempting to create some cost-effective, DIY technology solutions which would rival even high-end retail products. The software I develop is usually released as Open Source.

I have a Finnish geek partner, so have begun the difficult task of learning Finnish.


Google+
Add me to your circles on Google+

The blog
Calendar
September 2021
MTWTFSS
30310102030405
06070809101112
13141516171819
20212223242526
27282930010203
Mobile

Zap the link below with your qrcode enabled mobile to send this page to it
Mobile Code for this page
What's this?