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
Responsive Webdesign
Search
Tom Claus
January 12, 2013
Education
4
230
Responsive Webdesign
Responsive Webdesign presentation at KHLim on 11 january 2013
Tom Claus
January 12, 2013
Tweet
Share
More Decks by Tom Claus
See All by Tom Claus
Infosessions testgroup - New Platform
tomclaus
0
57
Modern Technologies
tomclaus
2
360
Social Media
tomclaus
5
210
Responsive & Content
tomclaus
2
140
VikingSpots NG
tomclaus
1
78
Budget Travelling
tomclaus
4
120
Moderne Web Technologieën
tomclaus
1
91
Inventis Stages
tomclaus
1
75
HTML5 & CSS3
tomclaus
2
390
Other Decks in Education
See All in Education
核燃料政策を問う─英国の決断と日本
hide2kano
0
160
質のよいアウトプットをできるようになるために~「読む・聞く、まとめる、言葉にする」を読んで~
amarelo_n24
0
190
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.8k
20250611_なんでもCopilot1年続いたぞ~
ponponmikankan
0
150
みんなのコード 2024年度活動報告書/ 2025年度活動計画書
codeforeveryone
0
210
万博非公式マップとFOSS4G
barsaka2
0
830
GitHubとAzureを使って開発者になろう
ymd65536
1
150
ビジネスモデル理解
takenawa
0
13k
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
800
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
signer
PRO
0
2.1k
生成AI
takenawa
0
13k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Into the Great Unknown - MozCon
thekraken
40
2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Unsuck your backbone
ammeep
671
58k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Docker and Python
trallard
45
3.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Transcript
Responsive
None
None
The future of Mobile
The number of people using the web on mobile devices
is set to surpass desktop by 2015
None
None
None
None
Mobile should never be an afterthought
Separate mobile websites
None
None
Not a solution!
Separate mobile applications
None
(some cases) A possible solution
Responsive webdesign
None
None
None
None
None
http://mediaqueri.es
Become responsive!
1. Adaptive Grids, Images & Media 2. Media Queries 3.
Testing, Crying & Tweaking 4. ??? 5. Profit
Grids
None
None
None
None
None
None
CSS Frameworks
None
None
None
Video Solutions
None
None
None
None
max-width: 100% Flexible Media
Adaptive Images
EDGE is the new dial-up
None
None
None
None
Network Link conditioner
ViewPort
None
None
None
None
None
None
None
None
None
None
None
MediaQueries
None
None
None
None
None
None
Mobile First
1. Default browser style 2. Desktop CSS 3. Tablet CSS
4. Mobile CSS Desktop first (mobile)
1. Default browser style 2. Mobile CSS Mobile first (mobile)
1. Default browser style 2. Mobile CSS 3. Tablet CSS
Mobile first (tablet)
1. Default browser style 2. Mobile CSS 3. Tablet CSS
4. Desktop CSS Mobile first (desktop)
Crying / Testing
None
None
None
None
None