Mobile Web Bugs (29th September 2008)

Today I tested how Calthorpe Park School fares in mobile phones. We recently did a redesign (actually more of a realign) and that included a complete rewrite of the handheld stylesheet.

Handheld Simulation

In Firefox with the Website Developer Extension, you can simulate what a handheld device should do with your CSS. From the extension’s toolbar:

  1. CSS
  2. Display CSS by Media Type
  3. Handheld

This applies any stylesheets using media="handheld" or @media method for handheld devices and disables all others. Rather than resizing your browser to a tiny width and reducing the text, you can add this temporary CSS: 

html {
 background: #808080 !important;
}
body {
 max-width: 240px;
 color: #fff;
 font-size: 10px !important;
 background: #fff;
}

This only uses 240 pixels of the viewport, making the rest of the viewport a dark grey. Should look quite familiar if you use Windows XP. It also sets a fairly typical small-screen text size and ensures normal colours.

Exactly how you add this is up to you. If you include it in your handheld stylesheet, make sure you remove it before uploading to your actual website. If you don’t, you could be screwing over dutiful handheld devices which differ in width, resolution, user preferences and so on.

Opera also has a Small Screen Rendering (SSR) which is also fine for testing what handheld devices should do. But I’m quite fond of Firefox and the Web Developer Extension.

Handheld Testing

Nokia E90 Communicator

My Dad’s phone, in which the styles were pretty messed up. The wide inner screen has 1,024 pixels of width, so it applies the screen stylesheet.

The complex positioning for <fieldset> and <legend> in the header seem to have been half-applied. So I guess this is a CSS implementation bug.

Sharp GX15

My phone uses Openwave from quite some time ago. I applies the handheld stylesheet and ignores all the others. It has a normal size screen for a mobile phone from a few ago, so this is good. It applies colours, text formatting and some of the margin settings.

However, it doesn’t apply display: inline to the navigation lists and gives them a massive indent. This makes the navigation hard to use. The sublist of items is almost unusable as only a few characters fit on each line. It breaks words so all the text remains visible, albeit difficult to read.

Worse still, it doesn’t apply display: none to the <legend>, slogan and “You are here” portion of the breadcrumb trail. The skip links only work once the whole page has loaded. But at least the “Skip to Main Content” link is automatically focussed on each page load.

Thoughts

Mobile browsing of standards-compliant websites with lightweight markup and styles optimised for various media can be great experience. But it relies on the device supporting the standards.

These two devices represent two different generations of mobile browsing. Each of them does a fine job with the resources they have but a couple of CSS bugs detract from their usability.

Better standards compliance in handheld browsers, please.