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
300

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
Wonders from the Full Stack Fest website
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
0
140
How to be the best web designer in the world.
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
860
Design for loading
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
320
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
213
7.5k
One Size Fits None
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
12
650
One Size Fits None - From the Front 2013
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
2
510
Responsively Responsive
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
23
1.4k
La letra con píxel entra
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
0
830
The future of code
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
310

Other Decks in Design

See All in Design
ShippioのProduct Designerになりませんか？
3bb2326963c24027cdf173579290bd6d?s=48 shippio
0
1.3k
PLAID_デザイナー採用資料
755ac6e09cca0a46485ff24157f03aa1?s=48 plaid
PRO
0
330
視覚障害者と探究するLSPの可能性｜LEGO® SERIOUS PLAY® Coffee Chat Japan #09
038f436d8d55e8736cd991bf044afe6a?s=48 keitatatakizawa
1
110
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
3
3.4k
大規模サービスのUIデザインを管理する工夫
278e5835d64cc25f3ba6ae93de10ba24?s=48 tamachan
0
10k
【デザイナー採用】YUMEMI_会社紹介/yumemi_company_introduction_designer
D9e091468953393d8465ea4f29621368?s=48 yumemi_design
0
600
アンラーンし続けるデザインプロセス / DESIGNWAVEvol.04
76490a22db71352df65342bcd2d69af2?s=48 daitorii
2
330
Filmarks デザイナー向け紹介資料
46cd93c934d7881b0b2cca93674d8cbd?s=48 shingo2000
2
960
創造学群表現学類2021_ソーシャルチームプレゼン
4f1699756ddbf3f2b6f5517c29747518?s=48 zhikto
1
140
The HIG & Software UI Design
A4c8177aa00623c9593f10be748b3861?s=48 usagimaru
3
1.3k
The Party! - Story Sequence
77b4173a70942a13969b84335c2e7695?s=48 diablicos_
0
150
Love Diana-Mermaid Song Sequence
5bce9e09e585aed42d646c47c7da38e0?s=48 ivettetwin
1
170

Featured

See All Featured
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.3k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
The Cult of Friendly URLs
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
68
4.8k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
Product Roadmaps are Hard
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
35
6.8k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
34k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
87
8.6k
Designing with Data
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
4k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
4k
What's in a price? How to price your products and services
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
229
9.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