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
How to get a Tiger to Tulsa
Avatar for Brynn McDucky P. mcduckyart
0
110
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
Avatar for Andrew Shapiro ashapiro
0
110
デフォルトの16:9（960*540px）のケース / Google Slide Size Test
Avatar for Arthur arthur1
0
2.9k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
Avatar for 山口哲弘 t2yamaguchi429
0
460
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
190
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
720
オリジナルのデザイン地図を作ってみた！〜OpenMapTilesとMaputnikを活用した地図スタイル〜
Avatar for Hajime Kato hjmkth
1
580
線で考える画面構成
Avatar for natsuume natsuume
1
880
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
Avatar for bebe bebe
0
650
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
Avatar for Akihide Kanai ka71
0
140
今日から意識できるアクセシビリティ
Avatar for fumiko fumiko
0
250
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
530

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Done Done
Avatar for chrislema chrislema
184
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
740
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
830
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.4k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k

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