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,
,
There is life in information design - still
29 October 2008 Has been a while since either of us posted here. Apologies for that. Is certainly not because we haven't had anything to say! Far from it.I'll hit you with the "we've been busy" cliché first – we've been busy. Bruce has found himself involved in a number of interesting projects, both work and play, and I've started a new job.
There goes the climate
We've both noticed an increased awareness of and demand for the skills of information design, and predict that if the overall business market in New Zealand does contract over the next twelve months, as seems likely, this will just increase competition for better ways to grab market share.Although spending on things like web design and information management have often been the first to be cut when times got tough in the past, we have a suspicion that competition and the better economies of scale marketing through the web can present will provide good opportunities for those in the wider information design industry. Time will tell.
Update: would seem Gerry McGovern agrees with us on this. Check his article on how using the web can help deliver cost-effective service to customers.
The Touch device only has a 320 x 240 pixels touch screen, which is fine, but the iPhone 480 x 320 screen really does put it to shame. I've tried the Windows Mobile IE browser that came with the device and the latest version of Opera Mobile. IE is a pain, no surprise there, while Opera seems designed for the user experience.
The Opera Mobile 9.5 browser works well for a touch-screen mobile user, with large icons and menu symbols that are easy to use with your fingers. It also uses a zoom technique, but it doesn't work so well due to the lower resolution of the HTC screen. It's hard to tell if the content you are looking at is what you need, so I have found myself zooming in and then moving around, which as the LibraryTechNz blog says, "is like interacting with a newspaper page using a rectangular magnifying glass."
The zoom does work better on the iPhone but I think it is due to the increased screen resolution, from what I've seen. The technique is still wrong. Why try to make a web page look on a small mobile screen, the way it looks on a wider desktop/laptop LCD monitor?
Although I'm sure many web designers will scream at this, I think Google's provision of a filtering app to make web sites easier to read on mobile screens presents a more useful way forward for mobile web users (hat tip to the Canadian Slaw legal blog for covering this little-known Google option. The app does strip out style sheets, which may not be the best option, but considering most mobile browsers don't implement style sheets in any web standards way yet, you can't blame Google for taking this route.
Mobile web-browsing re-visited
What else has been happening? The official arrival of the iPhone in New Zealand earlier in the year gave many web designers a chance to think about how to design for it. The excellent LibraryTechNZ blog ran a series about web writing and optimising web sites for the iPhone. Apart from telling you all the web tricks that don't work on the iPhone, the above article, and this one on web design for the mobile provided an excellent list of resources and sound advice for the web designer. They also challenged libraries to think about meeting the challenge of providing content for mobile devices, as they said:There are so few websites out there that have optimised for mobile or iDevices (or even thought about it) that I believe we have a real opportunity to make our mark while we wait for the rest of the world wide web to catch up.Naturally, I was disappointed they didn't discuss the way the zoom-in Safari interface operated, although their first article mentions they expect to zoom a lot. Since I wrote the early articles on this blog about how trying to use a web site on a mobile device using the zoomed-out/zoom-in technique was nuts, I've since upgraded my own mobile device to a HTC Touch and have had more experience with using such a small screen to search and use the web. It ain't easy.
The Touch device only has a 320 x 240 pixels touch screen, which is fine, but the iPhone 480 x 320 screen really does put it to shame. I've tried the Windows Mobile IE browser that came with the device and the latest version of Opera Mobile. IE is a pain, no surprise there, while Opera seems designed for the user experience.The Opera Mobile 9.5 browser works well for a touch-screen mobile user, with large icons and menu symbols that are easy to use with your fingers. It also uses a zoom technique, but it doesn't work so well due to the lower resolution of the HTC screen. It's hard to tell if the content you are looking at is what you need, so I have found myself zooming in and then moving around, which as the LibraryTechNz blog says, "is like interacting with a newspaper page using a rectangular magnifying glass."
The zoom does work better on the iPhone but I think it is due to the increased screen resolution, from what I've seen. The technique is still wrong. Why try to make a web page look on a small mobile screen, the way it looks on a wider desktop/laptop LCD monitor?
Although I'm sure many web designers will scream at this, I think Google's provision of a filtering app to make web sites easier to read on mobile screens presents a more useful way forward for mobile web users (hat tip to the Canadian Slaw legal blog for covering this little-known Google option. The app does strip out style sheets, which may not be the best option, but considering most mobile browsers don't implement style sheets in any web standards way yet, you can't blame Google for taking this route.
Labels: mobile design, web design
posted by Greg on Wednesday, October 29, 2008,
,
The stupidity continues
29 March 2007 Thanks a lot Apple. Now you've poisoned the boys and girls over the hill into thinking we should have a desktop interface metaphor on handhelds. Dudes, the emperor is not wearing any clothes!If Sun CEO Jonathan Swartz is right, and I think he might be, then in the future:
...the majority of the world will use the internet through their phones, not through a PC."Jonathan is not saying we won't use desktops. Far from it. But he feels the need to access information on a portable device will become a key driver of how people will want to use the internet.
With this in mind, I think it is fundamentally wrong to use a desktop interface metaphor on a portable device. The zoom and keyhole-browse features of the iPhone and Deepfish, and even Opera are very clever. But the definition of a browser is no longer based on the desktop. It could be on any device.If I can't read the information on a web page that has been rendered like a tiny version of a PC desktop on my mobile device, or distinguish one item from another, then how the heck will I know what to zoom in on?! And looking at web pages through a keyhole? Who thought this would be a good experience for the user?
No, no, no. You should be serving me your information in a way that adapts to my device. This is called the web standards way. Did we learn nothing from letting Netscape create it's own non-standard HTML tags?
Furthermore, as a colleague of mine pointed out, people using browsers like this will have to pay for unnecessary bandwidth, because the full, desktop amount of content in a web site will be being served to the portable device, rather then being re-formatted for a handheld environment.
I still think this is a phenomenally stupid idea.
Labels: mobile design
posted by Greg on Thursday, March 29, 2007,
,
iPhone breaks device-free web coding principle
16 January 2007I can't believe it. Just when I was starting to think there were a few web designers out there who understood the principle of designing sites that can be viewed on any browser on any device, Apple go and break the principle on their new iPhone.
Apple claims the Safari browser built into the new iPhone is really advanced, and
...lets you see any web page the way it was designed to be seen, then easily zoom in by simply tapping on the multi-touch display with your finger."
What? How do they work out how web sites are designed to be seen? Do they mean how they look on their high-definition, wide-screen Mac machines? I hope not.
Google at least see the benefit of pushing a special web page to handheld devices, although I wish they'd used web standards and a handheld style-sheet instead of java script, but the result is the similar and it shows they are thinking about their audience.
Labels: mobile design, web design
posted by Greg on Tuesday, January 16, 2007,
,
