This is a meta post about the idea behind the design of the blog you’re currently reading.
Reading online sucks.
If you published my favorite novel of all time as a series of blog posts, I’m sure I would hate the experience of reading it.
There are plenty of studies that claim that, with online content, you can only expect to get a few seconds of people’s attention at a time. Yet, those same people can spend several uninterrupted hours reading books, watching movies, or listening to podcasts.
I’ve lost count of how many books I’ve read and said “that could’ve been a blog post”. But I probably wouldn’t have read them as intently (or at all) if they were published in a blog.
I think. one big reason why people hate to read online is that it’s a sucky experience (the other, more obvious one, being that most online content sucks — but I won’t get into that here).
This reddit post does a good job of illustrating the issue:
BristolPost splits its news with ads and other things requiring you to hunt single sentences between them to read it all. from r/assholedesign
Maybe if the experience was better, people would read a lot more online content. And I mean really read — like they do with books. It’s sort like how people started watching more movies online once Netflix made it easy to stream them, as compared to using BitTorrent.
That’s what I’m trying to do with the design of this blog.
Borrowing ideas from Kindle
The closest digital equivalent to reading a book is using a Kindle, so I just stole borrowed a lot of ideas from that UI.
I’ve had the same Kindle Paperwhite for maybe 7 or 8 years and the UI hasn’t changed much or at all since I got it. I know newer versions have slightly different layouts, but I like the simplicity of this first-gen Kindle.
Here are a few aspects of the Kindle experience I tried to replicate with this blog’s design.
1. Simplicity
The main goal of this design is to create the best blog-reading experience on the web. I didn’t design to get sales or grow our email list. That’s why I didn’t include popups, sidebars, in-line CTAs.
I also avoided gimmicks like animations, interactivity, shape dividers, and other fancy CSS tricks.
If you need proof that you don’t need all of that, here’s how Paul Graham’s blog looks like in 2020:
2. Grayscale everything
Every image, GIF, video, and embed will have a grayscale filter applied to it. Just to make it easier on the eye to read if it’s late.
Here’s an example.
My phone also has a feature that automatically makes everything grayscale after a certain hour. I’ve found that I have an easier time falling asleep since I’ve started using it... or maybe it’s just a placebo ¯\_(ツ)_/¯
3. Warm background color
Despite its name, the background on the Kindle Paperwhite is not white. It actually uses a yellow-ish background — maybe that’s because warmer colors (orange, peach, and yellow) are better for readability than colder ones (blue, blue-gray, and green) are better for readability.
I remember I used to have f.lux installed on my MacBook to do this until Apple just came out with Night Shift.
I tried using the exact same color Kindle uses, but it was too yellow for my taste. I ended up going with a lighter version (you can compare this page against another website to see what I mean.)
4. Serif fonts
I’ve read a lot of posts that claim that serif fonts are better for readability. Upon doing a bit of digging, it looks like that’s mostly based on faulty research:
“A greater difference in legibility can easily be found within members of the same type family than between a serif and a sans serif typeface.”
“Perceived legibility [of serif typefaces] was due to a great extent to familiarity with the typeface. 40 years ago, sans serif typefaces were not as common as they are now, and if these studies were repeated, it would not be surprising to find completely different results.”
I still personally prefer serif fonts when I read on my Kindle, so I went with that. I used fontpair.co to find heading and body fonts that I liked:
5. Options menu
I decided to include a small persistent header to house a few features that might be useful to readers of this blog:
6. Table of contents
When you’re reading a book on Kindle, you can just shut it off and pick back up where you left. The same can’t be said for blog posts — if you reload the page or open it in another device/browser, you’re taken all the way back to the top of the page.
I found this particularly annoying when reading long blog posts.
The workaround I found was to include a table of contents similar to the Kindle’s “Go To” button. This way, readers can easily pick up where they left off if they accidentally close the tab they had for this blog.
7. Font size control
I prefer smaller reading fonts — I typically zoom out of sites I visit — but I know some people who like to read gigantic words.
Also inspired by Kindle readers, I included a font size selector with options for small (16px), medium (20px), and large (24px) font sizes.
8. Dark mode
Pretty straightforward, dark mode is cool and I was interested in learning how to implement it.
9. Social sharing
Of course, I think every single thing we publish on this blog will go viral. I expect this post about grayscale images, readability, and serif fonts will obviously be extremely successful.
Planning ahead, I added an easy way for you to share our awesome content with your followers.
10. Bonus: The blog index
I generally dislike blog listing pages. I don’t think I’ve ever landed on a blog and just browsed through the published posts.
If I’m looking for something on a specific blog, I typically just Google “site:website.com [keyword]”.
Compare that to the way Kindle displays books in your library.
The Kindle library is a pretty simple and cool way to visualize other stuff to read, so I tried to replicate that for our own blog list.
Maybe in the future, we’ll invest in a designer to create custom covers for each of our posts.
The technical stuff: Tools I used to build this
I know a small group of people are going to ask about this (and I love when people include stuff like this), so I might as well add it.
Here’s what I used to create this design:
- WordPress: I know Webflow is the tool all the cool kids are using nowadays. I'm a masochist and still prefer WordPress. Plus, I kinda wanted to get this live quickly — it took me about a day to create everything from scratch since I'm already familiar with the WordPress environment.
- Oxygen: Elementor or Thrive Architect are great for beginners but I kinda prefer Oxygen for the level of control it gives me. Oxygen is not a page builder, it’s a complete theme builder—it overrides and disables whatever theme is installed. It allowed me to make things look and behave exactly like I wanted without making compromises.
- Easy Table of Contents plugin: this is the only plugin I used for the functionality of the blog. It automatically creates the table of contents using the H2s tags on the page. I considered using Tocbot to avoid plugins altogether, but I didn’t feel like figuring it out and customizing it.
- Everything else — sticky menu, font size selector, and night mode switcher — were done with javascript and CSS I copied and pasted from StackOverflow.
It’s ok if you hate this design
This blog design will probably be somewhat polarizing. Some people will like it, but most will hate it — and that’s a good thing IMO.
At ClickMinded, we’ve always been unapologetic about turning away people we don’t want to deal with. If people are rude or we know they’ll be emailing support every day, we just tell them not to enroll or refund them.
In contrast, we usually go the extra mile to make sure people we do want as subscribers and customers are happy.
My hypothesis is that we can accomplish the same thing by using “radical” design choices.
For example, if I ever created a business podcast (don't worry, I won't), I would publish it at 1.5x-2x speed by default. That's how I listen to podcasts and most entrepreneur-type people I know do the same thing. People who don't like it, could either choose to slow it down or not listen to it at all.
That's the experiment I'm running with this blog design. The people we do want to attract are the type who prefers reading a Kindle book over an infographic.
If that sounds like you, you might want to subscribe below 🙂