MODERN LAYOUTS Getting Out of Our Ruts THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons An Event Apart 2015
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
The most prominent result from the new eyetracking studies is not actually new. We simply confirmed for the umpteenth time that banner blindness is real. —Jakob Nielsen, August 20, 2007, Banner Blindness: Old and New Findings
Slide 16
Slide 17
Slide 18
Slide 19
A C B A C B A C B A C B
Slide 20
Slide 21
Slide 22
Slide 23
Slide 24
drawing by Dave Ellis novolume.co.uk
Slide 25
Slide 26
Slide 27
Slide 28
Slide 29
Slide 30
Slide 31
Slide 32
Slide 33
Slide 34
Slide 35
Slide 36
Slide 37
Slide 38
Slide 39
Slide 40
Slide 41
Slide 42
Slide 43
Slide 44
Slide 45
Slide 46
Slide 47
Slide 48
The medium shapes
the medium.
Slide 49
?
Slide 50
There’s a world of Graphic Design older than the web.
Slide 51
Slide 52
Slide 53
Slide 54
Slide 55
Slide 56
Slide 57
vogue.com
Slide 58
Slide 59
Slide 60
Slide 61
Slide 62
Slide 63
Slide 64
Slide 65
Slide 66
Slide 67
Slide 68
Slide 69
Layout
should
serve
the content.
Slide 70
MAGAZINE S
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
CSS Shapes
Slide 76
<h1>Jeremy Keith</h1>
<img src=“jeremykeith.jpg">
<p>Jeremy Keith lives in
Brighton, England where he
makes websites with the
splendid design agency
Clearleft.
</p>
Slide 77
img { float: left; margin-right: 2em; margin-bottom: 0.5em; }
Slide 78
img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle(); }
Slide 79
Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Shapes, L evel 1 March 20, 2014 w3.org/TR/css-shapes-1
Slide 80
Slide 81
Slide 82
Slide 83
shape-outside: circle(); shape-outside: ell ipse(); shape-outside: border-box; shape-outside: inset(0px round 120px) border-box; shape-outside: url(http:// example.com/image.jpg); shape-margin: 30px;
Slide 84
labs.thewebahead.net
Slide 85
github.com/jensimmons/thelayoutsahead
Slide 86
img {
width: 50%;
float: left;
margin-right: 30px;
margin-bottom: 30px;
shape-outside:
ellipse(50% 50%);
}
Slide 87
img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px; shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
Slide 88
Slide 89
Slide 90
Slide 91
Slide 92
Slide 93
Slide 94
Slide 95
Shapes Level 1 — NOW! shape-outside: foo(); Shapes Level 2 — Later shape-inside : foo();
Slide 96
Slide 97
2 .
Slide 98
Slide 99
Slide 100
Slide 101
Slide 102
main { transform: rotate(-10deg); }
Slide 103
h1 { transform: rotate(-90deg); }
Slide 104
h1 { float: left; padding-bottom: 200px; transform: rotate(-45deg); shape-outside: polygon(nonzero, -58px 80.55%, 75.95% -70px, 89.55% -33.65%, -13.4% 121.45%); }
Slide 105
main {
width: 300px;
}
@media (min-width: 500px) {
main {
background: red;
transform: rotate(-10deg); }
}
@media (min-width: 700px) {
main {
background: green;
transform: rotate(-20deg); }
}
@media (min-width: 900px) {
main {
width: 400px;
background: blue;
transform: rotate(-30deg); }
}
Slide 106
transform: rotate
Slide 107
Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Transforms, L evel 1 Nov 26, 2013 w3.org/TR/css-transforms-1
Slide 108
Slide 109
3 .
Slide 110
Slide 111
Slide 112
Slide 113
Multiple Column Layout
Slide 114
Slide 115
Slide 116
article { max-width: 500px; margin: 0 auto; }
Slide 117
article { column-count: 2; column-gap: 2em; }
Slide 118
Slide 119
article { // column-count: 2; column-width: 200px; column-gap: 2em; }
Slide 120
Slide 121
img {
width: 100%;
}
article {
column-width: 200px;
column-gap: 2em;
column-rule:
1px solid #444;
}
Slide 122
Slide 123
Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Multicolumn Layout April 12, 2011 w3.org/TR/css3-multicol
Slide 124
Slide 125
Slide 126
Slide 127
CSS Regions
Slide 128
Slide 129
Slide 130
4 .
Slide 131
Slide 132
Slide 133
Slide 134
Slide 135
<main role="main">
<img src="../images/GraceHopper.jpg">
<div>
<h1>Grace Hopper</h1>
<p>Grace Murray Hopper (December 9,
1906 – January 1, 1992) was an American
computer scientist and United States
Navy rear admiral. A pioneer in the
field, she was one of the first
programmers of the Harvard Mark I
computer, and invented the first
compiler for a computer programming
language...</p>
</div>
</main>
Slide 136
img { float: left; margin-right: 2em; width: 50%; } div { padding: 2em; }
Slide 137
Slide 138
img { float: left; margin-right: 2em; // width: 50%; height: 100vh; } div { padding: 2em; }
Slide 139
Slide 140
img { float: left; margin-right: 2em; width: 50vw; height: 100vh; } h1 { font-size: 6vw; }
Slide 141
Slide 142
<header
>
<h1>Full-height “Cover
Sheets” are the new Splash
Page</h1
>
</header>
<p>Lorum ipsum article
content…</p>
Slide 143
header { border: 20px solid #000; background: yellow; padding: 3em 6em;
} h1 {
font-size: 10vw; margin-top: 0; text-align: center; }
Slide 144
header { border: 20px solid #000; background: yellow;
padding: 3em 6em;
height: 100vh;
}
h1 {
font-size: 10vw; margin-top: 0; text-align: center; }
Slide 145
Slide 146
Slide 147
Viewport Units
Slide 148
Anyplace you might use em, rem, %, px you can instead use: vh viewport height vw viewport width vmin smaller viewport number vmax larger viewport number
Slide 149
Working Draft
Last Call
Candidate
Recommendation
Proposed
Recommendation
Recommendation
CSS Values and Units,
L
evel 3
July 30, 2013
w3.org/TR/css3-values
Slide 150
Slide 151
5 .
Slide 152
Slide 153
header { border: 20px solid #000; background: yellow; min- height: 100vh;
padding: 3em 6em;
}
h1 {
font-size: 10vw; margin: 0; text-align: center; }
Slide 154
header { border: 20px solid #000; background: yellow; min- height: 100vh;
padding: 3em 6em;
}
h1 {
font-size: 10vw; margin: 0; text-align: center; }
Slide 155
header { border: 20px solid #000; background: yellow; min- height: 100vh; } h1 {
font-size: 10vw; margin: 0; }
Slide 156
header { border: 20px solid #000; background: yellow; min- height: 100vh; display: flex; } h1 {
font-size: 10vw; margin: auto; }
Slide 157
header { border: 20px solid #000; background: yellow; min- height: 100vh; display: flex; } h1 {
font-size: 10vw; margin: auto; }
Slide 158
Slide 159
header { border: 20px solid #000; background: yellow; min- height: 100vh; display: flex; align-items: center; justify-content: center; } h1 {
font-size: 10vw; // margin: auto ; }
Slide 160
header { border: 20px solid #000; background: yellow; min- height: 100vh; display: flex; align-items: flex-end; justify-content: flex-end; } h1 {
font-size: 10vw; margin: 0 ; }
Slide 161
Flexbox
Slide 162
Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Flexible Box Layout, Level 1
May 14, 2015
w3.org/TR/css-flexbox-1
Slide 163
Slide 164
Slide 165
Slide 166
Slide 167
Slide 168
Slide 169
6 .
Slide 170
Slide 171
CSS Grid Layout
Slide 172
Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS Grid Layout, Level 1 March 17, 2015
w3.org/TR/css-grid-1
Slide 173
Slide 174
from gridbyexample.com
Slide 175
Slide 176
Old School
Floats
Slide 177
Dynamic Grids
Slide 178
Slide 179
Slide 180
Slide 181
Slide 182
Slide 183
When?
Slide 184
When Can I Use This
in Production?
(aka on a Real Website)
Slide 185
Why Did You Tell Me About All This Stuff I Totally Can’t Use Yet?
Slide 186
Do Websites Need To Look Exactly The Same in Every Browser?
Slide 187
DoWebsitesNeedToLook ExactlyTheSameinEvery Browser.com
Slide 188
Slide 189
Progressive
Enhancement
Slide 190
Slide 191
When Can I Use This? Later
Shapes Level 2
Grid Layout
Exclusions
Uncertain
Regions
What Was That
You Mumbled?
Fragmentation Figures Overflow (???…) Last Fall
Shapes Level 1
Flexbox
Viewport Units
5 Years Ago
Rotation
Multicolumn Layout
Dynamic Grids
(odd numbers of columns,
ratio grids)
Slide 192
Hardest part is changing our thinking, not our CSS.
Slide 193
Magazine
s
and
The Web
Slide 194
Slide 195
Slide 196
Slide 197
Slide 198
Slide 199
Translate.
Don’t Transfer.
Slide 200
Slide 201
Slide 202
Slide 203
(*Totally stolen from Karen McGrane’s incredible talk, Adapting Ourselves to Adaptive Content .)
Slide 204
Slide 205
Slide 206
The most dangerous phrase in the language is ‘We’ve always done it this way.’ — Grace Hopper
Slide 207
One Last S tory
Slide 208
Slide 209
Slide 210
Slide 211
Slide 212
?
Slide 213
THE WEB AHEAD thewebahead.net JEN SIMMONS @jensimmons Thank you! Mozilla Designer Advocate
