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

[treehouse presents] 0:00 [What's the Difference Between Fixed, Fluid, Adaptive and Responsive Web Design? with Allison Grayce] 0:02 Formulas are one thing, 0:05 but allowing yourself to adapt to this new way of designing 0:07 is a whole new concept to get used to. 0:09 As a web designer, it’s important you embrace 0:11 that your website is going to look different in various browsers 0:14 and on different devices. 0:16 Forget about trying to make your website look the same in every browser and device. 0:19 And focus instead on allowing your website 0:22 to break, mold, and conform to the size and dimensions 0:24 your user wants to experience it at. 0:28 So we've been throwing around a lot of buzz words 0:30 like fixed, fluid, adaptive, and responsive, 0:33 but these words aren't interchangeable. 0:36 Let's break them down and make sure we understand the difference 0:38 between them before we dive into the code. 0:41 Fixed website have a set width, 0:44 and resizing the browser or viewing on a different device 0:46 won't have an effect on the way your website looks. 0:49 Fluid website are built using percentages for widths, 0:52 making columns relative to one another in the browser. 0:56 This allows it to scale up and down fluidly. 0:59 Adaptive websites aren't necessarily built on a fluid grid. 1:02 They can also use a fixed grid and introduce media queries 1:07 to target specific device sizes 1:10 like smaller monitors, tablets, and smartphones. 1:12 Responsive websites are built on a fluid grid 1:15 and use media queries to control the design and its content 1:18 as it scales up or down with the browser or device. 1:21

You need to sign up for Treehouse in order to set up Workspace

Sign up