& Now For Something Completely Different
This is, erm, different? Yes. Don't worry, you've not landed somewhere else, this is still henryleach.com, but I'm trying something new. Something that will hopefully be a bit more fun, a bit more whimsical and a bit more, human?
This is the result of two separate streams of thought that have been circling the same conclusion for the last year.
The first is I see other people's sites, and being a little jealous of how gorgeous they look; so visually full of ideas and life, but I don't feel like that's suitable for my whole site.
(It seemed unfair to link to any specific examples, because if I start I can't stop, and I'll feel terrible when I've unfairly forgotten someone. Hopefully you can think of some examples, if not, perhaps flick through a few of the random examples on Kagi's Small Web site to get started.)
Redesigning the whole thing to match something I really like this week would be impossible, then the next week I'd see something else that seems even cooler. Along with that comes the difficult last 20% - some ideas translate well, but then the design needs to cover all cases; I want tables and code snippets etc. I need to answer all these edge cases, in a way which I'm almost never happy with in any particular design.
The second source of inspiration has been reading Dan Sinker's history of Punk Planet, and seeing some of the pages and designs they created. The whole run is available on the Internet Archive - an essential historical record of a medium that disappears all too quickly.
Creating such a publication on a regular sounds like a herculean task, but even with all those challenges, they didn't just print simple text on plain paper - no, they had amazing layouts; for example, this double-page intro on Matador Records, but almost any issue will have something eye opening.
All magazines and zines do this; they don't skimp on the visual design - it's an integral part of the story, that's just a core part of how it's printed. The Internet Archive has thousands of examples, with beautiful layouts across decades. Take this issue of the Italian cyberpunk magazine Decoder from 1992, starting with that zig-zag of text on the first page. Even if you're not interested in the article (I can't read Italian), the visual appearance pulls you in. Different stories and articles have different layouts, they don't recycle the same one-size fits-all template that matches the corporate branding for their 'content'.
Error free copies, scaling and templating are the hallmark of digital systems. A copy costs nothing, and a thousand can be made in the blink of a eye. Even outside of big corporate brands, too many sites are just the same design again and again. Back when duplicating a layout was almost as much effort as a new layout, then why not make something different? You would have to shift the layout to match the new text anyway. Now you squeeze the content into the current template, and you're done. Past designs are removed, and old text put into new clothes, with no reference to its previous appearance.
On the web we have amazing tools at our disposal for layout and design: HTML and CSS (and cough, JavaScript). They allow for a huge range of exciting visial styles, far more than they're mostly used for.
Some things are a bit harder; you can't just move cut-outs in front of you on a piece of paper, shifting subtly the gaps and seeing when it sits just right. The fact it's not moved visually, but in code, can also be off-putting to people who are visual first. It doesn't have a texture, there's no physical relationship, and for some people that's essential. Also having to consider that the screen, unlike a fixed page, will be different sizes for different readers adds another challange, but I've found in most cases them to be very forgiving, and most browers make an honest effort to render something readable.
That's balanced with other advantages; you don't need all the physical space, mess and equipment. Literally any text editor and browser on any computer will do. You can do dramatic shifts in layout, and the text will re-flow for you, you don't have to re-type/set it for another experiment. A folder of failed ideas can be kept around at no cost, and dug through again later for inspiration, and applied to a new idea; perhaps it'll work this time. Even with strange and convoluted layouts, the content is still available to users via screen readers, RSS feeds and other mediums, meaning people can read it. With a little care and attention (that I hope I mostly get right, but if I'm doing something wrong, write me), even more people can read/hear what's written than before.
It can seem intimidating, but there are also lots of great tutorials and guides available, like HTML for the People by Blake Watson, that get you started, and with just some experimentation you'll soon be forging your own path.
To make this work for my site I had to tweak the theme a bit. I use Hugo, but I imagine the same thing is possible with any other static site generator. The key step is creating a new layout that is almost empty, and contains only the 'head' tag with the associated metadata, and then an empty 'body' element, into which the contents of the HTML post is copied at build time. I can include the usual front matter in this HTML file, so the post integrates with the rest of the site: it appears in the overview, with tags, date, title, and in all the list pages, RSS feed etc. If I then also include a specific CSS file for that post, which works with the elements that exist in that post, and doesn't require a whole new layout with each different style of post. The example site has more details.
This doesn't mean I'll be hand crafting all posts from now on, I suspect most of the time I will still use the normal styling. I write less than I like anyway, and don't need to create another obstacle to writing - but I hope this also inspires me to try things, knowing I can combine them with a different and interesting design more suited to what I'm writing about, that's also enjoyable for readers.
Another advantage of the per-post design is that you only have to define the elements you used in that post. You don't have to know what tables should look like, of level four headings. What about captions? Should block quotes have a different background? Who knows. I'll never have to answer those questions. Will it age well? Also not important. You can try ideas that are only half formed, you don't need a complete answer to every detail.
This means it's easy to try things, and easy to move on from mistakes if it doesn't work. You may think this the ugliest bunch of glowing electrons you've ever set eyes on. And what's with the banana, is it just because it's yellow? It doesn't matter. That design is only in this one place, that's it. You can leave and don't have to look again, but perhaps the next one will be great, who knows? Making mistakes cheap with little consequence is as key way to unlock the ability to experiment and learn.
That's what I like most about this idea, the ability to try something on a small scale, with only a bit more effort, but outsized results.
Your website should be a fun place on the Web. You're not a corporation, you don't need a style guide (unless it helps you, and I know it does some people) with endless consistency to an inoffensive brand identity that tries to be some bland mix of friendly, competent and trustworthy - none of which are likely to be true if it costs them real money. You can create something exciting Sunday and hate it by the next weekend, and love it again six months later.
Humans are changeable creatures, with varying ideas and opinions. It would be fantastic if people had more opportunity to express themselves this way, make small websites even more diverse, creative and exciting; more like a colourful jungle than the bland monoliths that seem to be trying to suck more and more of the Web into themselves.