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
56
Modern Technologies
tomclaus
2
350
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
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
740
(キラキラ)人事教育担当のつらみ~教育担当として知っておくポイント~
masakiokuda
0
110
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
より良い学振申請書(DC)を作ろう 2025
luiyoshida
1
3.3k
JPCERTから始まる草の根活動~セキュリティ文化醸成のためのアクション~
masakiokuda
0
190
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
470
SkimaTalk Introduction for Students
skimatalk
0
390
ふりかえり研修2025
pokotyamu
0
1.2k
Pydantic(AI)とJSONの詳細解説
mickey_kubo
0
120
ThingLink
matleenalaakso
28
4.1k
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Designing Experiences People Love
moore
142
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Code Reviewing Like a Champion
maltzj
524
40k
Producing Creativity
orderedlist
PRO
346
40k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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