Fixed, Fluid, Adaptive, and Responsive1:27 with Allison Grayce Marshall
We’ve been using a lot of terminology like fixed, fluid, adaptive, responsive – but they aren’t interchangeable. In this video we'll break them down and discuss the difference, so we can decide which is best for our project.
Things to Consider
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.
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.
Great job, guys; let's keep moving!
Formulas are 1 thing, but allowing yourself to adapt to this new way of designing
is a whole new concept to get used to.
As a Web designer, it's important you embrace that your Web site
is going to look different in various browsers and on different devices.
Forget about trying to make your Web site look the same in every browser and device
and focus instead on allowing your Web site to break, mold, and conform
to the size and dimensions your user wants to experience it at.
So we've been throwing around a lot of buzz words like
fixed, fluid, adaptive, and responsive,
but these words aren't interchangeable.
Let's break them down and make sure we understand the difference
between them before we dive into the code.
Fixed Web sites have a set width
and resizing the browser or viewing it on a different device
won't have an effect on the way your Web site looks.
Fluid Web sites are built using percentages for widths,
making columns relative to 1 another in the browser.
This allows it to scale up and down fluidly.
Adaptive Web sites aren't necessarily built on a fluid grid.
They can also use a fixed grid and introduce media queries
to target device sizes,
like smaller monitors, tablets, and Smart phones.
Responsive Web sites are built on a fluid grid and use media queries
to control the design and its content as it scales up or down
with the browser or device.
Let's take a quick quiz and review what we've learned so far.
You need to sign up for Treehouse in order to download course files.Sign up