A presentation at An Event Apart Seattle in in Seattle, WA, USA by Jen Simmons
DESIGNING INTRINSIC LAYOUTS JEN SIMMONS 2019 AN EVENT APART SEATTLE
youtube.com/layoutland
The Official Timeline of Web Page Layout The No-Layout Layout Table -based Layouts Hand -c oded F loat Layouts F rame wor k Layouts g n i z a m A ! e r u t u F
THE HISTORY OF LAYOUT TECHNOLOGY FLOW ABSPOS HTML TABLES FLASH FLUID FIXED RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 INTRINSIC
CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms Object Fit Clip-path Masking Shape-outside Initial-letter Flow Overflow Floats Block Inline Inline-block Display: table Margin Negative margins Padding Positioning & everything else in CSS
Flow & writing mode CSS Grid Flexbox Multicolumn
HOW TO
LABS.JENSIMMONS.COM
LABS.JENSIMMONS.COM/2019/01-007A.html LABS.JENSIMMONS.COM/2019/01-007B.html LABS.JENSIMMONS.COM/2019/01-007C.html LABS.JENSIMMONS.COM/2019/01-007D.html LABS.JENSIMMONS.COM/2019/01-007E.html LABS.JENSIMMONS.COM/2019/01-007F.html LABS.JENSIMMONS.COM/2019/01-007G.html LABS.JENSIMMONS.COM/2019/01-006A.html LABS.JENSIMMONS.COM/2019/01-006B.html LABS.JENSIMMONS.COM/2019/01-006C.html LABS.JENSIMMONS.COM/2019/01-006D.html LABS.JENSIMMONS.COM/2019/01-008A.html LABS.JENSIMMONS.COM/2019/01-008B.html LABS.JENSIMMONS.COM/2019/01-008C.html
HEADER WITH THIS NAVIGATION BAR OF LINKS
7A
Firefox Reader View Safari Reader Mode Edge Reading View Firefox Listen
7B
7C
FLOATS SUCK
The Official Timeline of Web Page Layout The No-Layout Layout Table -based Layouts Hand -c oded F loat Layouts F rame wor k Layouts g n i z a m A ! e r u t u F
THE HISTORY OF LAYOUT TECHNIQUES ON THE WEB FLOW ABSPOS HTML TABLES FLASH FLUID FIXED RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 INTRINSIC
LET’S USE GRID
7D
1FR 1FR 1FR
8% 75% 18% 8FR 75FR 18FR
7E
GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM
GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM
GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM FLEX CONTAINER FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM
FLEX GRID
7F
2 COLUMNS 2 ROWS LOGO IS 2 ROWS HIGH
S W O R 2 N PA
7G
writi ng-mo de: v ertic al-rl ;
writi ng-mo de: v ertic al-rl ;
YAWN
6A
6B
6C
6D
But what about Internet Explorer?
@supports (display: grid) { /* code that only runs in browser that support grid */ }
youtube.com/layoutland
8A
8B
1fr 3fr 3fr 1fr
12% 37% 2% 37% 12%
1fr 3fr 3fr 1fr
1fr 3fr 3fr 1fr
1 1 2 3 4 5 2 3 4 5 1fr 3fr 3fr 1fr
1 1 2 3 2 3 4 5 grid-column: 1 / 4; grid-row: 1 / 2; 4 5
1 1 2 3 2 3 4 5 grid-column: 1 / 5; grid-row: 1 / 2; 4 5
1 1 2 3 2 3 4 5 grid-column: 2 / 3; grid-row: 2 / 4; 4 5
1 1 2 3 2 3 4 5 grid-column: 3 / 4; grid-row: 2 / 4; 4 5
1 1 2 3 2 3 4 5 grid-column: 3 / 5; grid-row: 3 / 5; 4 5
8C
1fr min-content minmax(100px, 400px)
fixed length (em, rem, px, ch, vh, vw) min-content, max-content % FR units minmax() auto
labs.jensimmons.com/2019/01-001.html
labs.jensimmons.com/2019/01-002.html
labs.jensimmons.com/2019/01-003.html
labs.jensimmons.com/2019/01-004.html
LABS.JENSIMMONS.COM
youtube.com/ layoutland Subscribe by email at layout.land
Thanks! JENSIMMONS.COM @JENSIMMONS LAYOUT.LAND LABS.JENSIMMONS.COM
Twenty-five years after the web began, we finally have a real toolkit for creating layouts. Combining CSS Grid, Flexbox, Multicolumn, Flow layout and Writing Modes gives us the technical ability to build layouts today without the horrible hacks and compromises of the past. But what does this mean for our design medium? How might we better leverage the art of graphic design? How will we create something practical, useable, and realistically doable?
In a talk full of specific examples, Jen will walk you through the thinking process of creating accessible & reusable page and component layouts. For the last four years, Jen’s been getting audiences excited about what, when, and why. Now it’s time for how.
Here’s what was said about this presentation on social media.
for free. You
can too.