How I designed this blog
Making a blog that looks good was easy. To make one people actually read, I first looked at how we read on screens.
It's early October. I'm trying to finish my videos and, at the same time, rethinking from scratch how I want to show up on social media. This blog came out of the middle of that rush.
I want to keep my portfolio like a shop window. A few pieces, good ones, no long explanations. But while I work I'm constantly researching things, trying things, and sometimes giving up halfway. Until now that part didn't live anywhere. Put it in the window and the window gets messy; leave it out and it just disappears. So in the end I decided to keep the two apart.
What does a blog that gets read look like, though? The first things that came to mind are the usual ones. Card grids… big cover images… text that fades in as you scroll… Honestly, I didn't know which of these actually helps anyone read. That's where I started.
People don't read, they scan
Nielsen Norman Group has been running eye-tracking studies for years and the result barely changes: people who read text on screen word by word are a minority, and most of us scan.1 (I do it too, I'll admit.) They call the most efficient way of scanning the "layer-cake" pattern. The eye jumps from heading to heading and dives into a section only when something catches it.2
What that told me was simple: someone who reads only the headings should still be able to tell what a post is saying. That's why every post opens with a one-sentence summary. The home page has nothing but a date, a title and one line. I wanted someone to see what I'm working on, and how I think, without opening a single post.
There's one more decision, and some people may not like it. You won't find labels like "draft" or "work in progress" here. Even if I'm writing up research I haven't finished, I write it as a finished piece. I don't see the point of publishing something that doesn't look serious to the person reading it.
How long should a line be
According to the studies Baymard has collected, a comfortable line is between 50 and 75 characters.3 The accessibility standard, WCAG, sets 80 characters as the upper limit.4
I wanted to see the numbers for myself. I opened 14 blogs known for a good reading experience and measured the font size, line spacing and text column width on each one. The comfortable ones all landed in the same range. Craig Mod: 20-pixel text, a 746-pixel column. Medium: 20 and 680. Every: 20 and 736.
Dan Luu's site is the cautionary tale. On a wide screen a single line runs to 224 characters, and your eye loses its way going from the end of one line to the start of the next. To me it's the clearest case of good writing wasted on a bad page.
Here the text is 20 pixels on desktop and 17 on a phone. Line height is 1.55 times the font size, and the text column is 680 pixels. On the Turkish version of the blog, where I measured it, that comes to 65 to 70 characters a line. Turkish words run long, as you'd expect, so lines break a bit earlier than they would in English. It still stays inside the range.
No cards, a list
The thing I see most often on blog home pages is a card grid. A box for every post, an image for every box. According to NN/g, cards are good for putting different kinds of content side by side, but for similar things like blog posts they're harder to scan than a list and take up more space.5 There's a visual side to it too. Once you're stuck having to find an image for every post, sooner or later you start using images that have nothing to do with it.
I went with a list. Grouped by year, each row with a date, a title and one sentence.
The shop window is dark, this place is light
My portfolio is dark, and this is light. The reason is an NN/g finding: for people with normal vision, a light background gives better reading results, and the gap grows as the text gets smaller.6 For a place meant for long reading, that was enough for me. If your phone or computer is in dark mode the site opens dark, and you can switch any time with the button at the top right.
What's missing, and one door I left open
No pop-ups, no newsletter box, no comments, no ads. No cookies either, so no cookie banner. Even the fonts don't come from someone else's server.
On the sites I measured I saw plainly how much all of that wears you down. One article page on Every had five fixed layers on screen at once: a top bar, a cookie banner, a sign-up window and two corner boxes. A post on Substack asked me to subscribe four times. Linear's page loaded 217 separate scripts. And none of it makes the writing easier to read.
On the other hand, there's one door I left open: AI bots. Both the bots that run searches and the ones that crawl sites to train models can come in here. If my writing being used to train a model is going to do me some good, there's no sense in shutting that door.
Why a separate address
At first I thought about a completely separate domain, something like burakreis.blog. It's 20 dollars a year, and for now I didn't want to pay it. Then I learned that Google lets a subdomain have its own site name too.7 The blog now lives at blog.designedbyburak.com. There's no link to it in my portfolio's menu, so the shop window stays clean. But every page here says who wrote it, and the two sites know about each other.
If something bugs you, a line too long or text too small, write to me: hello@designedbyburak.com
P.S. While writing this post I also opened the blog on a very narrow screen, and the menu at the top was spilling off the page. I fixed it. Still, it's a little funny that the first bug turned up right while I was writing this.