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
79
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
310
Growing Up, Getting Serious
stopsatgreen
0
70
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
440
The Web vs. The Browser
stopsatgreen
0
150
Surveying the Landscape Sept. 2016
stopsatgreen
1
280
Surveying the Landscape
stopsatgreen
4
730
Other Decks in Technology
See All in Technology
生成AIを活用した機能を、顧客に提供するまでに乗り越えた『4つの壁』
toshiblues
1
180
20250125_Agent for Amazon Bedrock試してみた
riz3f7
2
110
ChatGPTを使ったブログ執筆と校正の実践テクニック/登壇資料(井田 献一朗)
hacobu
0
110
ハンズオンで学ぶ Databricks - Databricksにおけるデータエンジニアリング
taka_aki
1
2k
CNAPPから考えるAWSガバナンスの実践と最適化
yuobayashi
5
600
“自分”を大切に、フラットに。キャリアチェンジしてからの一年 三ヶ月で見えたもの。
maimyyym
0
240
信頼性を支えるテレメトリーパイプラインの構築 / Building Telemetry Pipeline with OpenTelemetry
ymotongpoo
9
4.5k
パブリッククラウドのプロダクトマネジメントとアーキテクト
tagomoris
3
460
現実的なCompose化戦略 ~既存リスト画面の置き換え~
sansantech
PRO
0
150
横断SREの立ち上げと、AWSセキュリティへの取り組みの軌跡
rvirus0817
3
4k
Women in Agile
kawaguti
PRO
2
150
Autify Company Deck
autifyhq
2
41k
Featured
See All Featured
KATA
mclloyd
29
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Your Own Lightsaber
phodgson
104
6.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
A better future with KSS
kneath
238
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Optimising Largest Contentful Paint
csswizardry
33
3k
Facilitating Awesome Meetings
lara
51
6.2k
Making the Leap to Tech Lead
cromwellryan
133
9k
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