Skip to main content

Building My Site, Part 1: Introduction, Inspiration, and Design Goals

Posted on: 08/25/2017 · Estimated reading time: 4 minutes to read

Welcome to the first of a series of articles in which I explain how I designed and built this site and why I made the choices I did.

It’s going to get a bit technical, but while I’ll try to explain everything in the plainest possible English, some grounding in web design and development would be useful. Rather than cover the basics, I recommend spending some time in the “Learn Web Development” section of the Mozilla Developer Network.

Some exposure to Unix/Linux and shell scripting might also be useful. If you aren’t familiar, try linuxcommand.org.

While subsequent articles will explain the internals of this site in detail using source code listings. You can also access all of the code for my website on GitHub.

Introduction

Every writer needs a website, preferably one named yournamehere.com, and preferably with a blog. The easy way to do this is to hire somebody who put together such a site and set it up for you. They’ll probably use WordPress and might even make it look fancy by changing the theme and incorporating artwork related to your books.

However, I’m not just a writer. I’m also a software developer, and a self-taught one at that. While I could do what most writers do and hire some web shop to set up and manage a WordPress install for me, that’s not my style.

Because I’m both a writer and a developer, the best way to create a website that fully expresses who I am is to build it myself. I don’t mean setting up and running WordPress myself, though I’ve done that in the past and found it unsatisfying.

No, if my website is to represent me on the Internet, I want to build it myself and by hand. That way, I can build it my way.

Design Goals

It’s one thing to say, “I want to build my own website, and I want it built my way”, but that’s a general statement. The specifics are a bit harder, but it didn’t take me too long to decide upon the following design goals.

  • My site should be accessible to individuals with disabilities.
  • My site should be primarily text-oriented.
  • My site should have a clean, elegant look.
  • My site should use vibrant colors.
  • My site should be easy to read, with good typography.
  • My site should work on as many platforms/devices as possible.
  • My site should load and render quickly.
  • My site should use valid HTML5 and CSS3.
  • My site should not depend on JavaScript.
  • My site should be durable.
  • My site should integrate with the open Web.
  • My site should implement current SEO practices.
  • My site’s pages and blog posts should be sharable on social media.

I have reasons for each of these goals. As a developer who often works in the web space, I’ve worked with experts like Natalie Patrice Tucker who impressed upon me the importance of accessibility.

Since I’m a writer, it seems self-evident that my site should be text-oriented, and treat images and video as supplementary material. I want it to look clean and elegant with vibrant colors and good typography so that people find it memorable and enjoy reading it.

I want it to load and render quickly on all devices and platforms because I don’t think anybody should be excluded from the web—not even those poor bastards who are still using IE 6.

Likewise, I remember what it was like to surf the web on a 56K dial-up connection. Web pages keep getting bigger because designers and developers go nuts with images, video, fonts, and other cruft—I think this is unsustainable and unfair to viewers.

I could go on, but I think you get the picture. Since I’m determined to do this, I want to do it right.

Inspirations

I’m not designing my site in a vacuum, even if I did build it with no help save from my cat Smudge. I had some help courtesy of a few sites that inspired me.

motherfuckingwebsite.com is an excellent (and hilarious) reminder that almost all problems with web design and development are self-inflicted. Websites exist for one purpose: to convey textual information, and you can do that using nothing but valid HTML. You don’t need CSS or JavaScript at all.

bettermotherfuckingwebsite.com builds upon the foundation laid by that other motherfucker and shows you how big a difference a little CSS can make if you know what you’re doing.

CSS Zen Garden shows what disparate designers can do to differentiate a site using only CSS. The HTML remains the same, but add a different stylesheet and you get a completely different site.

Matt Gemmell’s blog is an example of reader-centric blog design. There’s almost nothing on any page of that site that isn’t essential to the experience—aside from the ad for Gemmell’s latest novel at the top of the page.

You can read his 2013 article, “Designing Blogs for Readers”, for a detailed explanation of why most of the cruft you see on blogs is cruft. According to Matt Gemmell, your blog doesn’t need comments or social media buttons.

Additional Resources

Dan Luu on Web Bloat explains how web bloat negatively impacts people with slow connections.

Idle Words / Talks / Website Obesity provides explanations as to why most webpages are such grotesque lardasses and how designers and developers can carve off some of the dead weight that’s turning the web into Cable TV v2.0.

Next Post…

In Building My Site, Part 2, I’ll discuss the general tools I used to build my website.