The Layouts of Tomorrow

If you’ve been to any web design talk in the last couple of years, you’ve probably seen this famous tweet by Jon Gold:

It mocks the fact that a lot of today’s websites look the same, as they all follow the same standard layout practices that we’ve collectively decided to use. Building a blog? Main column, widget sidebar. A marketing site? Big hero image, three teaser boxes (it has to be three).

When we look back at what the web was like in earlier days, I think there’s room for a lot more creativity in web design today.

Enter CSS Grid

Grid is the first real tool for layout on the web. Everything we had up until now, from tables to floats to absolute positioning to flexbox - was meant to solve a different problem, and we found ways to use and abuse it for layout purposes.

The point of these new tools is not to build the same things again with different underlying technology. It has a lot more potential: It could re-shape the way we think about layout and enable us to do entirely new, different things on the web.

Now I know it’s hard to get into a fresh mindset when you’ve been building stuff a certain way for a long time. We’re trained to think about websites as header, content and footer. Stripes and boxes.

But to keep our industry moving forward (and our jobs interesting), it’s a good idea to take a step back once in a while and rethink how we do things.

If we didn’t, we’d still be building stuff with spacer gifs and all-uppercase <TABLE> tags. 😉

So, how could things look?

I went over to dribbble in search of layout ideas that are pushing the envelope a bit. The kind of design that would make frontend developers like me frown at first sight.

There’s a lot of great work out there - here’s a few of my favorites:

"Warehouse" by Cosmin Capitanu
"Fashion Boutique" by KREATIVA Studio
"Organic Juicy Co." by Broklin Onjei
"Travel Summary" by Piotr Adam Kwiatkowski
"Digital Walls" by Cosmin Capitanu

I especially like that last one. It reminds me a bit of the “Metro Tiles” that were all the rage in Windows 8. Not only is this visually impressive, its very flexible too - I could see this working on a phone, a tablet, even on huge TV screens or in augemented reality, as suggested by the designer.

How hard is it to make something like this, given the tools we have today? I wanted to find out and started building a prototype.

I tried to approach this with real production constraints in mind. So the interface had to be responsive, performant and accessible. (It’s not required to be pixel-perfect everywhere though, cause you know - that’s not a real thing.)

Here’s how it turned out:

You can check out the final result on Codepen.

👉 Since this is just for demo purposes, I did not include fallbacks and polyfills for older browsers. My goal was to test the capabilities of modern CSS here, so not all features have cross-browser support (read below). I found that it works best in recent versions of Firefox or Chrome.

Some of the things that made this interesting:

Layout

Unsurprisingly, the essential factor for the “Metro Tiles” is the grid. The entire layout logic fits inside this block:

.boxgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 2rem .5rem;

&__item {
display: flex;

&--wide {
grid-column: span 2;
}
&--push {
grid-column: span 2;
padding-left: 50%;
}
}
}

The magic is mostly in the second line there. repeat(auto-fit, minmax(150px, 1fr)) handles the column creation responsively, meaning it will fit as many boxes as possible in a row to make sure they align with the outer edges.

The --push modifier class is used to achieve the design’s effect where some boxes “skip” a column. Since this is not easily possible without explicitly setting the grid lines, I opted for this trick: The actual grid cell spans two columns, but only allows enough space for the box to fill have the cell.

Animation

The original design shows that the section backgrounds and the tile grid move at different speeds, creating the illusion of depth. Nothing extraordinary, just some good old parallax.

While this effect is usually achieved by hooking into the scroll event and then applying different transform styles via Javascript, there’s a better way to do it: entirely in CSS.

The secret here is to leverage CSS 3D transforms to separate the layers along the z-axis. This technique by Scott Kellum and Keith Clark essentially works by using perspective on the scroll container and translateZ on the parallax children:

.parallax-container {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;

/* set a 3D perspective and origin */
perspective: 1px;
perspective-origin: 0 0;
}

.parallax-child {
transform-origin: 0 0;
/* move the children to a layer in the background, */
/* then scale them back up to their original size */
transform: translateZ(-2px) scale(3);
}

A huge benefit of this method is the improved performance (because it doesn’t touch the DOM with calculated styles), resulting in fewer repaints and an almost 60fps smooth parallax scroll.

Snap Points

CSS Scroll Snap Points are a somewhat experimental feature, but I thought it would fit in nicely with this design. Basically, you can tell the browser scroll to “snap” to certain elements in the document, if it comes in the proximity of such a point. Support is quite limited at the moment, your best bet to see this working is in Firefox or Safari.

There are currently different versions of the spec, and only Safari supports the most recent implementation. Firefox still uses an older syntax. The combined approach looks like this:

.scroll-container {
/* current spec / Safari */
scroll-snap-type: y proximity;

/* old spec / Firefox */
scroll-snap-destination: 0% 100%;
scroll-snap-points-y: repeat(100%);
}
.snap-to-element {
scroll-snap-align: start;
}

The scroll-snap-type tells the scroll container to snap along the y axis (vertical) with a “strictness” of proximity. This lets the browser decide whether a snap point is in reach, and if it’s a good time to jump.

