HTML for haters

Plus also CSS.

January 4, 2016 — February 24, 2020

computers are awful
making things
photon choreography
UI

What is the most basic set of HTML techniques I can use to build my website while minimising nonsense and sadness? How can you devote the barest essential time to meaningless trivialities and the most to making something real and useful?

I will use the latest HTML and CSS standards, which are simple and low-fuss. These won’t work on all browsers, of course, but AFAICT that gets me most of the human race. Moreover, even if I claimed to support Safari 2.0 or some such ridiculous thing, by the time I got around to fixing that Safari 2.0 bug for that user who complained that it did not work for them, they would have in any case either upgraded their browser or died of old age; there’s no point in planning for tech support for the non-existent and the dead, now, is there?

Also, I will cheat as much as possible.

1 Basic HTML5

Start with the skeleton provided by HTML5bones, which is friendly, educational and simple, and includes bonus accessibility tips.

Now if you are writing a blog or other text-focused page, simply stop here. Stop now. Stop stop stop.

What’s that? Oh no it is some kind of web app with animations and such? OK, moving on.

2 Metadata

HEAD documents the recommended tags for maximising social spread and suchlike from a website.

3 CSS

The Style language of the web. Designed 20 years ago by curmudgeonly text-obsessives to match their idea of the needs of the graphical layouts of their successors in design 20 years later, with disregard for the insights of their predecessors in human-computer interaction 20 years before.

SASS COMPASS/LESS are ubiquitous technologies that I cannot be arsed learning the distinction between. They aim to make CSS more modular. Scout.app compiles stylesheets from SASS. css2sass converts back and forth between SASS and CSS.

A different approach is tailwind which sounds nice for non web people in the highly informed judgement of Julia Evans.

Or, cast aside minimalism for unjustifiably complex CSS animations.

3.1 Flexbox

If you have to have a page with flow-layout-like interfaces on, either because you are building a sophisticated user interface or because you are a chum merchant, you probably want FlexBox, which brings the technology of the GUIs of the 1980s to the web.

These techniques divide the screen up into column and row chunks with useful alignment properties for someone who wishes to fill up a defined area (e.g. screen) with content of unknown size (e.g. fancy GUI). These might get you responsive design (i.e. legibility on smartphones and big screens) for free, or at least cheap.

Flexyboxes designs flexbox CSS layouts for you.

3.2 Responsive design

Some users have iPhones, some Android, some laptops, and the rest are browsing on VR headset apps built entirely out of polygons. 🙀🙀🙀 Do you need to deal with this? Does it look crap on your phone if you ignore this?

If so, the (over-engineered, functional) option is bootstrap, which uses some JavaScript to prod the site into mobile-phone life. There are also CSS tricks which can get you most of the way if your needs are simple. My needs are simple and if they get complicated they will be farmed out to professionals.

Ethan Marcotte’s Responsive Web Design also provides a walk-through. Nick Pettit’s Beginner’s Guide to Responsive Web Design is also pretty good. Jason Michael tells you also how to Build a basic responsive site with CSS.

Since my main output at the moment is just this site, and my needs are simple, I am not at all across the modern options, and you should consider all the tips in this subsection dated.

4 Incompatibilities

autoprefixer resolves browser differences. caniuse tells you what the browser differences are.

5 Webcomponents

See javascript UI.