Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
590
5

RWD: Dealing with navigation

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

Avatar for Swwweet

Swwweet

February 13, 2013

More Decks by Swwweet

See All by Swwweet
Wonders from the Full Stack Fest website
Avatar for Swwweet swwweet
1
420
How to be the best web designer in the world.
Avatar for Swwweet swwweet
6
1.4k
Design for loading
Avatar for Swwweet swwweet
5
610
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
One Size Fits None
Avatar for Swwweet swwweet
12
940
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
790
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
690

Other Decks in Design

See All in Design
図書館書架のオンライン閲覧サービス 「honbaco library」の開発 Code4Lib JAPAN カンファレンス 2026
Avatar for SUGIMOTO Tatsuo sugi2000
0
130
Jun Wei | Information Design & Presentation Portfolio
Avatar for Wong Jun Wei wjw100788
PRO
0
170
凡庸を落とすハーネス
Avatar for Hiromi Maeo hiromimaeo
2
1k
東京都市大学 都市生活学部×一般社団法人オープン企画イベント　「誰もがデザイナーである」とはどういうことか？ 【エツィオ・マンズィーニ氏 特別来日・基調講演】
Avatar for Kimura Atsunobu a2k
1
150
20260802東京都市大学オープンキャンパス授業
Avatar for Kimura Atsunobu a2k
0
110
Bet AI Day 2026丨デザインハーネス：専門職の判断基準をコードのように運用する
Avatar for LayerX layerx
PRO
6
7.5k
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
340
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
Avatar for Cygames, Inc. cygames
PRO
2
1.6k
HeartLanguage - DesignProcess
Avatar for HeartLanguage heartlanguage
0
270
Kouseki | CREATIVE CLASS成果物
Avatar for Yurika Ishida yuri9911
0
260
Luna's Light
Avatar for Sheena shemeetscity
0
680
設計の進め方と 品質特性品質特性
Avatar for harachan harakeishi
0
1.4k

Featured

See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.7k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
3.5k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3.2k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
370
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
720
Music & Morning Musume
Avatar for Bryan Veloso bryan
48
7.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.7k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
420
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
28k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
650

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