Snap points are a small enhancement for capable browsers, all others simply fall back to default scrolling.

Smooth Scroll

The only Javascript involved is handling the smooth scroll when the menu items on the left, or the direction arrows on top/bottom are clicked. This is progressively enhanced from a simple in-page-anchor link <a href="#vienna"> that jumps to the selected section.

To animate it, I chose to use the vanilla Element.scrollIntoView() method (MDN Docs). Some browsers accept an option to use “smooth” scrolling behaviour here, instead of jumping to the target section right away.

The scroll behaviour property is currrently a Working Draft, so support is not quite there yet. Only Chrome and Firefox support this at the moment - However, there is a polyfill available if necessary.

Think outside the box(es)

While this is just one interpretation of what’s possible, I’m sure there are countless other innovative ideas that could be realized using the tools we have today. Design trends may come and go as they always have; but I truly think it’s worth remembering that the web is a fluid medium. Technologies are constantly changing, so why should our layouts stay the same? Go out there and explore.

Further Resources

Webmentions

  1. The Layouts of Tomorrow Max Böck shows how to break out of the common layout patterns with the power of CSS Grid. Read it Our Sponsor 15 Tools and Resources That Designers Are Using In 2018 These tools and resources will help you on your way to become more productive. They will keep you better informed, and keep a step ahead of your competition. Check them out Going Home A lovely WebGL project made by 302 chanwoo. Check it out Roller Roller is a Sketch plugin that helps you find and fix design inconsistencies. Check it out JavaScript engine fundamentals: Shapes and Inline Caches An article by Mathias Bynens that describes some key fundamentals common to all JavaScript engines. Read it More Unicode Patterns Yuan Chuan shows how to create even more fantastic Unicode patterns. Read it Theme For A Dream A beautiful audio-visual web experience using WebGL and Web Audio created for the launch of Natureboy Flako’s second album “Theme for a Dream”. Check it out Shy blob Cassie Evans created this super-cute dancing blob demo using tracking.js for face detection. The blob stops dancing when you watch. Check it out Free Font: Renner A beautiful evolution of Futura designed by indestructible type. Get it Spaghetti Audio A fun demo by Joe Harry. Check it out Distinct Design Systems An interesting article by Dan Mall about what makes a design system better than any other. Read it ColorSpark Luke Johnson created this tool to help designers find unique colors and striking gradient combinations. Check it out World Cup 2018 …in JSON The classic API for the World Cup, now with all the new data for 2018. Check it out ChromeREPL In case you missed it: a Sublime Text plugin to execute JavaScript in Google Chrome. By Arthur Carabott. Check it out Ok→Cancel versus Cancel→Ok An interesting article on how buttons are arranged in the Factorio game. Read it The Problem with Patterns Cathy Dutton asks the question if design patterns actually result in better-designed products and services. Read it 8-Point Grid: Typography On The Web Ellito Dahl shares some best practices for 8pt grid typography. Check it out Yett A small library to control the execution of scripts on a website. Check it out Weboji A library for building your own animoji embedded in Javascript/WebGL applications. Check it out Vue Native A great project by GeekyAnts: a framework to build cross platform native mobile apps using JavaScript. Read more about it in this article. Check it out Google PageSpeed Insights – Scoring 100/100 with WordPress Brian Jackson’s step-by-step guide on how to achieve better website performance. Read it Pure Bash Bible A collection of pure bash alternatives to external processes. Check it out From Our Blog Full Image Reveal Effect A simple fullscreen image reveal effect where thumbnails slide out of the viewport to reveal a larger image. Check it out Collective #425 was written by Pedro Botelho and published on Codrops. Source link
  2. Aaron Gustafson
    Love this demo from Max Böck! Read on Max Böck
  3. Pablo Lara H
    The Layouts of Tomorrow by @mxbck buff.ly/2JGuqqC
  4. Jonathan Torke
    The Layouts of Tomorrow mxb.at/blog/layouts-o… #Design
  5. Web 2 Robot
    The Layouts of Tomorrow mxb.at/blog/layouts-o… #Design
  6. The Layouts of Tomorrow → bit.ly/2uhN1yW @mxbck #UiCo
  7. A Book Apart
    The Layouts of Tomorrow by @mxbck: bit.ly/2tfrZk4
  8. Allan White
    The Layouts of Tomorrow mxb.at/blog/layouts-o… Thissss is really exciting, guys. CSS Grid is making web layout a LOT more fun. Don't miss the codepens. Love that new parallax approach.
  9. See Guo Lin ⌘
    The Layouts of Tomorrow mxb.at/blog/layouts-o…
  10. Electronic Minds
    The Layouts of Tomorrow by @mxbck buff.ly/2JGuqqC
  11. HTML Academy
    Есть мнение, что многие современные сайты стали выглядеть однотипно, так как следуют общим принципам компоновки. Заглянем в будущее, как подойти к раскладкам более творчески — mxb.at/blog/layouts-o…
  12. Lars Trieloff
    The Layouts of Tomorrow mxb.at/blog/layouts-o…
  13. Sara Soueidan
    This looks great!
  14. Jonathan Torke
    The Layouts of Tomorrow mxb.at/blog/layouts-o… #Webdesign
  15. Web 2 Robot
    The Layouts of Tomorrow mxb.at/blog/layouts-o… #Webdesign
  16. Veerle Pieters
    The Layouts of Tomorrow Max Böck shows how to break out of the common layout patterns with the power of using CSS Grid and Scroll Snapping. mxb.at/blog/layouts-o…
  17. Paul Hayton
    Cool use of CSS and layouts. mxb.at/blog/layouts-o…
  18. Maya Shavin
    Retweeted Veerle Pieters (@vpieters): The Layouts of Tomorrow Max Böck shows how to break out of the common layout patterns with the power of using CSS Grid and Scroll Snapping. mxb.at/blog/layouts-o…
  19. Justin Herren
    This is so true. Designing for the web has been predictable for a while now. We’ve put ourselves in a box. How do we break out of it (& get clients to buy off on it)? #digitaldesign #weboftomorrow mxb.at/blog/layouts-o…
  20. Hidde
    The Layouts of Tomorrow, great examples of layouts that were hard to do before and now more trivial with CSS Grid mxb.at/blog/layouts-o…
  21. Focus Mobility
    Top story: The Layouts of Tomorrow | Max Böck - Frontend Web Developer mxb.at/blog/layouts-o…, see more tweetedtimes.com/helikopterdsgn…
  22. EJCSoftwareSolutions
    Top story: The Layouts of Tomorrow | Max Böck - Frontend Web Developer mxb.at/blog/layouts-o…, see more tweetedtimes.com/helikopterdsgn…
  23. Roberto De Santis
    Top story: The Layouts of Tomorrow | Max Böck - Frontend Web Developer mxb.at/blog/layouts-o…, see more tweetedtimes.com/helikopterdsgn…
  24. Marcin Warpechowski
    Gorgeous web layouts based on CSS Grid mxb.at/blog/layouts-o…
  25. Chris Heilmann
    The Layouts of Tomorrow mxb.at/blog/layouts-o… another ode to grid :)
  26. Martynas Bučinskas
    mxb.at/blog/layouts-o… love it love it
  27. kemar
    "The Layouts of Tomorrow" #CSS mxb.at/blog/layouts-o…
  28. Alex Escalante
    CSS Grids are awesome! mxb.at/blog/layouts-o…
  29. Angular Programming
    RT @FrontendDaily: The Web Layouts of Tomorrow: mxb.at/blog/layouts-o… 💬 How modern CSS can aid with building “unconventional” layouts. ift.tt/2MmnCjm
  30. React.js News
    RT @FrontendDaily: The Web Layouts of Tomorrow: mxb.at/blog/layouts-o… 💬 How modern CSS can aid with building “unconventional” layouts.
  31. Learn Node.js
    RT @FrontendDaily: The Web Layouts of Tomorrow: mxb.at/blog/layouts-o… 💬 How modern CSS can aid with building “unconventional” layouts.
  32. Master Angular
    RT @FrontendDaily: The Web Layouts of Tomorrow: mxb.at/blog/layouts-o… 💬 How modern CSS can aid with building “unconventional” layouts.
  33. Node.js Frameworks
    RT @FrontendDaily: The Web Layouts of Tomorrow: mxb.at/blog/layouts-o… 💬 How modern CSS can aid with building “unconventional” layouts. #node #nodejs #angular #angularjs #javascript #react #node #nodejs #javascript
  34. Jesús Enrique Rojas
    😮 Wow, este post me abrió los ojos ante el #diseñoweb. Estaré haciendo mas diseños como estos 🔥 mxb.at/blog/layouts-o…
  35. Philip Schönholzer
    Nice! The Layouts of Tomorrow. mxb.at/blog/layouts-o…
  36. Carl Lister
    I do feel we are due a renaissance of sorts. The web has become a stale place, but there are signs it is changing. Improving technologies will lend itself to new ways of thinking. #cssgrid #ui #ux #rejuvenate mxb.at/blog/layouts-o…
  37. Florian Simeth ⓦ
    Awesome #CSS Grid Layout examples mxb.at/blog/layouts-o…
  38. Hieu Pham
    The Layouts of Tomorrow | Max Böck - Frontend Web Developer mxb.at/blog/layouts-o…
  39. nystudio107
  40. davehearne
    check out these #css grid techniques by @mxbck mxb.at/blog/layouts-o…
  41. Jonathan Torke
    The Layouts of Tomorrow mxb.at/blog/layouts-o… #Webdesign
  42. Web 2 Robot
    The Layouts of Tomorrow mxb.at/blog/layouts-o… #Webdesign
  43. i4interactive
    Top #WebDesign story: The Layouts of Tomorrow | Max Böck - Frontend Web Developer mxb.at/blog/layouts-o…, see more tweetedtimes.com/v/3007?s=tnp
  44. Skulimovskiy Den

Other things I've written