I know it can be boring to read about a blogger’s new site design, and truly there’s nothing revolutionary here, but at some point you may wonder why I made the changes I made — and that’s what this post serves to answer. An answer to ‘why’ for both of us. (Sometimes I forget too.)
Unlike every other redesign that I have done I first sat down and figured out some clear goals for the new design.
I’ll recap those goals as:
- Optimal reading experience
- Focus on the best content
- Better performance
So for the first time I scrapped the entire theme system1 I was working off of and rebuilt it using the Underscores.me framework. Naturally there was a lot to do, but now the theme is much more WordPress compliant than before.
Signal and Noise
In looking at my goals for the new design I quickly realized that reading experience and ‘focus on the best content’ are closely tied together. This led me to realize that when you landed at the main index page for this site you saw an awful lot of stuff — not all of it meeting those goals.
If you are not logged in you saw: the login links, navigation, logo, and then a nag banner to become a member. After that you saw whatever the last post was, followed by the next 7 days worth of posts (meaning the delayed posts). Most of the time this meant you saw 90% linked list posts, quotes, and maybe 1-2 articles. Yikes.
That really struck me as a problem. Links and quote posts are noise — I still love them as they are fun, and will keep writing them, but they really don’t belong on the main landing page for this site (I’d argue any site after giving it lots of thought). I want people to read what I write, and in order to do that I needed to increase the signal and remove the noise from the main landing page.
So linked list posts and quote posts are not on the homepage, as I don’t think it is the place for them. I am proud of the articles I write, and they are my “best foot” — so why wouldn’t I want to show them off first and foremost on the site? And because I had no good answer to that, gone are the links and quotes from the main page. (You can get to them on their own pages now, or via the RSS feed which is still full content.)
Since the landing page is the most trafficked page on this site, I wanted to make it the best possible experience for new readers (and old alike) to discover what you really get from my site.
I decided that I needed to accomplish a few things on that landing page:
- Better navigtation.
- Less annoying, and more effective, member-nag banner.
- Less scrolling.
- Better synopsis for finding the best content to read.
No matter what I tried, or designed, a long lists of full-length articles is a pain in the ass to scroll through. Not only that, but most people will stop after the first or second article if they aren’t of interest to them at that point — and then you have lost a potential reader.
Therefore, I created a better overview look at my articles. The latest article shows the normal headline, a subhead, and then a custom chosen amount of the article to draw a reader in. From there the next nine posts get the title and the subhead and that’s it. My subheads should represent the content of the article well enough that it is easy to see if it would be of interest (and know what the article is about). I’ve also added the estimated reading time so that a reader knows the level of commitment clicking on the headline entails (the date is there so you can gauge the frequency of updates to the site).
I played around with just using excerpts instead of just subheads in the list, but that lead to too much text on the page. So I added the subheads simply becasue my headlines are often not very descriptive and you need more to know what the post is about.
I am hitting on this second, but it’s likely the first thing you have noticed: the typefaces are different (again). Notably I have gone back to a serif.2 The two new typefaces are: Chronicle Text, and Whitney from Hoefler & Co.
I noted above that my first goal was to craft an optimal reading experience, and no matter how hard I tried, I couldn’t get that experience with Ideal Sans set as the body typeface.
I asked about people’s preferences when it comes to serif versus sans serif on Twitter — this response really stuck with me from @nerd_uprising:
re: fonts. Agree on both counts. My eyes like sans; my brain like serifs.
No matter what I did, reading a Serif font just felt more comfortable — more cozy. So while I love the look of a sans serif typeface, I could not choose that for body copy and go against my chief goal of readability.
Whitney was chosen because it is more compact than Ideal Sans and therefore makes for better headlines and navigation use — also Hoefler reccomends it as a pairing for Chronicle Text.
In the past I’ve never made color a part of the site design. Yes, there has always been a splash of red at the top and grays smattered around, but that was it. Red for hovers and gray when I need to differentiate something.
When I started on the new design I did it all in black and white, and then added in the normal red, but it felt too bland, and too devoid of personality — something which does not reflect my writing at all. It also was hard to see section headings.
I added red in more spots, as you can see, and changed from neutral gray to a much warmer gray. The red too, has been muted so as not to overpower the visual attention of readers.
So while I added in (ever so slightly) more color I did so with a less stark color in hopes that I add to the reading experience instead of detracting from it.
As I stated at the outseet — this is a boring post. It should be because it is about something that I likely care far more about that anyone else. I’d love to hear any feedback, so feel free to get in touch — the best place is probably the [chat].
Additionally, if you liked the old site design and would like to use it on your site, email me and I will send over the files.