But is it responsive?

By:
Read tme:
Web Design

"Web design is responsive design. Responsive web design is web design, done right." - Andy Clarke

Responsive design and all that it includes is a widely talked about subject. It is also one of the most misunderstood.

If you open a website on your phone, and it looks and functions great, is it responsive? Maybe but maybe not. It could be adaptive.

In simple terms responsive design means designing a website that changes to accommodate different screen sizes and types. To further understand the concepts involved let’s take a look at the different types of layout that can be created in this context.

Static design

This is where the web started and I think most people would recognise a static website – a website that uses pixels to create fixed width layouts. These layouts do not respond to a user’s screen or browser width.

Static Layout - responsive-grid.webflow.io

Adaptive design

This is the design type I see people confusing with responsive design. Adaptive design isn't  concerned with the user’s screen or browser width. It's concerned with the most commonly used screens and devices.

Typically you would see a web designer create 5 or 6 static mock-ups in an attempt to accommodate commonly used devices. Depending on how fine grained the media queries are it can be hard to identify when a website is adaptive.

Adaptive Layout - responsive-grid.webflow.io/adaptive

Liquid design

In contrast liquid design has little regard for the device being used by a person. This method uses relative units like percentages to maintain a layout no matter the type of screen. As you can imaging these types of layouts can become awkward as a screen becomes narrower.

Liquid Layout - responsive-grid.webflow.io/liquid

Responsive Design

With all of that in mind. Responsive design is the combination of adaptive design and liquid design. You will use media queries to target device sets. For example a media query that handles larger screens, a media query to handle tablet devices, and a media query to handle phones. The use of relative units within the query will allow for smooth transitions between devices in the set and between the media queries themselves.

Responsive Layout - responsive-grid.webflow.io/responsive

Is that everything you need to know?

Of course this is a very introductory look a responsive design. There's a lot more to it then that – especially if you are going for a great user experience. Hopefully you can use this as a starting point to better your understanding of responsive design and how it applies to your next web project.

Alex Nichol
Alex Nichol
Vancouver BC, Canada

I'm a web designer and digital strategist. By day I'm a QA analyst for Webflow, which means I search for needles in a digital haystack and then convince devs to make my needles a priority. After hours I read, write, and talk about the web, freelancing, and remote work.