The Grinch who Changed to the Twenty Sixteen WordPress Theme

I’m the Grinch who grumbles about every WordPress theme. Except one. After years of resisting change, I finally switched FilterJoe to a modern, responsive theme: Twenty Sixteen—the new default theme included with WordPress 4.4.

Grinch image

An easy-to-read blog matters to me. Nothing WordPress offered in the last 7 years has tempted me away from the child theme I personally put a lot of effort into nearly 7 years ago.

My only temptation has been to leave WordPress for a simpler and more writing-focused platform like Ghost or Medium. While WordPress was for blogging at first, it expanded over the years into content management and an online application platform. The original focus on blogging has been diluted, and WordPress themes often reflect that.

However, WordPress now offers Twenty Sixteen for modern blogging, and it is good.

In this post, I detail how Twenty Sixteen makes me comfortable with it as a wonderfully content-focused blog theme.

But first, a little background on my reading-on-the-web obsession.

Why Care about Site Design for Reading?

I am not a professional designer. I just want to be able to read. Not just skim.

Read.

In the early years of my blog, I posted frequently about the challenges of reading text on the web and various fixes for it. I hated reading most sites and went through a several year period when I couldn’t do it without the use of ad blockers and text reformatting services such as Readability.

As for WordPress themes? Call me the Grinch. I grumble about every theme: Why is lengthy text so hard to read?

I always find some reason to reject a theme, whether too crowded, too tiny, or most importantly, full of distraction. I reject minimalist themes, which are almost universally too wide for comfortable reading, while dropping the sidebar-for-navigation option.

Clearly, typical themes work for many sites that have ads, buttons, images, videos, and more ads. I guess that’s why the default background is always white. But what about text? My content is primarily text, sometimes long. As I’ve previously written:

In my fantasy world, reading text on an electronic display is as easy as reading a paperback book, and in some ways easier thanks to hover text, hyperlinks, and resizing when needed.

So . . .

In early 2009 I chose a framework instead of a theme, the Thematic framework. It was the only free “theme building toolkit” at the time which made it easy to develop a custom child theme while providing a competent typographical base. I taught myself design and CSS. I fumbled. I stumbled. Eventually I could easily read text on FilterJoe.

I also wrote several articles describing techniques to make reading easier with either reformatting or clipping services. I wrote about newfangled devices like Kindles, Nooks, iPods, or tablets that made reading easier. I wrote about what I learned when designing my site.

A funny thing happened over the past 7 years. Other people started to care about reading text on the web. It started with impassioned pleas. Ad-strippers and on-screen text reformatting services (reader mode) became popular. Instapaper and later other services made it easy to clip text from pages for easier reading on more reader-friendly devices. Minimalist themes became fashionable. Mobile-friendly designs proliferated, making many web sites easier to read on a phone than a computer. New, simple blogging platforms sprung up to make it easier to write and read text.

In short, text-heavy content on the web is easier to read than it was 7 years ago. WordPress themes gradually became more readable and content-focused, reflecting this trend.

During the past year or so I’ve noticed a few new WordPress themes that are actually pretty good for reading. Given that Google this year told web developers to adopt responsive designs “or else,” I knew I should switch to one of these responsive themes. I still resisted. Being the Grinch, I always found some little thing or two I didn’t like.

However, when WordPress 4.4 was released, I took notice of the new default theme that came with it: Twenty Sixteen. There was little to dislike. Actually, I loved it. I switched within an hour of upgrading to WordPress 4.4 on December 9. I spent a couple days customizing it to match my color-scheme and branding. I also made a few other tweaks that I felt improved the reading experience even further.

With my long-winded introduction complete, it’s time to move on to all the little details that make this theme such a great fit for a content-focused blog.

It Starts and Ends with Content

What does it take to be able to easily read text? I personally find the paperback book format easiest for reading, so that’s where I take my design cues. It’s light, small and flexible. Text is black on a light (but not bright white) background. Width is 45-65 characters. Ample white space and margins are set in nice proportions to be easy on the eye. If you hold the book further away or closer, or use a magnifying glass, nothing about it changes.

Reading on many websites is difficult because most things that make a paperback book easy to read are not present.

I believe the reason I reject most themes is that they are too wide. Because computer screens are wide, many content creators feel the need to stretch text wide to take advantage of all that extra width. Theme designers accommodate them with a wide column for the main content.

Many pre-computer studies conclude that it is more difficult on average to read too-wide or too-narrow text, with roughly 50-75 characters per line as reasonable, and 66 characters per line as optimal. More recently, some studies are finding that line lengths above 75 characters increase reading speed. These studies don’t comment on eye fatigue, though they do comment on user preference, which varies. Staying within 50-75 characters per line evokes the least total negative reaction from readers. Most sites display over 75 characters per line on a typical computer display.

My old theme was 65 characters wide by fixing the width of the main text column at 430 pixels and matching it with a 15px sans serif font. Having such a narrow width for the main text column had advantages beyond character count, including:

  • making it easy to read on mobile devices (despite not being responsive)
  • making user-initiated scaling work gracefully (useful for users with poor eyesight)

I’ve seen many responsive sites that are much more difficult to read on a mobile device in spite of their so-called responsive design. Intrusive ads, slow loading, weird resizing stuff, text disappearing into nowhere. Is this something I really want? Nevertheless, the world is going responsive, and when done with readers in mind, it can be a better experience than what my old fixed-width theme offered.

