Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Responsive Design

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Responsive Design Principles

5: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 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.

Vocabulary

  • 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.

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

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

      Sign up