Saturday, 9 March 2013

Responsive design, mobile website or phone app?

Statistics show that people are using PCs less and less, and mobile devices are in the ascendancy - hey, I'm even writing this post on a laptop via wi-fi!One website I work on has seen mobile visitors increase from just over 2% in late 2010, to 30% of all the visits to that website today.So by having a website that's difficult to read or use on a mobile device (not just phones - tablets/iPads count as mobile devices too), you could be disenfranchising 3 in every 10 people who visit your website. And that number is going up every year.So what's the best way to make your website work for your mobile visitors?

"Can you make me a mobile app?"

I maybe could, but is that the best thing for your customers?If you run, say, a local Estate Agency, what would your mobile app offer that some of the UK-wide or Solicitors Property Centre apps don't? Would you choose to make an iPhone app, Android, or both? What about Windows Phone users? How would you get customers to use your app? And how many customers would have to use your app for you to receive a return on your investment? For most businesses, a mobile app isn't the best use of their budget.However, if you have a unique product, idea or offering which would work better in an app than as a website, it might be worth doing.

"I'll have a mobile website then"

A website written specifically for mobile devices sounds like an appealing option. You'll keep your customers happy by making sure all your website content (text and images) fits onto their small screens.But what size do you make it for? iPhone? Android? Windows Phone? iPad? They all have different screen sizes. Even iPhones aren't all the same - the original iPhone is 320x420pixels; the iPhone 4 is 640x960 and the iPhone 5 is bigger again at 640x1136.And what about future devices? Who knows what size they will be?To write a mobile website to fit all devices and work on future devices as well you'd need lots of versions of the same site. Not to mention your main (non-mobile) website. Who is going to keep all these different versions in synch? It would be a bit of a nightmare to maintain!

"So how do I get a website that works for all devices then?"

The introduction of HTML5 and CSS3 has given us the tools to make the 'one website to rule them all', by using "responsive design".Websites which utilise responsive design keep the same content (so you only have one website to maintain) but use the new features in CSS3 to work out what device is viewing the website, and display the website at an appropriate size and in an appropriate format for that device.For smaller devices like phones, the website might display in one single column in 'portrait' mode, and 2 columns in 'landscape' mode, with navigation links made bigger or even changed into icons so they're easier to activate using your finger, and images made smaller so they don't take so long to download over your impatient customer's phone network.On a tablet, the same website might display using 2 or 3 columns, and on a laptop or PC it might have a bigger content area, more images and normal text links clickable by a mouse rather than finger-friendly icons.Different monitor sizes and future mobile screen sizes can be catered for by making the responsive design adaptive, using percentages to keep the proportions the same no matter what screen the viewer is using.This is all a bit more work for the designer, who has to create different versions of the 'style sheet' for the various devices, so a responsive and adaptive website will probably be more expensive to design than a simple "one size doesn't fit all" website, but it should pay for itself in longevity (it should adapt for most future device sizes) and because you only have one website to keep up-to-date.

"Okay, I'd like a responsive design website then"

Existing websites can be converted to HTML5 and CSS3, so talk to me if you think it's time to make your website mobile-friendly, or even for a fresh new design.For a new website, I'll usually recommend going with a responsive design right from the get-go unless there is a compelling reason not to.