Some thoughts on how to make web sites. Taken from some handover notes that I left for a previous employer.
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.
- 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.