What's the Difference Between Fixed, Fluid, Adaptive, and Responsive Design?1:24 with Allison Grayce Marshall
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.
[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 download course files.Sign up