Download this article as a PDF from our website here

What’s a ‘responsive’ website?

When smartphones first became popular, people realised that traditional ‘desktop’ websites didn't work very well on the smaller displays. They were too fiddly for our fat fingers, you had to keep zooming-in and out and took an age to load on the early data networks.

And so a generation of ‘mobile’ websites were born. Companies built a second website that was stripped-back, simplified and displayed instead of the main website when the server detected someone was using a mobile phone to browse it. People only really went online on their phones when they wanted some simple information about a company, such as their phone number or street address.

Over time though, smartphones and mobile devices became the primary way that people started browsing the Internet. Phone companies launched data networks that were as fast (and in some cases even faster) than people had on their desktop computer, and tablets started taking the place of laptops.

We needed websites that were fully functional and displayed all the information regardless of if it was being viewed on a laptop, smartphone, tablet or even Internet-connected TV.  We needed websites that didn’t have a different version for each device it was viewed on, but one site that would adapt its layout and work well across them all.  We needed ‘responsive’.

Responsive websites in practice

The goal of responsive websites is to have one site with a fluid layout which adapts to whatever size it is being viewed at.

On many modern sites you can drag the side of your browser window to make it smaller and see the site responding on the fly to the smaller display area. Elements drop beneath each other and resize to be legible on different sized displays (if you are viewing this page on a desktop computer, try it and watch what happens as the window gets smaller).

Individual ‘jump points’ can also be programmed into responsive sites, meaning that if an element needs a specific amount of width to be usable, it can change how it presents itself for smaller displays.

The most common example of this is a navigation menu that collapses into a menu icon; tapping on this icon then reveals the full menu as a drop-down.

^ An example of how a responsive website adapts as the width changes, showing how it would show on a desktop (or landscape tablet), a portrait tablet (or landscape smartphone) or a standard smart-phone.

More complex items can also respond. For example an enquiry form can become more ‘finger-friendly’ when displaying on a smaller display by making the submit button run the full-width of the phone screen.

These fluid layouts have led to websites becoming simpler and are making the Internet a more usable place. However, they cannot be easily retro-fitted to old websites that use static frameworks – this fluidity is built in from the core:

Should I go responsive?

The short answer is yes. Not just for the convenience to the people who view your website – on whatever device – but also because the statistics back it up.
Visitors who are browsing using a mobile device stay longer and view more pages on a website that adapts its layout for mobile users. Even Google now ranks responsive sites higher to those using its search engine on a smart phone or mobile device.

The percentage of people coming to your site on a device rather than a desktop depends on your industry but it will only continue to increase.

Consumer websites have a higher percentage of mobile visitors than business-to-business sites, but certain industries (such as engineering where many workers are not always tied to a computer) can often prove the exception to the rule.

Responsive emails

Whereas only a quarter of the visitors to your website may be using a mobile device, up to half will read your emails on one.

The same ‘responsive’ philosophy should apply to the design of your email as well as your website, especially if you are running email marketing campaigns though services like MailChimp that are natively responsive. However, many email software providers have been slow to catch-up with responsive emails and flagship programmes like Microsoft Outlook still don’t support the resizing features of responsive email design.

Find out more

Do you want to find out how many of your visitors are using a mobile device, or are you looking for advice about upgrading your website so that it works better across multiple devices?  Call Stewart on 01484 841 088 or click here: www.tdmuk.com/contact-us

Download this article as a PDF from our website here

Stewart Leahy is The Design Mechanics' sales and marketing guru, having worked his way up from the ground floor in the sales and marketing industry he is now the go-to man if you want to generate more sales enquiries for your company.

Stewart is a regular presenter on sales, marketing and business growth for a number of organisations including the Chamber of Commerce, national trade bodies, blue chip organisations and is an appointed business mentor for the Government’s New Enterprise Allowance (NEA) scheme.

www.tdmuk.com