1 00:00:00,000 --> 00:00:02,120 [treehouse presents] 2 00:00:02,120 --> 00:00:05,890 [Why Responsive Web Design? with Allison Grayce] 3 00:00:05,890 --> 00:00:07,750 What exactly is a responsive website, 4 00:00:07,750 --> 00:00:09,910 and why do we need to make one? 5 00:00:09,910 --> 00:00:12,210 Some years ago there was a clear differentiation 6 00:00:12,210 --> 00:00:14,270 between desktop and mobile. 7 00:00:14,270 --> 00:00:16,640 We'd have a computer and a smartphone, 8 00:00:16,640 --> 00:00:19,040 a desktop website and a mobile website. 9 00:00:19,040 --> 00:00:21,050 But with the introduction of tablets 10 00:00:21,050 --> 00:00:23,860 and tons of new internet accessible technologies, 11 00:00:23,860 --> 00:00:26,200 we've been faced with designing for more 12 00:00:26,200 --> 00:00:29,200 monitor resolutions and devices than ever before. 13 00:00:29,200 --> 00:00:31,520 By embracing responsive web design, 14 00:00:31,520 --> 00:00:34,060 we're able to create a website that is flexible 15 00:00:34,060 --> 00:00:36,660 and fits beautifully into all of these devices 16 00:00:36,660 --> 00:00:39,030 rather than trying to create and maintain 17 00:00:39,030 --> 00:00:41,260 individual websites for each device. 18 00:00:41,260 --> 00:00:43,450 So this all sounds awesome, 19 00:00:43,450 --> 00:00:45,010 but how do we create a responsive website? 20 00:00:45,010 --> 00:00:48,600 Responsive websites are built on a flexible, fluid grid 21 00:00:48,600 --> 00:00:51,790 that adapts to the browser or device that renders the website. 22 00:00:51,790 --> 00:00:55,060 As you can see, when we drag the corners of this website, 23 00:00:55,060 --> 00:00:57,800 they layout and images scale down as we go. 24 00:01:00,310 --> 00:01:02,860 Notice when we do the same thing to the Smells Like Bakin' website, 25 00:01:02,860 --> 00:01:07,030 however, it remains centered and fixed to the middle of the browser. 26 00:01:07,030 --> 00:01:10,240 That's because the first website is built on a fluid grid 27 00:01:10,240 --> 00:01:12,950 using percentages for widths instead of pixels 28 00:01:12,950 --> 00:01:15,190 like we used in the Smells Like Bakin' website. 29 00:01:15,190 --> 00:01:19,560 Creating a fluid foundation is the first step to creating a responsive website. 30 00:01:19,560 --> 00:01:23,510 We do this first by taking our completed website comp, 31 00:01:23,510 --> 00:01:26,360 and when we're ready to turn it into a working website, 32 00:01:26,360 --> 00:01:29,810 instead of using exact pixel widths for the columns in our website, 33 00:01:29,810 --> 00:01:31,760 we interpret them with percentages 34 00:01:31,760 --> 00:01:34,810 in relative proportional terms to one another. 35 00:01:34,810 --> 00:01:37,770 While there's absolutely nothing wrong with a fixed layout, 36 00:01:37,770 --> 00:01:41,270 a responsive website will create a version of the same website 37 00:01:41,270 --> 00:01:43,820 that can stretch and resize with the browser. 38 00:01:43,820 --> 00:01:47,370 This makes sure that your website adapts to whatever size browser 39 00:01:47,370 --> 00:01:50,150 or device your user might be viewing your website in. 40 00:01:50,150 --> 00:01:53,100 Notice again when we drag the corners of this website, 41 00:01:53,100 --> 00:01:55,390 when we get to a specific width, 42 00:01:55,390 --> 00:01:57,720 the website snaps into a different layout. 43 00:01:57,720 --> 00:02:00,590 This is achieved using media queries. 44 00:02:00,590 --> 00:02:03,860 Media queries allow us to target specific widths 45 00:02:03,860 --> 00:02:05,320 where our layout begins to break 46 00:02:05,320 --> 00:02:08,090 or starts to look a little squished or tight. 47 00:02:08,090 --> 00:02:10,740 They also allow us to take control over our fluid layout 48 00:02:10,740 --> 00:02:14,570 and target specific devices like tablets and smartphones. 49 00:02:14,570 --> 00:02:17,130 We'll talk more about media queries in a later stage 50 00:02:17,130 --> 00:02:19,340 and learn how we can use them to get the same effect 51 00:02:19,340 --> 00:02:21,090 on our Smells Like Bakin' website.