CSS3: Layouts for the Multi-screen World

Slide 1

Slide 1 text

CSS3: Layouts for the Multi-screen world #mwconf 10/13

Slide 2

Slide 2 text

@stopsatgreen Peter Gasston rehabstudio

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

How is CSS evolving to meet these problems?

Slide 6

Slide 6 text

1. The web has changed

Slide 7

Slide 7 text

1. The way we access the web has changed

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

13 years ago...

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

2. 320x480 3. 768x1024 1913

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Use of mobile as first screen 0 13 25 38 50 35+ 18-34 http://weve.com/mobile-eclipsing-tv-as-the-ﬁrst-screen-for-consumers

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

User-centric design + device-centric development.

Slide 17

Slide 17 text

Responsive Web Design

Slide 18

Slide 18 text

Being a web designer = understanding code

Slide 19

Slide 19 text

Carpenter != Dendrologist

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Judging the capabilities of a device by the resolution of its screen is like judging the height of a person by the colour of their shoes.

Slide 25

Slide 25 text

Categories are obsolete. Parameters are the future.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Future* Media Queries * Possibly @media (script: 0) {…} @media (hover: 1) {…} @media (pointer: coarse) {…} @media (luminosity: dim) {…}

Slide 28

Slide 28 text

Conditional Rules @supports (height: 1vh) {…}

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Device Adaptation @viewport { width: 100vw; zoom: 1; }

Slide 31

Slide 31 text

Device Adaptation @viewport { width: 100vw; } @media (max-device-width: 420px) { @viewport { width: 320px auto; } }

Slide 32

Slide 32 text

CSS is on the case.

Slide 33

Slide 33 text

2. Our tools are outdated

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

HTML & CSS1 float: left

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

A product of its limitations.

Slide 42

Slide 42 text

New layout methods:

Slide 43

Slide 43 text

Inspired by 1000 years of printing...

Slide 44

Slide 44 text

... but purely digital.

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

http://adobe-webplatform.github.io/Demo-for-National-Geographic-Forest-Giant/browser/src/

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 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 57

Slide 57 text

Flexbox .parent { align-items: center; justify-content: center; } A B .parent { flex-direction: column; } .a { flex: 1; } .b { flex: 0; }

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Grid Layout /* Grid A */ @media (min-width: 600px) { /* Grid B */ } @media (min-width: 1200px) { /* Grid C */ }

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Shaped Exclusions

Slide 69

Slide 69 text

CSS has your back!

Slide 70

Slide 70 text

... and there’s much more to come.

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

In conclusion:

Slide 73

Slide 73 text

1. The web is everywhere

Slide 74

Slide 74 text

2. Web design is constrained by the current tools

Slide 75

Slide 75 text

3. Better tools are on the way

Slide 76

Slide 76 text

4. Let’s start to think *really* differently

Slide 77

Slide 77 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