What is responsive design?

Responsive design means that your website will look and function just as good on a mobile phone as it will on a huge desktop computer screen.

That’s the short answer. But this doesn’t mean that your website will look exactly the same on both mediums.

Let’s get to the long answer to really understand what goes on in responsive web design and what it means for your business.

As you know if you’ve read my post on what makes a great website, everything really boils down to user experience. If people can’t access the information they need from your website then they will give up (pretty quickly according to the statistics) and try their luck on another website.

So what is not responsive design?

Cue the wavy lined flashback gif….

Back in ye olden days when smart phones had only begun to take over the world, this started to become a big problem. Yes, it was great that we could now surf the web on our phones, but most of the websites we visited weren’t easy to use. The website that you visited on your phone would usually just be a very small and often squished version of the website you’d see on a desktop computer and you’d have to scroll all over the screen just to try and find the menu item you needed and even then, often you weren’t able to access a drop down menu.

One of the work arounds for this was to build a mobile version of the website which was actually a separate set of code that would display when the browser detected the screen size was small. The url would usually start with ‘m’.

Gradually, coding languages evolved, technology progressed and web developers discovered better and better ways to make a website workable on small screens – such as collapsing a menu into what is now known as the ‘hamburger’ (those 3 horizontal lines) or using a finger tap to show the hover content.

Nowadays, websites will use media queries (some css code) which will tell the browser to use designated sections of code when the screen reaches a certain size and therefore display a different design. Let’s look at an example:

Here’s a website I designed for Adaptive Health Intelligence. If you look at their projects page on a desktop computer, the projects, with their coloured icons are laid out across the page in rows of 2 and 3.

But if you look at the page on an iPhone X for example, the projects are now neatly stacked one on top of the other. Rather than squishing the whole page unchanged into a smaller width, the media query tells the site to change the way the elements are displayed so that it’s easier for people to read the information.

You can change almost anything with media queries to make your site work well on a screen of any size. For example, on a desktop computer, the font size is often fine to read at 14px, but on a mobile, it’s probably a good idea to increase the font size to something a little bigger.

Responsive design isn’t only about the layout and the readability, it’s also about taking into consideration user behaviour on a small screens.

For example, on a mobile, people are usually wanting to get straight to a specific piece of information – perhaps they just want the phone number to call your company, or maybe they want to have a quick look at your service delivery to see if you provide what they’re looking for. The goal is to help the user get what they need without fuss and this often means reducing clutter on mobile screens. ie: that amazing image gallery showcasing an architect’s portfolio probably isn’t going to be that impactful on a mobile screen and the small screen real estate might be better used for something else.

There you have it. A brief overview of what responsive design is and why you MUST have it on your website. Most website platforms will provide themes that have responsivity built into their layouts. But if your website theme is being built from scratch by a developer then please make absolutely certain that they are building responsive layouts for you. All good developers will do this by default.