Responsive Web Design: More than mobiles

One of the major productivity advancements in recent years has been the technology we use to get online. Wi-Fi hotspots, 3G, and now 4G, mobile technologies have effectively made the web portable.

On trains, in cafes and – rather dangerously – on footpaths, we increasingly see people, head down, peering into smartphones, checking emails, doing their banking or buying groceries.

Businesses and organisations in Australia have been relatively slow to react to this change. But as the number of smartphone users continues to grow, more and more websites are catering to mobile traffic.

However, the web is constantly evolving and new devices continuously appear on the market, moving the goalposts yet again. People are using tablets of various sizes, phones with larger screens and even tablet-smartphone hybrids to view websites.

This is frustrating for businesses and organisations that want to provide their users and customers with an effective web experience.

One possible solution to this dilemma is to use responsive web design.

In theory, responsive web design is quite simple: It is a website that is designed to fluidly adapt to the screen size being used to view it. Responsive websites adapt at the front-end so that the content and navigation is optimised for the device. And it’s not just smartphones or tablets that are catered for.

“One thing people are surprised about, is the number of people viewing sites on very large screens,” says Salsa Digital’s Creative Director Benson Tait. “People don’t have little 21-inch monitors anymore. Many businesses will, or should, tailor their responsive sites to the big screens as well.”

And don’t forget there are smart TVs too, so more users will start to view websites using massive televisions. But the concept remains the same.

“It does not matter how the user is viewing it – whether it’s on a desktop, mobile, laptop, or a giant LCD screen – you are getting the information to them in the most accessible way,” says Tait.

In simplest terms, this means that a website can show a lot more information on a larger screen: more content, larger images, or more advertising.

Alternatively, if the screen size is reduced – think laptop, tablet, smartphone – it can change to show less information, in a different layout, so that it is easier to read. The site can also change its menu structure and style – such as larger buttons for touch screens, and less menu levels – so that navigation is easy and intuitive to use.

responsive1-300x176.jpg

Perhaps an example would best illustrate the concept. Have a look at Smashing Magazine; if you change the browser’s window size (from full size, resize till the window resembles a smartphone), you will be able to see what a responsive website can do.

The wonderful thing about a responsive website is that, for the most part, the content is the same no matter what screen size, or device, is used to view it. So unlike a mobile-specific site, where there is separate mobile content, there is only a single website to manage.

But while a separate mobile-specific site is relatively easy to design and set-up anytime, a responsive website needs to be considered from the very start.

“There is a lot more consideration that needs to go into the site from a design point of view,” says Tait. “Because it is a dynamic layout, we need different designs for each of the different screen size the site will cater for.”

This means the design process itself can be quite time consuming. One of the more important design considerations is how to handle site navigation, especially on a smaller screen.

“We have to make sure that it is not jarring. The usability of the site needs to be consistent across the whole site even when it does change. And also, we have to consider each screen size medium – what each one brings to the table,” says Tait.

The other important consideration is load-optimisation – making sure the site loads quickly on all devices. The extended design process and the more intensive development requirements add about 25 to 50 per cent to the cost of the website.

“It terms of budget, responsive design is more costly. But it is a more sustainable solution, because you are catering for a much larger audience,” says Tait. “Screens are going to get bigger. And there are new devices released continuously. So in terms of future-proofing, responsive is the way to go.”

But Tait cautions that responsive web is not for everyone.

“Best thing to do is to check your google analytics,” says Tait. “The great thing about web is that you have really solid statistics about who is using your website. Check the stats, find out who is using your site and build the site for them.”

As we wrote recently if statistics show that mobile users are using your site to access only a few pages or services, then a responsive website might be an overkill.

“Just a standalone mobile site - even a simple splash-page – can work really well,” says Tait. “Most of the time if people are trying to find your site, especially if you are a business, they are only trying find your contact details.”

But responsive design can potentially future-proof websites in the constantly evolving Internet landscape we face.

And if your audience or customers need a rich, powerful web experience using a variety of devices – both small and large – then responsive web design provides an elegant, efficient solution.

“It’s about maximising your screen real-estate,” says Tait. “It is about depicting to the user the information you need to in the best possible manner.”

“If you are doing that, then you are doing something right.”