Responsive Navigation

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