Web Services

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:

• Web Development for the iPhone
• iPhoneWebDev
• QuirksMode Mobile Compatibility Tests

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.

Finally, we added some JavaScript for these pages to hide the URL bar from showing, so that it might look a little more like an iPhone application, and also allow a little more space for the page itself. The JavaScript was also set to resize any images that were originally bigger than the viewport’s dimensions. Any other page elements that couldn’t be resized would be replaced by a prompt to view the page in its original form.

The future…

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.

Predicting the future of technology is a dangerous thing – we are yet to see the reality of a nuclear powered vacuum cleaner for example. However, there is some consensus that the web is going mobile in a big way; the Future of the Internet III report (a survey of around 1200 leading internet experts and key stakeholders) predicts that:

“The mobile device will be the primary connection tool to the internet for most people in the world in 2020.” (Pugh Internet American Life Project, 2008).

There are many reasons to believe this will be the case:

Firstly,  a tipping point in terms of market penetration of smart phones has been reached. The Blackberry led the way and the arrival of the iPhone (and iPod Touch) with its innovative interface and unique web applications has moved mobile web usage into the mainstream.

Secondly, the mobile device is a relatively cheap piece of technology to manufacture. With significant computing power that is able make use of existing mobile telephony standards to access the internet, it is likely to provide access to more people around the world  – particularly in geographically remote parts of the developing world where access to the internet has thus far been restricted.

In Web Services we are planning for the future. We are beginning to investigate the building of apps for the iPhone and Google Android (in fact we’ve been beaten to it by a UCL Computer Science student who has built an excellent iPhone UCL map application). We’re also reviewing how our web pages are rendering in mobile devices with a view to adding specific mobile styles sheets.

In terms of app creation we think it would be sensible to concentrate on things that users would find useful on the move -  wouldn’t an undergraduate student find it helpful if they could view their timetable using their mobile device on the bus?

We would be interested to know your thoughts are on this and perhaps what apps you would find useful.