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
96
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
290
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
310
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
204
6.7k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
12
610
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
2
470
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
24
1.3k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
0
770
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
270

Other Decks in Design

See All in Design
82414e7232f1483734d998f5c2e4f346?s=48 misaaa09
0
850
D9085296dd20f6b8bda8a083e39d1d7a?s=48 mcevel
0
180
1072d6756bbb658ad814bd2e92d8101c?s=48 nominochir
1
120
Dab2423d06b31e4f3df80052b3faaa25?s=48 apolthomaier
0
540
Dab2423d06b31e4f3df80052b3faaa25?s=48 apolthomaier
0
130
1777ae7e124a0cadd15d9f88d871c963?s=48 toranomanji
0
150
16bd45a651536942b63434b59bf3415e?s=48 elevenlines
23
9k
12a87a7a977d621dd0029eee87846fd7?s=48 youjisakai
0
120
07e2c6335be6197e2b2c9c8607ecb0ba?s=48 cassidypierce
0
250
Fcd0a635b9bdca525510839713b80103?s=48 supergabs
1
110
2fc9b2f4db2b09257417ddf0415be6a0?s=48 ikukamiya
0
250
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
140

Featured

See All Featured
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
13
730
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
175
14k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
84
3.8k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
215
16k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
14k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
360k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
144
19k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
91
2.8k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.3k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.7k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.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