Responsive Design Principles5:22 with Anwar Montasir
In this workshop, we’ll be discussing responsive design, where content renders well and remains usable on a variety of devices and viewport sizes. On previous projects, you may have been asked to design with a specific screen in mind, whether a desktop, tablet, or mobile device. And sometimes, especially when designing for a mobile app, this approach can be appropriate. For websites, however, it’s usually best to work with a single design and consider how that design transitions from screen to screen.
Responsive design: A design strategy where content renders well and remains usable on a variety of devices and viewport sizes.
Media queries: CSS rules that get implemented under certain conditions, such as when the viewport is at least a certain number of pixels wide.
Breakpoint: a place where media queries are used to change site layout based on device width.
Hi, my name is Anwar. 0:08 I'm a designer, a developer, and a teacher at Treehouse. 0:11 My pronouns are he/him. 0:14 In this workshop, we'll be discussing responsive design, 0:16 where content renders well and remains usable 0:20 on a variety of devices and viewport sizes. 0:24 On previous projects, you may have been asked to design with a specific 0:28 screen in mind, whether a desktop, tablet, or mobile device. 0:32 And sometimes, especially when designing for 0:38 a mobile app, this approach can be appropriate. 0:40 For websites, however, it's usually best to work with a single design and 0:45 consider how that design transitions from screen to screen. 0:49 Here's a gallery of award-winning responsive websites. 0:55 Let's check some out to see what they have in common. 0:59 CSS Tricks is a great resource for articles on web development and design. 1:04 On a larger screen columns of body copy move to the side 1:10 to make room for ad banners. But on mobile, 1:14 the banners disappear and the body copy occupies the entire screen. 1:20 There's not much room for navigation on a mobile screen, so 1:26 the tab bar gets hidden behind a menu icon 1:30 and the search bar is replaced by a single icon 1:34 that can show or hide the search input with a tap. 1:37 The personal site of Ethan Marcotte is featured here as well. 1:42 His site has a lot in common with CSS Tricks. 1:48 The columns of body copy on the larger screen 1:52 move towards the middle and make room for white space, 1:55 while they again occupy the entire screen on mobile. 1:59 And while Ethan's navigation is smaller and lacks 2:04 a search feature, it once again gets collapsed 2:08 under a menu icon on a mobile screen. 2:11 It's no surprise that Ethan Marcotte's site is featured in 2:16 a gallery of responsive websites. 2:20 Marcotte is credited with coining the term "responsive design" 2:22 in an article for A List Apart back in 2010. 2:27 Marcotte identified three components 2:32 as key to creating a responsive website. 2:35 Fluid grids: on phones, there's only room for one column 2:40 of body copy, which extends all the way across the screen. 2:45 On tablet and desktop screens, designers can base their designs 2:50 on a multi-column grid layout that can 2:50 expand or contract based on the width of the device. 2:57 Flexible images: images should expand or contract 3:03 along with your responsive grid. 3:07 Media queries: media queries are CSS rules 3:11 that get implemented under certain conditions. 3:15 For example, you might want to switch from a one column layout to a 3:19 multi-column version, only when the screen is wider than 600 pixels. 3:23 When media queries are used to change site layout based on 3:29 device width, this is known as a breakpoint. 3:33 Typically, designers and developers will start with a mobile layout. 3:37 A mobile design might look great at 320 pixels but let's say 3:42 that by 600 pixels the columns of body copy have grown too wide for 3:47 optimum legibility. 600 pixels would be considered the breakpoint. 3:53 Any devices wider than 600 pixels would see a different version of the design. 3:59 From there, we could keep expanding the design until it breaks again. 4:05 At 960 pixels, we might have room for a column 4:10 of advertisements that didn't fit on a smaller viewport. 4:14 960 pixels becomes the next breakpoint, where the design changes again. 4:19 I mentioned that it's usually best to solve for mobile screens first. 4:26 This has a few benefits. 4:30 Solving for a smaller screen first helps you identify 4:34 what content is most critical. You might have 4:38 decorative elements or sidebar information that works fine 4:42 on a larger screen but can be omitted from mobile view. 4:46 Loading only what's absolutely necessary on a mobile 4:51 screen means your mobile version will load faster. 4:55 Mobile users are typically only willing to wait about three seconds 4:59 for the primary page content to load before bailing out. 5:04 Finally, since fitting navigation schemes onto a small screen 5:10 is a tough task, working mobile first forces you 5:14 to solve complex navigation challenges right away. 5:18
You need to sign up for Treehouse in order to download course files.Sign up