Influencing Web Layouts with Print Layouts

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 The CSS Page Floats seems targetted directly at print layout!

This specification describes how figures commonly seen in print – e.g. tables, photographs with captions, and pullquotes – can be formatted with CSS.

The overflow spec seems to be working out a way to do what CSS regisons was trying to do (flow content):

The continue property gives authors the ability to request that content that does not fit inside an element be fragmented, and provides alternatives for where the remaining content should continue.

… although it doesn’t sound like you can specify an entirely different element for the content to flow to.

Wanna practice? Buy or borrow a magazine and give it a shot.

I did that the other weekend. I bought a Gourmet magazine and replicated one of the layouts I found in it.

It doesn’t mean you need to give up on what makes the web the web.

Universal access, responsiveness, all that good stuff. My demo used some flexbox to make the layout easier and ultimately more rigid. I used a little background-size: cover; to make the burgers fit the space as best they could. A few media queries to top it off and this print layout translated pretty well to the web.

More Examples

Here’s another one I did:

See the Pen Magazine Layout Attempt #2 by Chris Coyier (@chriscoyier) on CodePen.

This one was from a Scientific American:

It even had an SVG type lockup in it.

Stuart Robson created a layout based on an article he saw in Lagom magazine:

Helen V. Holmes is into the idea:

@chriscoyier I’m into that sorta thing (https://t.co/oPPnKAvvXR). Planning to do more. Really inspired by https://t.co/l07e3NHX9R.

— Helen (@helenvholmes) January 13, 2016

And she’s right about The Great Discontent:

Here’s another by Bart Veneman:

See the Pen Magazine layout – A piece of Pierce by Bart Veneman (@bartveneman) on CodePen.

This is kinda like “Art Directed Articles” right?

In some sense. I thought of those as one-offs that were sort of intentionally different from one anothers. It seems like a bit of a trend, but in looking back over the last 5-6 years, it’s maybe not so much a trend but just web designers stretching their arms once in a while.

Taking inspiration from print layout could be in the form of one-off articles, or entire sites.

Another thing attempted back-in-the-day: Treesaver. It was an attempt at automating these kind of layouts that was probably a bit before it’s time.

There is some pushback on this whole idea.

Some folks straight don’t like it.

@chriscoyier It's an excercise in futility that translates into non-productive burned hours and wasted $.

— John V. Petersen (@johnvpetersen) January 13, 2016

Ah well. You can’t convince them all.

Further Reading

• DESIGN MACHINES How to survive the digital apocalypse by Travis Gertz
• The Web’s Grain by Frank Chimero