I have noticed that I have got lots of hits from mobile phones. I wonder if anyone has got advice for using these types of devices. There are different types of mobile devices and some are much bigger than the others. Should I redirect to another website just for mobile devices.
What sort of scripts should I use to detect mobile devices?
Should I create a menu just for mobile devices?
The W3C have a “Mobile Web Best Practices" document, which is not too heavy going and should provide you with plenty of food for thought. They also have a "[URL=“http://validator.w3.org/mobile/”]Mobile OK Checker”. You can run your site through that, and it will let you know roughly how usable it is for mobile devices.
There are problems with redirecting mobiles to a different version of the site:
For a start, if you’re doing it by the User-Agent string, you’ve got to have a huge long list and constantly update it, in order to keep on top of the changing mobile market.
For a second, you’ll need some way to allow mobile users to ‘opt-out’ and use the regular site.
For a third, you then have increased your workload by having two sites running in parallel.
That isn’t to say you shouldn’t do it, but they are things to be careful of before you go down that route. There are other options, such as mobile stylesheets. If you’re doing that, the most recent thought seems to be that a good strategy is to design for a low-function mobile first, then use media queries to progressively add better graphics, layout and larger display for larger viewports right up to desktop size – you would probably then want to use conditional comments to specifically target IE6-8, which doesn’t recognise media queries.
The advantage of using stylesheets in this way is that you’re only maintaining one site, so once you’ve got the extra layouts set up there’s no real extra workload; you don’t have to worry about keeping an up-to-date list of mobile User-Agents, and you don’t have to worry about how to signpost the different sites. The disadvantage is that because you’re only changing the styling, and not the code, you can’t optimise the site as fully as you can with a completely separate site.
Most larger sites that tend to need this approach use some type of template which the pages content is injected. So in the ideal world one could develop a site using a mobile first approach than switch out the main wrapper for site based on page detection. It seems like most of the performance implications always lies with all masthead, footer and rails anyway. Ditch rending those server-side and everything else can be changed with CSS. In theory…
There are servers out there who do just this: maintain a long list and keep it updated. Stephanie Rieger mentions it in one of her slides.
starting with slide 83, she shows asking another server in “teh cloud” for more info about the device.
Of course, when the other vendors change their UA strings to all say “Apple webkit something something” we’ll all be screwed anyway and we’ll find some other insidious way to find out who’s requesting one of our pages. <rubs hands together evilly/> yesss, yesss…
The most recent podcast was on this exact topic. Check out the author of the Mobile First book, Luke Woblxsomethingorother. Link
Maybe you’ll be interested in reading his book.
~TehYoyo
I just call him Luke W, and lots of other people do too, for that reason : )
Meh…I’m not familiar with him.
Is he a pretty big dev/designer?
~TehYoyo
He’s kinda big about responsive whatnot and especially user interaction with HTML forms. He has a whole book somewhere about “Don’t make people fill in a bunch of crap before letting them try something out” and hates those sites that make people register for no good reason (usually the company or site just wants your info but it’s not necessary for things like trying out a demo etc).
Instead of user-agent, you can adjust your site based on the screen resolution. Tablets and mobile phones differ in screen resolution.
But screen size/resolution doesn’t correlate 1:1 with bandwidth, CPU, or capabilities regarding things like Javascript. An iThing is about as capable as a laptop like mine, except it is running on a battery. A Blackberry however may have similar screen size to an iPhone but less CSS and JS ability. Some mobiles have separate keyboards. Some have only on-screen keyboards. And wi-fi… I have my computer sitting now connected to wi-fi in my house, and it’s pretty fast. I bring this same laptop to some coffee place with 30 other users and suddenly the same websites take three times as long to load.
If you see a big trafic to your website from mobile devices then your site needs a mobile version. Your website is unlikely mobile-friendly and that causes many difficulties to your clients. Here are some additional reasons why you need it http://www.in.gov/visitindiana/techcorner/index.php/2012/06/05/5-reasons-why-you-need-a-mobile-website-right-now/