Home / guides   Print version

Design websites for mobile devices

Publish date 27/06/2008

Today, more and more people are using their mobile devices (GSM, PDA, ...) for getting online.
And also to view your website.

Unfortunately most site are build for big screens; 1024x768 and up. So displaying the on a small screen makes it difficult to navigate and unpleasant.
Most mobile browsers don't have support for fancy stuff like Flash, and special scripts.


Browser sniffing

Browser sniffing is way to display the correct content. The website or web-application detects which browser is used and displays the correct content.
This can be done serverside (php, asp, .net, Perl) or client-side (Javascript).



Media is another way to select the right way to display is using multiple style sheets. This solution created by W3.org is not as reliable. The CCS is selected on the type of medium. (The content remains the same). There are 16 different types of media, like "braille" for blind users, "tv" for display on television or "aural" for speech-synthesizers.
For mobile divides you have "handheld", aimed for devices with small screens, bitmap-graphics and limited bandwidth.
There are only a few browser that handle the settings for "handheld" well.
The Nokia browser, Opera Mini and Opera Mobile are the browsers that comply best.

<link rel="stylesheet" href="mobile.css" type="text/ss" media="handheld"> or <style type="text/ss" media="handheld">mobile.css</style>
Another way is to use @media:
<style type="text/css">
 @media handheld {...}
or use a external source
<style type="text/css">
 @import url{...} handheld;
if you want to use a style sheet for more media, you can set them in a comma separated list:
<link rel="stylesheet" href="mobile.css" type="text/ss" media="handheld,all">



You can create a special url for your mobile visitors (which they put in or be redirected automatically). Like www.yoursite.com/mobile or mobile.yoursite.com.
You can also use the mobi-domain; www.yoursite.mobi.

It's preferred to have a separated url if the mobile content is radical different then on the normal "desktop"-site.


Some design tips

Some mobile users disable the download of images so that pages are loaded faster. So avoid using images and if you do give them a meaningfull alt-tag.
Also fill in the attributes width and height, so that the page can be displayed before the images are loaded.

For the layout, it is best to show everything in 1 column.
If you use tables, make sure that the cells are displayed as blocks under eachother.
You can do this with css:

table, tbody, tr, rd, th {display: block;}

Advertisements, (javascript-)menus can be hidden with:

{display: none;}

For the background you can use a single websafe color. Use a charactertype and color that is easy to read on a small mobile screen (With and without sunlight!).



A real good site is dev.mobi. It has all the guide lines, tips and recommendations for a mobile website.
You can test your mobile website on validator.w3.org/mobile.


W3C guidelines

The W3C has put some guidelines to what mobile websites should comply:

  • Minimum width: 120 pixels
  • Language: Xhtml-Basic
  • Characterset: utf-8
  • Images: jpeg or gif 89a (Not interlaced, not transparent, not animated)
  • Total page size: Max 20KB
  • Colors: Websave colors
  • Style sheet: External css level 1
  • HTTP version: 1.0 or 1.1
You can test your mobile website on validator.w3.org/mobile to see if it complies.