A woman smiling whilst using an ipad.

Responsive Design Part 1: What is responsive website design?

4 Jan 2016

Darren Fisher - Developer and Consultant

Written by
Darren Fisher
Developer and Consultant

Everyone and their cat has a responsive website now don’t they? They all think they’re so cool with their responsive websites that do responsive things in responsive situations. You know… responding to things that require responsive responses...

A sad looking clown doll.

The sad truth

The trouble is that while everyone is gassing about this 'responsive' buzzword, and throwing it around like they're namedropping, the truth is that a lot of the people who are talking about responsive (and even more tragically those who claim to offer responsive websites), don’t actually know what responsive is.

So in this series I’d like to get stuck in to what responsive really means. What is a responsive website? Why should you have a responsive website? And perhaps more importantly… what isn’t a responsive website? And also to have an honest discussion about some of the pitfalls of responsive design and how they can be avoided.

But for now let’s get on topic (and hopefully stay there) by discussing... WHAT is responsive design?

A boy looking confused.

More than just another TLA (three letter acronym)

Responsive website design (or RWD if you're someone who enjoys using acronyms to confuse people) is a craft much like plastering a wall or wiring a house. You have to combine theory and practice with common sense and of course individual artistic flair.

You’ll often hear people say: “responsive design means it works on mobile”.

Just to be clear… all websites work on mobile. They might not work well, but they all work on mobile because the mobile browsers were designed to deal with websites as they were before mobile browsers even became a thing.

What we're really talking about is optimisation of visual style and content for any devices other than a standard desktop machine or laptop so if you hear someone talking relentlessly about mobile websites, you might need to run for the hills.

A lady on a laptop.

So what is responsive design then?

Responsive website design can be best summed up by looking at the user experience. Responsive website design will allow a user to achieve a goal on any device (this is important as too much focus is placed solely on mobile) without obstruction or annoyance. This means that responsive website design isn’t just about “making it work on mobile”. It is about refining the experience of the desktop site so that it works better for a reduced screen size and touch screen input. This can mean that elements on the page should re-flow and resize to suit the 'viewport' (i.e. device screen size) and in some extreme cases change form, or even disappear altogether.

When Adobe introduced the concept of responsive to their print design software InDesign they referred to the method as 'liquid layout' and I love this terminology. Imagine your device browser is a cup and the website is water and the page components are the molecules. In the words of the late, great Bruce Lee: “You must be shapeless, formless, like water. When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot.”

A barbie doll in glasses.

How does it work? (Geek speak alert!)

I’ll try to explain this as simply as I can! Responsive design works by reacting to both browser and device size. Using CSS code we write 'media queries' which means that unique styling code is written for different breakpoints or browser widths. Then before the browser renders a block of styling code to the screen, it crawls the various 'breakpoint blocks' of code and applies the correct one depending on the width of the browser at that time. A fully responsive website will change before your very eyes as you scale the browser width up and down on a desktop machine because the browser will continually update the rendered code as its width is changed. These are the 'breakpoints' telling the code dynamically which set of CSS code to pull out and use, depending on the device size and browser being used.

Responsive design also uses JavaScript to detect what device is being used in order to apply specific rules to certain interactions or visual styles. An example might be that a full-screen video background might be used on a desktop website but on a mobile device not only will the video not scale to the screen size nicely but it will also eat up lots of valuable mobile data. Therefore when the JavaScript detects a mobile device it might instead render a nice image in place of the full-screen video background.

A shiny silver robot face with blue eyes.

Proper responsive design requires human decisions

As great as technology is, we mere mortals are still required to make the decisions that shape the websites of tomorrow.

Everything must be considered.

If menu items tuck away off screen the trigger to access them needs to be easy to spot and easy to access. If items that aren’t the main content are shifted for smaller screens there needs to be some logical and rational decisions as to why they will move and where they will move to. If you’re going to remove certain items for a smaller devices this needs to be carefully considered and only implemented in instances where it aids the user experience, and doesn't upset the user goals of the site.

EVERYTHING must be considered!

Every single element on a website needs to be considered for all device sizes. It’s not good enough to just take care of the larger components or main regions and leave it at that. It is also not enough to just make the main pages responsive and then leave everything else to break. This will create an horrendous user experience but we've seen this more times than we care to recall and it truly pains us to see. From the background to the images to the font sizes to the page flow to the layout to the navigation to the footer and to everything in between and beyond… everything must be considered. And we mean everything. Not just some of the things. Or most of the things. Or all of the things except that one weird thing that happens in this one screen size... You get the point.

Everything must be considered. Phew.

A calendar app open on an ipad laying on a desk next to an imac, keyboard and mouse.

Join me next week…

Next week I’ll be discussing WHY you need a responsive website so be sure to come back as this is perhaps the most important thing of all.

The digital landscape is evolving rapidly around us and responsive websites are no longer "becoming a nice-to-have" but rather more "devastating to your business to go without".

If you’ve already heard enough and just want to start talking to us about your requirements for a responsive website or any of the other services we offer, contact us today so that we can help bring real success to your online presence.

Until next week, thanks for your time!

Darren Fisher - Designer & Developer

Get in touch about your project

Give us a call or send us an email to talk through your project

telephone+44 (0) 203 743 0886

emaildarren.fisher@pivale.co

Articles in this series

A woman smiling whilst using an ipad.

Responsive Design Part 1: What is responsive website design?

Calendar 4 Jan 2016 #Frontend The first in our series on responsive web design and why you should care about it.

Read the article
A pile of twenty pound notes.

Responsive Design Part 2: Why do I need responsive website design?

Calendar 11 Jan 2016 #Frontend Responsive design isn't just a fad that will fade away. In fact it will make a tremendous difference to your online presence in ways you might not imagine.

Read the article
The Scream painting by Edvard Munch.

Responsive Design Part 3: The seven deadly sins of responsive design

Calendar 18 Jan 2016 #Frontend Responsive design can be good, but sometimes it can go bad and even ugly. We explore the 7 deadly sins of responsive design. It's not going to be pretty!.

Read the article
Four female hurdle sprinters are leaping over the hurdles along the race track.

Responsive Design Part 4: Overcoming the drawbacks of responsive

Calendar 25 Jan 2016 #Frontend Are there any drawbacks of responsive design and if so what can we do to minimise the impact? We explore many of the concerns we've heard from clients.

Read the article

Related articles

Atomic design components from atoms, through molecules, organisms, templates, pages to Drupal.

10 lessons from using Drupal 8 + Pattern Lab + Emulsify

Calendar 22 Aug 2018 #Frontend #Review #Drupal The musings of our front end developer after the launch of our first Pattern Lab + Drupal 8 project via the Emulsify base theme.

Read the article
The Scream painting by Edvard Munch.

Responsive Design Part 3: The seven deadly sins of responsive design

Calendar 18 Jan 2016 #Frontend Responsive design can be good, but sometimes it can go bad and even ugly. We explore the 7 deadly sins of responsive design. It's not going to be pretty!.

Read the article
The drupal 8 logo on a blue background with some obscured lines of code.

Kickstarting with Drupal 8 themes

Calendar 21 Oct 2015 #Frontend #Tutorial #Drupal #HTML, CSS & Javascript Drupal 8 has many new exciting features, but perhaps the most exciting of all is the new approach to themes. Our developer Alex gives us the lowdown.

Read the article

More recent articles

A square peg smashed in to a round hole with a hammer.

Could mismatched web solutions scupper your business growth?

Calendar 5 Aug 2020 #Insights #Advice If you’re responsible for the IT or strategic marketing in a medium or large business, ask yourself 'How is your web portfolio looking?'

Read the article
An elephant inside a business meeting room.

5 ways your addiction to spreadsheets increases risk in your business

Calendar 13 Jul 2020 #Insights #Advice #Security & compliance It's time to talk about the elephant in the room: your addiction to spreadsheets! Relying on spreadsheets is bad for business. Here's how to fix that problem.

Read the article
A well designed room featuring a large piece of wall art featuring a bee hive and the Pivale Assemble: Multisite Solutions branding.

The smarter way to manage many websites

Calendar 17 Jun 2020 #Press #Advice Do you crave the agility and speed of smaller market players? What effect would it have if you could work faster and smarter? Make this dream your new reality.

Read the article

Subscribe for email updates

1 Your details

2 Your interests

Please select which Pivale services are of interest to you:

3 Legal info

By subscribing, you acknowledge that your information will be transferred to our marketing platform for processing.

You can unsubscribe at any time by clicking the link in the footer of our emails. You can find out more in our privacy policy.