Designing Intrinsic Layouts
A presentation at An Event Apart Boston in in Boston, MA, USA by Jen Simmons
DESIGNING INTRINSIC LAYOUTS JEN SIMMONS 2019 AN EVENT APART BOSTON
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
FLOW THE HISTORY OF LAYOUT TECHNOLOGY ABSPOS HTML TABLES FLASH FLUID FIXED RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 INTRINSIC
CSS Grid Flow Flexbox Overflow Alignment Floats Writing Modes Block Multicolumn Inline Viewport Units Inline-block Transforms Display: table Object Fit Margin Clip-path Negative margins Masking Padding Shape-outside Positioning Initial-letter & 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
Semantic HTML
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
FLOW THE HISTORY OF LAYOUT TECHNOLOGY 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
max-content auto max-content
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?
/* code for every browser, including no browsers without grid / @supports (display: grid) { / code that only runs in browser that support grid */ }
youtube.com/layoutland
NYTimes Talks
NYTimes Talks
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.
for free. You
can too.
Resources
The following resources were mentioned during the presentation or are useful additional information.
Code
The following code examples from the presentation can be tried out live.
Buzz and feedback
Here’s what was said about this presentation on social media.
