Revolutionize Your Page: Real Art Direction on the Web Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons
Slide 1
Slide 2
art direction
Slide 3
Slide 4
brand
Slide 5
Slide 6
conversation
Slide 7
Slide 8
Slide 9
ART DIRECTION
Slide 10
Art Direction
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Art Direction
Slide 19
Editorial Design
Slide 20
!
e vast majority of editorial [design]
has at its heart
the idea of communicating
an idea of story
through the organization and presentation
of words (arranged into display and body text)
and visuals.
— Cath Caldwell & Yolanda Zappaterra
Editorial Design,
page 8
“
”
Slide 21
!
e vast majority of editorial [design]
has at its heart
the idea of communicating
an idea of story
through the organization and presentation
of words (arranged into display and body text)
and visuals.
— Cath Caldwell & Yolanda Zappaterra
Editorial Design,
page 8
“
”
Slide 22
Slide 23
!
e vast majority of editorial [design]
has at its heart
the idea of communicating
an idea of story
through the organization and presentation
of words (arranged into display and body text)
and visuals.
— Cath Caldwell & Yolanda Zappaterra
Editorial Design,
page 8
“
”
Slide 24
Slide 25
Slide 26
Slide 27
Slide 28
drawing by Dave Ellis novolume.co.uk
Slide 29
Slide 30
Stephen Waller at Enhance Conf expressing how BORED he is with web design today.
Slide 31
Slide 32
Slide 33
Slide 34
Slide 35
Slide 36
Layout shouldn’t be a multiple choice question.
Slide 37
Separate tooling needs from the design process.
Slide 38
Slide 39
Don’t make a framework out of CSS Grid. CSS Grid is a framework —
built right into the browser.
Slide 40
Layout Design
Slide 41
Slide 42
Slide 43
Slide 44
Slide 45
Slide 46
Amazing Future
Slide 47
The Official Timeline of the Evolution of Web Page Layout
Slide 48
labs.jensimmons.com
Slide 49
Big Pieces & Little Pieces
Slide 50
Initial Letter
Slide 51
Slide 52
Slide 53
p::first-letter {
color: rgba(255,190,150,0.9);
font-weight: bold;
margin-right: 0.5em;
-webkit-initial-letter: 4; initial-letter: 4;
}
Slide 54
p::first-letter {
color: rgba(255,190,150,0.9);
font-weight: bold;
margin-right: 0.5em;
-webkit-initial-letter: 4; initial-letter: 4;
}
Slide 55
@supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p::first-letter {
color: rgba(255,190,150,0.9);
font-weight: bold;
margin-right: 0.5em;
-webkit-initial-letter: 4; initial-letter: 4; }
}
Slide 56
Feature Queries
Slide 57
@supports (property:value) { // a bunch of CSS
}
Slide 58
// layout using old-tech nology @supports (display:grid) { // overrides to undo old layout
// layout using new-technology
}
Slide 59
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
Slide 60
Viewport Units
Slide 61
<header>
<h1>A Secret…</h1>
</header>
header {
display: flex;
height: 100vh;
}
h1 { margin: auto;
}
Slide 62
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 63
25vw
50vh
that
dang
“fold”
Slide 64
Object Fit
Slide 65
Slide 66
Slide 67
Slide 68
Slide 69
img { width: 50%; height: 400px; object-fit: cover; }
Slide 70
Slide 71
Slide 72
Clip Path
Slide 73
Slide 74
Slide 75
Slide 76
Slide 77
Slide 78
img { clip-path: polygon(0% 0%,
100% 3%, 98% 99%, 3% 93%); }
Slide 79
CSS Shapes
Slide 80
img {
float: left;
shape-outside: circle();
}
Slide 81
img.grapes {
float: left;
shape-outside:
polygon(nonzero, 72.35% 83.95%, 45.5% 94.3%, 0% 100%, 0% 88.4%, 0% 23.7%, 38.7% 11.35%, 55% 11.1%, 63.5% 22.7%, 72.15% 20.75%, 79.1% 30.6%, 79.8% 34.55%, 87.6% 43.95%, 83.7% 57.3%, 89.15% 65.7%, 92.55% 72.1%, 91.15% 83.2%); }
Slide 82
Slide 83
Slide 84
Drop & Raised Caps Non
Rectangular Shapes Images Specified in Both Dimensions Sizing Based on Edges
Slide 85
Big Pieces
Slide 86
Flexbox Multicolumn CSS Grid
Slide 87
Slide 88
Slide 89
Slide 90
Flexbox
Slide 91
Slide 92
Slide 93
Slide 94
Slide 95
Slide 96
Slide 97
Slide 98
Slide 99
Multicolumn
Slide 100
Slide 101
CSS Grid Layout
Slide 102
Slide 103
Slide 104
Slide 105
Slide 106
Slide 107
Slide 108
Slide 109
css-tricks.com/snippets/css/a-guide-to-flexbox
Slide 110
Alignment
Slide 111
From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align
Slide 112
From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align
Slide 113
flexboxdefense.com flexboxfroggy.com
Slide 114
Slide 115
Slide 116
Many Ways to Use CSS Grid
Slide 117
1 2 3 4 5 6 grid-column: 1 / 2; grid-row: 1 / 2; grid-column: 5 / 6; grid-row: 1 / 2; grid-column: 2 / 4; grid-row: 2 / 3; grid-column: 3 / 5; grid-row: 3 / 5; 1 2 3 4 5 grid-column: 1 / 2; grid-row: 4 / 5;
Slide 118
Slide 119
Slide 120
Slide 121
Slide 122
Slide 123
Place
each item
into a specific
cell/area
Let the browser
place everything
using
autoplacement
a
lgorithm
Slide 124
Slide 125
Slide 126
body { background: #F0F0F0; } main {
display: grid; grid-template-columns:
repeat(auto-fit, minmax(280px, 1fr)); } figure { margin: 0; } img { display: block; width: 100%; box-shadow: -1px 0px 0px
rgba(0,0,0,0.06); }
Slide 127
main { display: grid; grid-template-columns:
repeat(auto-fit, minmax(280px, 1fr)); }
Slide 128
13 11 8 9 10 7 6 5 1 2 3 4 12 auto placement algorithm
Slide 129
13 11 8 9 10 7 6 5 1 2 3 4 12 grid-auto-flow: dense;
Slide 130
Slide 131
Slide 132
Slide 133
Slide 134
Slide 135
Slide 136
Slide 137
Slide 138
Slide 139
Slide 140
Slide 141
Slide 142
Slide 143
Slide 144
When? / Where?
Slide 145
Slide 146
Behind a flag
Just Works
On Its Way
Chrome
Chrome
Canary
Opera
Opera
Developer
Firefox
Firefox
Dev Edition
Safari Technical
Preview
Firefox
Nightly
Edge
Safari
Slide 147
IE old spec in IE10+ -ms-* prefix
Slide 148
nightly.mozilla.org
Slide 149
addons.mozilla.org/addon/css-grid-inspector
Slide 150
Slide 151
Process
Slide 152
Choose one of the following: B. C. A. D. E.
Slide 153
Organize Content.
Slide 154
Create HTML file, set source order.
Slide 155
Sketch Ideas for Page Layout.
Slide 156
Design a custom grid.
Slide 157
Slide 158
Slide 159
Slide 160
Slide 161
Apply CSS. Write your own layout.
Slide 162
Organize content. 2. Create HTML file, set source order. 3. Sketch ideas for page layout. 4. Design a custom grid. 5. Apply CSS. Write your own layout code.
Slide 163
How Now?
Slide 164
Slide 165
Works
Doesn’t
work
Slide 166
Use It Don’t Use It
Slide 167
Works
Doesn’t
work
Use It
Don’t
Use It
Slide 168
Works
Doesn’t
work
Use It
Don’t
Use It
Slide 169
Works
Doesn’t
work
Use It
Don’t
Use It
Slide 170
Works
Doesn’t
work
Use It
Don’t
Use It
Fired.
Slide 171
Works
Doesn’t
work
Use It
Don’t
Use It
Fired.
Slide 172
Works
Doesn’t
work
Use It
Don’t
Use It
Fired.
✔
Slide 173
Works
Doesn’t
work
Use It
Don’t
Use It
Slide 174
Works and
Doesn’t Work
Use It and
Don’t Use It
Don’t
Use It
Slide 175
X
Works and
Doesn’t Work
Use It and
Don’t Use It
Don’t
Use It
Slide 176
Progressive Enhancement & The Nature of CSS
Slide 177
65% 35%
Slide 178
95% 5%
Slide 179
88% 12%
Slide 180
100% 0%
Slide 181
30-45% without 55-70% with CSS Grid Spring 2017
Slide 182
jensimmons.com/ presentation/ progressing-our- layouts
Slide 183
jensimmons.com/ presentation/ modern-layouts- getting-out-our- ruts
Slide 184
LABS.JENSIMMONS.COM
Slide 185
Slide 186
www.layout.land
Slide 187
Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons
