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

RWD: Dealing with navigation

Avatar for Swwweet Swwweet
February 13, 2013
Design
5
500

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
330
How to be the best web designer in the world.
Avatar for Swwweet swwweet
6
1.2k
Design for loading
Avatar for Swwweet swwweet
5
500
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
One Size Fits None
Avatar for Swwweet swwweet
12
850
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
710
Responsively Responsive
Avatar for Swwweet swwweet
23
1.6k
La letra con píxel entra
Avatar for Swwweet swwweet
0
1.1k
The future of code
Avatar for Swwweet swwweet
4
580

Other Decks in Design

See All in Design
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
Avatar for Andrew Shapiro ashapiro
0
240
マンガで分かるサービスデザインガイドライン
Avatar for デジタルサービス局戦略部 senryakuka
1
890
事例で学ぶ！今日から使えるWebサービスUI改善ポイント
Avatar for NCDC ncdc
0
140
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
630
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
Avatar for keita keita_yoshikawa
0
120
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
490
AI時代に淘汰されないデザインのしごと
Avatar for Akinen akinen
0
120
Haley's adventure chase
Avatar for Ivette Molina ivettetwin
0
220
Cards | Storyboards
Avatar for Gio Fortunato giofortuna_story
0
270
私とデザインの10年
Avatar for なつ iflection
0
130
Fem tips om ux-text • WSA-dagen 29 jan 2025
Avatar for Jonas Söderström jonas_blind_hen
PRO
0
180
250131_product meetup
Avatar for Motoko Ishida motokoishida
0
210

Featured

See All Featured
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.4k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k

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