Sat 28 Apr 2018

Web

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

Resources

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

CanIUse.com 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.

Layout

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.

Float

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

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.