Design for web

Chapter 5: Layout

[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”,
2000, by John Allsopp

focus points for page layouts

Our core goal as webdesigners is always to deliver a site's mission well, to create webpages that are accessible and easy to use, delivering a pleasant user experience for all. Refined typesetting and good use of visuals are paramount and a good final design will rely on an effective layout of all content. Good layout design will organise content aiming to make access easy and the visual feel of the webpage fitting the intended message.

There is no one perfect way to achieving a good layout for a webpage but there are principles which will help us understand what our objectives must be. It is a given that all content needs to be clearly presented and will have to displayed in a manner fitting the site's goal. If we are to present a serious and formal site which offers content to educate or inform people, our approach must be clarity and ease of reading above all. If our site's design is less formal and aims for an emotional response, in addition to clarity and legibility, we also have to consider how our layout might support this mission.

consistency

illustration of repeated elements.

Whatever our approach to the layout, be that minimal and calm or irregular and busy, consistency across the page itself, and in turn all other pages of the website, will be key. When designing the layout, we will aim for establishing patterns in our presentation for aspects such as type sizing, alignment and white space.

Repeating these patterns across the website's pages will establish a clear atmosphere and feel. This will become familiar the more people browse the site. Consistency will not only make the site's content more cohesive, and therefore accessible to everyone, it will also contribute to supporting overall brand message.

alignment & balance

illustration of aligned elements, with even and uneven balance.

Consistent alignment of all content elements enhances readability and will guide the eye through the content. When elements are aligned to a common axis, a clean and organised appearance will be established. A clear visual flow[1] will make the design more aesthetically appealing as well as easier to view and read.

A clear strategy for alignment overall will create a balance across the page's content. This does not need to be an even balance, such as a symmetric spread of visual weight[2]. It can be a balance with creates tension via asymmetric presentation.

hierarchy

illustration of repeated elements.

Studies on web browsing habits show that our attention spans are short and that most of us will skim read the page first before returning to the points that interest most. This is something to keep in mind when designing our page layouts. To aid skimming of content the layout has to establish a clear vertical rhythm between headings, sub-headings, text and media elements.

Setting the headings to appropriate sizes, organising content into fitting groups and defining clear white space between the elements will allow us to define a clear visual hierarchy between elements. This will help people to quickly understand the structure of the content on the page and make skim reading easy.

usability & accessibility

illustration of menu and various different elements.

One of the core functions of layout is to make a webpage user-friendly and accessible. When designing layout, we have to consider the page as whole. This means including all functions and all content types (text, images, videos, forms). The website's menu has to be integrated into the layout with a focus on ease of use and accessibility. The text and media are to be presented with inclusivity in mind ~ cater for everyone regardless of their abilities or their preferred devices or browsers.

This aspect of page layout is both visual and technical. Both the design and the underlying code will need to consider how to best address the usability and accessibility of the page.

responsiveness

illustration of menu and various different elements.

An additional challenge for layout design is of course its adaptability to different viewports[3]/screen sizes. We have to consider how the presentation of our page elements will reshuffle and realign when the screen sizes and device orientations change. The layout has to accommodate all content and ensure consistency of the overall presentation and feel across the many different ways someone might choose to access our site.

During both the design and development stages, we will approach the layout starting with mobile first. We'll start by designing for the smallest size, then adjust the layout when there is more space on the larger screens. This method will be more productive as it will expand on a fairly linear layout on smaller viewports, allowing us to progressively change this presentation of content into a more complex layout as the size increases.

footnotes

  1. 'Visual flow' describes the movement and direction that someone's eyes follow when viewing a webpage. It is the path that guides attention from one element to another, creating a sense of visual continuity. Visual flow is created by utilising various design methods such as layout, typography, use of colour and contrast, images and visual hierarchy.
  2. 'Visual weight' is the perceived importance or prominence of an element of content on a webpage based on its visual characteristics. It is influenced by various design elements, such as size, color, contrast, placement, and visual hierarchy.
  3. The term 'viewport' refers to the visible area of a web page displayed within a browser window on any given device. It represents the part of the website that is visible without scrolling; it's influenced by factors such as the device screen size, browser window size, and zoom level.
illustration of grids, Fibonacci spiral and wireframes.

layout by numbers

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. For page layout, it can be traced back to early print when the grid was used to set type for printed outputs such as books and newspapers.

Grid layout for the web is a popular technique as allows us to create complex layouts with relative ease. It is a two-dimensional layout system that uses a grid of rows and columns, created by intersecting vertical and horizontal lines, to organise web page content. The number of columns and rows will vary depending on the design in hand. A grid might be very simple, with only very few rows and columns ~ or it might be comprised of a large number of rows and columns to provide more flexibility when creating a more complex layout.

types of grid

There are many different ways of creating a grid. We can take any of our elements as initial measure to devise our grid. This could be the type, the media (images or video) or we could use some classic measures such as the Fibonacci spiral[1]. The main benefit of a grid is the repeating measure which is created by either a division or a multiplication of a specific unit, or by the application of a consistent rhythm of distances between elements across the available space.

Baseline Grid:

illustration of baseline grid.

This grid uses the baseline and the letter's x-height[2] as unit to establish the sizing of the grid elements, ie the spacing between the lines, horizontally as well as vertically. Widths of content elements for columns of text, or images and other media, will be calculated as multiples of this unit.

By using the typeface's measure as guide for both sizing of elements as well as alignments, a well balanced and harmonious vertical balance can be achieved. This grid is particularly effective for text-heavy pages. It can enhance the legibility and create a pleasant reading experience.

Golden Ratio Grid:

illustration of golden ratio grid.

The Golden Ratio[3] is a mathematical proportion, it is denoted by the Greek letter phi (Φ) and has an approximate value of 1.6180339887. It is considered as a means to create naturally balanced and harmonious proportions. It can be found as a prevailing pattern in nature where it is proven to evoke attraction and affecting the procreation of many species. Due to many studies of this natural effect, this proportion has been used by architects, artists and designers throughout history to create aesthetically pleasing artefacts.

This ratio can be applied to calculate the width and height of content elements, such as columns and their gutters. Instead of dividing or multiplying a given unit, the ratio is applied for measure, resulting in an aesthetically pleasing layout.

Fixed Grid:

illustration of fixed grid.

A fixed grid uses a set measurement to establish multiple columns and gutters, typically comprised of 12, 16 or 32. Columns are then combined to form larger display areas. For adaptive design, the proportions are respected, making use of the set units.

This grid is relatively easy to work with and is particularly useful for prototypes and sites with calm and cleanly structured layouts. Varying the number of columns will add flexibility for the measure of content elements and alignment points.

Fluid Grid:

illustration of fluid grid.

This grid is designed to adapt to the space available ~ depending on device, screen size and resolution. Using either percentages or vw (viewport width[4]) as measure, the design and layout will adapt and scale proportionally to the viewport as the units used are relative.

This method is particularly effective for responsive design and, when implemented well, will ensure that webpages remain accessible across the various different screen sizes.

Modular Grid:

illustration of modular grid.

For more complex or dynamic layouts, such as creative portfolios or showcases, a more lose definition of a grid can be applied. A modular approach uses a variety of different sizes via different content blocks which are then combined and aligned along different axis.

A modular grid might use more than one grid type and combine them. Or it might use the irregular sizes of content elements to create a more unusual and engaging layout that will complement the site's content and mission.

related reading

footnotes

  1. The Fibonacci spiral is a pattern that occurs in nature, art, and mathematics. It is based on the Fibonacci sequence, a series of numbers in which each number is the sum of the two preceding ones (0, 1, 1, 2, 3, 5, 8, and so on). It appears in various natural phenomena like the shape of galaxies, hurricanes, seashells, and flower petals. As it is naturally aesthetically pleasing, it is often used in art and design.
  2. X height describes the highest point of a lowercase 'x' in a typeface. It is a relative unit for measuring the proportion and visual balance of a type's letter shape and form.
  3. The golden ratio is closely related to the Fibonacci sequence and is also referred to as the divine proportion or the golden mean.
  4. The viewport width is a relative measure which is linked to the width of the visible area on a webpage within the browser on any given device.
illustration of cogs and layout on 3 different devices.
Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.” Ethan Marcotte “Responsive Web Design”, 2010,
hat tip: John Allsopp “A Dao of Web Design”, 2000

the way forward

It is now some years ago that Ethan Marcotte[1] coined the term “responsive web design”, also abbreviated to ‘RWD’, via his article on A List Apart[2] in 2010. Though there have been great developments with more tools and debates in different approaches – this article is still the perfect introduction to the topic :)

