Layout

Web Layout Techniques & Strategies

Lessons

A brief overview of the challenges that web designers and front-end web developers face when laying out content, including designing for multiple screen sizes and choosing between different CSS positioning and display techniques.

View Video Lesson

When it comes to layout, the primary difference between designing for the web vs. designing for print is the size of the canvas: for print, the dimensions are fixed and known; for the web, the dimensions are forever changing and unknown. Another, equally important difference is the content: for print, the content is fixed and known; for the web, the content can change and could be unknown to the designer. The two mediums are fundamentally different.

So how do you design a layout for so many unknowns? Web designers need to think differently by shifting their mindsets to plan for the unknown when designing web-based layouts. Web designers can still utilize the core principles of print-based layout (e.g. grid systems, strong typography, etc.), but must also be able plan for and adapt to the many different scenarios that users might interact with their designs (e.g. how will this layout render on a large monitor vs. a small mobile phone, what should the content order/hierarchy be?) and the many constraints of the web (e.g. how will this text wrap? how can I fix my widows? how can I control the number of characters per line?)

The good news is that there are emerging techniques and strategies that have evolved over the years to help aid web designers and front-end web developers. There are several different content strategies and methodologies (e.g. a “mobile first” content strategy) that can help to prioritize content, different front-end approaches (e.g. a “mobile first” responsive design system using media queries set at breakpoints) that can help to address the many different screen sizes, and emerging tools and technologies (e.g. flexbox and CSS grid) that can help to enable and empower designers to create more interesting and robust layouts for the web with less concerns and worries for the many limitations and constraints inherent to the medium of the web.

Below is a collection of known strategies, best practices, and techniques for layout that many web designers and front-end designers have come to embrace over the years.

  • Responsive Design (designing for different preset screen sizes that to CSS media queries)
    • Predefined breakpoints (e.g. mobile, tablet, and desktop)
    • Reusable containers or “wrappers” (designed to provide control over the overall layout at target breakpoints)
    • Responsive typography (scaling type for different screen sizes to increase legibility and readability)
  • Reusable Grid Systems (defining a global grid system with reusable, semantic classnames for an easy content markup workflow)
    • Examples include: a 12-column grid, 16-column gird, custom grids, one-half/one-third/one-fourth columns, etc
  • Flexbox and CSS Grid (two powerful CSS layout modules that can be used in many different ways to provide more layout control; the days of float-based layouts and clearfixes are over and we can finally align items vertically with ease.)
    • Example: center align anything with display: flex; align-content: center; justify-content: center;
    • Example: header with logo left and nav right with  display: flex; justify-content: space-between;

Code Samples:

Box-sizing: border-box; (a relatively simple css property setting that has relieved many headaches thanks to no longer having to include padding and border as part of an element’s rendered width)

Box-sizing: border-box;

* {
box-sizing: border-box;
}
view raw boxsizing-borderbox.css hosted with ❤ by GitHub

Example of a simple, responsive reusable container

.container {
max-width: 1200px;
margin: 0 auto;
}
view raw responsive-container.css hosted with ❤ by GitHub

Example of mobile-first media queries with 2 breakpoints to target 3 screen sizes (small/mobile, medium/table, large/desktop+)

/* SMALL */
/* MEDIUM */
@media (min-width: 768px) {
}
/* LARGE */
@media (min-width: 1050px) {
}
view raw mobile-first-media-queries.css hosted with ❤ by GitHub

Example of a responsive typography setup (body font of 14px for small screens scaling to 18px for extra large screens)

body {
font-size: 87.5%; /* 14px default for small screens */
}
@media (min-width: 768px) {
body {
font-size: 100%; /* 16px for medium-large screens */
}
}
@media (min-width: 1250px) {
body {
font-size: 112.5%; /* 18px for extra large screens only */
}
}
view raw responsive-typography.css hosted with ❤ by GitHub

Example of CSS for responsive images

img {
max-width: 100%;
height: auto;
}
view raw responsive-images.css hosted with ❤ by GitHub

Example of HTML markup with semantic classnames for a global, reusable grid system

<div class="row">
<div class="one column">
<p>1 Column</p>
</div>
</div>
<div class="row">
<div class="one-half column">
<p>&frac12; Column</p>
</div>
<div class="one-half column">
<p>&frac12; Column</p>
</div>
</div>
<div class="row">
<div class="one-third column">
<p>&frac13; Column</p>
</div>
<div class="one-third column">
<p>&frac13; Column</p>
</div>
<div class="one-third column">
<p>&frac13; Column</p>
</div>
</div>
view raw semantic-grid.html hosted with ❤ by GitHub

Example of Flexbox CSS (SCSS) used for a global, reusable, semantic grid system

.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.row > .column {
flex-grow: 0;
flex-shrink: 0;
width: 100%;
margin: 1% 0;
padding: 1em;
@media (min-width: 550px) {
&.one-half {
width: 49%;
}
&.one-third {
width: 32.3333%;
}
&.two-thirds {
width: 65.6666%;
}
&.one-fourth {
width: 24%;
}
}
}
view raw semantic-grid.scss hosted with ❤ by GitHub

Exercises:

Try using flexbox for vertical (and horizontal) centering

See the Pen Flexbox: Centered Block (simplified) by kccnma (@kccnma) on CodePen.

Try using flexbox to setup a global, semantic grid system designed for responsive web layouts

See the Pen Reusable Semantic Grid System for Page Layout: Using Flexbox by kccnma (@kccnma) on CodePen.

Related Resources and Reading

Go Further

  • Experiment with Flexbox and CSS Grid to create as many different layouts as you can (see below for specific examples to try)
  • If you need to add support for older browsers, try creating a more robust layout that uses CSS Grid with a Flexbox fallback
  • Create your own front-end layout system with all of the bells and whistles
    • Fully Responsive
      • Media Queries with defined target breakpoints
      • Responsive typography (small font size for small screens, larger type on bug screens)
      • A reusable container that scales from fluid (small screens) to fixed with (on large screens)
      • Support for responsive media (e.g. max-width: auto for images)
    • A Reusable Grids
  • Recreate classic, well known and commonly used layouts
  • Bespoke, custom layouts
    • Be inspired, take risks, and have fun pushing the boundaries of layout on the web!

Author Notes

This was written specifically to help aspiring web designers as they aim to:

  • Apply best practices composition and typography in the context of layout for web sites and user interfaces.