A look at navigation and global menus in responsive website design. Presented at the Responsive Day Out conference, 1st March, Brighton, UK.
“Responsive Navigation”David Bushell@dbushell
View Slide
MacBook Air © Koy Carraway
Nexus 4 © slaveoffearCeci n'est pas responsive.
Touch Gesture Icons © Mobile Tuxedo
14% “mobile”Data for dbushell.com March 2012–2013
42% iPhone18% iPad40%?258 other devicesData for dbushell.com March 2012–2013
viewportIcons © Lachèze Alexandre, James Fenton (from The Noun Project)
/via @StuRobson
Any attempt to draw a line around a particulardevice class has as much permanenceas a literal line in the sand. ”— Jason Grigsby“
Content…
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Donec venenatis posuerediam, eu feugiat loremadipiscing ac. Praesent liberojusto, auctor feugiat tempor a,venenatis lacinia nunc. Loremipsum dolor sit amet,consectetur adipiscing elit.Etiam eget sapien velit, acmattis enim. Lorem ipsumdolor sit amet, consecteturadipiscing elit. Nullavestibulum risus sed puruspellentesque et consequat mitristique. In sed sapien inmagna placerat rutrum id quislibero. Vivamus sit amet estnec lorem fermentum faucibusac at lectus.Lorem ipsum dolor sit amet,consectetur adipiscing elit.Donec venenatis posuere diam,eu feugiat lorem adipiscingac. Praesent libero justo,auctor feugiat tempor a,venenatis lacinia nunc. Loremipsum dolor sit amet,consectetur adipiscing elit.Etiam eget sapien velit, acmattis enim. Lorem ipsumdolor sit amet, consecteturadipiscing elit. Nullavestibulum risus sed puruspellentesque et consequat mitristique. In sed sapien inmagna placerat rutrum id quislibero. Vivamus sit amet estnec lorem fermeLorem ipsum dolor sitamet, consecteturadipiscing elit. Donecvenenatis posuerediam, eu feugiat loremadipiscing ac.Praesent liberojusto, auctor feugiattempor a, venenatislacinia nunc. Loremipsum dolor sit amet,consecteturadipiscing elit. Etiameget sapien velit, acmattis enim. Loremipsum dolor sit amet,consectetur adipiscing elit. Nulla vest ibulumRedacted font © Christian Naths
MouseKeyboardTouchpadTouchscreenStylusVoiceMovementRemoteGamepad
clickenterpickpointpressselecttaptouch1
A not so good example…
Keep it simple…
But don’t let it take over…
Hide and reveal…
Minor breakpoints…
Multiple tiers…
Overlay…
Go off-canvas…
Jump to “big footer”…
But don’t be clever…
“Table of contents”…
• Underload the global menu• Embrace the viewport• Design with affordance in mind
• Interactive friction varies• Enhance from the canonical action• Feature detection ≠ preferred usage
• Focus on discoverability (beyond menus)• Know your content hierarchy• Single point of navigation = single point of failure
bit.ly/offcanvasbit.ly/TIRWD
It seems that perfection is attained not whenthere is nothing more to add, but when thereis nothing more to remove. ”— Antoine de Saint-Exupéry“
Thank you!@dbushell