Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
RWD: Dealing with navigation
Search
Swwweet
February 13, 2013
Design
5
510
RWD: Dealing with navigation
Presentation by @htmlboy at #webcat, Barcelona, February 2013.
Swwweet
February 13, 2013
Tweet
Share
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
340
How to be the best web designer in the world.
swwweet
6
1.3k
Design for loading
swwweet
5
520
Mobile First: as difficult as doing things right
swwweet
224
10k
One Size Fits None
swwweet
12
870
One Size Fits None - From the Front 2013
swwweet
2
720
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
600
Other Decks in Design
See All in Design
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
1
870
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
140
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
170
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
370
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.9k
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
190
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
270
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
110
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.9k
maki setoguchi
maki_setoguchi
0
230
デザイナー向けフライル説明資料
toshiblues
0
170
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Become a Pro
speakerdeck
PRO
29
5.5k
Designing Experiences People Love
moore
142
24k
Six Lessons from altMBA
skipperchong
29
4k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Transcript
RWD: DEALING WITH NAVIGATION Javier Usobiaga #Webcat
of a multipurpose navigation UTOPIA The
THE MYTH OF MOBILE & DESKTOP
MOBILE Link Link Link Link Link Link
DESKTOP Link Link Link Link Link
WTFABLET Link Link Link Link Link
RWD is about MID SCREENS
Mobile first; & desktop, & EVERYTHING ELSE
RESPONSIVE NAVIGATION PATTERNS
None
bit.ly/rwd-nav
None
bit.ly/rwd-nav2
THE JAVASCRIPT MYTH
We don't have any non-JavaScript users” No, all your users
are non-JS while they're downloading your JS Jake Archibald “
None
None
UNFOLDED by default
None
MESSY by default
None
FAST vs COMPACT
Design for LOADING
Luke Wroblewsky Content first, navigation second.
FOOTER loading
content content Link
Javascript ENHANCEMENT
content Link Link Link Link Link Link
Desktop AWKARDNESS
content content Link Link Link Link Link content
Filters Filters Filters Filters search result search result search result
Filters
Desktop CSS FIXING
content content nav{position: absolute;} content
#results{ float: right;} search result search result search result #filters{
float: left;}
SUMMING UP
Navigation is a CORE ELEMENT in the design process
As web designers, we need to polish our JS SKILLS
But if we only rely in JS, we’re doing it
WRONG
THANKS! Javier Usobiaga @htmlboy