1 00:00:08,706 --> 00:00:11,220 Hi, my name is Anwar. 2 00:00:11,220 --> 00:00:14,920 I'm a designer, a developer, and a teacher at Treehouse. 3 00:00:14,920 --> 00:00:16,210 My pronouns are he/him. 4 00:00:16,210 --> 00:00:20,060 In this workshop, we'll be discussing responsive design, 4 00:00:20,060 --> 00:00:24,660 where content renders well and remains usable 5 00:00:24,660 --> 00:00:27,620 on a variety of devices and viewport sizes. 6 00:00:28,750 --> 00:00:32,980 On previous projects, you may have been asked to design with a specific 7 00:00:32,980 --> 00:00:37,410 screen in mind, whether a desktop, tablet, or mobile device. 8 00:00:38,470 --> 00:00:40,980 And sometimes, especially when designing for 9 00:00:40,980 --> 00:00:43,830 a mobile app, this approach can be appropriate. 10 00:00:45,025 --> 00:00:49,854 For websites, however, it's usually best to work with a single design and 11 00:00:49,854 --> 00:00:53,790 consider how that design transitions from screen to screen. 12 00:00:55,157 --> 00:00:59,750 Here's a gallery of award-winning responsive websites. 13 00:00:59,750 --> 00:01:02,370 Let's check some out to see what they have in common. 14 00:01:04,395 --> 00:01:09,640 CSS Tricks is a great resource for articles on web development and design. 15 00:01:10,810 --> 00:01:14,300 On a larger screen columns of body copy move to the side 16 00:01:14,300 --> 00:01:19,310 to make room for ad banners. But on mobile, 17 00:01:20,330 --> 00:01:24,980 the banners disappear and the body copy occupies the entire screen. 18 00:01:26,610 --> 00:01:30,500 There's not much room for navigation on a mobile screen, so 19 00:01:30,500 --> 00:01:34,150 the tab bar gets hidden behind a menu icon 19 00:01:34,150 --> 00:01:37,150 and the search bar is replaced by a single icon 20 00:01:37,150 --> 00:01:40,915 that can show or hide the search input with a tap. 21 00:01:42,915 --> 00:01:47,560 The personal site of Ethan Marcotte is featured here as well. 22 00:01:48,610 --> 00:01:52,830 His site has a lot in common with CSS Tricks. 23 00:01:52,830 --> 00:01:55,560 The columns of body copy on the larger screen 23 00:01:55,560 --> 00:01:59,360 move towards the middle and make room for white space, 24 00:01:59,360 --> 00:02:04,366 while they again occupy the entire screen on mobile. 25 00:02:04,366 --> 00:02:08,180 And while Ethan's navigation is smaller and lacks 25 00:02:08,180 --> 00:02:11,480 a search feature, it once again gets collapsed 26 00:02:11,480 --> 00:02:14,680 under a menu icon on a mobile screen. 27 00:02:16,530 --> 00:02:20,620 It's no surprise that Ethan Marcotte's site is featured in 28 00:02:20,620 --> 00:02:22,545 a gallery of responsive websites. 29 00:02:22,545 --> 00:02:27,910 Marcotte is credited with coining the term "responsive design" 30 00:02:27,910 --> 00:02:32,285 in an article for A List Apart back in 2010. 31 00:02:32,285 --> 00:02:35,460 Marcotte identified three components 31 00:02:35,460 --> 00:02:38,760 as key to creating a responsive website. 32 00:02:40,760 --> 00:02:45,790 Fluid grids: on phones, there's only room for one column 33 00:02:45,790 --> 00:02:50,320 of body copy, which extends all the way across the screen. 34 00:02:50,320 --> 00:02:54,190 On tablet and desktop screens, designers can base their designs 34 00:02:50,320 --> 00:02:57,490 on a multi-column grid layout that can 35 00:02:57,490 --> 00:03:01,670 expand or contract based on the width of the device. 36 00:03:03,502 --> 00:03:07,333 Flexible images: images should expand or contract 36 00:03:07,333 --> 00:03:10,030 along with your responsive grid. 37 00:03:11,952 --> 00:03:15,220 Media queries: media queries are CSS rules 38 00:03:15,220 --> 00:03:19,360 that get implemented under certain conditions. 39 00:03:19,360 --> 00:03:23,690 For example, you might want to switch from a one column layout to a 40 00:03:23,690 --> 00:03:28,720 multi-column version, only when the screen is wider than 600 pixels. 41 00:03:29,820 --> 00:03:33,333 When media queries are used to change site layout based on 42 00:03:33,333 --> 00:03:37,450 device width, this is known as a breakpoint. 43 00:03:37,450 --> 00:03:42,290 Typically, designers and developers will start with a mobile layout. 44 00:03:42,290 --> 00:03:47,170 A mobile design might look great at 320 pixels but let's say 45 00:03:47,170 --> 00:03:53,410 that by 600 pixels the columns of body copy have grown too wide for 46 00:03:53,410 --> 00:03:59,430 optimum legibility. 600 pixels would be considered the breakpoint. 47 00:03:59,430 --> 00:04:05,454 Any devices wider than 600 pixels would see a different version of the design. 48 00:04:05,454 --> 00:04:10,900 From there, we could keep expanding the design until it breaks again. 49 00:04:10,900 --> 00:04:14,570 At 960 pixels, we might have room for a column 50 00:04:14,570 --> 00:04:19,680 of advertisements that didn't fit on a smaller viewport. 51 00:04:19,680 --> 00:04:25,030 960 pixels becomes the next breakpoint, where the design changes again. 52 00:04:26,240 --> 00:04:30,820 I mentioned that it's usually best to solve for mobile screens first. 53 00:04:30,820 --> 00:04:32,055 This has a few benefits. 54 00:04:34,567 --> 00:04:38,072 Solving for a smaller screen first helps you identify 55 00:04:38,072 --> 00:04:42,368 what content is most critical. You might have 56 00:04:42,368 --> 00:04:46,486 decorative elements or sidebar information that works fine 57 00:04:46,486 --> 00:04:50,085 on a larger screen but can be omitted from mobile view. 58 00:04:51,485 --> 00:04:55,271 Loading only what's absolutely necessary on a mobile 59 00:04:55,271 --> 00:04:59,755 screen means your mobile version will load faster. 60 00:04:59,755 --> 00:05:04,696 Mobile users are typically only willing to wait about three seconds 61 00:05:04,696 --> 00:05:08,435 for the primary page content to load before bailing out. 62 00:05:10,135 --> 00:05:14,720 Finally, since fitting navigation schemes onto a small screen 63 00:05:14,720 --> 00:05:18,370 is a tough task, working mobile first forces you 64 00:05:18,370 --> 00:05:22,070 to solve complex navigation challenges right away.