Design

As a digital agency one of our biggest new business ‘hooks’ is to ask potential clients if their current website is mobile friendly. “Did you know,” we say, “that 51% of Australian smartphone users access internet via their mobile multiple times a day?” And from there we go on to talk about how many leads they might be losing should their website not be mobile friendly. Their eyes widen, they nod their head and we invite them into our gingerbread house.

So, what we’re about to tell you now might come as a surprise.

There should be no such thing as a ‘mobile website’.

A user needs to be able to view your site on any internet enabled device with a web browser and know that they will be able to access the same content each and every time and get the same content as anyone else. Which means, they need one website that responds dynamically to each device. They do not need a “mobile website”.

People make the mistake of believing all internet-accessing devices are the same, and that all of them will work under the magic of a mobile website. But just think of the dozens of different sized screens with web-surfing capabilities: not just mobile phones and laptops, but tablets, netbooks, even the Amazon Kindle. There’s also the new wearable technology from Google – Glass – which has an unique screen resolution of 640×360—unlike any other on the market. And of course, more and more people have web-enabled TVs in their lounge room. So you need to know that your content will look and read well at those huge sizes, too. But if not mobile websites, then what?

There should only be responsive websites.

In the past, mobile websites were made by redirecting users on a mobile phone to a completely different URL. This mobile site had a completely different set of content, templates and functionality than the primary ‘desktop’ website.

This meant that you, the company, have to maintain two websites.

This resulted in inconsistent content, double the admin work and—very likely—double the maintenance costs from your digital agency.

Which leads us to responsive design.

Responsive design does not subscribe to defining ‘Desktop’, ‘iPad’, ‘iPhone’ as set layouts. Responsive design relies on detecting the width of the browser on the device rather than detecting specific devices. With responsive design the designer sets rules around how the layout and content displays in response to the width of that device screen. The whole website then automatically resizes itself, depending on how large or small the users screen size is. We’d urge you, right now, to bring up our website on your mobile phone and maybe your iPad if you’re a multi screen user. Can you see how it has changed format but the website URL hasn’t?

So, instead of maintaining two separate sites, we use one set of content on a single domain.

(To get a little bit techy, the layout is adapted at any width that the previous layout breaks at. So if a desktop layout scales down to 800px wide and then the layout breaks, we would add a rule to be applied at that specific width. These widths are known as ‘breakpoints’. Typically, there should only be a few breakpoints for a website, however, there can be many depending on the complexity of the layout.)

Google loves responsive web designs

If you want to rank well on Google, then having a responsive web design will help.

Google have published endorsements and guidelines for making your website responsive, and they also use responsive design for all of their products as well. They like it because they’re only indexing one set of URLs for your content, rather than another set just for ‘mobile’ specific. So, one domain gets the total bucket of traffic and because it isn’t split, your position moves up the ranking list.

Google has also recently announced they will be favoring websites that are responsively designed.

If you’re not yet convinced, other major websites have adopted responsive design on their sites quite recently. Including the re-designed Microsoft, Mailchimp, Squarespace and Behance.

It’s not perfect (yet).

While responsive design is definitely the way to go, and has so many benefits, it still has some issues that are being ironed out. The one we struggle with right now is images. When you have one desktop website that people mostly access with broadband, you can have any size image you like and it will render quickly. On the mobile site, you’d have smaller images, or none at all, knowing that the images will load slowly.

Responsive design means all content, including images are accessed from the same ‘source’. So whilst they may scale to a different screen size, the actual file size remains unchanged. Mobile internet speed is still lagging here in Oz, so this means images in responsive design may load far slower than ideal. For the user this can be a little bit annoying. Finding the right compromise where images look good and display quickly across devices usually comes down to testing.

That said, responsive design is just going to get better and better and with Google already rewarding it, we wouldn’t suggest you wait to get on board.

The final say

Guess what? We’re still going to be using our ‘Did you know’ mobile hook. Because it’s a fact. Users will access content and make choices on whatever device they like. And right now that’s mobile. But what we won’t be doing is letting devices, which are constantly evolving and multiplying dictate the website design. We’ll let user behaviour do that instead.