Nidahas » Musings on design, web standards and free software from a Sri Lankan geek.

Mobile CSS First Steps

2005.04.04

Mobile CSS is an area that has been largely overlooked by web designers. But not for long: mobile internet access is gaining popularity, and most mobile phones nowadays have XHTML browsers. It only makes sense to pay attention to this new breed of user agents and start adding stylesheets for the handheld media type on our sites.

Creating a stylesheet to be fed for handheld devices is not a difficult job: afterall, it’s nothing but the same CSS we’ve been using for years, and some good advice is available on the topic. What is really frustrating is how different mobile browsers use different methods to apply the style rules. The main problem is that some of these browsers use the screen stylesheet as well. Desktop browser incompatibilities are not at all intriguing compared to mobile hell.

However, with a little effort we can get off to a good start. Assuming that we have properly coded, semantic XHTML, these style rules should be enough to make our sites meet the basic requirements for mobile-friendliness:

* {
   position: static !important;
   float: none !important;
}

That’s just two style rules. It’s almost as easy and convenient as the Global White Space Reset. Let’s analyse the solution:

Positioning

position: static !important;
float: none !important;

Absolute positioning is an absolute no-no on mobile devices. There’s no room to float anything on such a small screen either. We need to keep everything in the document flow so that the mobile UA sees a one column layout.

Why Important?

If mobile browsers only used the handheld stylesheet, merely stating the values would have been enough. But since some of them do apply the screen style sheets as well, we use !important to override those unnecessary styles.

Backgrounds

Screen style sheets usually have plenty of background images attached to page elements to spice things up. We can save our mobile user the hassle of downloading additional 50kb of icing by modifying the stylesheet as:

* {
   position: static !important;
   float: none !important;
   background: none !important;
}

We have to be careful here: if, for example, we have white text on a dark background in our screen stylesheet, it will be overridden by this style rule, and the user might not see anything even though the content is still there. (If you point a mobile browser at this page, you won’t be able to read the “white text on a dark background” part in the last sentence.)

To get rid of the images but to keep the background colours (either applied incorrectly from the screen stylesheet, or applied from inline styles as in the above paragraph), we can change the last rule to:

background-image: none !important;

Colours

It is important to specify all colours in the handheld stylesheet. Expecting all mobile browsers to use colours from the screen stylesheets is like doing CSS for IE expecting it to work fine on all web browsers.

Linking the stylesheet

You already know this, but let’s just mention it here anyway.

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

Don’t forget to KISS

Keeping things simple in the handheld stylesheet is the key to make a site mobile-friendly. Once we fix the most problematic areas with these style rules, the rest should be easy going.

Permanent Link | Filed under: Standards, Web, Thoughts

---