Chapter 5: Layout

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

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

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

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

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

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.

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:

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:

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:

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:

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:

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

• A ratio-based, modular approach to grids allows us to navigate a medium where we cannot know the container size, nor what type of content will flow into that container. Content-out Layout
  by Nathan Ford, A List Apart

• Grids not only provide web creators a structure to start but can also provide design elements to create professional-grade websites that are readable, adaptable, and organized. Website Grid Design: Comprehensive Guide for Web Designers, Ramotion

• A grid brings cohesion to a composition. It helps people understand the stories you’re telling by suggesting hierarchies. Grids inform people what to read first, then next, and how much attention to give it. Inspired Design Decisions: Pressing Matters, Andy Clarke, Smashing Magazine

• Grids help designers create cohesive layouts, allowing end users to easily scan and use interfaces. A good grid adapts to various screen sizes and orientations, ensuring consistency across platforms. Using Grids in Interface Designs, Nielsen Norman Group

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

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.

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.

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.