Navigation for responsive websites
Navigation for responsive websites
Brandon Neil / @brandonneil and Adam Delaney Web Application Developers The University of Iowa
Navigation is hard
Responsive Web Design is hard
Responsive Navigation is hard
Resources
Brad Frost, FTW
- Responsive Navigation Patterns:http://bradfrostweb.com/blog/web/responsive-nav-patterns/
- Complex Navigation Patterns for Responsive Design:http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
- Responsive Patterns: Navigation:http://bradfrost.github.io/this-is-responsive/patterns.html
Stacked Top Links
http://learningcommons.uiowa.edu/
Pros
- Easy to implement
- More touch-friendly than the top links pattern
Cons
- Height issues
http://codepen.io/bradfrost/full/vcuem
Footer Anchor
http://dining.uiowa.edu
Pros
- Easy to implement
- No Javascript dependency
- Little CSS work required to scale up
- Single button in header
Cons
- Anchor jump can be awkward/disorienting
- Not so elegant
http://codepen.io/bradfrost/full/mlyvu
Select Menu
http://fye.uiowa.edu
Pros
- Frees up plenty of space
- Easily Recognizable
- Pulls up native controls
Cons
- Lack of styling control
- Potentially confusing
- Handling subnav items
- Javascript dependency
Drupal.org: Tinynav.js Project
http://codepen.io/bradfrost/full/hkuzA
Toggle Navigation
http:/2013.drupalcorn.org
Pros
- Keeps the user in place
- Elegant
- Easy to scale up
Cons
- Animation performance
- Javascript dependency
Drupal.org: Responsive Nav Project