My Redesign for Speed and Legibility

Page content

March is almost over and I’ve not written enough self-referential and congratulatory posts about myself. This should round out the month nicely.

When I moved to Pelican I designed this site to be readable and extremely fast. I’m not a designer (I actually like Hawaiian shirts and black socks) but I was pretty happy with the results. As a reminder, here’s what Macdrifter 2.0 gave me, in order of priorities:

  1. Readable fonts with small download footprint
  2. Small page size
  3. Fast page loading
  4. Static blogging from virtually any device with SSH or SFTP

Other than some minor problems with upgrading to Pelican 3, I’ve loved the engine. I’ve really loved the speed of a static website. Nothing makes me smile more than loading my own site on 3G right after loading a Verge page. Macdrifter has loaded almost instantly every time I’ve tried it.

If it Ain’t Broke, Fix It

I’ve updated some of the design elements over the past 9 months. Aside from some changes to effects and color palettes not much has changed. But, I’ve never been happy with my design. It was functional not enjoyable.

So I hired Erik Hess and high 90 to do a redesign. What you see here now is the result of that collaboration.

Save Money No Matter How Much It Costs

This site does not make much money. Last year it paid for hosting and some new hardware to work on the site. It’s not chump change but I’m not retiring on an island either. This year I decided to pool all ad revenue, donations, affiliate money and every other nickel that flows in from the internet to do this redesign.

Why?

Because I like what I have here and I don’t want it to be ugly. It’s simple: I want to prefer reading on Macdrifter.com over reading in Instapaper. I want to be proud of this thing that eats my time.

Way of the Future

There were four things I wanted to change the most about my old design:

  1. The footnote styling
  2. The sidebar appearance
  3. The menu navigation
  4. The Archive

These things are now better.

The footnotes are now styled in a way that does not interfere with the text. This was totally Erik’s design and I love it.

I’ve always liked sidebars on blogs. It’s like a little control center. The sidebar now shows more of the stuff I work on and share, like Pinboard links, but is not distracting to me.1

The menu navigation is much prettier on all devices. It’s “responsive”, for whatever that means to people. What it means to me is that it looks nice on any size browser, including iOS without making the header ludicrously tall.

The archive page has received two very simple updates. It’s no longer ugly and there is a dynamic title search on the page.

There’s some other very nice improvements as well. There is a new “Side Note” style as seen in the Links to the Wind post.

There is a new interview style that still allows me to write in Markdown. Erik was clever and styled a MultiMarkdown definition list to look more like an interview. You can see an example on my interview with Sam from TextDrop.

That interview is written in plain text like this:

:::plaintext
GSW
:   Sam, tell me a little bit about yourself and how you became a programmer.

SN
:   Hi Gabe, I’m a 2nd generation Vietnamese-American born and raised in Orange County, CA.

There’s also new inline code styling that is much more readable than the old stuff.

UN-Responsive

The single most controversial part of the design was going “responsive” with the layout. I was against the responsive design from the beginning. I didn’t like the idea that a Web site looks completely different on a mobile and a desktop browser. I really dislike those mobile WordPress templates that try to emulate an app instead of just being a web page. Mobile Safari is a great browser. Why not let it be a browser?

But Erik had a different take on responsive design and he won me over. His version just means the page is more readable. On a mobile browser, the menus collapse to a single dropdown. On a 1280x1024 desktop browser window, the menus spread out a bit more. Stretch the window even larger and the font size increases for viewing in Old-Man-Mode, which I appreciate greatly.

No Junk in the Trunk

Even with all of these fairly significant changes, the page still loads very fast. There is a slight penalty for loading the Pinboard bookmarks on the sidebar, but it’s still fast. It takes 1.5s to fully load the main page that weighs in at 450KB. Reload of the page takes 0.5s.2 The previous design fully loaded without cache in 0.9s. It’s a 60% increase in page loading time, but a 2000% increase in reading enjoyment.

Never Done

Redesigns are never done. There’s always something left on the cutting room floor. I’ve heard that good design is as much about what you leave out as what you put in. There were features I wanted that just did not work right. There are still elements that I’m not completely happy with. It will never be perfect. If it were, I’d be bored.

  1. Checkout the Pinboard links on the side bar. Not only do the titles link back to the original page but the tags link to my Pinboard tag page. Erik did the styling, and the widget is available from Pinboard’s resources page. ↩︎

  2. For comparison, The Loop Insight (which I think is very lean and loads very fast) takes 2.5s to load the first view and 2s to load a repeat view. So my goal is to load faster than one of the fastest loading sites I read every day. On the opposite end, The Verge takes 16s to fully load its hulking 5MB front page. ↩︎