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

Well done!

You have completed Responsive Design!

Sign up for Treehouse Back to Library

Responsive Navigation

4:14 with Anwar Montasir

In our previous video, we defined breakpoints as a place where media queries are used to change site layout based on device width. And we determined that a great way to establish breakpoints is to design for mobile-first, then expand the viewport width until the design breaks. But what does that mean, exactly? How do we determine that our design is no longer effective at a particular viewport width? For the most part, there are two types of changes we’ll implement as our screen expands horizontally, starting with changes to the navigation.

Vocabulary

  • Priority Plus: describes navigation that exposes the most important navigation elements and hides less important items behind a “more” link.

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

    In our previous video, we defined breakpoints as a place where 0:00
    media queries are used to change site layout based on device width. 0:05
    And we determined that a great way to establish breakpoints 0:10
    is to design for mobile first, 0:13
    then expand the viewport width until the design breaks. 0:16
    But what does that mean exactly? 0:21
    How do we determine that our design is 0:23
    no longer effective at a particular viewport width? 0:26
    For the most part, there are two types of changes we'll implement 0:30
    as our screen expands horizontally, 0:34
    starting with changes to the navigation. 0:36
    When it comes to navigation, the best pattern for sites and 0:40
    apps with three to five primary sections is the tab bar. 0:45
    Users recognize it quickly, and it can be kept on the bottom of 0:50
    mobile screens to be easily reached by the user's thumb. 0:55
    For navigations that include more than five primary sections, 0:59
    however, you're likely to find yourself weighing the pros and 1:04
    cons of using a hamburger icon to reveal navigation options. 1:08
    This icon has been used on the web for over a decade. 1:14
    So if it's designed well, users should recognize its function, 1:18
    and it's definitely a space saver. 1:23
    However, this method of navigation reduces discoverability. 1:26
    If a link is hidden when the page loads, 1:32
    it can't grab the user's attention. 1:34
    Variations of this pattern include using the burger menu 1:39
    for secondary functionality only. 1:44
    Here in Lyft's mobile app, my main task is booking a ride, 1:47
    so features for finding a car dominate the screen. 1:52
    If I'd like to view my ride history or update my payment information, 1:57
    that's secondary, and I'll tap the burger icon to do that. 2:03
    News websites like The Guardian and The Boston Globe 2:09
    use a pattern called Priority Plus, where the number of visible 2:13
    navigation options depends on the width of the screen. 2:18
    The Guardian keeps its most important categories visible at all times– 2:23
    News, Opinion, Sport, Culture and Lifestyle–while 2:29
    subcategories and additional links are hidden beneath a collapsible menu. 2:34
    The browser's element inspector lets you observe breakpoints in action. 2:41
    For example, The Guardian keeps its yellow burger nav button 2:47
    up next to the logo on very small screens. 2:52
    Around 360 pixels, that icon gets moved down into the nav bar, 2:56
    as there's sufficient space for it. 3:03
    The next change occurs around 740 pixels, where the header 3:07
    becomes more elaborate and a banner ad appears above the nav. 3:11
    And around 980 pixels, the burger icon is 3:19
    replaced with the word More and a down arrow. 3:24
    The Boston Globe, meanwhile, uses only a burger nav icon, 3:29
    until a dramatic change around 660 pixels. 3:36
    The burger icon is still there, but we now 3:42
    see a few important news categories and trending topics, and 3:45
    there are now two columns of news below the navigation. 3:51
    As the screen expands further, the nav doesn't really change again, 3:56
    other than revealing more items in the Priority Plus pattern. 4:01
    But around 960 pixels a third column of news appears. 4:06

    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