On the Virtues of Handmade Websites

There are areas of life where, fortunately, human craftsmanship still reigns. For example, hand-built Amish furniture is known for how solid and well-built it is, by artists working with their hands in the medium of wood. Similarly, original works of art on canvases are seen as authentic and “the real thing”; a reproduction or a piece of computer-generated artwork just isn’t the same. Even something as quotidian as a pen can go for hundreds of dollars if it’s made by hand; the very human process of its manufacture (and the resulting scarcity) sets it apart from similar but mass-manufactured pens made by machines.

You or I could probably not make a good pen or build a bookshelf by hand without some training or practice or prior experience. Similarly, most people could not code up a website by hand. And that’s fine – not everyone needs to be an expert in every domain. For people who need a website, most are fine with one made with a website builder (SquareSpace, Wix) or made with a blogging service (Wordpress, Blogger) or just maintain social media accounts (Facebook, Instagram, Twitter, etc). (I’ll have more to say about social media in a future installment.) Or they just rely on a “website guy” to do it for them so they don’t have to deal with any of the technical details.

Meanwhile professional web designers have ventured into new worlds of complexity. A documentation site can’t be just HTML and CSS, no no no – it must be made with a JavaScript framework (Node.JS) that uses a Javascript library that offers fancy UI elements (React, Vue) and preloads pages in the background to create an SPA (single-page application). The result often looks fancy and cutting-edge. There’s just one problem: for people on slow connections (mobile data in a rural area) or with old machines (more people than you might think), the website is nearly unusable. Even for people with good computers and good connections, it’s slow. It’s bloated. If your computer isn’t up to the task, the machine slows to a crawl and eventually (if you’re lucky) the browser asks if you want to terminate the script that’s slowing down the page.

There has been a lot written about this (for example the 2015 talk “The Website Obesity Crisis”), but websites are still by and large a bloated mess.

An anecdote: I recently loaded an article on a well-known tech blog, which included a large “hero” image at the top of the page. Astonished at how slowly it was loading even on a decent high-speed internet connection, I checked the image’s size: it was 4.5 megabytes. That one image was larger than the RAM in my first computer.

While the world is facing a climate change crisis, people feel obligated to “upgrade” their computer just so it doesn’t get bogged down on these new, “modern” (read: bloated) websites.

(As much as a bloated website feels bloated for the user, they’re only seeing one-tenth of the complexity behind the scenes. The tools used to make the site (NPM packages, etc) are a mess. A giant mess. I am not much of a Javascript dev, but I did briefly venture into that world to make a plugin for a certain knowledge base / text editor. Never again.)

What is the way out of this? More and more complexity is not the solution. We need more handmade websites.

Handmade? That sounds impractical, right? Let me introduce another anecdote:

Once in the earlier days of the internet I was trying to find the hours (or at least the contact information) for a museum in a city I was visiting. This museum was tiny, didn’t have any dedicated staff, and was run by a local religious group. Fortunately they had a website! It was as minimal a website as could be: no styling, no images, just plain HTML. Black text on a white background. I found out their hours quickly and no time was wasted.

Was that museum’s website ideal? Maybe not. Good-looking? Definitely not. But it was informative and usable and fast. It told me what I needed to know.

For another example, compare the reddit.com redesign (i.e. the current site) to HackerNews.

The reddit redesign is bloated, slow. It’s fancy-looking, but it sucks (even before you consider the “dark patterns” like blocking access to many subreddits unless you get their app). I find reddit completely unusable on my phone or laptop unless I use “old reddit” or a third-party app and I’m not alone.

HackerNews, on the other hand, is fast… blazingly fast. It’s a bit ugly, admittedly, but its entire design says it’s there to be fast and informative. It’s fast even on a slow mobile connection or an ancient computer.

Does a hand-built website need to be as minimal as HackerNews or the website for the museum in the anecdote above? No, of course not. There can be images, cool CSS, even Javascript. But each part should be buit by hand and not include a bunch of unnecessary cruft.

For example, one popular way of developing websites is to use a CSS framework. You drop a link to, say, the Bootstrap CSS in your project and then you can use any of its CSS classes to style your website. This can be incredibly convenient. But it means that your website ships with a bunch of unnecessary bloat that never even gets used. It just eats up data and bandwidth and makes everything slower.

“But my build process strips out unused CSS and JavaScript! I’m not shipping the bloat!”

That’s good. It’s a step toward sanity. And I bet that using a framework speeds up your development process. But it’s not what I’m talking about.

Handmade means you built it, by hand. You know what every line does and that it’s necessary. There are no black-box Javascript dependencies, no CSS frameworks. Maybe you include a “normalize” or “reset” base for your CSS for a more consistent experience across browsers, but otherwise it’s all your own work.

The result doesn’t need to be bare-bones HTML. But it should be lean and fast – it’s hard for it not to be, at least in comparison, when everyone else is using giant Javascript frameworks or Wordpress with a million plugins. As a benefit, the site will probably be compatible with a wider variety of browsers.

What about static site generators?

I’m a big fan of static-site generators… at least some of them. (This site is made with one. You can read more about the tools used to make this site at [Tech Notes] How This Site Was Made.) It can save you a lot of effort and make it easy to maintain a consistent look across your site.

The key to a successful handmade site built with a static site generator is that you still make each piece of it yourself. You don’t use someone else’s blog template; you just use the software to stitch it all together in a consistent way. The result is just as lean as if you had, indeed, coded each HTML file by hand.

Is this really practical?

Like the Typewriter Revolution it’s not about what makes it practical to make a bunch of money in the shortest amount of time. For that, web frameworks and templates make sense. Rather it’s about ideals.

Sure, some may deride this “every byte is sacred” approach as worthy of parody (NSFW) in the age of streaming video and gigabit connections. But it does matter. You matter, your website matters, and your bytes matter. Go forth and get your hands dirty.

Comments

No comments yet.