[The Sage] accepts the ebb and flow of things, nurtures them, but does not own them.Tao Te Ching; 2 Abstraction – as quoted in “A Dao of Web Design” by John Allsopp
While you are learning how to produce effective layouts you will come across many different views and practices. One prevailing and well established method is of course the use of grids. A lot has been written and discussed about grids in design, from historic examples, architecture, graphic and web design. Well worth your time to explore the depth of this topic.
When we talk about grids in webdesign, there are essentially 2 aspects to consider: the design method itself for layout (which will establish a set of rules controlling layout and white space) and the technical implementation of the grid design via CSS grid (which uses grid-specific code references to the design). Bear in mind that CSS grid is only one way of implementing a grid-based layout.
If you are new to grid design entirely – it will be worth your time to read up and explore their principles as possible design methods. The website thinkingwithtype.com by Ellen Lupton is a great introduction – check out the section on grid specifically.
Or have a read of the following essays written by our students in 2013, pre-dating the arrival of CSS grids. Enjoy :)
- analyse existing layout via automated wireframe overlay
- by Volkside Pty Ltd
- utilities for grid layout, measurement and alignment
- by Spry Media
Layouts in the wild
Before getting stuck in – let’s have a look at a few websites to understand their structure and page layout.
I’d strongly recommend that you start studying web layouts in any way that suits you. The Inspect Element alone will give great insights into how web layouts have been put together, and importantly, how they adapt across screen widths (as we’ll look at closer next week).
Inspired by CSS Grid: Andy Clarke at the State of the Browser event, 2019.
How effective are grids?
The following three sites are driven by the written word and present a vast amount of content.
Take a look at the sites, their main sections and individual pages and use the two bookmarklet tools to explore the layouts' structure, hierarchy and effectiveness.
- what are the strengths of the given grid layouts?
- what are the weaknesses of the given grid layouts?
- List 3 possible base units as starting point for a new grid design.
Let's discuss the outlined points and think of possible starting points for a new grid.
on learning web layout
Just a little reminder of my view of learning web layout: step-by-step and slowly does it :)
This was one of the steeper parts of the journey for me when I started. And if you're finding this difficult, that is normal! Hang in there and persist ~ it won't be as bad as you think in the end :)
My advice would be to tackle these in a way your brain can handle. Start with floats and flexible sizing with responsive units for starters and understand that method enough to implement your designs. Then venture further. CSS Grid will no doubt become the default as it is very powerful. However, remember that it is often used in combination with other layout methods which also serve as fallbacks ~ hence equally important to learn.
!! Remember !!
Fallbacks are important for most websites - especially once you get into the workplace. Projects with different scopes and varying priorities will mean that you cannot reply on the latest techniques only to get the job done.
With the grids now having firmly arrived in our browsers, we'll need to find our experts which will keep us up-to-date and teach us how to use all the new methods. In addition to those mentioned already, there's no one better than Rachel who is currently a technical writer for Google Chrome, Member of the CSS Working Group, contributing directly to the specs of the CSS Grid. Her sites and newsletter are brilliant and I can only highly recommend them!
CSS Grids – by Rachel Andrew
Thinking with Type – Grids
Grid Computing… and Design
Thinking Outside the Grid
Molly Holzschlag for ALA
- Five simple steps to designing grid systems
Compose to a Vertical Rhythm
Richard Rutter for 24ways
Making Modular Layout Systems
Jason Santa Maria for 24ways
Ethan Marcotte for ALA
There’s No Formula for Great Designs
Andy Clarke for 24ways
- design by grid
grid systems & tools
CSS Grid Generator
[by Sarah Drasner]
CSS Layout Generator
[by Brad Woods]
[by Steffan Williams]
[by Rasmus Schultz]
[by @mdo and @fat for Twitter]
960 grid system
[by Nathan Smith]
a word on frameworks
Excellent tools if you know what you are doing — they will not do you any favours if you are new and still getting to grips with CSS layout. While you're learning your coding, my advice is to stay away from frameworks such as bootstrap and create your own code. This can then become your own framework, your own, self-written code base for new projects. Best of all, you'll know exactly how your code works.
Having always used merely a plain HTML page with mere basic structural tags and a CSS with only the reset as starting point for my web projects, I often wondered whether it was just my preference.That was until I saw Rachel show the very same bare files during one of her talks and declare this her framework. Well, if this is how Rachel works...! Rachel, of course, is one our people of the web, web developer supreme and a woman whose dev skills I can only admire - and she's leading the way with CSS grids and keeping us all up-to-date. Do check out the links listed above. Thank you, Rachel ツ
implementing given layout
Your practical challenge today is to use your newly learnt layout skills to recreate 3 given layouts. This exercise comes in 2 phases. Today, we'll focus on the mobile first approach, working primarily on the typesetting for smaller screens.
We'll take this further next week when we'll extend the layout to larger screens and make it responsive.
The text quotes Dieter Rams, a widely recognised and respected German industrial and product designer whose work continues to be influential. In the 1970s, he wrote the now famous ten principles for good design which have become even more relevant today. I hope you will enjoy reading and working with this text.
Good content inspires good layout :)
Phase 1 task:
- work with the given HTML
- write the CSS required to implement the given 3 layouts, i.e. make copies of the existing CSS to edit for each of the layout versions
- focus on typesetting and spacing - this will become the mobile version of the page
webpage files (HTML/CSS/JPG)
screenshots of layouts, today's version
screenshots of layouts, for next week
original text + photos
Phase 1 - mobile first layouts
Phase 2 - responsive layouts
Please note: this is only a preview of next week's updates :) Our aim today are the previous layouts.