Jen Simmons has a compelling talk (video) where she calls out web design as being far too dominated by the HEADER CONTENT SIDEBAR FOOTER pattern we’re all too familiar with. Print design, despite so often being dubbed “dead” or in massive decline by those of us in web design, still excels in quality and variety of layout.
Certainly we can learn from print design on the web, yeah?
Do we have the tools on the web to do it?
I’d say: yes. In the sense that we don’t need incredibly fancy CSS abilities to do more interesting layouts than we are doing now. Old school tools like floats and absolute positioning are capable of doing pretty cool stuff. Especially combined with slightly more modern web technologies we readily reach for today, like web fonts, media queries, and flexbox.
What are some modern tools that take us further?
CSS shapes are pretty cool! Razvan Caliman has an article about them. You can force text inside and element to wrap along a specific path. Those paths can be things like curved ellipses, polygons, or even an image mask.
.element { shape-outside: polygon(0 0, 0 300px, 300px 600px);
}Sara Soueidan has written about it for A List Apart. Chen Hui Jing has a great article about it too. Check out the demo right in that blog post:
Notice how it falls back well?
A great thing about CSS Shapes is that is has a natural fallback. No biggie. Have a square. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
— Jen Simmons (@jensimmons) February 11, 2015
Viewport units are pretty useful for print-style layouts as well. They make it trivially easy to, for example, size a container the exact size of the screen:
header.full-screen-hero { height: 100vh; background: url(/images/supergirl.jpg); background-size: cover;
}Not to mention layout’s-best-friend – flexbox. If you invest some time into learning flexbox, I think it gives you super layout powers in that your brain readily reaches for it to solve pretty much any sort of layout.
What is a shame we don’t have?
The most significant is probably “CSS regions”, which were close to being a real thing. Adobe put a bunch of work into it. There were use cases (magazine layout being a pretty solid one). There were polyfills. They allowed you to flow content from element to element. Those elements could be positioned and styled however you wanted. Super cool.
Then they kinda got the smack down (unfair, imho) and Blink pulled support. Sara Soueidan did an excellent job vouching for their importance in CSS Regions Matter, but alas, they seem off to history’s junk pile.
I would argue :nth-everything would be pretty darn useful too.
Are there things coming in the future to help?
Perhaps:
@chriscoyier I think what will get us closest to print on web is CSS Figures + Regions combined w/ Overflow module https://t.co/UvcR97kiLi
— Sara Soueidan (@SaraSoueidan) January 13, 2016
The figures spec seems targetted directly at print layout!
This specification describes how figures commonly seen in print
