Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Navigation for large sites on small screens Donna Spencer - Maadmob (@maadonna)
Slide 2
Slide 2 text
About me Card%sor(ng How%to%write%great% copy%for%the%web A%prac(cal%guide%to% informa(on%architecture
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Navigation from first principles
Slide 6
Slide 6 text
Global navigation
Slide 7
Slide 7 text
• Persistent • Visible • Shows what the site covers • Provides access to the main sections of the site Global navigation
Slide 8
Slide 8 text
Mega-menus
Slide 9
Slide 9 text
Mega-menus
Slide 10
Slide 10 text
• Show what’s available • Jump to a section without navigating everything in between Mega-menus
Slide 11
Slide 11 text
Local navigation
Slide 12
Slide 12 text
Local navigation
Slide 13
Slide 13 text
Related
Slide 14
Slide 14 text
• Show things they may be interested in that are in other sections Related
Slide 15
Slide 15 text
Content
Slide 16
Slide 16 text
Mobile navigation examples
Slide 17
Slide 17 text
Global navigation only
Slide 18
Slide 18 text
Starbucks
Slide 19
Slide 19 text
Smashing magazine
Slide 20
Slide 20 text
Smashing magazine
Slide 21
Slide 21 text
O’Neill clothing
Slide 22
Slide 22 text
O’Neill clothing
Slide 23
Slide 23 text
Sony
Slide 24
Slide 24 text
Sony
Slide 25
Slide 25 text
Local navigation examples
Slide 26
Slide 26 text
Canberra Times
Slide 27
Slide 27 text
Canberra Times
Slide 28
Slide 28 text
Boston Globe
Slide 29
Slide 29 text
ANU
Slide 30
Slide 30 text
Confab
Slide 31
Slide 31 text
Side nav
Slide 32
Slide 32 text
Related links
Slide 33
Slide 33 text
My solution
Slide 34
Slide 34 text
All of it!
Slide 35
Slide 35 text
Thanks • http://maadmob.com.au/ • +61 409-778-693 •
[email protected]
• Twitter etc: maadonna