Responsive Web Design for a “Squishy Web”

How do we adapt our web designs into responsive websites with webpage breakpoints? Follow along as Catherine explores responsive web design, design hierarchy, and priority plus navigation.

Want more? Find the accompanying article on The Foundry: https://sparkbox.com/foundry/responsive_web_design_responsive_web_breakpoints_hierarchy_design_priority_plus_navigation

Check out more by Catherine: https://sparkbox.com/foundry/author/Catherine_Meade

0:00 What is Responsive Web Design?
1:36 Breakpoints & Resizing the window for “Squish”
4:36 Design Hierarchy: Developing Mobile-First, Responsively
10:10 Priority Plus Navigation
12:30 Question: How do we decide when to add breakpoints?
15:48 Reading Design Spec
19:08 Choosing When to Add and Hide Content
22:00 Codepen.io and CSS Units
31:36 Question: How in the world do I style `line-height`?
34:35 Codepen Demo