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
CSS3 Layouts for the Multi-screen World
Search
Peter Gasston
May 14, 2013
Technology
1
78
CSS3 Layouts for the Multi-screen World
FOWD London, 14th May 2013
Peter Gasston
May 14, 2013
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
130
Your Reality Here
stopsatgreen
0
80
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
71
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
280
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Technology
See All in Technology
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
RSNA2024振り返り
nanachi
0
500
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
プロセス改善による品質向上事例
tomasagi
1
1.6k
事業継続を支える自動テストの考え方
tsuemura
0
300
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
SCSAから学ぶセキュリティ管理
masakamayama
0
140
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building Adaptive Systems
keathley
40
2.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Docker and Python
trallard
44
3.3k
Fireside Chat
paigeccino
34
3.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What's in a price? How to price your products and services
michaelherold
244
12k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Being A Developer After 40
akosma
89
590k
Facilitating Awesome Meetings
lara
51
6.2k
Transcript
#FOWD LDN ’13
@stopsatgreen Peter Gasston rehabstudio
CSS3: Layouts for the Multi-screen World
1. The web has changed 2. Our tools are outdated
What is CSS3 doing about it?
1. The web has changed
None
12 years ago…
By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/
None
2. 320x480 4. 768x1024 2106
http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/
User-centric design, but device-centric development
Responsive Web Design
Future of Web Design = Knowing How to Code
Carpenter != Dendrologist
@media screen {…} @media screen and (min-width: 800px) {…} @media
(orientation: portrait) {…} Media Queries
width / device-width height / device-height orientation aspect-ratio / device-aspect-ratio
Media Queries
@media (min-resolution: 2dppx) {} Media Queries
Categories are obsolete. Parameters are the future.
script pointer hover luminosity Future* Media Queries * Possibly
@media (orientation: portrait) { … @media (max-width: 48em) { …
} } Conditional Rules
<meta name="viewport" content="width=500, initial-scale=1, maximum-scale=2"> Device Adaptation
Device Adaptation @viewport { initial-scale: 1; maximum-scale: 2; width: 500px;
}
Device Adaptation @viewport { width: device-width; } @media (max-device-width: 420px)
{ @viewport { width: 500px; } }
CSS3 has your back!
2. Our tools are outdated
None
None
None
None
<table> float: left HTML & CSS1
position: absolute display: inline-block display: table CSS2
B A C B C A B C A The
Three Stages of RWD
A product of its limitations (adjacent possible?)
New layout methods:
Inspired by 1000 years of printing…
… but purely digital.
None
Multi-columns article { column-count: 3; } article { column-width: 20em;
}
None
None
A B .b { flow-from: 'foo'; } foo Regions .a
{ flow-into: 'foo'; }
B C D .b, .c, .d { flow-from: 'foo'; }
foo Regions
Regions http://blogs.adobe.com/webplatform/2013/04/08/adaptive-web-app-ui-with-css-regions/
Flexbox .parent { display: flex; } .child { width: 30%;
} .child { flex: 1; }
Flexbox A B .a { flex: 2; } .b {
flex: 1; } A B .parent { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }
Flexbox .parent { flex-direction: column; } .a { order: 2;
} .b { order: 1; } A B B C A
“Media queries can be used to do more than patch
broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.” http://trentwalton.com/2011/07/14/content-choreography/
None
Grid Layout .parent { display: grid; grid-definition-columns: 1fr 1fr 2fr;
} .parent { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; }
Grid Layout A B .child { grid-column: 2; grid-row: 2;
} .a { grid-column: 2 / 4; } .b { grid-row: 1 span 3; }
None
.child { position: absolute; } Exclusions wrap-flow: both;
None
.child { shape-outside: circle(50%,50%, 400px); } Shaped Exclusions
None
.child { shape-inside: circle(50%,50%,400px); } Shaped Exclusions
CSS3 has your back!
… and much more to come.
With great power comes blah blah blah you know this
by now.
In conclusion
1. The web is everywhere
2. Web design is constrained by the tools we have
3. Better tools are on the way
4. Start to think how you can make beautiful sites
that work everywhere
Some of the CSS properties shown in this talk are
experimental and subject to change. Check http://caniuse.com and http://html5please.com for latest implementation status. Peter Gasston @stopsatgreen