Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

RWD: Dealing with navigation

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Swwweet Swwweet
February 13, 2013
Design
580
5

RWD: Dealing with navigation

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

Avatar for Swwweet

Swwweet

February 13, 2013

More Decks by Swwweet

See All by Swwweet
Wonders from the Full Stack Fest website
Avatar for Swwweet swwweet
1
420
How to be the best web designer in the world.
Avatar for Swwweet swwweet
6
1.4k
Design for loading
Avatar for Swwweet swwweet
5
600
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
One Size Fits None
Avatar for Swwweet swwweet
12
940
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
790
Responsively Responsive
Avatar for Swwweet swwweet
23
1.7k
La letra con píxel entra
Avatar for Swwweet swwweet
0
1.2k
The future of code
Avatar for Swwweet swwweet
4
680

Other Decks in Design

See All in Design
Edmonton River Slidedeck
Avatar for Edmonton River edmontonriver
0
410
デザインワークフローの最前線。 ログラスでのAI活用の現在地
Avatar for Kaori Ueda ukaoli
1
3.4k
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
320
インターンから2年 新卒フロントエンドエンジニアから見た サイボウズのアクセシビリティ
Avatar for tak taku10101
0
170
エンジニアがAI活用してスライドデザインできる世界が来たよ！
Avatar for 甲斐 甲 kaikou
1
490
デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness
Avatar for こぎそ / Shinichi Kogiso kgsi
14
22k
【CEDEC2026】派手さと見やすさは両立できる！『Shadowverse: Worlds Beyond』エフェクト・3D背景の超進化したビジュアル設計
Avatar for Cygames, Inc. cygames
PRO
2
2.1k
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
1.1k
東京都市大学 都市生活学部×一般社団法人オープン企画イベント　「誰もがデザイナーである」とはどういうことか？ 【エツィオ・マンズィーニ氏 特別来日・基調講演】
Avatar for Kimura Atsunobu a2k
1
140
デザインハーネスをつくるハーネス｜誰でも自社らしいデザインをつくれるようにする仕組み
Avatar for Akari Katakai katakai
0
1.3k
Kouseki | CREATIVE CLASS成果物
Avatar for Yurika Ishida yuri9911
0
240
日経電子版を支えていく Kasane Design System
Avatar for Taito Tanaka taitotnk
0
400

Featured

See All Featured
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
770
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3.2k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
5.2M
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
192
12k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Fireside Chat
Avatar for paigeccino paigeccino
43
4k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k

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