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

RWD: Dealing with navigation

0fe2973fa8d27d96547e43322341183a?s=47 Swwweet
February 13, 2013
Design
5
290

RWD: Dealing with navigation

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

0fe2973fa8d27d96547e43322341183a?s=128

Swwweet

February 13, 2013
Tweet

More Decks by Swwweet

See All by Swwweet
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
0
110
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
310
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
310
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.8k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
12
620
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
2
470
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
23
1.3k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
0
780
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
280

Other Decks in Design

See All in Design
2bb89bbc2299a709cd6098173026e923?s=48 datavisualizationjapan
0
100
67b668dc2594d034dee8e25098ce6d37?s=48 juanluisbravo
0
220
6581d0d2debbc8be5e4808cf46b4f104?s=48 kakukoki
0
200
2163d9d97279e1e5feef7eed6dbff59a?s=48 mmueno
0
380
9105c959cc559664a1c2a506cac28070?s=48 ajanart
0
380
12703c2561e45c51802855707969a9b0?s=48 antondraws
0
240
40baebcd09b478d3e28b5ba81df2b525?s=48 tiagilles
0
210
Aa6af9be6e75ea624bd188f7468f4f00?s=48 toshiharutakemoto
3
200
6dc9d93f9686439079e45277848c1d67?s=48 chadwickw
0
210
A8cc687a284d46de4ddb39fa7135c756?s=48 pinkfluffylion
0
140
F126c62320c208faf9abbeda8a6343dc?s=48 transit_kix
2
140
2481158a72219f42b701cf0fcef12971?s=48 rvillarreal
0
130

Featured

See All Featured
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
332
29k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
61k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.4k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.4k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
7
670
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
17k
Ba530e786553390f3fb271848485681c?s=48 3n
163
22k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
30
3.3k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
26
1.3k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
145
6.6k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
368
42k

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