So what are character counts like for Twenty Sixteen?

Twenty Sixteen has a responsive design, meaning that it changes based on the width of the device. Sometimes the number of characters is as high as 75, other times it as low as 35, depending on the width of the display window (viewport). On a vertically-positioned iPhone 5 (portrait) it’s at 35 but on most other common display sizes, it’s between 55 and 70. This performance is not just acceptable. It’s terrific.

Well . . . except for the 35-character width on phones. 35 jumbo-sized characters per line is hard to read as eyes are forced vertical and the screen needs to be scrolled often with so little content on the display. I experimented with a smaller phone font on my child theme but it looked like the typography needed work at the smaller size, so for the moment I’ve left the mobile font size unchanged for FilterJoe. I guess I can console myself that iPhone owners using Safari can use the built-in reader mode to choose a smaller font size if they like. Or, more simply, they can turn their phone sideways.

But other than the jumbo phone font, Twenty Sixteen very gracefully handles characters per line at a wide variety of display sizes. To see this, try reading this article on a wide screen. Stretch the window far to the right, then slowly narrow it and watch what happens. You’ll notice that the width for the main text area is kept to a maximum that limits the character count to around 75. You’ll notice that when it is sufficiently narrow, different parts of the design drop out. First the meta information column disappears (the author, date, and category information actually moves to the bottom of the post). Then the right sidebar disappears.

This is a significant improvement over my old theme. If you’re reading on a computer and want to completely focus on content, you can narrow the window until there is nothing left but the content. Way cool! Even though responsive design is intended to make the content readable on devices with smaller displays, you can take advantage on any size of computer display if all you want to focus on is content. This trick will work with most responsively-designed sites, not just Twenty Sixteen.

How does Twenty Sixteen do on everything else in the main content area? For the most part, just fine. Font, spacing, and typography choices are all easy on the eyes and therefore very readable. Zooming in or out of the page using browser controls produces the same results as changing display size—responsive design handles it gracefully. I’m not a fan of excerpts starting my posts, so I stripped them out with a small PHP change.

My only nit to pick is that none of the offered color schemes match a paperback novel. There’s the typical two schemes with too much contrast—black on white background and white on black background. To be fair, the default black-on-white style isn’t too bad—text is a slightly lighter shade of black (#1a1a1a) to reduce contrast. There’s an eye-killing black on bright-mustard-yellow background, and a red background that isn’t much better. There’s also a nice looking white on dark-grey background with muted contrast that is easy on the eyes.

However, these colors can easily be customized. I customized FilterJoe with the same colors I’ve used over the past 7 years. The idea is to mimic a background not too far off from paperback page color. Offer enough contrast to be clear, but not so much as to contribute to eye fatigue. Green for branding and links strikes me as more relaxing than typical web colors. It’s all in support of the goal of making the text as easy as possible to read.

Leave a comment below if you think there are ways I could make the reading experience even better.

Sidebar, Meta, Banner, Menu

With my so-called focus on content, one could reasonably argue that I should get rid of the right side bar and go with a one-column theme. I didn’t do that with either my old theme or Twenty Sixteen. I like to offer users navigational options for reading more content on my site. It also means there isn’t a massive margin surrounding the narrow content column. As I already mentioned above, a wonderful feature of responsive themes such as Twenty Sixteen is that readers can choose to make the right sidebar go away by shrinking the window or reading on a smaller device.

You may or may not agree with having a right sidebar. Twenty Sixteen accommodates. If you don’t place any widgets in the right sidebar, then there’s no right sidebar and it’s a one-column theme, though the menu up top hangs over into the right margin area.

So what do I think of Twenty Sixteen’s sidebar, when present? For the most part, it looks very good, with smaller fonts and the underline removed from links so as not to detract from content. Links in text widgets are underlined which is not in character with other widgets such as categories. So I got rid of the underlining with CSS (stumped me at first . . . box-shadow:none;). I also got rid of section separator lines which I felt distracted slightly from content.

The meta data on the left is very well done, with a subtle secondary color and smaller fonts by default so as not to detract from the main content. Most importantly, this pseudo-third column reduces space for the content column. This is a good thing as it keeps characters per line down below 75 in the main content area. The style of having nothing but a little meta data on a pseudo left column has been fairly popular in recent years, for good reason.

The menu is aligned to the right side of the page but disappears into just a button when the display narrows. This looks great except on really wide screens, when the menu overhangs the rightmost side of the sidebar, which looks odd to my eye given all the other clean lines in this theme. So I changed the styling on the menu so that it aligns with the left side of the sidebar on wide displays.

I have never been much of a fan of massive banners on blogs. So I reduced the banner size to my liking.

It may sound like I made quite a lot of changes. I guess I did. But they were minor changes, and it didn’t take too much CSS to do it.

Final Words

I tend to write long posts. Like this one. So I want my site to be as easy to read as possible. When I first launched the site, I spent way too much time messing with CSS and the changes were much more numerous than what I needed this time around, when I switched to Twenty Sixteen.

I love this theme. Reading is easy for sites using Twenty Sixteen, even without any customization. Great job Takashi Irie and everyone else who worked on this theme. You have my heartfelt admiration and thanks!

Author: Joe Golton

I’m a dad with a son who loves baseball. Professionally, I’ve been a software developer, investor, controller, and logistics manager. I now make my living from this blog, supplemented with occasional consulting gigs.

Leave a Reply

Your email address will not be published. Required fields are marked *