screenshot of Ethan's demo page.

read ‘Responsive Web Design’ | view final demo

creating adaptive layouts

The early web was more predictable in terms of sizing and sites were created in fairly fixed dimensions. Today, we can no longer design any site without considering carefully the many different devices and screensizes affecting layout and presentation. A good responsive design will allow the content to adapt to the viewport, be that a computer or mobile, or even a digital TV or game console and the different browsers. While the specifics will depend on project and target group – a ‘mobile first’[3] approach will deliver best results.

During the design stage for layout we will need to plan for a layout that will change depending on the screen size. We will create a linear layout for the small screens, then add columns, or more complex alignment and spacing, when the viewport's width gets larger. This can happen through the change in device orientation as well as the larger screens on different devices.

content out

When we get to the coding, we will initially only focus on the markup of our content to be logical and accessible. By default and without any styling applied, content on the web is already responsive and will adapt to the space available. It is only when we start to write our CSS to implement our design that we will change this inherently responsive nature of content flow. This is why the ‘mobile first’ approach is the most productive. We will allow the content to flow in its default order, focusing on visual hierarchy and clear typesetting first.

breakpoints

From a visual design perspective, we will decide on breakpoints[4].These are screen widths which we will use to make changes to layout. We will work on our design, then consider how the layout might change if more space is available. In short, we'd view our design and change the width. Once it looks rubbish, we make changes to optimise the layout for the wider viewport.

