In a nutshell: responsive design ensures your website looks it’s best regardless of what device it’s being viewed on, improving reach, accessibility and conversion of potential customers.
If you’re new to the world of website building, you may not have come across this term. Or maybe you did, but just glossed over it as just another piece of jargon in the spaghetti of weird words that seem to spew out of the internet at an alarming rate.
So, what is it?
When we use the internet we expect it to just work. Responsive web design is a big part of making that happen. It’s a lot like good CGI in movies; if it’s done right, you don’t notice it happening.
In short, a responsive web design is a design that dynamically responds to how people use it. Maybe they’re visiting your website on their smartphone. Maybe it’s their tablet, or desktop computer. Maybe it’s their watch! For a standard website, these unknown elements represent a big risk of it not displaying properly. Not so for responsive designs; these can change and adapt themselves for all the above situations and more.
What’s the alternative?
A responsive design is just that; a design. It’s one set of rules that responsively changes the arrangement and content of the website in order to give the person using it the best experience on the device of their choice. Responsive design has been around for a long while now. But there was a Before…
In the dark days when responsive design was merely a glint in someone’s eye, many websites would in fact be two websites. One version would load up if the person using it was on desktop and then another, entirely separate version would load if the person was using a mobile. You can still see many websites using this strategy. This set up does work well in certain cases. It was an improvement on the even older world of only having one website and anyone using anything but a traditional desktop browser was forgotten about. And having two distinct websites for each use case meant designs could be tailored to suit the devices.
So what’s the downside to this strategy? Like most things; time and money. Having to design, build, test and maintain not one but two (or more) websites for each potential device being used by your audience gets very expensive and very time-consuming very quickly. A responsive design meanwhile, while potentially taking longer to develop initially, allows for just one set of ongoing costs. Much better!
How can you tell if a website is responsive?
Here’s a little trick. It’ll work best if you’re using a desktop. Take the edge of your internet browser and resize it slowly. If the website you’re looking at stays exactly the same as your browser gets thinner and thinner – potentially moving off the side of the screen – then you’ve got yourself an un-responsive website. Boo!
If however, the layout, design and content of the page starts to move around, get bigger or smaller, or disappear entirely behind a hamburger menu then voila; it’s a responsive design responding to your changes automatically. Joy!
Why is a responsive design so important?
Back when the internet was still in its infancy (like, what? 5 minutes ago?) responsive design wasn’t important. Everyone was using the same browser (Internet *shudder* Explorer) on essentially the same screen and that meant web developers could just make one version of their site and move on with life.
Now? Now we live in a world saturated by the internet. We have device after device all with different screen dimensions. To make matters worse (or better, depending on your outlook) back in late 2016 traffic from mobile devices became the majority of internet traffic for the first time and their market share has only increased since then.
It is vital therefore that your website can stand up to the uncertainty of modern internet use. To ignore this fact is to immediately alienate a majority of your users; and that’s just bad business.
Ignoring the accessibility needs of your users is also bad business, so in next week’s post I’ll be looking at what accessibility means in web design and how your website shouldn’t be caught without it.
Until then, I hope this post on responsive web design and what it means to you has been useful for you!