It’s 2017. Flexbox, viewport units, media queries and calc are supported by the latest version of all the major browsers. They’re even supported as far back as IE9. We’re free to design layouts that were previously impossible without nasty CSS hacks.
We’ll soon be enjoying CSS Grid Layout, which allows us to place elements in both the vertical and horizontal space.
Jumping for joy in layout nirvana. Maybe.
Many designers are already taking advantage of these CSS advancements. However many more are still waiting for browser support to reach a level that suits their user base.
There’s also an issue with the design tools we use.
Using design tools such as Photoshop for website layout is problematic. Creating a document with a fixed dimension when the web has no fixed dimensions makes little sense. How do we explore how these layouts adapt to different widths and heights when our canvas is fixed?
The problem is that these tools are far removed from the raw materials that are used to make websites; CSS and HTML. In order to take advantage of advances in CSS, we need to get closer to these materials and currently none of these tools do so. How can we show a client how flexbox will work if flexbox isn’t built into our tools?
Designing in the browser gets the designer as close to the end material as they can possibly be. However, typing code into an editor invariably makes the designing process less immediate and it’s easy to get caught up in bugs and code writing.
A change in thinking
Design tools aside, in order to utilise these CSS advancements fully, we’ll need to challenge presumptions about what can be achieved when our designs hit the browser. We’re accustomed to adapting our designs to the limitations of CSS. This has become our default state of mind. This is even true in the early part of the design process where we make assumptions about layout and content order when sketching and wireframing.
Previously the web has been described as 'having no edges' because we don’t know where those edges are. There are simply too many screens sizes to know the dimensions and design accordingly. However, these new tools allow us to challenge this idea.
In print design there has always been a direct relationship between the size and aspect ratio of the canvas and the composition of the design that goes into it. Think about painting on a canvas; the canvas frames and restricts the painting so it makes sense that the composition takes a lead from the canvas dimensions. It’s said that there is no “fold” in web design. But maybe we should embrace the fold, using it to frame your designs.
On the web, canvas dimensions aren’t fixed but we now have tools that can adapt our designs to it. CSS advancements allow us to utilise the canvas dimensions to create a harmonious composition, we can arrange content in ways that could only be previously achieved on print.
How we're trying to embrace the possibilities
Powerful new CSS advancements, along with browser vendors' desire to support them has resulted in a fundamental shift in what can be achieved efficiently. This has affected our design process from the ground up. In order to get the most out of these new possibilities we're:
- Challenging our assumptions about content order in our wireframes.
- Constantly trying new design tools. We're seeking a tool that behaves in a similar way to the web but gives us the immediacy of Photoshop.
- We're pushing ourselves out of our comfort zone when designing key screens.
- Keeping ourselves inspired by following other designers.
In what ways are you pushing layout in your designs? How has this affected your work flow? Are you dumping design tools such as Photoshop?
Further reading
- Grid by Example - Useful introduction to CSS grid layout
- 6 Web Layout Myths Busted - Ways we can push our web design layouts
- The Experimental Layout Lab - Thoughts and code from highly influential designer, Jen Simmons
- Complete Guide to CSS Grid - In depth article on CSS grid layout
- Layout Land - A new place to explore CSS layouts (coming soon)