Like our website only smaller

Posted in: Archive

The number of people who access our website using a mobile has been steadily increasing over time.  Currently, visits using mobile devices make up about 2.3% of the total visits from external users (about 13,000 visits per month).  This in comparison to 0.7% this time last year (about 4,000 visits per month).  This only includes devices that can run JavaScript but it gives a general idea of the numbers.

Undergraduate Study Page as viewed on a mobile
Example of how a page currently looks on a mobile

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"/>
Page with extra CSS for display on a mobile
Page with extra CSS for display on a mobile

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.

Posted in: Archive