MA Web Design + Content Planning materials for applied art for the web • major project

peace sign in Ukrainian colours, blue + yellow

Layout design

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

illustration of grid with golden spiral

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 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 :)

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

Inspect element

screenshot of inspect element panels

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.

Group discussion

  1. what are the strengths of the given grid layouts?
  2. what are the weaknesses of the given grid layouts?
  3. 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.

View Jazz Poster page

banner image: unicorn on yellow tiles

visit Layout Land
You can find even more excellent videos are on Jen's Layout Land YouTube channel - highly recommended!! And of course, Jen is also one of our people of the web :)

reference links

  1. float: none | left | right;
    read ref on MDN
  2. display: flex;
    read CSS Flexible Box Layout Module on MDN
    read A Complete Guide to Flexbox on CSS tricks
  3. position: static | relative | absolute;
    read ref on MDN
  4. display: grid;
    read CSS Grid Layout ref on MDN
    view tutorials + examples by Rachel Andrew

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

useful reading

grid systems & tools

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

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:

  1. work with the given HTML
  2. 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
  3. focus on typesetting and spacing - this will become the mobile version of the page

Source files:

download source files

  • FOLDER: 10-principles
    webpage files (HTML/CSS/JPG)
  • FOLDER: layouts(phase1)
    screenshots of layouts, today's version
  • FOLDER: layouts(phase2)
    screenshots of layouts, for next week
  • FOLDER: srcs
    original text + photos

Phase 1 - mobile first layouts

  • layout screenshot
  • layout screenshot
  • layout screenshot

Phase 2 - responsive layouts

Please note: this is only a preview of next week's updates :) Our aim today are the previous layouts.

layout screenshots