Most current internet enabled mobiles will zoom out of a website so that you can see the entire page on screen at one. This obviously makes the page very small and hard to read. Personally, I find myself zooming in on specific parts of the page to find the bit I need. This isn't ideal.
Enter a very nice feature of CSS 3. Media queries allow you to specify additional style sheets or styles to be served based on specific criteria such as width or height.
For example including a extra CSS file if the width is less than 500px only requires the following line to be added to the HTML.
<link href="smallres.css" rel="stylesheet" media="screen and (max-width: 500px)" type="text/css">
This will work on it's own for desktop browsers but to prevent the page from zooming out on a mobile you also need to put the following to tell the mobile browser to use the device width as the width of the page.
<meta content="width=device-width; initial-scale=1.0;" name="viewport"/>
Then it is just a case of deciding which parts of the page you don't want to display and which bits you want to change and adding the relevant CSS to your newly included file. For example on our undergraduate study page we could remove the background images, simplify the global navigation and linearise the rest of the page as seen in the image on the right. Hopefully you agree that the result is much easier to read.
Whilst some work would be required coming up with a mobile version of our global style sheet. I think it is clear that it is worthwhile and would make our pages more accessible and usable.