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
ゼロからはじめる採用広報
yutadayo
3
970
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
2
17k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
Lazy application authentication with Tailscale
bluehatbrit
0
220
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
Model Mondays S2E04: AI Developer Experiences
nitya
0
160
インフラ寄りSREの生存戦略
sansantech
PRO
1
470
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Side Projects
sachag
455
42k
Automating Front-end Workflow
addyosmani
1370
200k
Building Adaptive Systems
keathley
43
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
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