Eli Howey

Hello, world! I've been telling myself for months (if not years) that I would make my own website, and now I've finally done it.

This will be where I post any thoughts I have about work, life, and everything in between. Since this site is my first independent web project, I figure I’ll kick things off by talking about how I went about designing and developing it.

The Requirements

I had four things in mind when I started writing the site:

1. I wanted to write the whole thing using pure HTML, CSS, and JavaScript. Platforms like Medium or Wordpress seemed too easy (unless I wanted to write my own Wordpress theme, but then why not just write pure CSS?), and JS frameworks like React seemed like overkill for what I was trying to accomplish.
2. I didn’t want to mess around with maintaining a web server. I’m not likely to need to host any data beyond the content of the blog posts, anyway.
3. I wanted it to be simple to write posts, but I didn’t want to rely on any dependencies to introduce that simplicity. (Why, you ask? Because I can’t think of a better way to practice writing HTML than… writing HTML.)
4. I wanted complete creative freedom in the visual design of the site. No stealing other people’s components!

Requirements 1 through 3 were pretty easy to satisfy using GitHub Pages. Sites hosted on GitHub Pages are static, so there’s no need to fuss with a web server, and even though GitHub Pages supports Jekyll, which reduces blogging to writing Markdown files, I’m not required to use it. (Of course, I can easily change my mind on that later if I want.)

Visual Design

Next up was the initial stab at a design. I wanted something bold and modern, but not too flashy. On top of that, because I constantly suffer from eye strain from looking at screens all day, I wanted a darker theme by default.

Typography

This being a blog, I’d argue that the most important thing about its design is the choice of typefaces. I opted to set headings in Work Sans and everything else in Lato. Not only do I think they pair well together visually, I think their very names were meant to be paired—“Lato” means “summer” in Polish, and everyone knows that summer is the best time to go sans work!

I sometimes struggle to read smaller body fonts, so I went with a default font size of 20px for desktop, scaling down to 16px for small mobile screens.

In The Elements of Typographic Style, Robert Bringhurst says, Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… The 66-character line (counting both letters and spaces) is widely regarded as ideal. Here, I’ve gone with 65-character line lengths in the average desktop case.

Color

However overplayed you think the mid-century modern era is these days, I’m still a big fan of designers like Charles and Ray Eames, especially their unabashed use of bright, primary colors. So I took a page from their book and chose a primary color palette for the site, centering on the links in the page nav. I opted for high-saturation variants on the standard yellow and blue, to dial things up a notch. Primary colors also happen to pop against the darker backdrop I wanted for the site, without detrimental effects on contrast.

Once I settled on the colors, I started introducing them to several of the main elements of a page: think list bullets, horizontal rules, quotes and citations, borders of callout sections, and so on.

In case I decide to change the color scheme or add a theme for readers to choose from, I chose to codify the colors using CSS variables. Unlike Sass variables, CSS variables are subject to the cascade, which makes it super easy to invert the background and primary accent colors in the footer.

Motion

I also wanted a little bit of motion for the site’s few interactive elements. Again, this mostly affects links, so I swapped out the box-shadow, which I could animate partially underneath the link when it was hovered over or focused on:

// Remove native underline, and replace with box shadow
text-decoration: none;
box-shadow: 0 4px var(--accent-secondary);
transition: box-shadow 100ms linear;

&:hover,
&:focus {
	// Use a more pronounced box shadow on state change
	box-shadow: 0 4px var(--accent-secondary), inset 0 -0.5em var(--accent-secondary);
}

Reading Experience

Since this is a blog, I think it’s important that I do whatever I can to make it easier to read the blog posts! So I’ve added a couple of JavaScript-powered features to orient readers while they read a post. You can see both features on this page, if you have JavaScript enabled—but they’re both progressive enhancements, so they won’t impede the site or muck up the HTML if you have JavaScript disabled.

The first is an estimate of the length of each post. This is a pretty rudimentary estimate: I calculate how many words are in a post, then use that to figure out how long it would take to read assuming that the average adult English speaker reads at about 200 words per minute. I show that calculation just below the post’s title.

The other feature is a bar at the top of the page that indicates how far along you’ve scrolled in a post. Again, this is pretty simple. First I determine how tall the page is below the fold (i.e., how many pixels there are between the bottom of the viewport and the bottom of the page). Then as you scroll the page or resize the window, I determine how far the top of the page has been scrolled and update the width of the progress bar at the top of the page to indicate the proportion of the page you’ve scrolled through.

What’s Ahead

In the coming weeks, I’ll add details to the Projects page. As I write more posts, I’m sure I’ll also tweak styles a bit.

Happy reading!