Optimise your web site for iPhones & touch-screen devices
20 February 2009 The second generation iPhones have been around for a while now and owners seem pretty happy with them. Other mobile devices and mobile browsers have appeared that use similar finger touch-screen interfaces, and people have had a chance to work with them and understand just what a change the touch interface makes to using a mobile device.On top of this, the increase in people connecting to the internet and in particular the web, seems to have surprised many, especially in the web design industry. I've met web designers who laughed when I said we should think about optimising our sites for mobile users. "Hardly anyone looks at web pages on a phone!" has been the usual reply. Why do many web designers seem to just want to cater to the majority - "hey, most people have IE, so who cares about other browsers!" Why would you cut off potential visitors just because of the technology they use?
Anyway, it appears people do want to access web sites on their mobile device, and some predict this will be the most prevalent way people use the web in the future. Many popular sites are already providing mobile-optimised options for their users, including Google, Amazon, TradeMe (the NZ "E-bay" – actually it's a better user experience than E-bay), Air New Zealand (these guys are using the .mobi domain so that proves they acknowledge the need to provide for mobile users), Yellow Pages (NZ), Wikipedia, and one I wouldn't have predicted considering its very rich large-screen monitor-orientated interface, Facebook.
The Facebook iPhone-optimised screen is very interesting, as it shows just how pared down one has to be, or can be, to suit the mobile interface. Here's the way Facebook appears on the iPhone in desktop view (left) compared with the optimised verison on the right (image taken from the .net magazine article mentioned below.)
So what does this mean for those of us designing and running web sites?
If you have a website that is likely to be used by mobile users, then you should consider optimising your site for such devices. I've said this before on this blog, and maybe I stood alone. Not any more.
Craig Grannell has written an article for the excellent .net UK magazine about optimising a site for iPhones (Optimise your site for iPhones, Craig Grannell, .net, January 2009, pp. 72-74). In his article Craig explains that although one can use the Safari browser zoom-in interface that comes with the iPhone, and apparently some prefer it to using a laptop (are they crazy?!), he thinks developers and designers could do much more to make it a better experience to use the web this way.
By default, websites appear in pint-sized versions, with text generally being illegible and links being practically impossible to target. … all is not entirely rosey in the land of the iPhone, and developers could do more to help."The article (unfortunately it appears to unavailable online as I write this) gives some excellent advice. First, Craig suggests web designers think carefully about whether the site is likely to be visited by a mobile user. The minutes of a local city council meeting are pretty unlikely to be used by mobile users, but the opening times of the council-owned swimming pools or the local museum may well be.
Second, if the site fits the criteria, than hone down the content, keep things tidy and simple, and present a streamlined, simplified version of site that focuses on the key features people want from it (hint: sorry, this isn't Google ads or a beautiful Photoshop-ed banner).
Then he provides two options. Create a mobile-optimised site, or create a mobile-specific site. Personally I prefer the former, as I strongly agree with this next statement he makes:
…working on an iPhone-optimised website is akin to dealing with print style sheets. As long as you're building sites using semantic markup and using CSS to style your layouts, you can [easily] create an alternate style sheet for the iPhone to present a streamlined, simplified version of your website."Craig suggests browser-sniffing to detect the iPhone device. I'd rather use the technique of providing alternative media type style sheets in web pages – screen, print, aural, handheld, etc – and then letting the browser select which one to use, but this so clearly doesn't work in the web browsers provided with so many mobile phones (I'm talking to you Nokia). This is because the default browser on many mobile phones has been built by the phone's manufacturer and most just seem unaware of web standards. As more third-party web standards compliant browsers (Safari, Firefox, Opera, etc) are provided for mobile devices, this problem will hopefully go away, but in the meantime, I'd follow Craig's advice.
And here's how. According to Craig, the simplest way to implement this is by using Javascript to make sure an iPhone-specific style sheet is used instead. (I'm not sure where this leaves those of use who want to optimise for HTC Touch or the new Palm and Android devices, but I will try to find out for a future post. Is there a standard userAgent id for other devices or do we just use some default mobile one?)
Craig provides the code for this technique as follows:
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1))
{
var cssNode = document.createElement('link');
cssNode.setAttribute('rel','stylesheet');
cssNode.setAttribute('type','text/css');
cssNode.setAttribute('href','iphone.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);
}
I strongly recommend web designers look into this approach, or variations of it to suit the situation.
Two other tips from Craig's article are worth mirroring here.
Don't think that the superior resolution of an iPhone screen will make it easier for users to read your web site text. I was surprised to read that the higher pixel density of the iPhone screen (163ppi) compared with a typical PC monitor (in the range of 72-95ppi) means fonts that are quite readable on a larger LCD screen tend to look very small on an iPhone.
And don't use Mac-orientated design conventions, because it seems most iPhone users are not Mac users. Say what?! Love to know where he got this from.
Labels: mobile design, web design
posted by Greg on Friday, February 20, 2009,