It is important to approach the finding of our breakpoints from a design perspective and not let the devices become a guiding concern. The amount of devices, resolutions and ultimately viewports is growing and constantly changing. It would be impossible, and utterly impractical, to aim to deliver device-specific layouts. Our approach will be most effective if we approach the responsive nature of our design with the ‘mobile first’ method, and adapt our design with changes to screen width instead. This is a more future-proof approach as the device itself will not matter and layout will change only according to viewport size.

From a technical/coding perspective, we will implement our breakpoints via media queries in CSS. We will start by setting all styles for the overall page, completing the CSS for design aspects such as typesetting, colour and overall spacing. This will all apply to the smallest screens. Once the core settings are in place, we will proceed to adapt the layout to increasing viewports, as required by the design.

line animation, showing person at computer, resizing the window on screen with mouse drag

We then adopt a new habit ツ
The habit of continuously testing the layout in differently sized viewports as we write our CSS and change the layout to make the most of the available space. Testing as we go will allow us to get a clear preview of how our layout adapts. We can initially check on the different screen widths by simply picking up the browser window's edges and resizing the window which will show how our layout adapts.

While this will work well during production, we will of course have to test our pages on actual devices, different operating systems and browsers to ensure our previews were true.

responsive design view

Fortunately, browsers have come a very long way ツ You're lucky to begin your journey into web work at a time when you do not need any specific tools to test your responsive designs with. Our browsers now have built in dev tools - easy.

responsive design view in Firefox

If you cannot see these options, check your preferences and enable the developer tools (sometimes found under ‘advanced’ settings). Get used to the ‘Inspect Element’ and use the tools for ‘responsive design view’, some call it ‘device toolbar’, to check on your RWD.

related reading

footnotes

  1. Ethan Marcotte is a design, speaker and author. He is credited with having coined the term ‘responsive web design’ in 2010; his article of the same title has had a huge impact on web design and development. Check out his profile on People of the web.
  2. The ‘mobile first’ method starts work on layout with the smallest dimensions. We will first consider the linear nature of content presentation and then adapt the layout as more screen space becomes available through different orientations of the device, or devices with larger screens.
  3. The ‘mobile first’ method starts work on layout with the smallest dimensions. We will first consider the linear nature of content presentation and then adapt the layout as more screen space becomes available through different orientations of the device, or devices with larger screens.
  4. ‘breakpoints’ are typically defined using CSS media queries, which allow different styles to be applied based on the screen width.

