HTML for haters

Plus also CSS.

What is the ost 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 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.

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-focussed 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.

Metadata

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

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.

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.

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 of choice is bootstrap, which uses some javascript to prod the site into mobile-phone life. There are also CSS hacks. the entire thing makes me so sad. I’ll write notes here if I work out how to use it, but I’m going to try to survive with flexbox alone.

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.

Incompatibilities

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

Webcomponents

webcomponents which, thanks to projects like polymer, give you shinyshiny knobs, buttons and HUDs from plain old HTML.

Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.

Powerful. Flexible. Almost certainly too complicated for what I want. Intrinsically complicated, even if browsers were all the same, but they are not, so you have to venture into an even more complicated world of “polyfills” and sensitive version dependencies to use them.

Do you really need to go there? Are you sure you don’t want to hire a user interface professional to deal with that bit? Well, OK, you mad bastard, I can’t stop you.

See this plain-talk webcomponents howto or welcome to polymer, or Polymer code or PolymerLabs code or …