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

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
570
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
390
How to be the best web designer in the world.
Avatar for Swwweet swwweet
6
1.3k
Design for loading
Avatar for Swwweet swwweet
5
590
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
One Size Fits None
Avatar for Swwweet swwweet
12
920
One Size Fits None - From the Front 2013
Avatar for Swwweet swwweet
2
760
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
660

Other Decks in Design

See All in Design
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
200
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
2
2.1k
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
210
20251217リビングラボ・トークin尼崎（尼崎おせっかい会議＆オトナテラコヤ）
Avatar for Kimura Atsunobu a2k
0
140
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
190
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
Avatar for kgsi kgsi
0
720
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
310
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
2.4k
2026年5月24日Redesigner Career Jamご参加者様ご案内資料
Avatar for BASE, Inc. base
PRO
0
170
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
7
5.6k
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
4
1.7k
もう迷わない！“なんとなく”を卒業するフォントの選び方【村田俊英】
Avatar for 村田俊英 toshihidemurata
0
630

Featured

See All Featured
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
65
55k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
390
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
370

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