How to develop an elastic website

Almost four years have passed since I wrote a little rant in defense of the elastic design and the situation is the same. I learned to live with that (at least my browser remembers the zoom level of each website), but when Amelia Bellamy-Royds brought up the issue again on Twitter it made me realize that maybe I can do a little bit more than only complaining, so let me explain how to develop an elastic website.

Don't override the user preferred font size

That means never ever set the font size in the body nor the html (neithermain or whatever wrapper element that happens to be used). Never. Forget all about:

body {
	font-size: 62.5%
}

If you resist the temptation I can go to Preferences, Content, Fonts and Colors (in Firefox) and set a reasonable font size for me (18 or 20 if you want to know). If you don't grumpy cat will be grumpy:

A grumpy cat yelling "Do not override... My. Preferred. Font. Size."

Only use em or rem when sizing fonts

Set the font size of the rest of the elements (like h1, input, blockquote, .slogan, etc.) using only ems and rems so their size will be relative to my preferred font size. Do you want your slogan to be three times bigger than the rest of the text on the page? Easy! font-size: 3rem;. Only a half bigger? font-size: 1.5rem;. Maths are magic.

Use elastic width for text containers

When you have a lot of text (so don't worry: your slogan can be as wide as the viewport itself), like an article, or tutorial, set its width equal to 33 ems (not rems!) because the 66-character line is widely regarded as ideal. What I usually do:

my-super-selector {
	box-sizing: border-box;/* Isn't CSS nicer these days? */
	width: 100%;
	max-width: 35em;
	padding: 0 1em;
}

Wait! 35em? Yeah! The idea is to have the text block as wide as 33 ems plus one em on each side, so if the viewport is smaller than those 33 ems the text will flow from side to side with a little room on each side and without an awful horizontal scroll bar. Don't you hate when the text starts and ends where the viewport starts and ends? I do!

Although if your layout is more complex it could be necessary to put the padding in a wrapper element.

And that's it!

Really! Of course, most website layouts are more complex than the layout of this blog, but I have been using those constraints plus a bunch of media queries and calc() and they work really well.

As most of the web projects that I worked on are a failure I decide to publish a demo website on GitHub. Pull request are encouraged.