Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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
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