Welcome to AboutHalf

menu - http://abouthalf.com

Sexy boxes

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.


  1. I included everything in the repository except for the Bariol typeface, which isn’t open source. Intrepid copy-cats can use a free Google web font.  ↩

  2. The site design works in IE8+, Safari, Chrome, and Firefox. IE7 gets a slightly broken but serviceable layout. IE7 users are lucky they got that much.  ↩

Related posts

  • Default system fonts on mobile platforms

    Tinytype is a great resource, charting all the system fonts available on major mobile platforms.

  • Related posts in your WordPress template

    Since most visitors to Abouthalf.com are coming from Google or Twitter, I thought I would make it easier for folks (and Google) to find related content. Previously, a “link” formatted post would have precious little there beyond my commentary and the link itself. Likewise a picture post would have a picture and nothing else. To […]

  • Conditional comments unsupported in IE11‘s emulator

    Since version 9, Internet Explorer has included some very good developer tools, including an emulator which allowed you to view a web page using an earlier version. This allowed for you to do quick and dirty testing of your site in various versions of IE. However, IE 11’s emulator does not support conditional comments. “Conditional […]

  • Understanding CSS pixel measurements

    In CSS, “px” is not an angular measurement and it is not non-linear.

  • Chris Bowler compares Cloud.typography and Typekit

    Chris Bowler compares the major features of Adobe’s Typekit web font service and Cloud.typography from H&FJ. The verdict: Typekit may be somewhat better suited to the personal or smaller site. Both are great. H&FJ is proud of their Screensmart Fonts. via Shawn Blanc.

  • Font Custom

    This small ruby program takes a folder full of SVG files and creates an icon font for use on the web. Neat!

  • Orientation media query challenges in Android browsers

    When the software keyboard is displayed in Chrome for Android or the stock Android Browser[1] the browser window is resized, which triggers a window.resize event and a window.orientationchange event in JavaScript as well as possibly causing CSS media queries to be reapplied. In iOS, the software keyboard is overlaid over the browser window, so this […]

  • EMs in CSS media queries

    CSS3 width and height media queries work best with relative units Skip the details, show me the code In CSS the “@media” rule defines a block style rules which only apply to a given medium like print or on screen. /* These styles apply when the web page is printed */ @media print { body […]

  • No. No tables weren’t easier.

    I ran across this funny tweet in my timeline the other day. <table> <tr> <td> <h1>1999 <div class=“container”> <div class=“row”> <div class=“span6”> <h1>2010 via @bobearth I’m not going to lie; I LOLed. But, it stuck in my mind like a pebble stuck in my sock. Because, while anyone who actually made websites in the 90’s […]

  • Laura Kalbag discusses “display: none;” and responsive design

    display: none; Or The things you think are common knowledge but really they aren’t..