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.
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.
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.
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 $ .