1
00:00:00,000 --> 00:00:02,400
[treehouse presents]

2
00:00:02,400 --> 00:00:05,730
[What's the Difference Between Fixed, Fluid, Adaptive and Responsive Web Design? with Allison Grayce]

3
00:00:05,730 --> 00:00:07,310
Formulas are one thing,

4
00:00:07,310 --> 00:00:09,490
but allowing yourself to adapt to this new way of designing

5
00:00:09,490 --> 00:00:11,990
is a whole new concept to get used to.

6
00:00:11,990 --> 00:00:14,210
As a web designer, it’s important you embrace

7
00:00:14,210 --> 00:00:16,830
that your website is going to look different in various browsers

8
00:00:16,830 --> 00:00:19,060
and on different devices.

9
00:00:19,060 --> 00:00:22,210
Forget about trying to make your website look the same in every browser and device.

10
00:00:22,210 --> 00:00:24,620
And focus instead on allowing your website

11
00:00:24,620 --> 00:00:28,140
to break, mold, and conform to the size and dimensions

12
00:00:28,140 --> 00:00:30,740
your user wants to experience it at.

13
00:00:30,740 --> 00:00:33,080
So we've been throwing around a lot of buzz words

14
00:00:33,080 --> 00:00:36,470
like fixed, fluid, adaptive, and responsive,

15
00:00:36,470 --> 00:00:38,910
but these words aren't interchangeable.

16
00:00:38,910 --> 00:00:41,740
Let's break them down and make sure we understand the difference

17
00:00:41,740 --> 00:00:44,360
between them before we dive into the code.

18
00:00:44,360 --> 00:00:46,330
Fixed website have a set width,

19
00:00:46,330 --> 00:00:49,680
and resizing the browser or viewing on a different device

20
00:00:49,680 --> 00:00:52,580
won't have an effect on the way your website looks.

21
00:00:52,580 --> 00:00:56,010
Fluid website are built using percentages for widths,

22
00:00:56,010 --> 00:00:59,250
making columns relative to one another in the browser.

23
00:00:59,250 --> 00:01:02,670
This allows it to scale up and down fluidly.

24
00:01:02,670 --> 00:01:07,170
Adaptive websites aren't necessarily built on a fluid grid.

25
00:01:07,170 --> 00:01:10,590
They can also use a fixed grid and introduce media queries

26
00:01:10,590 --> 00:01:12,500
to target specific device sizes

27
00:01:12,500 --> 00:01:15,660
like smaller monitors, tablets, and smartphones.

28
00:01:15,660 --> 00:01:18,930
Responsive websites are built on a fluid grid

29
00:01:18,930 --> 00:01:21,840
and use media queries to control the design and its content

30
00:01:21,840 --> 00:01:24,650
as it scales up or down with the browser or device.