Sat 28 Apr 2018


Some thoughts on how to make web sites. Taken from some handover notes that I left for a previous employer.


Mozilla Development Network is usually the best resource for finding out about the web. It's comprehensive and readable. tells you about browser support for web features.

Starting a project

If you're making a web site of some kind, you need to know these as soon as possible:

  • Browser requirements, because supporting old browsers can vastly increase the amount of work (double, triple, or even more).
  • Devices (do you want mobile support?), because those usually require a separate layout (often a long single column).

At present (2018), I usually default to supporting IE11+, Edge, Firefox and Chrome. This means you can use CSS Flexbox (occasionally with small hacks for IE11). You can also get away with most of the fancy selectors and pseudo-elements.

CSS grid support is starting to come in, so I may learn that soon.


Particularly useful things to know about (to minimize combat with web layout engines):

If you know these properties well, layout is a lot less mysterious.


In the past, people abused the float CSS property to create layouts which weren't otherwise possible. Today, this is no longer necessary, because display: inline-block; and display: flex; are well supported.

I would therefore recommend ignoring most tutorials that use float, and not using it yourself in most cases.

Float might still be useful for it's actual purpose: making some text flow dynamically around an image.


Typography is the practice of using typeface and layout to communicate your message in a clear and attractive way.

Key guidelines:

  • Considering using whitespace instead of adding more lines, borders and colours.
  • Make sure your website body font size should be around 20pt (±5pt)
  • Conversely, you don't need to use the default gigantic font sizes for headers. Consider a little bit of bold, a slight colour change, or small-caps instead.
    • Use spacing here too
  • Line spacing should be somewhere around 130% (±15%).
  • Try not to go over 100 character per line — use the max-width CSS property.
  • Set CSS properties in terms of em and rem where possible, so that they scale properly if people choose to zoom in or increase their font size.