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.
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; | |
| } |
Example of a simple, responsive reusable container
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } |
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) { | |
| } |
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 */ | |
| } | |
| } |
Example of CSS for responsive images
| img { | |
| max-width: 100%; | |
| height: auto; | |
| } |
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>½ Column</p> | |
| </div> | |
| <div class="one-half column"> | |
| <p>½ Column</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="one-third column"> | |
| <p>⅓ Column</p> | |
| </div> | |
| <div class="one-third column"> | |
| <p>⅓ Column</p> | |
| </div> | |
| <div class="one-third column"> | |
| <p>⅓ Column</p> | |
| </div> | |
| </div> |
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%; | |
| } | |
| } | |
| } |
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
- Blog Posts/Articles:
- CSS-Tricks Guides:
- Rachel Andrew’s 4-part Flexbox Articles on Smashing Magazine:
- Rachel Andrew‘s presentation Your CSS Layout Toolkit for 2019
- Jen Simmon‘s presentation Designing with Grid
- Jen Simmon‘s post The benefits of learning how to code layouts with CSS
- Jen Simmon‘s post Six Layout Myths Busted
- Mark Boulton‘s post Five simple steps to designing grid systems
- Videos:
- CSS Grid-Specific:
- Flexbox-Specific:
- Animated Flexbox Codepen by Blake Bowen
- Fun
- Tools:
- Chris Pederick’s Web Developer Toolbar
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
- Example: A CSS Grid w/ 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
- A 12 Column Grid
- A Semantic Grid (w/ one half, one third, one fourth columns, etc)
- A Flexible Grid (w/ no preset column classes)
- Fully Responsive
- Recreate classic, well known and commonly used layouts
- Site layouts (structural layouts)
- Header at the top, auto-filled main content area in the middle, footer at the bottom (scrollable)
- Fixed header at the top, scrollable main content area, fixed footer at the bottom
- Header and navigation layouts
- Header with logo left, nav right
- Header with centered logo and centered nav underneath
- Header with left-side drawer nav
- Header with right-side drawer nav
- Content layouts:
- Long-scrolling vertical page with stacked sections
- Alternating content sections (image left, text right > text left, image right > centered image, centered text > etc…)
- Reusable Grid System Flexbox Version (with .row parents and .column children)
- A Variation of the Reusable Grid System Version (w/ added reusable utility-like classes and overlapping red content boxes)
- Bespoke Flexbox Version (with a custom .item parent and two .image and .content children)
- A Variation of the Bespoke Flexbox Version (with overlapping red content boxes)
- Bespoke CSS Grid Version (with a custom .item parent and two .image and .content children)
- Old: Bespoke CSS Grid w/ Flexbox Fallback Version (with a custom .item parent and two .image and .content children)
- Reusable Grid System Flexbox Version (with .row parents and .column children)
- Media/Post object list (stacked posts with featured images left, text right)
- Grid of Wrapping Items (e.g. for a portfolio grid or grid view of products)
- Left sidebar, main content right
- Right sidebar, main content left
- Two sidebars (left and right), main content centered
- Fixed sidebar, scrollable main content
- Site layouts (structural 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.