1 00:00:00,000 --> 00:00:02,000 Hi, I'm Nick Pettit. 2 00:00:02,000 --> 00:00:05,000 Responsive web design is a dramatically different approach 3 00:00:05,000 --> 00:00:09,000 to designing web sites that uses a concept called fluid grids 4 00:00:09,000 --> 00:00:12,000 in combination with CSS3 media queries 5 00:00:12,000 --> 00:00:16,000 to create layouts that work across multiple screen resolutions. 6 00:00:16,000 --> 00:00:19,000 That's a lot of stuff, so we're going to break this down 7 00:00:19,000 --> 00:00:22,000 and take things 1 step at a time. 8 00:00:22,000 --> 00:00:26,000 In this master class, we're going to create all the low fidelity 9 00:00:26,000 --> 00:00:29,000 and high fidelity mockups that we'll need to 10 00:00:29,000 --> 00:00:32,000 eventually build a full project. 11 00:00:32,000 --> 00:00:59,000 [? Music ?] 12 00:00:59,000 --> 00:01:01,000 [Mockups for Responsive Design with Nick Pettit] 13 00:01:01,000 --> 00:01:06,000 Here we have our finished responsive web design project. 14 00:01:06,000 --> 00:01:12,000 This project is advertising an HTML5 geolocation app 15 00:01:12,000 --> 00:01:15,000 that was built in a previous master class, 16 00:01:15,000 --> 00:01:20,000 and there's a lot going on on this page, despite its simplistic look. 17 00:01:20,000 --> 00:01:23,000 If we go ahead and resize this page, 18 00:01:23,000 --> 00:01:26,000 you can see that we're using fluid grids 19 00:01:26,000 --> 00:01:30,000 to resize all of the individual elements, 20 00:01:30,000 --> 00:01:33,000 and we're also using CSS3 media queries 21 00:01:33,000 --> 00:01:38,000 to completely change the layout once we get down to small sizes. 22 00:01:38,000 --> 00:01:43,000 So, we have our very large 27-inch monitor desktop layout, 23 00:01:43,000 --> 00:01:47,000 and when we get down to a smaller size, 24 00:01:47,000 --> 00:01:52,000 this might be better for, say, an iPad or any other tablet device 25 00:01:52,000 --> 00:01:54,000 or a laptop. 26 00:01:54,000 --> 00:01:59,000 And then it will change 1 more time 27 00:01:59,000 --> 00:02:02,000 once we get down to this mobile size. 28 00:02:02,000 --> 00:02:05,000 And if we scroll down the page here, you can see that we have 29 00:02:05,000 --> 00:02:08,000 all the same elements, 30 00:02:08,000 --> 00:02:11,000 just in a little bit different arrangement. 31 00:02:11,000 --> 00:02:15,000 Now let's go ahead and take a look at the code. 32 00:02:15,000 --> 00:02:19,000 Here we have our project, and we have our HTML here, 33 00:02:19,000 --> 00:02:22,000 which is pretty standard stuff. 34 00:02:22,000 --> 00:02:25,000 We are using some HTML5 video, as you saw 35 00:02:25,000 --> 00:02:30,000 at the larger screen sizes 36 00:02:30,000 --> 00:02:34,000 here in the center of the page. 37 00:02:34,000 --> 00:02:38,000 And we also have several columns here, which we'll be talking about 38 00:02:38,000 --> 00:02:41,000 in just a little bit, so let's go ahead 39 00:02:41,000 --> 00:02:44,000 and look at the structure of this project. 40 00:02:44,000 --> 00:02:47,000 We have, of course, a CSS directory. 41 00:02:47,000 --> 00:02:52,000 And in the CSS directory, we have application.css, 42 00:02:52,000 --> 00:02:55,000 which is sort of our main CSS document 43 00:02:55,000 --> 00:02:59,000 which defines all of our reset styles and 44 00:02:59,000 --> 00:03:02,000 lots of other stuff on the page, our fluid grids, 45 00:03:02,000 --> 00:03:04,000 CSS3, and so on. 46 00:03:04,000 --> 00:03:08,000 We also have a responsive web design 47 00:03:08,000 --> 00:03:12,000 CSS document, which uses media queries 48 00:03:12,000 --> 00:03:18,000 to reset the layout when it gets down to smaller sizes. 49 00:03:18,000 --> 00:03:20,000 And we also have an Internet Explorer 9 style sheet, 50 00:03:20,000 --> 00:03:23,000 which just makes a few small corrections, 51 00:03:23,000 --> 00:03:27,000 an Internet Explorer 8 style sheet, which will actually help 52 00:03:27,000 --> 00:03:32,000 Internet Explorer 8 and 7 display this web site a little bit better. 53 00:03:32,000 --> 00:03:36,000 And finally, we have a Windows Mobile 7 style sheet, 54 00:03:36,000 --> 00:03:39,000 which we'll get into much later on. 55 00:03:39,000 --> 00:03:42,000 Now let's take a look at our images directory. 56 00:03:42,000 --> 00:03:46,000 We have a few static screen shots of the application, 57 00:03:46,000 --> 00:03:49,000 which are used at the smaller mobile sizes. 58 00:03:49,000 --> 00:03:53,000 We have a few icons here, which we saw used 59 00:03:53,000 --> 00:03:55,000 down towards the bottom of the site 60 00:03:55,000 --> 00:03:59,000 and a few other images that we'll be talking about later. 61 00:03:59,000 --> 00:04:02,000 And then finally, we have a videos folder 62 00:04:02,000 --> 00:04:05,000 that contains all of the different codecs we need 63 00:04:05,000 --> 00:04:08,000 for our HTML5 videos. 64 00:04:08,000 --> 00:04:12,000 Now, before we actually get started building this project, 65 00:04:12,000 --> 00:04:15,000 I should mention that it's going to work on a huge 66 00:04:15,000 --> 00:04:17,000 variety of devices. 67 00:04:17,000 --> 00:04:21,000 I'm just showing it in Google Chrome here for the sake of simplicity, 68 00:04:21,000 --> 00:04:24,000 but this site will also work in Firefox, 69 00:04:24,000 --> 00:04:28,000 Opera, Internet Explorer 7, 8 and 9, 70 00:04:28,000 --> 00:04:33,000 and it will also work in a wide variety of mobile devices. 71 00:04:33,000 --> 00:04:38,000 So, without further ado, let's go ahead and get started. 72 00:04:38,000 --> 00:04:41,000 For a very long time, the Web has been compared 73 00:04:41,000 --> 00:04:43,000 to print media. 74 00:04:43,000 --> 00:04:45,000 Many designers, myself included, 75 00:04:45,000 --> 00:04:49,000 felt the need to perfectly lay out a web page with all the elements 76 00:04:49,000 --> 00:04:52,000 placed in pixel perfect positions. 77 00:04:52,000 --> 00:04:56,000 For print media, this works great because typically 78 00:04:56,000 --> 00:05:00,000 you'll know the exact size of the page that you're printing on, 79 00:05:00,000 --> 00:05:04,000 the type of paper, ink, and printer that you're using, and so on. 80 00:05:04,000 --> 00:05:08,000 All the elements are known, so it's easy to go for 81 00:05:08,000 --> 00:05:10,000 a very rigid design. 82 00:05:10,000 --> 00:05:13,000 However, the Web is a very different beast. 83 00:05:13,000 --> 00:05:15,000 Screens can be all different resolutions, 84 00:05:15,000 --> 00:05:18,000 and browser windows can be all different sizes, 85 00:05:18,000 --> 00:05:20,000 and so there's no guarantee our pages 86 00:05:20,000 --> 00:05:23,000 are going to be displayed a certain way. 87 00:05:23,000 --> 00:05:25,000 For the past decade and then some, 88 00:05:25,000 --> 00:05:29,000 we as a community have been pretty shielded from this problem. 89 00:05:29,000 --> 00:05:33,000 When people really started thinking seriously about web design, 90 00:05:33,000 --> 00:05:37,000 most screens were just around 800 by 600, 91 00:05:37,000 --> 00:05:41,000 and then over the years, the resolution increased very slowly 92 00:05:41,000 --> 00:05:45,000 to about 1014 by 768, and so on. 93 00:05:45,000 --> 00:05:48,000 As you may have noticed, there's been a recent explosion 94 00:05:48,000 --> 00:05:50,000 in hardware. 95 00:05:50,000 --> 00:05:53,000 Screens are getting smaller and more mobile, 96 00:05:53,000 --> 00:05:59,000 and at the same time, they're getting larger with higher and higher resolutions. 97 00:05:59,000 --> 00:06:02,000 And then of course, there's everything in between with netbooks, 98 00:06:02,000 --> 00:06:07,000 tablets, and your average desktop computer. 99 00:06:07,000 --> 00:06:11,000 So, at every point along the spectrum of screen resolutions 100 00:06:11,000 --> 00:06:15,000 our fixed-width designs were either getting squeezed 101 00:06:15,000 --> 00:06:22,000 on to a mobile device or stretched across a giant desktop display. 102 00:06:22,000 --> 00:06:25,000 The traditional solution to this problem is to create 103 00:06:25,000 --> 00:06:29,000 a separate mobile site, and over the past few years, 104 00:06:29,000 --> 00:06:34,000 that's often meant a site designed specifically for the iPhone. 105 00:06:34,000 --> 00:06:36,000 Things have changed in a short period of time, 106 00:06:36,000 --> 00:06:39,000 and now not only are there a multitude of 107 00:06:39,000 --> 00:06:43,000 other mobile phone platforms that have excellent web browsers, 108 00:06:43,000 --> 00:06:48,000 there are also tablets, so what is a web designer to do? 109 00:06:48,000 --> 00:06:51,000 Make a site for every phone and every tablet? 110 00:06:51,000 --> 00:06:55,000 Well, obviously, there has to be a better solution. 111 00:06:55,000 --> 00:06:59,000 In March of 2009, Ethan Marcotte wrote an article 112 00:06:59,000 --> 00:07:04,000 for "A List Apart" outlining a concept he calls "fluid grids." 113 00:07:04,000 --> 00:07:07,000 The idea is to create a layout where all the elements 114 00:07:07,000 --> 00:07:11,000 are based on carefully calculated percentage widths. 115 00:07:11,000 --> 00:07:15,000 Fluid grids have not been tremendously popular 116 00:07:15,000 --> 00:07:18,000 over the past several years, so Ethan's idea shook up 117 00:07:18,000 --> 00:07:20,000 the web community a bit. 118 00:07:20,000 --> 00:07:22,000 However, as we'll discover, 119 00:07:22,000 --> 00:07:25,000 fluid grids are actually pretty cool. 120 00:07:25,000 --> 00:07:28,000 The calculations create unusual looking numbers, 121 00:07:28,000 --> 00:07:30,000 but they're actually pretty simple to understand. 122 00:07:30,000 --> 00:07:34,000 You take the pixel value of the element that you want to be fluid 123 00:07:34,000 --> 00:07:37,000 and then divide it by its parent element, 124 00:07:37,000 --> 00:07:40,000 or in other words, you take the target element 125 00:07:40,000 --> 00:07:42,000 divided by the context. 126 00:07:42,000 --> 00:07:44,000 This will give you a percentage value 127 00:07:44,000 --> 00:07:48,000 that you can then apply to your target element. 128 00:07:48,000 --> 00:07:51,000 Using this method for all your page elements, 129 00:07:51,000 --> 00:07:53,000 it's possible to create designs 130 00:07:53,000 --> 00:07:56,000 that scale proportionally when resized. 131 00:07:56,000 --> 00:08:00,000 Ethan built upon this idea with another 132 00:08:00,000 --> 00:08:04,000 "A List Apart" article he wrote in May of 2010. 133 00:08:04,000 --> 00:08:07,000 This next article was called "Responsive Web Design." 134 00:08:07,000 --> 00:08:11,000 And it changed the way that many people think about designing web sites 135 00:08:11,000 --> 00:08:14,000 for multiple screen resolutions. 136 00:08:14,000 --> 00:08:17,000 Responsive web design is the usage of fluid grids 137 00:08:17,000 --> 00:08:19,000 in combination with media queries. 138 00:08:19,000 --> 00:08:22,000 The media queries allow you to detect 139 00:08:22,000 --> 00:08:25,000 when the page is greater than, less than or equal to 140 00:08:25,000 --> 00:08:27,000 a specific width. 141 00:08:27,000 --> 00:08:30,000 With this information, you can then modify your CSS 142 00:08:30,000 --> 00:08:33,000 and make changes that are appropriate 143 00:08:33,000 --> 00:08:35,000 for a particular width. 144 00:08:35,000 --> 00:08:39,000 For example, when your site is squeezed down to a mobile browser, 145 00:08:39,000 --> 00:08:42,000 you might need to remove elements, rearrange elements, 146 00:08:42,000 --> 00:08:47,000 change font sizes, swap out page elements, and so on.