Get your website multi-screen ready

Anthony Caruana
14 November, 2014
View more articles fromthe author
AAA
Workflow

Safari, web browsers, macworld australiaBack in the old days, when you created your company’s website you only had to really worry about making it work on a desktop or laptop computer. In most cases, the biggest decision was how wide to make the page in order to accommodate the limited screen resolutions of the time.

Today, your website needs to be multi-device ready. Think about it. Don’t you get frustrated when you visit a website only to find it’s completely dependent on Flash so you can read it on your iPhone or iPad? Or, when you go to the site, it’s all designed for a desktop browser so it’s impossible to read or the menu options are hard to find and tap?

Your potential customers will be coming to your website using a multitude of different devices. They might have a laptop for work, a desktop at home, a tablet for when they’re sitting on the couch and a smartphone when they’re travelling. That presents website developers with a challenge – how do you make a website that looks great and is functional on every different device?

The good news is that it’s relatively easy to direct customers to different versions of your website based on the device they are using. That way they get the best possible experience whether they’re on a computer, tablet or smartphone.

What you need to realise is that your website’s content is completely separate from the look and feel. On modern websites the content is separated from how it’s presented. All of you page content, images and blog posts are stored in a database. When someone visits your website, the content they want is pulled out of the database and fed into a template that defines the appearance.

That means you can customise how the data is presented on different sized screens. You may choose to offer different functions for customers on different devices.

TomatoCartWhen a web browser visits your site, it actually tells the site what web browser you’re using and, potentially, what device you are using. Web developers can use that information to dynamically tailor the appearance of your website to suit the device.

This doesn’t always need a software developer. For example, you could build an attractive and functional website using open source applications such as WordPress, and something like TomatoCart for your shopping cart solution. Each of these offers the ability to tailor the look and feel depending on the device that is used to access your site.

With WordPress, you can use a plug-in that will detect what browser your visitor is using and then reformat the page so your content is displayed appropriately.

You might even choose to only show certain content when users come to your site with particular devices. For example, you might choose to not show high-resolution videos or images to mobile users.

Our advice is to think like your customers. Are they likely to be using the same computers, mobile devices and browsers as you? Once you’ve developed the multi-screen version of your website, test it thoroughly. If you don’t have access to lots of different devices, ask some friends and family to visit the test site before making it live so that you get lots of feedback from people using different devices.

Leave a Comment

Please keep your comments friendly on the topic.

Contact us