Implementing given layouts

Your practical challenge is to use your newly learnt layout skills to recreate 3 given layouts. This exercise comes in 2 phases. First, in phase 2, following the mobile first approach, work on the typesetting for smaller screens. Then in phase 2, you will 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:

  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
screenshot of design, phase 1. screenshot of design, phase 1. screenshot of design, phase 1.

Phase 2:

  1. work with the given HTML, each layout has its own HTML file!
  2. make copies of the existing CSS to edit for each of the layout versions + link to relevant HTML
  3. mobile first CSS with focus on colour, typesetting and spacing
  4. expand CSS with media queries and add layouts for larger viewports
screenshot of design, phase 2. screenshot of design, phase 2. screenshot of design, phase 2.

Source files:

download source files

  1. FOLDER: 10-principles
    webpage files (HTML/CSS/JPG)
  2. FOLDER: layouts (phase1)
    screenshots of layouts
  3. FOLDER: layouts (phase2)
    screenshots of layouts
  4. FOLDER: srcs
    original text + photo

possible solutions

If you're done with the challenge, have a look at a possible solution to implementing the given layouts. Each of the three layout uses a different layout technique as a demo of how these can be applied.

how to view CSS:

Open the page in the browser and make use of the 'Inspect' via dev tools to view the CSS; alternatively, right-click the page, and choose 'view page source' ~ then click the link to the CSS to view the code.

Objectives:

  1. produce the given mockup as webpage with the responsive layout
  2. use the mobile first approach and ensure clear presentation across different screen widths
  3. implement at least the 2 given layouts: one for mobile and one for the larger desktop viewports

NOTE: you can work from scratch by downloading the first file pack (#1) which includes only the content files. The second file pack (#2) includes the webpage with the complete HTML and partial CSS, includes font links as well as the reset.

screenshot of design.

Project files:

Source files:

download source files #1 files only: images, text file + screenshots of design

download source files #2 images in web folder with text marked up (HTML), CSS file with reset + screenshots of design

RWD with CSS grid

view final webpage

See previous notes under 'Responsive web design' for how to view the RWD of different screen sizes via the developer tools.

Learn layout with CSS

The 'Introduction to CSS layout' section of the MDN site introduces the different approaches to layout.

illustration of CSS layout, normal flow, © MDN.
reference links for layout
  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

Using background guide images

Layout can be quite difficult to learn at the start. It can be tricky to know whether our layout is coming together as it should. Once we start using the developer tools (and 'inspect element'), this becomes a little easier ~ but if you're not ready for this yet, don't worry - one step at a time ツ

One possible way of approaching the coding of our first layouts is to use a background image that will sit behind the content and allows us to preview the proportion and sizes of the layout blocks. Whichever method we use for positioning and layout.

view demo: background images as layout guides download: demo webpage files

illustration of CSS layout, normal flow, © MDN

Interactive Guides by Joshua Comeau

Layout is not easy to learn ~ these two guides might help ツ

Learn grid layout with CSS

The 'Basic concepts of grid layout' section of the MDN site will introduce the concepts and terminology involved in CSS grids. Showing some basic examples, you will learn the code involved in creating grid layouts.

The 'CSS grid layout' section covers the code in more detail, giving links to specific references to all related properties.

illustration of CSS grid example, © MDN.

read: Basic concepts of grid layout read: CSS grid layout

Grid by Example

This website by Rachel Andrew is of the most comprehensive resources for learning CSS grid. The site includes a collection of examples, demos and video tutorials which you can work through to understand how to create CSS grids.

website screenshot.
learn: Get Started with Grid Layout

Learn by playing

flexbox froggy screenshot.

Flexbox Froggy, a game where you help Froggy and friends by writing CSS code.

grid garden screenshot.

Grid Garden where you write CSS code to grow your carrot garden.

Using media queries

The MDN site section on media queries introduces the concept and the applicable media. You will find out about the different media types and how to implement media queries for both responsive media, accessibility as well as media features.

CSS code for media queries, © MDN.

read: Using media queries read code reference: @media