What is Responsive Design?

There’s a lot of talk about responsive website design these days. In fact it’s a service that we provide ourselves.

But what is responsive design and what is it good for?

In the beginning...

The idea of static-width websites has been around since the early days. Static-width basically means the width of the website remains the same regardless of the size or resolution of the monitor/device (think horizontal scrolling to view the right hand side of the webpage).

To get around this issue, even back in the years when surfing the web was limited to sitting at your PC or laptop after listening to the unforgettable modem dial up tone for several minutes, the concept of ‘fluid’ website layouts was in use. In practice, this generally meant that the width of elements on the page would increase or decrease depending on the size and resolution of your monitor (and also when you resized the web browser window). At the time this was useful to a degree as it meant that users with low resolution monitors would still get to see the whole website, albeit in a more condensed view, without having to scroll horizontally. Great news!

Fast forward a few years however, bring on the smartphone and tablet market and the way the world uses the web has changed dramatically. Month on month, year on year, web traffic from mobile devices is rising hugely and now, more than ever, website and web software owners must consider their mobile users in addition to the good old PC and laptop crowd.

Due to such limited real-estate on mobile devices, particularly smartphones, a lot of people tend to agree that static and fluid layouts don’t quite fit the bill anymore. Imagine your website layout either squashed down to the width of the smart-phone screen or, alternatively, having to zoom and scroll around to navigate each page.

Enter responsive design

In some ways this builds upon the foundations of fluid layouts but brings with it much greater control and flexibility.

In a somewhat crude nutshell, responsive design provides a way to display your standard layout to your PC users, an adapted layout to tablet users and a further layout to smartphone users. In truth, it’s more about the resolution of the device rather than the device itself, so high resolution monitors might get one layout, while lower resolution monitors get another.

Regardless though, the goal is that every user gets a fully optimised experience, on any device.
For example, your standard ‘10 page’ navigation could be replaced with a dropdown menu icon for tablet users, your 3 horizontal ‘info’ boxes on the homepage are stacked vertically on smartphones and your calls to action are given prime, above the fold, location across all devices.

More than this, responsive design can also be used to display content that is most relevant to the user, based on the device they are using. For example, a smartphone visitor might be more interested in finding your phone number or directions on the move, so these can be moved to the top of the page.

Hang on, aren’t we just talking about mobile websites here?

There is actually a clear distinction between mobile websites and responsive websites.
A mobile website is a separate website entirely and might be located on a subdomain, such as ‘m.example.co.uk’.
The idea is that this ‘mobile’ version is served out to users on mobile devices and the standard ‘desktop’ version is served out to everyone else.

The downsides here are the potential for duplicate page content (which search engines loath) and also having two separate websites to maintain. Plus, you often find that tablet users are left somewhat in limbo as they either get a stretched out smartphone view or a difficult to navigate ‘desktop’ view.
For software this is even worse as it could mean running and maintaining two copies.

Responsive design means that all devices are taken into account via a single interface. Whether your users are on phone, tablet, laptop or PC, the pages they visit are the same, it’s simply the layout that is optimised for each device.

In conclusion

Static websites had their time, so did fluid layouts and so did mobile websites.

These days, however, whether you operate a website and want to tap into the mobile market or want to create business software that can be accessed across all devices then responsive design is the way to go.

Interested in finding out more?

Why not give us a call and we’ll talk through the options...