Research says your blog design is all wrong (I tested it all at -8°C)

Watching the snow fall outside my mountain hideout this morning, wrapped in approximately 47 layers and clutching my coffee like it's the last source of warmth on Earth. It's a balmy -8°C out there.

But fighting the urge to build a blanket fort reminded me of great blog design. Stay with me here... All week I've been perfecting my setup - not too close to the window (hello, draft), not too far from the heater (goodbye, fingers). It hit me - this is exactly what we're all trying to do with our blogs. Finding that perfect balance where everything just... works.

Speaking of balance, I've been sending these daily dispatches for a week now. Too drafty? Too stuffy? Hit reply and let me know.

Now, let's talk about the science behind perfect blog design. Turns out, there's actual research about all of this (and no, "I think it looks good" isn't a valid metric, past-Tim)."

Why Your Readers' Eyes Are Begging for Mercy

(Or: How I Created The Scientifically Perfect Blog Design, and You Can Too)

Welcome to Front-End Friday friends, here’s what the research actually says about designing the perfect blog - from font sizes that won't make your readers squint to layouts that keep them engaged.

Table of Contents:

This is by far my favourite to go off on. Because people just do it straight wrong.

Put your ToC on the left. There is a bunch of science behind this, and you know I went hard on this.

1. Western Reading Patterns expect it to be there. F Patterns and Z Patterns if you wanna get nerdy.
   It’s where we start looking on a page. So you should put the navigation there. Duh.

2. Cognitive load reduction. Make your users think less. Simple as that. You are putting the info where they expect it to be

3. Sidebar fatigue. I’ve known this for a long time, and never known the word. We’re so over having ads, or BUY MY SHIT in the right sidebar that we just don’t look at it any more. It’s as simple as that. Put things on the right if you want people to ignore them.

We do this with ThriveThemes. I love Thrive. Not getting paid by them, just love the product.

Font Size:

The "Bigger is Actually Better" Rule Remember when everyone thought tiny fonts looked sophisticated? Turns out our eyes disagree. The research shows a base font size of 16px is the sweet spot. Going smaller is like asking people to read through a keyhole.

Line Height:

Ever wonder why some text feels claustrophobic? A line height of 1.5 times your font size is ideal. Even Harvard got in on this one. It's like social distancing for your sentences - everyone needs their space.

The Magic Number:

50-75 Characters Per Line

Smashing Magazine’s studies show that lines between 50-75 characters (including spaces) hit the readability sweet spot. Too long and your readers' eyes get tired from the journey. Too short and they're playing tennis with their eyeballs.

The research on this one is a little old, 2013 old. So take it with a grain of salt, but it’s a great place to start.

For comparison, our is on average 83 characters wide. Worth testing. The newsletter is 90 characters wide on average.

Show your readers how long it will take to read something

There are a number of studies on this that show readers want to know what they’re getting into.
I went a step further with this and added a button that appears to bookmark the page if it takes more than 20 mins to read. _{A lifetime these days…}

Reading Progress Bars:

The Silent Motivator. Studies from Designerly show that seeing progress motivates readers to finish articles. It's like having a little completion bar in a video game - somehow knowing you're 60% through makes you want to hit 100%.

The Mobile-Desktop Balance
Here's where it gets tricky. The research shows that what works on desktop doesn't always work on mobile. But there's a sweet spot:

• Font size: 16px base (scales up slightly for desktop)

• Line height: 1.5

• Content width: 850px max on desktop

• Table of contents: Collapsible on mobile, sticky on desktop, put it on the left

Skimmability. It’s a word. I promise.

There is a bunch of design elements around skimmability, and what makes for great skimmable content. I did a full deep dive into this on LinkedIn.

Also, last time I checked, I rank #1 for skimmability. Just sayin’

The Big Question: Does This Actually Work?

The data says yes. I’m seeing big improvements for

our blog versus others I’ve worked on

• Time on page

• Scroll depth

• Return visits

• Reader comprehension

Here’s what I’ve found - you don't need to implement everything at once. Start with the basics: readable font sizes, decent line height, and good contrast. The rest can come later.

This isn't just theory or some stats I found on the internet. I've put every single one of these elements on our blog. I've fought with WordPress themes that didn't want to cooperate. I've written CSS that made me question my life choices. I've debugged .php that seemed to have a personal vendetta against emoji’s.

But the results? Worth every frustrating moment. Our readers are staying longer, reading more, and actually finding what they need. The data doesn't lie - when you make content easy to consume, people actually consume it. Who knew?

If you want to see these principles in action, check out our blog. Start here.

Stay readable (and warm),

Tim

P.S. Lemme know if you want the php I wrote for the custom read time on the blog?