A New Look

Design Goals

I implemented the first version of this site in ~2009. My goals then were:

  • simplicity of design
  • css-driven layout
  • very little dependence on JavaScript
  • static / quick to load
  • no tracking

I mostly achieved those goals. The site was simple, at least compared to other sites. Layout was almost entirely if not entirely css-driven. The only JavaScript was a wee snippet to place the drop-down menu...and jQuery.

The site was and is static, no moving parts on the backend. And there was no tracking (i.e., no Google Analytics) and very little logging (just the web server default).

Still, after some six or seven years, it was time for a refresh.

Site Defects

I had several complaints about the site:

  1. Though it had a simple design, it wasn't simple enough. The layout could shift in unpredictable ways when resized.
  2. The css was based on the org-mode Worg style but with numerous overrides in another css file.
  3. Too much JavaScript. jQuery? Really?
  4. Though static on the backend, it wasn't entirely static for the user. Again, JavaScript includes.
  5. Didn't always degrade gracefully (I know, most sites are worse or don't degrade at all...hello, blank homepage?)

I could tolerate most of it but the site was sorely lacking in readability. That is, reading a long article like this one could be fatiguing.

Lastly, the production process was convoluted and discouraged me from writing.

Goals for the New Site

My goals for the new site are:

  • readablity
  • ease of production
  • simplicity of design
  • css-driven layout
  • no JavaScript
  • static / quick to load
  • no tracking

Readability?

Site readability is an issue I don't see discussed a lot. There's some discussion, but based on what I find when landing on other sites and blogs, it's clear very few designers (especially designers) are acting on it.

First, what do I mean by readability? I'm mostly referring to how much eye fatigue and mental difficulty the reader has with scanning the typographical symbols. I (mostly) do not mean reading level and comprehension, though those are important as well.

I've developed an interest in the topic for a couple of reasons: 1) like most people, most of my day is spent in front of a monitor, and 2) I bought a Kindle Paperwhite.

Working at a monitor all day is eye fatiguing for several reasons. In the first place, we often look at them all day. In the second, they're actively lit. And in the third, a lot of sites have poor contrast...too much or too little. The last is most important to this discussion.

Black on white is great for print because white paper is lit by reflection. Monitors have LED sources. The black is very black. The white is blindingly white. Laptops, phones and tablets often adjust for varying ambient light conditions, but most monitors do not. And many device that do adjust the backlight often get it wrong.

The other problem is when there's too-little contrast. Dark-blue on black is hard to distinguish. The reader has to struggle to differentiate characters. Red on orange can vary from too much to too little. (If you think I'm kidding about that choice, browse around.)

The trend these days for sites is bright, multi-colored sites. Many opt for visually "loud" as a way to communicate "fun", "exciting", "important" or other engaging messages. That's great, perhaps, for grabbing attention. But it's not great for thoughtful reading and consideration.

Another issue I see with many websites, especially sites that sell a variety of products, is just busy-ness. Too much information competing for the visitors attention. Again, they work to grab attention and might be right when you're running a bazaar. But what about when you're trying to communicate information? Does a sidebar with the last 50 articles, callouts and other distraction necessary?

I suggest the answer is no. A couple of data point confirms that assertion.

Readers and Reader Modes

The first point I see confirming my assertion that many sites are too busy and fatiguing is the rise of the e-reader.

I've been buying more ebooks recently for the same reasons other do: they're popular, read anywhere, reduced "space" requirements, ease of acquisition and others.

I tried reading on an iPad Mini and found it too heavy and fatiguing. I would put it down in a minute to pick-up a printed book. I bought the Kindle Paperwhite hoping it would make my leisure reading as enjoyable as holding a print book. And it has. I can read for much longer periods of time on the Kindle than I can on a laptop or tablet. I attribute this to the e-ink screen on the Kindle.

Unlike a monitor, the Kindle Paperwhite is side lit, not back-lit. The background, even when lit, is muted in tone. Because it's e-ink there's no flicker or refresh except when turning pages. And it's light, about the weight of a paperback book.

The second point I see is the rise of "reader modes" in browsers. Not everything meant to be read is available as an e-book (e.g., blogs) and e-ink readers are not great for browsing.

Safari is the first browser I remember adding a reader mode. This nifty modes highlight the text of the page and hide everything else. They often provide lightly-colored backgrounds, larger sans-serif fonts and simplified layout. And in the case of articles chopped into 50 bite-sized pieces and spread across 10 ad-laden pages, they stitch the article back together.

Contrast, font-selection, size, color, focus: these are what I mean by readability and by now you may have noticed the font-selection, size, background color and layout of my reworked site come together to create an experience very similar to the reader mode found in web browsers.

Ease of Production

One of my complaints about my old site was that it wasn't easy to convert org-mode docs to html. Part of that was due to org-mode, part of it was due to my modifications to have it generate a whole site.

What I really wanted was the ability to type make or make install and have it generate the html or publish it to my website. I could have met the make goal but it still would have been clunky.

I've been a fan of Pandoc for years. It's a great text-processing tool for converting from one document-format to another. It also uses easy-to-write templates and is command-line driven. So it's perfect for my purposes. And since it works with multiple input formats and is orthogonal to the editor, I can write how I want in almost any format I want and Pandoc will convert it.

I still write my articles in Emacs org-mode. I may convert the site to markdown but I'm very comfortable with how org-mode works and the keybindings in Emacs. If I do convert it won't be because markdown per se offers any reason to do so, but because Pandoc does.

The site is now generated with a combination of a Makefile, a shell script and a template that Pandoc uses to format the articles.

I'm preparing my site generator for publication. I'll post an article when it's ready.

Simplicity and Other Goals

The site is much simpler than it was. The menu is gone. The stacked elements are gone. The css is completely new. There are just a few elements on the page apart from the text. And the text, like the old site, is set apart in the middle.

One new feature is much more graceful degradation. The font rescales more intelligently as device size decreases. On a phone the font is one size in portrait mode, another in landscape. The transition is seamless and looks natural.

On desktop devices the layout is responsive with a max width of 960 pixels to prevent the paragraphs form becoming long sentences.

To achieve the readability goals I spent a lot of time looking at other sites and reading articles about contrast. I like the new colors for the page, article and code backgrounds. The font colors are more charcoal than black.

The only stark contrast on the page (besides the avatar) is the hyperlink color. I wanted to keep the visual indicator that there's something to click. I dislike sites that "hide" the links.

The site is now 100% javascript free, is still static and should be very quick to load. One of the ways I achieved that, apart from static generation, is limited use of includes. You'll notice I don't load Twitter, Github or rss icons. Just text.

Conclusion

I'm happy with the new design, improved readability and production tools. I may still tweak it a bit but for now, the site redesign is done.

Best of all, make install quickly and efficiently generates and publishes just the changes to the site. Perhaps I'll write more often.