Welcome to an updated Abouthalf.com – I’ve placed the WordPress theme on GitHub[1] for anyone who may be interested in how it works. I’ve reenabled comments for a while in case anyone has questions.

The design is something of a radical departure for me.[2] I try to avoid cluttered design, but this feels aggressively minimal. I’m pretty darn proud of myself because of it. I’ve come back to my two favorite web-safe colors, restored the old logo, and gone old-man big with the typefaces. I’ve used bits and pieces from Bootstrap and Font Awesome as well as licensing a shiny new (affordable) typeface from Atipo called Bariol.

The new theme takes advantage of WordPress’ new-ish post formats feature, which allows me to post links and single images in a Tumblr-style fashion without littering up the format of the site. I created a custom implementation of WordPress’s (terrible) gallery implementation which renders galleries as a Bootstrap carousel component.

However, I’m most proud of the auto-columnizing feature using CSS3 columns. If you’re using a modern browser like Chrome, Firefox, Internet Explorer 10, or Safari try resizing the window to be tiny and extra wide. You should see the site reformat.

On larger monitors (1024px wide and above) I use CSS3 media queries to apply CSS columns to text content on the fly. The number of columns is dependent upon the screen width, height, and the estimated height of the content. The content height is calculated by a custom template function which does some math and counting to determine an appropriate formatting CSS class. So a biggish article might have the class ‘col4bg’ which maps to a set of style rules which say “on a big monitor, wrap this content into 4 columns”.

So why do all that? My idea is this: if it’s possible to fit an entire blog entry into one screen without scrolling, do it.

Managing (my) expectations (of my readers)

Readers of every content driven website arrive via one of three ways.

1. The reader follows a link from Google, Twitter, RSS, Facebork, or email.
2. The reader is a super-fan and deliberately types in the URL or clicks a bookmark and starts browsing from the home page.
3. The reader arrives completely by random-ass accident.

Planning for #3 may not be easy or advisable. However #1 and #2 are use cases you can use. The goal of readers #1 and #2 is to read something. The job of a web site is to get out of the way and let the reader read.

Magazine metaphor

Next time you’re in your time machine, visit a newsstand and pick up a magazine.

On the cover of every magazine is a big picture and a headline for the featured article. Yes there’s a logo or masthead, and there may be headlines for other articles, but mainly it’s that one big story that brings you in. If you flip through a magazine you don’t go from cover to table of contents. First you’ll see a big, sexy full page ad. Next there will be an editorial or a regular column. Then another ad. Then maybe you’ll find the table of contents. At the very back of the magazine you may find some some additional information about who produced or contributed to that issue.

Almost every page view of a content driven website is like browsing through a tiny magazine.

When a reader follows a link to a web site – #1 above – instead of going directly to the home page, they see the big featured article first. Maybe they cruise past some editorials (comments). Maybe they see the navigation (table of contents). And if they’re super interested they will will click the ‘about us’ link (they won’t).

Since most people follow links, this is the most common usage for any content oriented web site, so it makes sense to optimize for that case. No matter how a reader finds your site, or where they land, the reader should be rewarded with something to read or look at.

Don’t make me choose

Compare the home page of The Verge to an article on The Verge.

I think The Verge is very well designed, but when I look at the home page I feel like I have work to do. I have to look at all those headlines and pick something to read. Don’t make me think!

At this moment the Apple v. Samsung verdict is marked as their big story. If so, why do I have to find a link to click on? Give me that first. If I want more, I’ll find it.

And so

With this in mind I reworked my site to put content first all the time. Identity, navigation, search, cruft, etc. are all pushed to the bottom of the page. Super fans and dedicated searchers will discover it automatically as they read – there’s also the handy ‘menu’ link at the top right. Everyone else bopping in from Google or Twitter will get creamy, delicious content with no waiting.

Housecleaning

I’ve finally gotten around to activating and using my @abouthalf twitter account for announcing updates to the site. For the foreseeable future, I’ll be retweeting site updates to my personal Twitter account @device55 so don’t worry if you’re a straggler.

I’ve started making use of tags, as I think they’re probably of more use than categories for most people. As I have time I plan to go back through old posts and tag them for posterity.

And as an experiment, I’m going to try re-enabling comments on new posts for a while. Partially because I’d like feedback on the updated site, but also because it would be nice to generate some social media that isn’t Facebook. Hopefully the spam filters are up to the challenge.