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
83
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
150
Your Reality Here
stopsatgreen
0
88
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
86
Surveying the Landscape — November 2016
stopsatgreen
1
160
Surveying the Landscape - Fronteers
stopsatgreen
2
470
The Web vs. The Browser
stopsatgreen
0
180
Surveying the Landscape Sept. 2016
stopsatgreen
1
370
Surveying the Landscape
stopsatgreen
4
810
Other Decks in Technology
See All in Technology
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
120
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
160
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
52
20k
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
MobileActOsaka_250704.pdf
akaitadaaki
0
150
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
Geminiとv0による高速プロトタイピング
shinya337
1
270
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
怖くない!はじめてのClaude Code
shinya337
0
400
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Balancing Empowerment & Direction
lara
1
430
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Thoughts on Productivity
jonyablonski
69
4.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Site-Speed That Sticks
csswizardry
10
690
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
GraphQLとの向き合い方2022年版
quramy
49
14k
Scaling GitHub
holman
460
140k
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