Introduction

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

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

Sign up