CSS3 Layouts for the Multi-screen World

Slide 1

Slide 1 text

#FOWD LDN ’13

Slide 2

Slide 2 text

@stopsatgreen Peter Gasston rehabstudio

Slide 3

Slide 3 text

CSS3: Layouts for the Multi-screen World

Slide 4

Slide 4 text

1. The web has changed 2. Our tools are outdated

Slide 5

Slide 5 text

What is CSS3 doing about it?

Slide 6

Slide 6 text

1. The web has changed

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

12 years ago…

Slide 9

Slide 9 text

By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

2. 320x480 4. 768x1024 2106

Slide 12

Slide 12 text

http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/

Slide 13

Slide 13 text

User-centric design, but device-centric development

Slide 14

Slide 14 text

Responsive Web Design

Slide 15

Slide 15 text

Future of Web Design = Knowing How to Code

Slide 16

Slide 16 text

Carpenter != Dendrologist

Slide 17

Slide 17 text

@media screen {…} @media screen and (min-width: 800px) {…} @media (orientation: portrait) {…} Media Queries

Slide 18

Slide 18 text

width / device-width height / device-height orientation aspect-ratio / device-aspect-ratio Media Queries

Slide 19

Slide 19 text

@media (min-resolution: 2dppx) {} Media Queries

Slide 20

Slide 20 text

Categories are obsolete. Parameters are the future.

Slide 21

Slide 21 text

script pointer hover luminosity Future* Media Queries * Possibly

Slide 22

Slide 22 text

@media (orientation: portrait) { … @media (max-width: 48em) { … } } Conditional Rules

Slide 23

Slide 23 text

Device Adaptation

Slide 24

Slide 24 text

Device Adaptation @viewport { initial-scale: 1; maximum-scale: 2; width: 500px; }

Slide 25

Slide 25 text

Device Adaptation @viewport { width: device-width; } @media (max-device-width: 420px) { @viewport { width: 500px; } }

Slide 26

Slide 26 text

CSS3 has your back!

Slide 27

Slide 27 text

2. Our tools are outdated

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

float: left HTML & CSS1

Slide 33

Slide 33 text

position: absolute display: inline-block display: table CSS2

Slide 34

Slide 34 text

B A C B C A B C A The Three Stages of RWD

Slide 35

Slide 35 text

A product of its limitations (adjacent possible?)

Slide 36

Slide 36 text

New layout methods:

Slide 37

Slide 37 text

Inspired by 1000 years of printing…

Slide 38

Slide 38 text

… but purely digital.

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Multi-columns article { column-count: 3; } article { column-width: 20em; }

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

A B .b { flow-from: 'foo'; } foo Regions .a { flow-into: 'foo'; }

Slide 44

Slide 44 text

B C D .b, .c, .d { flow-from: 'foo'; } foo Regions

Slide 45

Slide 45 text

Regions http://blogs.adobe.com/webplatform/2013/04/08/adaptive-web-app-ui-with-css-regions/

Slide 46

Slide 46 text

Flexbox .parent { display: flex; } .child { width: 30%; } .child { flex: 1; }

Slide 47

Slide 47 text

Flexbox A B .a { flex: 2; } .b { flex: 1; } A B .parent { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }

Slide 48

Slide 48 text

Flexbox .parent { flex-direction: column; } .a { order: 2; } .b { order: 1; } A B B C A

Slide 49

Slide 49 text

“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/

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Grid Layout .parent { display: grid; grid-definition-columns: 1fr 1fr 2fr; } .parent { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; }

Slide 52

Slide 52 text

Grid Layout A B .child { grid-column: 2; grid-row: 2; } .a { grid-column: 2 / 4; } .b { grid-row: 1 span 3; }

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

.child { position: absolute; } Exclusions wrap-flow: both;

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

.child { shape-outside: circle(50%,50%, 400px); } Shaped Exclusions

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

.child { shape-inside: circle(50%,50%,400px); } Shaped Exclusions

Slide 59

Slide 59 text

CSS3 has your back!

Slide 60

Slide 60 text

… and much more to come.

Slide 61

Slide 61 text

With great power comes blah blah blah you know this by now.

Slide 62

Slide 62 text

In conclusion

Slide 63

Slide 63 text

1. The web is everywhere

Slide 64

Slide 64 text

2. Web design is constrained by the tools we have

Slide 65

Slide 65 text

3. Better tools are on the way

Slide 66

Slide 66 text

4. Start to think how you can make beautiful sites that work everywhere

Slide 67

Slide 67 text

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