Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RWD: Dealing with navigation

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Swwweet Swwweet
February 13, 2013
Design
5
550

RWD: Dealing with navigation

Presentation by @htmlboy at #webcat, Barcelona, February 2013.

Avatar for Swwweet

Swwweet

February 13, 2013
Tweet

More Decks by Swwweet

See All by Swwweet
Wonders from the Full Stack Fest website
Avatar for Swwweet swwweet
1
370
How to be the best web designer in the world.
Avatar for Swwweet swwweet
6
1.3k
Design for loading
Avatar for Swwweet swwweet
5
560
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
One Size Fits None
Avatar for Swwweet swwweet
12
900
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
740
Responsively Responsive
Avatar for Swwweet swwweet
23
1.7k
La letra con píxel entra
Avatar for Swwweet swwweet
0
1.2k
The future of code
Avatar for Swwweet swwweet
4
630

Other Decks in Design

See All in Design
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
230
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
2
630
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
720
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
360
Emmy's Artwork
Avatar for McKenna mcksmith
0
210
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
3
190
kintone Style Book
Avatar for kintone kintone
6
12k
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
120
次世代のクリエイティブ体験！Photoshopの最新機能で新しい未来を切り開こう
Avatar for コネクリ connecre
0
120
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
240
2026_01_07_３DプリントはじめましたLT.pdf
Avatar for HideakiTakechi hideakitakechi
0
130
hicard_credential_202601
Avatar for hicard hicard
0
200

Featured

See All Featured
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
170
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
640
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
120
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
3
390
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
Design in an AI World
Avatar for tapps tapps
0
170
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k

Transcript

  1. RWD: DEALING WITH NAVIGATION Javier Usobiaga #Webcat

  2. of a multipurpose navigation UTOPIA The

  3. THE MYTH OF MOBILE & DESKTOP

  4. MOBILE Link Link Link Link Link Link

  5. DESKTOP Link Link Link Link Link

  6. WTFABLET Link Link Link Link Link

  7. RWD is about MID SCREENS

  8. Mobile first; & desktop, & EVERYTHING ELSE

  9. RESPONSIVE NAVIGATION PATTERNS

  10. None

  11. bit.ly/rwd-nav

  12. None

  13. bit.ly/rwd-nav2

  14. THE JAVASCRIPT MYTH

  15. We don't have any non-JavaScript users” No, all your users

    are non-JS while they're downloading your JS Jake Archibald “
  16. None
  17. None

  18. UNFOLDED by default

  19. None

  20. MESSY by default

  21. None

  22. FAST vs COMPACT

  23. Design for LOADING

  24. Luke Wroblewsky Content first, navigation second.

  25. FOOTER loading

  26. content content Link

  27. Javascript ENHANCEMENT

  28. content Link Link Link Link Link Link

  29. Desktop AWKARDNESS

  30. content content Link Link Link Link Link content

  31. Filters Filters Filters Filters search result search result search result

    Filters

  32. Desktop CSS FIXING

  33. content content nav{position: absolute;} content

  34. #results{ float: right;} search result search result search result #filters{

    float: left;}

  35. SUMMING UP

  36. Navigation is a CORE ELEMENT in the design process

  37. As web designers, we need to polish our JS SKILLS

  38. But if we only rely in JS, we’re doing it

    WRONG

  39. THANKS! Javier Usobiaga @htmlboy