Free eBook: Increase traffic to your website
Sign up to the free NETT Weekly Newsletter and receive a free eBook detailing how to get more traffic to your website. The newsletter contains all the latest news, feature articles, and how-to guides for growing your business.

How to make your site mobile-friendly

Mobile is currently one of the fastest growing ways of getting your business in front of potential customers. Furthermore, the idea that most search traffic will eventually come from smartphones is not as crazy as it might sound. Fortunately, it’s not difficult to prepare your business and it’s online presence for the tipping point.

If your existing website has been created by a reputable developer in accordance with web standards, it’s likely that establishing a mobile presence to complement it isn’t going to be too difficult.

“If you build your website the right way, with best practices in design and web standards in the first place, you’re generally going to be in a pretty good spot,” says Matt Sawkill, web director at Trout Creative.

When Sawkill talks about best practice, he’s talking about adhering to a series of commonly accepted practices in web design, established by the World Wide Web Consortium (W3C). These standards outline the correct way to use HTML, and encourage things like the use of Javascript for web animation and interactivity.

“Not everyone goes about creating sites with web standards,” he warns. “They might be looking at Flash-based sites, or they might not care too much about the HTML under the hood on their site, but those things make a big difference when it comes to the mobile space.”

Tom Longo, a developer at Kojo Interactive shares a similar viewpoint.

“If they have created it using the web standards from the W3C, it just becomes a matter of swapping out a few pieces of code and creating some exceptions so that it loads the same content differently depending on what device tries to access it. It’s a pretty easy thing to do provided the website has been planned that way from the beginning,” he says.

There are three basic approaches with that business owners should be aware of when working with web developers. The first, recommends Trout Creative’s Sawkill, is insisting that your site is built in HTML 4 or HTML 5, and to encourage the appropriate use of Javascript for animation and interactivity instead of Flash.

“Because it’s a very fragmented marketplace out there, there’s a tonne of different devices you need to test against,” he says. “By making sure at the bare minimum that it’s a standards compliant site, it’s going to have the most compatibility across the board, and you’re not going to run into too many strange issues.”

Many popular content management systems (CMS) like WordPress actually feature modules or themes that allow the operators to create a mobile version of the site simply and easily.

“What you get is a very generic looking version that will appear the same as a lot of other people’s, so you need to take that and customise it and get it on brand,” explains Sawkill. “That can be a really effective approach if you’re using a CMS and working with a developer who knows what they’re doing, they can take that and get you up and running really quickly.”

A more complicated method of ensuring a site is mobile-friendly is to employ adaptive design. This means that all the pages on a business’s original website are coded to deliver different style sheets to different devices, so that the look and feel adapts to suit the visitor’s browser.

“So you might get a two column layout on your website that turns into one column of text when you view it on an iPhone,” explains Sawkill.

“We talk about things like progressive enhancement where you start with a basic version of the site that everyone can look at and everyone can read and understand,” he continues. “You can then add interactivity and features on top of that, so that if you hit a device that doesn’t support what you’re trying to do, it doesn’t fail, or stop you from being able to use it; you don’t miss out on content, you just might not have that animation or piece of video.”

According to Tom Longo at Kojo Interactive, the most important thing to consider when creating a mobile site is speed: how quickly it downloads, how quickly it displays, and how quickly users can find what they’re after.

“The big issue for mobile is that people are really impatient,” he says. “On the mobile phone, if it hasn’t happened within five seconds, they’re probably going to assume that there’s something wrong and go on to something else.”

Longo suggests this is to do with the usage scenario on smartphones.

“With a mobile, unlike with a desktop, you’re probably more likely to be surfing the web during an ad break or at a restaurant, or settling a bet at a pub or whatever, so you want the answer very quickly. Either way, it definitely needs to load fast.”

Given that smartphone users can tend to be less patient with their time, Kojo Interactive’s Longo suggests businesses should always have the user in mind when considering how information should be presented on a mobile site.

“It means making sure the buttons are big and it’s easy to navigate, and that people don’t have to scroll around too much to find the information they want,” he says. “Really you just want to make sure that no one gets frustrated.”

Quite apart from the technical aspect of building a mobile site, it’s essential for businesses to use analytics to learn as much as possible about site visitors, and tailor mobile content to them. A retail site might have a very iPhone-heavy audience; a corporate site might tend towards Blackberries.

“If you’re doing a tonne of email marketing, you know that people are going to be looking at your emails on their phone, and looking at your site that way,” says Sawkill. “It’s worth making sure that the landing page for your marketing campaign is going to be mobile friendly.”

It’s also wise to take advantage of the fact that mobile analytics allow businesses to be more aware of the visitor’s context.

“If someone’s hitting your site from their phone, they’re probably on the move,” says Sawkill. “They might be looking for your contact details or the location of your office, so you can tailor content accordingly.”

The first thing experience gift website RedBalloon investigated when creating their mobile presence was how users browsed their standard site.

“How did we want users on the mobile site to be able to access products in a quick and easy way,” asks Jemma Fastnedge, general manager of RedBalloon. “We have over 2,500 experiences, so we wanted to make sure that it wasn’t complicated or time consuming.”

The company established that the typical customer journey took a ‘learn, choose, buy,’ pattern, and that customers preferred to either choose experiences generally by category, or to search for a specific type of product.

“They might know they’re interested in cooking, which they can explore and refine by state, or they have an idea of what it is they want to do, so they type ‘whale watching’ directly into the search box,” says Fastnedge.

The resulting mobile homepage features a search field and a concise set of category tabs, allowing visitors a way to navigate the site’s thousands of products quickly, easily and effectively.

Want to know how effective your website is? Get a free website analysis from a Netregistry expert, valued at $75.

Image credit: Thinkstock

Have Your Say

Your email address will not be published. All fields are mandatory

To leave your comment, please click the submit button below. By doing so you acknowledge that you have read and accept the privacy policy and terms and conditions for use of this site.


Please supply your email address

You will receive an email with instructions for downloading the eBook, and be automatically subscribed to the weekly newsletter and special offers from partners.

Free Weekly Newsletter

Articles, ‘How To’ pieces, interviews and news, these small business web design ideas and advice will help ensure your company has a website to rival all others. From colour palettes to branding, right through to technical applications and coding, NETT offers mixtures of articles guiding and inspiring you through every step of web design for small business.

rosetta stone version 3