Blog Redesign: Out with the Old, in with the Old

Why, are expectations so high?
Is it the bar I set?
Always in search of the design I havenā€™t made yet
Will this step just be another misstep?
The proportions have to be perfect, the aesthetics flawless
And it always feels like I'm hitting the mark
ā€˜Til I let it sit for a bit, re-look, then pick it apart
Like, ā€œthis shit is garbageā€
ā€” Rephrased from Eminemā€™s ā€œWalk on Waterā€

I know, I know. Yet another post in which someone is announcing a redesign. But you know what? I had an itch to redesign my blog and I can scratch that itch because, hey, itā€™s my blog and you canā€™t tell me what to do.

But before I get into writing my thoughts on my new ā€œdesignā€, letā€™s take a stroll down memory lane and see what some of my old blog designs looked like (cue sentimental music for a nostalgic slideshow).

A Graphic History of My Blog

One of the things that interested me when I started this redesign was how many times Iā€™ve changed my blog design over the years. Thanks to the WayBack Machine I could find out. Allow me to take you on a tour:

Screenshot of my blog in November of 2011

Circa November 2011: ah yes, probably the very first design of my blog. It very much fit the design of a Wordpress blog around the time: content feed on the left, blog categories and tags on the right, posts with featured images. And I had a search box because, hey, Wordpress gave me search for free. It all brings me back to a simpler time.

Screenshot of my blog in June of 2012

Circa June 2012: this looks like it was an at attempt at making my blog more ā€œvisualā€. As you can see, the content previews for the post listings were removed in favor of showing only each postā€™s featured image. Ah young Jim, did you really think you were going to create a ā€œfeatured imageā€ for every single blog post? Who do you think you are, an online media company? Iā€™m sure by the time I had three or four blog post drafts, I quickly realized Iā€™d either be 1) rarely publishing anything, due to effort required to create a unique image with every post, or 2) redesigning my blog soon.

Screenshot of my blog in March of 2013

Circa March 2013: ahhh, I remember this. This was when I switched to the now-defunct service Scriptogram for hosting my blog. That service was pretty neat. You could publish markdown files to a folder on Dropbox and their service would build your blog for you. In a sense it was really great because I could edit a plain-text markdown file from anywhere and the edits would be live to my blog within a minute or so, all due to Dropboxā€™s file syncing platform. It was kind of like Jekyll but without the git-ness of Jekyll. You have a folder of markdown files representing posts (which take a certain format), we turn it into a blog. The service, however, was free so (as you can imagine) it wasnā€™t around long.

The particular screenshot you see above reflects the default theme Scriptogram applied to all their blogs. It was fine. It worked for me. Or rather, it worked for me until I had to the itch to roll my own design. Lucky for me, their service allowed such itch scratching, which leads me to my next screenshot.

Screenshot of my blog in May of 2014

Circa March 2014: I actually had this design for a while. I remember thinking it was pretty good. It was a ā€œthemeā€ I developed first when my blog was hosted on Scriptogram. When that service went down, there was this thing called ā€œJekyll + Github Pagesā€ I decided to give a try. I remember it being relatively easy to transfer all my posts and the siteā€™s theme from scriptogram (markdown posts in dropbox + static CSS theme) to jekyll (markdown posts and HTML/CSS in Github). I think I kept this design longer than others, but eventually the itch to redesign struck again (as it always does).

Screenshot of my blog in August of 2016

Circa August 2016: about this time, I began tracking my ā€œredesignsā€ as tagged releases in Github. You could technically head over there to see them all, but Iā€™ll continue posting the rest here for convenience sake.

This particular design came about because one day I was particularly enjoying the experience of navigating my blog and the _posts/ directory of jekyll in my code editor and I thought ā€œwhat if this was the experience on the actual website?ā€ Before I could even think if it was a good idea, I was coding because I wanted to see if it could be done and what it would feel like (as you can see, I even include theme variations of light/medium/dark). It only took a few months before I was on to my next ā€œredesignā€. To be honest, it was a decision made in the haste and excitement of something novel. But thatā€™s ok, itā€™s my blog. I can do whatever I want.

Screenshot of my blog in April of 2017

Circa April 2017: in a similar vein to the impulse described above (blog theme emulating an IDE), this was a foray into treating a postā€™s typography as if it were a plain text file with markdown syntax. I took this one to the extreme of having everything in a single font size. It was interesting. I kind of liked it for a while. But the novelty wore off and I was quickly on to the next thing.

Screenshot of my blog in August of 2017

