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

RWD: Dealing with navigation

Swwweet
February 13, 2013
Design
5
390

RWD: Dealing with navigation

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

Swwweet

February 13, 2013
Tweet

More Decks by Swwweet

See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
230
How to be the best web designer in the world.
swwweet
5
1k
Design for loading
swwweet
4
410
Mobile First: as difficult as doing things right
swwweet
216
8.6k
One Size Fits None
swwweet
12
760
One Size Fits None - From the Front 2013
swwweet
2
610
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
990
The future of code
swwweet
4
440

Other Decks in Design

See All in Design
Jeremy's First Day
myates3
1
130
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
150
MiKS inc. Company PR en_202404
zakkerooni
0
170
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
他人事じゃないWebアクセシビリティ入門
arihiro17
0
220
UIをもたらすコンテクストの考察
securecat
9
2.6k
PRDがデザインプロセスを高速化した話
tooomo
1
320
実案件でのFigmaデータの作り方
xxxkinu
2
220
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
Portfolio 2023.07.28
helemarudesu
0
590
素晴らしき余白の世界
kasumidyaya
1
110
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
620

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Fireside Chat
paigeccino
21
2.6k
What's new in Ruby 2.0
geeforr
337
31k
Agile that works and the tools we love
rasmusluckow
325
20k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
A designer walks into a library…
pauljervisheath
200
23k
GraphQLとの向き合い方2022年版
quramy
32
12k
Statistics for Hackers
jakevdp
789
220k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Optimizing for Happiness
mojombo
370
69k
The Art of Programming - Codeland 2020
erikaheidi
42
12k

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