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

RWD: Dealing with navigation

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
400
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
770
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
670

Other Decks in Design

See All in Design
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
200
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
220
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.5k
1000人規模の組織でデザインハーネスを導入するための第一歩
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
1.8k
kintone開発における​ライターの役割の変化​〜AI活用を添えて〜 / Changes in the Role of Writers in Kintone Development
Avatar for keroyama keroyama
0
140
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
7
5.7k
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
230
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
240
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
1k
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
Avatar for ryu ryu1013
0
160
I.A. como meio, não como fim. Como avaliar o valor entregue?
Avatar for Viviane Delvequio videlvequio
0
400
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
11
14k

Featured

See All Featured
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
500
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.9k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
180
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
600
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
160
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k

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