Hack Your Blog Reader’s Interface

How to Hack Your Blog Reader’s Interface

by Silvio Gulizia

Note to the reader: this is an a work in progress post that just reached a minimum viable form.

Writing is a symbiotic relation between a writer and a reader. If you, as an author, want to have a healthy relationship with your user, you should commit yourself to respect her time.

Time is a scarce resource: you won’t throw away yours, would you? “The reason time is so precious is that we have a limited period in which to experience the world”, writes author Matt Gemmell. So, apart being fully committed to craft original contents, you should keep in mind that your blog is a tool to bring your readers straight to your writings.

I’ve been tweaking my personal website www.silviogulizia.com for years before getting to this point, where I am conscious of what the difference between a good post and an excellent article is: appearance. “Typography influences whether or not viewers read the content, as well as having a subtle effect on how they perceive your site,” says designer Mert Tol.

How many times did you skip to read an article because you landed on a garbage website instead of a clean blog? This happens because blogs are meant to be read and so you, as the owner, are in charge of making them readable. With readable meaning not only to remove all the clutter the Gods of the Internet allow you to include on a website, but — even more difficult — to design the space around your words.

Words equal stories. Carolyn B. Thompson, summarizing in an article(http://www.actionablebooks.com/en-ca/summaries/words-for-readers-and-writers/) the core message of “Words for Readers and Writers,” a book by Larry Woiwode, writes: “Stories equal pleasant places where the reader and the writer get to meet. As the reader, I am the medium through which the author get a voice. A shared story unites the reader and the listener — as in, without a reader there really isn’t a story.”

I read a lot about this topic and collected sparks to style my new upcoming blog from authors and designers such as Mark Gemmell and Mert Tol, Ben Brooks, Steve Santa Maria, Tommi Kaikkonen, Max Luzuriaga and Khoi Vinh. What follows are guidelines I wrote by aggregating all the materials I read. As a sum, you have to treat the text as a user interface, as Vinh advises.

Respect Reader’s Time

People who come to your blog to read a post should not experience any lag in between rendering the web page and start reading. There are three types of times people would experience:

  • Loading time, the time spent in waiting for a page to be loaded;
  • Interaction time, the time spent in looking at your blog before you begin to read a post;
  • Consumption time, the time truly spent in reading blog posts.

The best rule to not waste reader’s time comes from Gemmell: “If the reader gives you a minute of her time, give them a minute of actual content”.

This means:

  • Strip out of the header of your site all that isn’t necessary, such as social links, banner, newsletter and so on;
  • Make your header contains the value proposition of your blog;
  • Use cover images only if they add something to your writing;
  • Alternatively, consider showing a cover image to inform readers that what follows is a long form article, a sort of magazine piece, an essay;
  • Never forget to keep pictures in the viewport;
  • Remove the sidebar and put your words in front of the reader, in the center of the page;
  • Remove pop-ups, or at least let them come into the game only after the words of the post the reader is landed on.

Make Love with Typefaces

The most important thing when it comes to readability is typeface and all the things related to fonts. “Choosing appropriate typefaces and controlling their presentation is critical to conveying your message,” says Tol. Fonts are the quintessence of connection between you and your readers, since every message pass through them. Once you’ve chosen the typeface you like, you have to consider a lot of aspects related to how it is used to communicate with the reader.

Attention here: the typeface is different from the font. The first one indicates a defined set of characters while the second refers to the features of the char, such as height, width, size, weight and so on. The less you modify the char, the better it is.

Choosing Typefaces

The choice of a type is not so really hard once you have a clear idea of what you need. This is essentially a typeface for headlines and another one for paragraphs. Start with the <article> of your blog, because readers will spend most of the time there, and then go for the titles, as suggested by Santa Maria.

Brooks offers a test-driven solution: load a lot of posts you want to read into your blog, maybe in an offline instance; apply one typeface your gut trusts and start reading; change the typeface and repeat. When you are comfortable with the reading, go with that selection.

Pairing Typefaces

A good idea is to pair a sans with a serif typeface. “This creates simple contrast and balance,” writes Santa Maria, who adds: “Finding two divergent typefaces can create new meaning or an interesting juxtaposition, as long as the contrast is strong.”

You can find great fonts, both free and paid, here:

Typecast offers you a useful online tool to run a test of how fonts fit your website.

When you choose typefaces, you have to play with contrast. You should be able to tell that there are two different typefaces in action. They can be complementary or could create some tension. Keep in mind that typefaces that appear too similar can weaken the message and confuse design’s visual language, advises Santa Maria. A good idea is to use fonts with the same geometrical principles, like Futura and Bodoni. Opting for typefaces from the same designer or that are meant to be paired, like Meta Sans and Meta Serif, could help. I ended up loving two pairs: Lato and Merriweather, and Crimson Text and Oxygen. You can find lots of interesting pair on Fontpair.co.

Size, Bold, and Italic

Consider to choose a typeface family with a good selection of weights and styles to have more flexibility without needing to introduce more typefaces. If you want to use bold and italic, be sure to choose a family of typeface that has them, so not to force the browser to fake the font type by using <strong> and <em> tag. Don’t forget the rules of time: every typeface you add to your blog increases the time to load the pages, so don’t abuse them.

Notice that, while the visual effect is the same, <b> and <i> are related to the style and not to the meaning. So, if you use those tags instead of the previous, your text will result less readable for blinded people. A possible solution is to use <strong> for keywords and emphasis for emphasizing a sentence or a few words. Tol suggests increasing spacing between letters or words for emphasis to get a better effect.

When it comes to font size, you have to consider that when text becomes smaller, readability decrease. A font with larger, stronger and higher x-eight1, together with a little more contrast, can help to keep the text legible, explains Santa Maria. Both Gemmell and Kaikkonen suggest staying with at least 16px. You should consider increasing the font-size if you’re working with a font whose x-height is low (X-height refers to the height of most lowercase letters, such as a, e, o, u, x that don’t have ascenders or descenders). If 16px seems to much for you, 14px could be an alternative, as suggested by Luzuriaga.

Here’s another useful test proposed by Brooks. Once you have chosen your body size, step back two feet from the screen and test if you can still read it. If not, increase the font, and then check it again from near and at a reasonable distance away, before finally increasing it by 10%.

When you are ok with the body size, you are quite done with sizing. You should rely on a modular scale that calculates all the other sizes from a ratio. There’s a useful calculator for this at Modularscale, where you can pick up a default size, i.e. your body size, and choose a ratio to determine all the other size for headlines, page title, blog title and so on. This will help bring harmony into your blog.

“Avoid using all caps in body text,” advert Tol. Prefer instead small caps, so the abbreviations will be easier to read as they don’t stand out from the text as much, adds Kaikkonen. If the font family you choose has a small caps version, use it. If not, you can get by with a simple CSS rule (font-variant: small-caps;), but you could encounter downside depending on the font you have selected.

Playing With Dimensions and Space

Once you have chosen your font face, you have to build a proper place for it to stand. So consider:

  • Line-length: should be between two or three alphabets, as suggested by Gemmell. This means you should be able to write two or three times the phrase “The quick brown fox jumped over the lazy dog”, that contains all the letters of the alphabet. Tol suggests you limit the line-length to 350–550 pixels. Kaikkonen stresses that “if the measure is too long, the reader will have a harder time finding the start of the next line while reading.” For me, 600 or 700px is better, but it’s only an opinion;
  • Line-spacing: the line-spacing, or line-height, refers to the vertical space between lines of text. It should be kept in the range between 150 and 170% of a line text, recommends Gemmell. Kaikkonen gives you three option: 1.5 as a starter point for body text; 1.75 when you have to do with taller font face; and 1.25 for the smaller ones. For the title, use a smaller line-height: referring to the starter point quoted before, for title use 1.1em. Line-height is also related to line-length: use a longer line height with a wider column and vice versa. “This is because the longer the measure, the harder it will be for the eye to navigate to the start of the next line. Using a longer line height negates this effect” explains Kaikkonen;
  • Font-weight: shouldn’t be too heavy. Otherwise bold wouldn’t be so bold, and reading will become tedious. The same goes for a light font. Brooks has a nice advice: to find the right contrast, if it seems heavy, lighten the color of the font, or darken the background, and vice-versa. If you are wondering what is the difference between font weight and size, here it is: weight is related to the trait of the font, size to the space occupied by the letters;
  • Respect headlines: add white space around them, increase size, add the underline or use strong, but not bright, colors to not increase them a lot while keeping them to stand out.

Hierarchy and Styling

“Many people read only the parts that interest them, and a lacking visual hierarchy makes finding those impossible”, writes Kaikkonen. It is not a news: we all do it every day. When you are writing a new post or a new page, consider using those different elements to make the post scannable and let the reader breathe while reading:

  • Headlines and TOC (table of contents):
  • Strong and emphasis;
  • Ordered and unordered list;
  • Quotes;
  • Meaningful image.

Concerning white space, dance with it, but be careful because too much white space will make the reader lose focus and abandon your website. Use white space to put emphasis on the content, or in other words “frame” the content generously with empty space, writes Kaikkonen.

Paragraph Styling

Use either an indent at the beginning of a paragraph, or double-spacing between paragraphs, but not both, suggests Tol.

You can make paragraphs stand out by indenting a paragraph that follows another paragraph, leaving untouched the first one.

Consider using CSS to style the first-letter or first-line of text for decorative effect, suggests Tol. Who also invites to choose appropriate embellishment, such as anti-aliasing (but not for small fonts), and kerning for your text.

Consider Mobile

Support responsiveness and browser zooming, so everyone will be able to read what you write. Consider accessibility: all you need to do is to use semantic markup, avoid pop-up over content and let browser and device do the rest.

Colors

Pick one color in addition to black, white and gray. Or consider choosing a palette that will please your reader. There are lots of websites that offer palettes for free. When it comes to the black, just like in print, don’t use the darkest black available in your body text (#000), suggests Kaikkonen. Instead, go for something softer, like #444. You can use a slightly darker color for titles (#222).

Opt for dark text on clean clear background.

Post’s Accessories

If you want to rely on ads, keep them outside of the reading area.

Use links as social tools, to refer to sources or offer a way to go deep on a topic you just touched. Use underline for links and a color different from that of the body. Provide different gradation of this color for visited and not links. Never use underline for anything different from links. Should your link open in another tab? I think so because you don’t want your reader to stop reading what you wrote to read anything else.

Concerning the reader, Gemmell suggests to show this useful meta data:

  • Estimated reading time (in minutes like in Medium, assuming average reading speed of 250 words per minute);
  • Publishing date
  • Topic, aka category.

Use a lighter color for the meta and make them visible all around the blog.

When it comes to topics, make a deal with yourself to use large container because more people in fewer categories are better than fewer people in more categories, as Gemmell stresses. People interested in the generic topic of your post could consider clicking on the category and view other posts on the same theme. So, consider even to give a category relative RSS feed for readers to subscribe only to the topic they are interested in.

The search button will help your readers go in deep in their research. Tags could help if you want to offer a granular searching tool, but adding tags to the meta data will make your blog resemble a generic magazine. So, I would not show them, while using them could help you to create a more searchable archive of what you’ve written, and maybe link to a more specific content.

With regards to the permalink, your posts URLs shouldn’t have a date because it would say that it is an old post, and it will push the title at the end of the link. Use stable permalinks and don’t visibly use query-strings, suggests Gemmell, as it would tell to search engines you are trying to cheat. Gemmell suggests also to shorten title and don’t duplicate them to avoid problems with permalinks.

The Social Network Addi(c)tion

When it comes to social networks, you will face a really hard to take decision. You should offer sharing options, and if you want to get more sharing you should count on a floating bar and social sharing buttons right after the title. But, if you want people to share your post only if they’ve read it, put those buttons at the end of the post. Do you want people to share your post without reading them?

Consider adding WhatsApp instead of the email, since nowadays people are more likely to share articles via instant messages. You could also consider creating a broadcasting channel instead of a newsletter to spread the word about your writings.

In any case, limit the use of social buttons to the networks you can and want to be active on.

Avoid social media timeline. People who are interested in reading your social posts will follow you on social networks, not read your blog.

Add Twitter cards and featured image that doesn’t have to be shown in the post or pages, but will be useful when sharing post or pages on the social network.

Decluttering

You can add a lot of clutter to your blog, but you shouldn’t. Consider removing those not useful contents:

  • Recent post: they are meant to appear on your front page, and if you want to suggest further reading to you readers you can use related post at the end of the post, or in the footer;
  • Popular post: let the reader decide what to read. Move your favorite post in the about page;
  • Comments: you should consider removing comments if you are not committed to reading and answering to them. Nowadays people comment on their blogs or social networks, and you can keep track of those comments via tools like Topsy, as Gemmell suggests.

SEO Considerations

Every blogger knows that “the best way to optimize your site for search engines is to keep writing and don’t try to trick the system,” as Gemmell stresses. The only additional suggestion is to provide per article description to use as an excerpt in the homepage, RSS readers, and social sharing.

Additional Considerations

There are still a bunch of things you should consider. Those are:

  • Embed fonts: take advantage of @font-face CSS feature, so to avoid calls to other websites and fasten the page download;
  • Put back buttons: they should be visible where readers need them;
  • Scrolling performance: this is a critical point because a lots of time before start reading a post you scan it to see if it fits with your interests.

Consider to have those stuff in your blog:

  • Profile page: with projects, social, photos and profiles, and if you like add here your favorite posts;
  • A full archive of all articles titles: consider to show them on a dedicated page, so every post would be a two click away from homepage;
  • Colophon: it could help your reader to understand how you write your blog. You can add it to your about page or have a particular page.
  • Excerpts: text with the concept of the post and why to read it. It could become the summary of the post. A synopsis that told the reader which is your point. You will use them on the blog’s page, social sharing and in the RSS feed.

Any other consideration? Feel free to reach me to update this post.