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

RWD: Dealing with navigation

Avatar for Swwweet Swwweet
February 13, 2013
Design
590
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
430
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
610
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
690

Other Decks in Design

See All in Design
信頼をデザインし、ブランドで市場を拓く。/ Designship2026
Avatar for Assured Inc. assuredjp
PRO
0
290
Figmaを使わなくなった私が、最近していること
Avatar for めーら/Miki mela_dayo
0
140
明日から真似できる、AIでデザインシステムを活用する方法
Avatar for viviON vivion
0
990
Where Imagination Ends AI Begins
Avatar for R-524 r5ni4
0
510
みんながデザインを担う組織へ。急加速する開発組織でのデザイナーの戦略
Avatar for Takeru Mukai mukai_takeru
0
420
StartDesignEngineering
Avatar for uchiyama886 uchiyama886
1
170
技術に明るくない人が技術を選ぶために
Avatar for moco moco1013
0
170
From Desktop to Spatial Interfaces UX Design Implications of Evolving Interaction Paradigms
Avatar for h.crane hcrane
0
150
tokikai Webポータルの要点｜仕様へのこだわりポイントまとめ
Avatar for ソニリア ❖ 村の思想家 soniria
0
480
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
Avatar for NishaMe nishame
1
1.6k
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
1
540
Kouseki | CREATIVE CLASS成果物
Avatar for Yurika Ishida yuri9911
0
280

Featured

See All Featured
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
560
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
2
440
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
640
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
400
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
560
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
340
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
2
3.8k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.4k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
330
エンジニアに許された特別な時間の終わり
Avatar for watany watany
109
250k
Scaling GitHub
Avatar for Zach Holman holman
464
140k

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