Responsive design started with the May 25, 2010 article Responsive Web Design by Ethan Marcotte discussing media queries. Flexible layouts and responsive images are two additional ingredients required for responsive web design to work. Before responsive design, something like flexible layouts were achieved using em units.

EM as a basis for Web Design

An em is a unit of measurement in the field of typography, equal to the currently specified point size. The unit is thought to be derived from the width of the capital “M” in a given typeface. These days it stands for the height of a font. This unit is the same for all fonts at a given point size. For example, 1em in a 16 point typeface is 16 pixels, the default size for browsers.

CSS allows one to measure everything in em units and some consider it a best practice to do so. (In case you are wondering, Bert Bos is the original author of CSS) This practice originated at a time when browsers only enlarged the fonts when zooming the page in or out, leaving all other elements the same size. To make the whole web page scale, the other elements had to be built with ems.

You set the size of the em in the body tag where you define the reference size of the text on the page. When zooming in or out at the time that browsers only enlarged fonts, all elements specified in ems would change together with the font, keeping the layout intact.

To calculate a size in ems: divide the desired size by the reference em or rem — 960px / 16px = 60em.

Because percentages are often used to resize elements including fonts, it is possible to add a percentage on top of a percentage. When the font size of both a child and its parent are set at 80%, the child ends up being 80% of 80% of the em. This can lead to unexpected results. To avoid that, CSS3 introduced a rem, which stands for reference em. Unlike the em, the rem is not affected by inheritance and reflects the percentage of the font as specified in the body tag.

I do not recommend using the em as a relative measurement other than specifying font size. The need for using it to create responsive or scalable websites is gone and I see no benefit in using the em, though some people still swear by it.

Flexible Layouts using %

Flexible websites resize with the size of the window or the device. (The window / device is called the viewport). Use relative measurement units like percentage to design the elements, so, when the viewport changes, all relative sized elements change with it.

Figuring out the percentage isn’t difficult: target ÷ context = result where the taget is the parent element and the context is the child element(s). The formula is used to get the correct percentages and is demonstrated below in the construction of a fluid layout. The following example starts with a pixel based layout like a photoshop comp and converts it to a percentage based layout using noting but percentages to determine the width of the elements.

It used to be that a standard width for web pages was 960px. That number can be evenly divided in many ways: by 2 (480), 3 (320), 4 (240), 5 (192), 6 (160), 8 (120), 10 (96), and 12 (80). This lends itself the creating of columns to facilitate design.

A 960 pixel wrapper div can be divided up into a grid of 12 columns, each measuring 68 pixels across and separated by regular 12px-wide gutters. Taken together, those columns and gutters are a total width of 960 pixels.

If the main article were 6 grid columns and the side column were three grid columns with a column between them, that would fit in a container 900 pixel wide, leaving around a half column on either side. Break this into pixel width and the main column width is 566p pixels while the side column is 331 pixels wide.

To give the wrapper div a little padding on either side, instead of 960pixels, make it 90%. That is 90% of the viewport. That width is then used to define all other widths.

Figuring out the percentage of a 900px container in a 960px parent, plug it into the formula target ÷ context = result, dividing 900 by 960 gives us 0.9375. Since 100% is equal to 1, .9375 is equal to 93.75%. That makes the container that holds the two columns 93.75% of the page size.

The two columns fit inside the 900 pixel container. The width of the column is divided by 900. The large column is 62.8888889% and the small column is 36.7777778%. Don’t round the numbers off, as the browser uses the information to make the layout more accurate.

All of the padding and margins need to be translated to percentages using the formula target ÷ context = result, dividing the child into its parent to get the right percentage.

The layout will be problematic when the window becomes too small or too large. Use min-width and max-width to keep it from doing that. This is where media queries come in handy.

Flexible Images

The img element by convention is a child of a figure element. Set the image width to 100% img {width: 100%}. The set the figure width to a percentage of the parent element to control the size of the image. figure {width: 50%}

Background images can be sized in percentages, or they can be tiled to fill the background, or cropped.