Circa August 2018: this was my most recent theme (before the new one you see today). It was the result of a more natural progression from the ones preceding it. It had a ā€œdark themeā€ which was nice, but honestly I never used it. I thought about doing something fancy where I detect the time of the client and if itā€™s past like 10PM, automatically setting the theme as dark. But then I realized that I hate it when apps do that to me. If I want it dark, Iā€™ll set it dark. So I removed that, though I wouldnā€™t be surprised if it makes it back someday.

Screenshot of my almost-new blog redesign of 2018

Circa February 2018: this was almost my most recent blog design. It all began one day with tweaking styles on the previous design, which led to me jumping into Sketch, which led to me saying ā€œIā€™m just going to redesign the whole thingā€ which led me to this. I even coded it up. I found myself enjoying presenting the content as if it were on a piece of paper on screen. Plus it kind of tied into the design of jim-nielsen.com at the time (nothing wrong with a little design consistency, right?) But then my mood changed and I just wanted to throw it all in the garbage.

Screenshot of my blog at the time of this writing (2018)

May 2018: ah yes, the redesign of 2018 where you wrote a blog post to go with the new design. What were you thinking back then...oh wait, this is my current design. Iā€™m sure all my rationale (or rather impulse) for this design will be considered ā€œsillyā€ by Jim of 2020, but thatā€™s ok. Iā€™ve learned to live with myself.

The ā€œNewā€ Design

When you change the way you look at things, the things you look at change. ā€” Dr. Wayne Dyer

The thing that moved me to redesign my blog was...well, to be honest it was in part due to fatigue. My blog is basically just a place for me to write about things I want to write about because they either interest me or because I want to learn more about them and writing helps me do that. And the more I read and write on the web, the more I wish I had some of those old-school web features, like usage of the :visted pseudo class in CSS. Why? Because then I could browse around and actually know what Iā€™ve already looked at or read. But hardly anyone uses those things anymore. ā€œBe the change you want to see in the worldā€ right?

Lately Iā€™ve been reading some of Tim Berners Leeā€™s notes on the web and have really enjoyed the content. What I find equally interesting about his writing is the delivery mechanism. The design around the content isnā€™t going to win any ā€œdesignā€ awards, but the exprerience of reading from that site is actually quite nite. I believe that stems, at least in part, from the fact that its design uses basic ā€webā€ styles: blue for links, purple for visited ones (this is actually prescribed in the spec). This made reading his stuff really easy. If it was purple, Iā€™d already read it. I didnā€™t need an app to keep track of what Iā€™ve read and what I haveā€™t. It sounds so simple, but it was so nice. It's the small things you know?

While reading Timā€™s notes, I thought ā€œman, I should just make my blog basic HTML and CSS and just call it good.ā€ Later, while chewing on that thought, I happened upon this quote from Frank Chimero that really resonated with me:

The old websites from the 90ā€™s, they still work, their fonts just need to be a little bit bigger and they need to set a max width on their paragraph so it has a nice measure. Other than that, you go back and look at a bunch of the essays by Tim Berners-Lee and youā€™re like, ā€œActually, this still holds up.ā€

I decided this is precisely what I wanted to do with my blog: try to go back to basic ā€œwebā€ styles (ā€œgoing with the grain of the webā€ as Frank calls it). There has been this nagging thought in my mind that most of my previous blog ā€œdesignsā€ were more about being looked at than actually being used. And Iā€™ve found myself ā€œusingā€ my blog a lot lately, almost like a personal notes archive, and the ā€œbasic web styleā€ is just what I needed in terms of functional usage.

With that in mind, this new blog ā€œdesignā€ is an exercise in bringing priority more to the content than to the look. Iā€™m hoping this will make me focus more on the substance of what I write rather than the look of what I write. However, with all that said, hereā€™s a note to future Jim reading this in five years: itā€™s very possible you already changed your mind about everything above and youā€™ve ā€œredesignedā€ the blog again. And you know what? Thatā€™s ok. But right now thereā€™s a part of me that hopes someday I can strip everything down such that the extent of my blogā€™s CSS would be:

body {
  max-width: 35rem;
  margin: 0 auto;
  line-height: 1.5;
}

In fact, thatā€™s what my initial design exercise had me doing. Just stripping everything away. But the visual part of me begged for just a tiny bit more, so thatā€™s how I ended up with what I have now. I also added a few more ā€œenhancementsā€ under the hood to this new design, like removing Google Analytics tracking. Thereā€™s been a lot of talk about that lately and Iā€™m not going to write my thoughts about it other than Iā€™m removing it. To be honest, I donā€™t need it. That should help me squeeze out just a tiny bit more improvement in terms of performance.

I could talk more about my tendencies these days towards ā€œbasic webā€ styles and technology, but Iā€™m think I am going to save that for another blog post where I can flesh out my ideas a little more. For now, enjoy this ā€œnewā€ design. I know I will, at least for now.