Responsive Web Design: An Answer to Mobile Optimisation

This story originally appeared here in the July issue of Business Review Australia magazine.

Written by Kathryn Galland

Kathryn Galland is a multimedia journalist in Sydney who enjoys writing feature and humour articles. Before moving to Australia, Kathryn lived in Washington, D.C. where she gained broadcast experience at Fox News Channel. She graduated summa cum laude from Virginia Tech University with a degree in communication. She is also fluent in Spanish.

Ninety-four per cent of Australians surveyed have researched a product or service on their mobile device, according to Google. Yet, 79 per cent of Australian businesses do not have a mobile-optimised website. Is your business website mobile-friendly? Maybe it should be.

Consider this: “Sixty-one per cent of mobile users surveyed said they were unlikely to return to a site that they had trouble accessing from their phone,” Google reports.

Businesses with an online presence can “mobilise” their websites in a number of ways, but responsive design technology offers the most seamless adaptation to a growing collection of browsers and devices, from smartphone to tablet, iPad to widescreen desktop.

Responsive web design offers a one-website-fits-all media approach. It allows a website to adapt to various size media screens, for a fluid user experience.

RWD is not merely a trend; it is a technique and spearhead of the technological advances that are adapting to the consumer desire to switch effortlessly from one device to another.

In the past, website owners who wanted to go mobile might have used a plug-in or created a separate “mobile” website. For businesses, that meant additional website maintenance fees.

Statistics show that businesses are playing catch-up with the consumer, who uses an iPad or mobile phone as a laptop replacement.

ICT expert Mary Meeker estimates that mobile Internet access will surpass desktop web usage within two to three years. Tony Keusegen, Google’s Head of Technology in Australia and New Zealand, also backs the Morgan Stanley predictions.

Already, 52 per cent of the Australian population owns a smartphone, and that same number of Australians performs a mobile search every day.

RWD means designing websites with mobile in mind.

How It Works

Basically, it is a bottom-up approach to building websites. Designers begin by creating websites that look aesthetically pleasing and functional at the smallest level and then expand the content, images and functions to fit and fill larger screens.

A responsive website automatically detects browser width and re-sizes or re-organises the contents to match the canvas size.

In other words, if one shrinks a browser window by dragging the bottom corner of the webpage inward, the content auto-adjusts to fit the width proportions of the smaller window so that the viewer does not need to scroll horizontally to see the full webpage.

Web designs incorporate fluid grids and flexible images to minimise scrolling and decrease load time.

Applying the Technology

The Boston Globe was one of the first pioneers to use this technology on a large scale.

The site is 100 per cent responsive, adapting to touch and other interactions. For example, the multiplatform crossword puzzle allows the user to fill in and save responses as well as check for errors.

In Australia, Jon Tinberg and his partners at The Digital Marketing Agency (The DMA) are leading the way in website mobile optimisation for their clients.

Tinberg and Peter Shilling have first-hand experience with digital marketing within their own businesses as business owners. Now they are at the forefront of the RWD movement in Oz, helping other professionals follow suit.

The DMA designed a responsive site for Account Ability Recruitment, whose visitors include mobile and iPad users, according to the website’s analytics.

The DMA also designed the website for Sydney-based Garfish Restaurants, keeping mobile users in mind. Garfish Restaurant can track the numbers of customers who call via accessing mobile and iPad searches, versus those who search on a desktop web browser. The DMA team then uses that data to strategically place local mobile ads, targeting smartphone searches down to the operating system.

In the Hunter Valley, The DMA helped the Margan Family Wines find an inventive way to use QR codes. Using a phone to scan the barcode on the back of one of their wine bottles, a user will be redirected to the vintage and tasting notes of that particular wine on the Margan website.

Determine if Your Business Needs a Mobile Optimised Site

“The average small business wants to have a mobile optimised website,” Tinberg says.

First, Tinberg suggests checking the analytics of the current website. It is possible to see how many “visits” come from mobile phones or other handheld devices.

Ask yourself: why might a consumer access a company’s website on his or her phone? Determine the purpose of the website, if it has not already been established.

Consider what kind of engagement the business desires with visitors. Do visitors fill out a contact form, or do they primarily use the website to call or locate the business?

If the primary purpose of your website or proposed mobile site is unclear, then gather feedback from consumers. A simple survey will suffice. Visitors to your website can indicate possible content or design improvements, and more importantly, explain the purpose of their visit.

Finally, consider the cost effectiveness to redevelop or rebuild the website in responsive web design. How important is mobile in pulling in client generation and revenue?

“Basically, if you are pulling more than 2,000 visitors a month to your site, it’s worth the investment,” Tinberg says. “But if only 5-10 per cent of your business is through the website, or if most of your business relies on referrals, then it might not be worth investing in responsive design [with a web consulting firm].”

Nonetheless, there are options for small businesses to create responsive websites.

In June, the DMA released WebsiteOnWP.com, a do-it-yourself website product for small to medium businesses. The site offers several responsive website themes using WordPress frameworks between $10-30 AUD per month.

Basic Design Tips

When designing with mobile in mind, simplicity rules. Do not bog a website down with superfluous wording. Don’t write a novel.

“When people use a smartphone, it’s for more immediate information,” Tinberg says. He says consumers want an office address and map or they may want to click on the phone number.

Consider what the most important content is and place it at the top of the page. When the grid restacks for various canvases, the most prominent information remains at the top.

Remember that high-resolution images will slow down the load time on smartphone, so use flexible images that adjust to the canvas size and don’t overdo it on graphics.

Designers should also be conscious of website layers, as complexity does not translate well on a mobile device.

Why It Matters

A Google study says businesses need to be optimised for mobile or face losing their customers.

The same IPSOS Media CT study found smartphones to be indispensable to daily life, transforming consumer behaviour and the way consumers shop.

Responsive web design emerges as a highly adaptable solution to the rapidly evolving smartphone revolution.

RWD can save time and money for businesses. When a new gadget appears, designers don’t have to go back to the drawing board.

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows,” says Jeffrey Veen, Adobe’s senior director of products. “Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”