Sophie Dennis
-
Rethinking the Mobile Web by Yiibu (View more presentations from Bryan Rieger on Slideshare)As a follow-up to yesterday’s post on the Morrisons mobile site, here’s Bryan Rieger’s excellent presentation Rethinking the Mobile Web from 2010.
0 Comments -
Mobile sites: beware flaky device detection
Morrisons, the UK supermarket chain, have a mobile site. So far, so good. Unfortunately their device detection is somewhat, ahem, flaky.
Here’s what it looks like on my HTC Desire S, a recent Android phone:
Let’s leave aside for a minute that that mock phone surround is pretty cheesy. The offending image, “iphone-surround.gif”, is being applied to the <body> by the stylesheet “notmobildevice.css”. Which suggests it’s intended to be loaded only if you’re not viewing on a mobile phone. Presumably to show, should you stumble across it on a desktop, that this is a mobile-specific site.
Unfortunately my small Twitterverse sample suggests whatever device detection Morrisons are using is only treating iPhones (and iPods) as mobile. On iOS the cheesy phone is mercifully absent. But iOS is only around 18% of the mobile market. So - assuming my guess is right - 82% of mobile users are getting a desktop experience in error. This is, in essence, the flaw in relying exclusively on device detection.
What Morrisons could - should - have done is use CSS media queries to load notmobiledevice.css only at larger screen sizes. Either in conjunction with their device detection or instead of it. Media queries future-proof sites against the introduction of new devices their device detection script is unaware of. Provided the new device supports CSS media queries, which new devices almost certainly will, the site owner does not need to fret about supporting every mobile device individually.
Media queries offer a flexible, reliable, future-proof method to give different styles for different screen sizes. Used well they let your site elegantly fit to any screen size in a way that is device agnostic. As mobile devices proliferate and overtake desktop internet use, as assumptions about screen size become ever more dangerous, every site will need to use them to ensure a good browsing experience for its users. I’m not against either device detection or mobile-specific sites. Both have their place. But you want to use them alongside media queries to enhance the mobile-browsing experience, not instead of them.
(As a weird ps, I’ve realised the mobile detection is even more messed up. It was capable of redirecting me to the mobile site in the first place, but then decided I wasn’t mobile after all.)0 Comments
