What’s the Difference Between Fixed, Fluid, Adaptive, and Responsive Web Design?

quickTips_blogHeaders_CSS

As a web designer, it’s important to embrace that your website is going to look different in various browsers and on different devices.

Focus on making your website change layout to match the device that your visitors are viewing it on.

Here’s the difference between different types of web design and layouts:

Fixed websites have a set width, and resizing the browser or viewing it on different devices won’t affect on the way the website looks. This can require horizontal scrolling and a site that doesn’t look good on tablets or smartphones.

Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser, allowing it to scale up and down fluidly.

Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.

Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Allison Grayce

Allison Grayce is a web and user interface designer. From brand strategy and user interface design to creative writing and front-end development, she has a passion and appreciation for complete brand experiences. Allison holds her BFA in Web Design & Interactive Media. Twitter: @allisongrayce.

Comments

2 comments on “What’s the Difference Between Fixed, Fluid, Adaptive, and Responsive Web Design?

  1. I agree! Adaptive is form of responsive design. You either use media queries to respond to device width or not (fixed).