Designing for mobile

[vee]

Hi folks,

We are starting to get requests for mobile sites so its time to learn how to do them. Most of it looks pretty straightforward in terms of the coding but still a bit confused about the best method to re-direct to the mobile site? I'm seeing pros and cons for various techniques.

Anything you guys recommend for the initial re-direct please?

Thanks
Vee

[ih8mondays]

Not sure about best methods, but there's two things I hate as a user of mobile sites

1. Sites that when I click "view in full site", go there, but immediately go back to the mobile version...

2. Direct links from google etc to an article, that redirect me from that article to the homepage of the mobile site... 

[samhs]

don't do a redirect. Use media queries (CSS3) instead to reformat the content to work on a smaller screen. Less work for you, supported by all the modern smartphones, and easier to maintain in the future.

[suedenem]

don't do a redirect. Use media queries (CSS3) instead to reformat the content to work on a smaller screen. Less work for you, supported by all the modern smartphones, and easier to maintain in the future.

I agree to a point, but there are often times in which the site owner will want to serve different content to mobile users, who are typically more intent-driven than desktop browser visitors.  For example, a hotel Web site might set the scene more with the main desktop landing page, whereas the mobile version would probably cut straight to the booking process.  I'm far more likely to want the 'executive summary' than the entire article or report when reading on a mobile.

You should also consider how you are going to serve inline images and media which conveys information.  A beautifully crafted chart designed for best display on a 27" Mac isn't going to render too well on £70 PAYG Android, and the user won't thank you for the data transfer suck, either.  The user would probably be grateful if you cut out the 450KB of jQuery/jQ plugins/TypeKit fonts/other nice-to-have-gizmos which enhance the desktop browsing experience but at best add weight to the mobile page (and at worst detract from the experience).

And then there's the problem what you count as 'mobile'.  Do you really want to serve the same page to a £40 Alcatel, Samsung Galaxy S2, Dell Streak and top-of-the-range iPad?  They're all completely different browsing experiences, yet all could count as 'mobile'.

Anything you guys recommend for the initial re-direct please?

It's not perfect, but I tend to use user agent string detection.  There's some sample code here:

http://detectmobilebrowser.com/

I'd set a session cookie initially, and only redirect on the basis of the cookie being set.  You could then change the cookie value if the user chooses to display the desktop version and honour that choice throughout the session.

[vee]

Hi folks,

Thanks for that. Our sites work well enough on mobile but I tend to agree that the mobile experience needs to be stripped back significantly - just presenting key information. So at the moment we are looking to present specific mobile content with key information prominent (tel no etc) very prominent.

We'll experiment and see what works - always good to break into something a bit different 

Thanks for the useful comments
Vee

[Jeep Stone]

I've been using Andy Clarke's 320 and up (http://stuffandnonsense.co.uk/projects/320andup/) for our designs. This handles the client-side stuff such as altering the layout. For server-side client sniffing I've been looking at http://code.google.com/p/php-mobile-detect/

[SLEE]

Interesting topic, something I am aout to look at for a couple of sites as well. I was going to dive in and use CSS3 media queries but now I am unsure if i should be changing any of the content. Be interesting to see how you get on Vee.

HAve any of you looked at supplying different images according to the size of the screen as well to save on loading?

[glenwheeler]

Take a read of Ethan Marcottes responsive web design, great book. Responsive layouts are what its about these days not re directs to mobile version sites.

[suedenem]

Take a read of Ethan Marcottes responsive web design, great book. Responsive layouts are what its about these days not re directs to mobile version sites.

Do you have any case studies, with supporting KPI data, that we can look at to back up your sweeping statement?

I'm all for responsive design - it's a good baseline for cross-platform development if the client is willing to pay that bit extra for the extra time it takes - and I'm well versed in the rhetoric of the likes of Marcotte, Zeldman and Clarke.

A responsive website should respond with more than just its layout, however.  Intent of visitors is likely to differ between different devices, and content (as well as layout and style) should respond to their needs accordingly - this is marketing 101 stuff.

Hopefully we're all separating out our content, style and behaviour nowadays.  'Responsive design' techniques advocated by Marcotte et al only effectively tackle the style aspect.  Marcotte effectively suggests building for mobile first and then layering extra content on top using JS - this would be unacceptable for many projects I'm involved with for all sorts of reasons (page load/execution times, SEO, JS-disabled etc).

So, consideration of what approach to take should come on a project-by-project basis.  For most small-medium 'brochure' sites RWD is a good approach; for anything bigger, for which you've identified different levels of intent between different types of device users in your market research, a different approach may be more sensible - it could be the difference of £millions for a medium e-commerce site, so either approach would need rigorous testing.  Sheepishly following the industry celebrities in their latest crusade will only get you so far - it's great that they've raised the profile of RWD, but it's currently far from perfect.

P.S. - as no-one else has said it yet, welcome to DDN :-)