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
Claude Code に プロジェクト管理やらせたみた
unson
6
4.3k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
12
5.4k
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
120
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
3.9k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
3
22k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Code Review Best Practice
trishagee
69
19k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Writing Fast Ruby
sferik
628
62k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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