Andrew Dorokhov
There are two types of layout - block and table.
Table layouts aren’t actual anymore because they involve a lot of redundant code.
The most actual type of website layout is block-based. It is based on the <div> tag, which is used to create containers that encompass all the content of a page or a specific block. For example, we can divide a website into several blocks and each block will have its own <div> tag.
Responsive layout
A page layout should be responsive. That usually means three ingredients:
- A flexible, grid-based layout.
- Flexible images (and other media).
- Media queries (CSS3).
Reference example: open_in_new responsivewebdesign.com/robot .
A grid means you place elements relative to columns and rows, not absolute coordinates. A three-column page is already a grid. Good overview: open_in_new A Brief Look at Grid-Based Layouts in Web Design .
Grid layouts
Grid layout is a standard and a best practice for creating website layouts.
A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. Here’s a open_in_new great article about grid layouts.
We can:
- Create a CSS layout by ourselves.
- Using
float. - Using
flexbox. - Using
display: grid.
- Using
- Take a ready-made grid layout.
- open_in_new Bootstrap (part of the framework).
- open_in_new Foundation (part of the framework).
- open_in_new Skeleton .
Fluid grid from a fixed design
Many layouts start fixed:
#page {
width: 960px;
margin: 0 auto;
}
When you have a designed mockup, convert inner block sizes to percentages of their parent — especially easy with a 12-column grid:
.blog {
margin: 0 auto 53px;
width: 93.75%; /* 900px / 960px */
}
.blog .main {
float: left;
width: 62.8888889%; /* 566px / 900px */
}
.blog .other {
float: right;
width: 36.7777778%; /* 331px / 900px */
}
There is no single formula for the root container. Pick a percentage of the viewport empirically (for a common screen width) so the layout feels right:
#page {
margin: 36px auto;
width: 90%;
}
Fluid margins and padding use different contexts:
- Margins — percentage of the element’s container width.
- Padding — percentage of the element’s own width.
Flexible images
img {
max-width: 100%;
}
The image can be any width as long as it does not exceed its container; otherwise it shrinks to fit. The same rule works for other media:
img,
embed,
object,
video {
max-width: 100%;
}
IE6 and older do not support max-width. A separate stylesheet with width: 100% can approximate it, but tiny images will stretch.
Older Windows browsers (IE7 and below, Firefox 2 and below) scaled CSS-resized images poorly. A historical workaround was Microsoft’s open_in_new AlphaImageLoader filter:
.logo {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png", sizingMethod="scale");
}
Flexible backgrounds
Repeating backgrounds for “faux columns” (fixed graphic spanning fluid columns): classic articles by open_in_new Dan Cederholm and open_in_new Doug Bowman .
For non-repeating scalable backgrounds use open_in_new background-size
. Where support is missing, JS helpers like open_in_new Backstretch
can help. Media queries can also swap background images per resolution range.
More experiments with wide images in fluid layouts: open_in_new Richard Rutter’s imagetest . Server-side image selection approaches were discussed by open_in_new Bryan Rieger .
Reset and normalizing
CSS reset zeroes browser default styles so elements start consistent across browsers. Eric Meyer’s reset: open_in_new meyerweb.com/eric/tools/css/reset (also referenced in classic RWD materials).
Normalize is a small library by Nicolas Gallagher that preserves useful defaults while making styling more consistent:
<link href="normalize.css" rel="stylesheet">
Every layout should begin with a reset or normalize.
Good to understand
It will be useful to understand the next terms:
Check using validators
After creating a layout it’s a good idea to check it using validators:
Process creating layouts
The most simple structure:
layout/
index.html
css/styles.css
In this case we don’t use any preprocessors and tools. We just include CSS into the HTML page with link tag.