The Living Thing / Notebooks : HTML for haters

Plus also CSS.

You have a cool project, maybe so cool that it is innocent of such adjectives as “disruptive”, and has never been accused of being, or wishing to be, the “Uber of” anything. Nonetheless, you must make a HTML page for it -perhaps to put it online, maybe build a javascript ui, perhaps, bless you, write an online user guide

What is the barest, most basic set of HTML techniques you can use to make this thingy function with a minimum of bullshit or sadness? How can you devote the absolut minimum time to meaningless trivialities and the most to making something real and useful, given that the web is an essay in trivia?

My response: Use the latest HTML5 standards, which are simple and low-fuss. These won’t work on all browsers, of course, but you’re a busy person, and you don’t have time for such nonsense. Moreover, even if you claimed to support Safari 2.0 or some such ridiculous thing, by the time you 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?

Good, let’s move on.

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? You have bizarre, specialised other requirements? Sigh. OK, moving on.

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 horrific chum merchant, you probably want FlexBox, which brings the technology of the GUIs of the 1980s to the web at last.

Googling this gets lots of results. Here are some up-to-date-ones.

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. Otherwise…

Responsive design

Oh god, some users have iphones, some android, some laptops, and the rest are browsing on oculus rift augmented reality apps built entirely out of polygons. Fuck fuck fuck. 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 good 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.

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 you 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 lets build some apps with polymer, or welcome to polymer, or Polymer code or PolymerLabs code or …

CSS

The styling language of the web, already implicitly mentioned a few times above. 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 is one way of making CSS more modular. autoprefixer resolves browser differences. caniuse tells you what the browser differences are.