By Nick Dawe, on 29 January 2010
As part of our Silva upgrade, we’ve developed iPhone/iPod specific stylesheets that will render new Silva layouts in a way that’s actually helpful to iPhone users. These will be shown on sites that choose to use a new Silva layout which will be available after the upgrade.
I’m fairly new to the world of mobile web browsing, and the process has been quite illuminating, so I thought I’d write a quick post about the experience…
Note: this post doesn’t go into detail about technical aspects of developing websites for the iPhone. If you’re interested in that, have a look at:
Why style a page differently for an iPhone?
Many of our website’s pages, rightly or wrongly, have an awful lot of text. While this can present some difficulties for ‘normal’ readers, it presents far more for those trying to read with a mobile device. If a page hasn’t been specifically styled for a mobile device, it’ll just display as a squashed version in the device’s viewport.
To actually read information from this squashed view, the user then has to zoom in to be able to recognise text characters. But because only a small number of characters can be shown within the viewport at one time, the user then has to scroll the view from left to right. No one sentence can be read without the user having to be distracted away by awkwardly having to shift their view of it.
A different style
Therefore, instead of trying to fit as much as possible into the tiny viewport of the iPhone, we’ve tried to extract the ‘essential’ elements of a Silva page: it’s title, central column content (i.e. the main text), and basic site navigation. We then used the Silva CMS to set up a different version of a page if an iPhone was browsing: this only showed the elements mentioned within a simple HTML page. Navigation however, was now positioned at the end of the page (so that visitors wouldn’t have to scroll through it every time they went to a new page). This was also followed by a more generic navigation for a few of the usual UCL footer links. More notably however, this also included a link for the user to touch if they wanted to browse the site without the iPhone styling. This was really just in case there were certain pages (e.g. image galleries etc.) that may actually show far better in their original format, even for an iPhone.
While we’re fairly confident that our iPhone styles are beneficial to such visitors, we’re obviously keen to find out what usability issues crop up. We’ll also be interested to expand these styling options to other mobile devices in the near future.