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
500
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.2k
Design for loading
swwweet
5
510
Mobile First: as difficult as doing things right
swwweet
223
9.9k
One Size Fits None
swwweet
12
860
One Size Fits None - From the Front 2013
swwweet
2
710
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
590
Other Decks in Design
See All in Design
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.1k
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
Kid Cowboy 103
marilutwin
0
310
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
250
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
400
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
420
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
530
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
Goodpatch Tour💙 / We are hiring!
goodpatch
31
880k
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
Automating Front-end Workflow
addyosmani
1370
200k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
BBQ
matthewcrist
89
9.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
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