Blog Design Secrets to Keep Your Readers Hooked

Blog Design Secrets to Keep Your Readers Hooked

The online world is unlimited space where blogs abound. So, how to stay competitive amongst so many blogs? You should, however, make a living from blogging, to name it successful.

Before monetization, there is a community: you can easily monetize a blog with an already-formed community, so focus on creating a strong community.

Before a community, there is blog design: if you intend to form a community, you should facilitate comments, readership, interactions. So, to create a community, basic conditions should be met. And these conditions concern blog design.

Jump to examples of blog designs for your inspiration.

 

Best practices for blog design

 

Place yourself in a user’s shoes and imagine how he experiences your blog. This is helpful to create a user-focused design. Reverse this reading process and see which best practices you should apply:

Blog Header

There are plenty of patterns according to which you can design the header of your blog:

Make them unique

One of them is making the blog different from others. For this, a blog header should be unique, designed especially for the respective blog, and appropriate for the blog identity.

This is true for Solopreneur, where the title and subtitle really shout out loud a condition there should be no argument against:

 

 

Make readers know what they have to expect

KnowTechie introduces a blog header that makes users know what to expect – a magazine style blog, where news is spread onto the page according to their importance:

 

 

Ensure visual salience

Social Triggers runs a blog that adds value to the business, through some advice that makes all articles useful to their readers. The face in the header drives visitors’ attention to the title of the blog.

 

Static homepage/homepage featuring latest posts

If you’ve been blogging for some time, you’ve probably got familiar with the 2 options for the blog homepage. WordPress, for instance, allows you to set:

  • A static page as your blog homepage
  • Your latest posts (in reverse chronological order) as your blog homepage.

Blog homepage featuring latest posts

 

Blog homepage set as static page

 

 

Each of them has its advantages, the pros weighing more on the static page side.

If the homepage is set to display a static page, chances are:

  • You have more time to brand yourself in front your readers. Few people read the “About” section of a website, but a static focuses their attention on a part of your website that is important for your professional purpose.
  • You’ll be more persuasive in showing readers why your blog is worth reading and following;
  • You’ll be able to present your unique value proposition in a cleaner, more obvious manner;
  • You’ll have some front-page space for originality;
  • You’ll grab your visitors’ attention quicker, with a well-crafted message (than if you let them do all the searching throughout your articles).

 

If the homepage is set to display posts in reverse chronological order, chances are:

  • You’ll keep readers up to date with newest content on blog;
  • It’ll be simpler to determine how frequently you post on your blog;
  • You’ll show users that your blog has fresh content, and you’re actively engaged in developing it.

 

Organize your blog so users can scan it

According to studies, most of a blog’s content will not be read. Web surfers are used to scan blog articles and pages and spot the information that directly interests them.

 

Slate.com – “How people read online”

 

This being said, you have to format your blog pages, so they should be adapted to scanning:

  • Create a unique title for each post page
  • Create informative and actionable headings and subheadings, that have the role to structure information easily within the article page
  • Mark key phrases in bold letters
  • Use underline, italics, in order to attract attention to certain pieces of information
  • Clearly delimit paragraphs and use white space often
  • Use short, easy to scan paragraphs
  • Use lists whenever they might help users easily digest the information
  • Use graphs that sustain your statements, for quick visualization.

 

Sprinkle images throughout the blog, for slowing down the scanning effect

 

People are getting more and more visually inclined, so consider including images into the blog. Research demonstrated that articles with images had a 65% retention rate (they are longer remembered), as compared to articles that had no images and thus registered a 10% retention rate.

 

 

Use faces as visual cues

 

It was demonstrated that faces heavily influence where visitors look in a blog page. Depending on where the face looks to, people manifest a tendency to direct their attention towards those particular elements in the page.

The website below gives you the chance to play more with these effects and gauge their power for your own blog design:

 

To add a background image or not to add a background image

It’s up to you whether to add a background image to your blog pages or not. However, a background image has some drawbacks, in terms of blog design:

  • It might be confusingly taken as part of your blog identity, which is not necessarily the case (the image might be too generic)
  • The image size might be detrimental to your blog loading speed
  • You have to perform additional checks, i.e. if the image is fit for responsiveness across PC and mobile devices.

It’s safest to use a white background, that’ll emphasize your content and drive attention to your articles.

Example from Sidehustlenation.com :

 

Add a reading time estimate/progress bar

A progress bar has the role of showing users how much they have until they complete reading the article. So, this blog design element is more than recommended for usability purposes.

Going through all the article is a given task that readers should complete. A reading time estimate or else, a progress bar, gives them a measure of what it’ll take to complete the reading process, and at what point in the reading process they are at a certain time.

So, consider adding a reading time estimate to every article page in the blog. A more elegant solution, the progress bar can give them an intuitive feel of exploring the article and getting the most out of it.

 

Recommended font dimensions for the regular text

If the blog articles are destined to a high number of users, so are font dimensions for the regular text. You’ll have to be sure your blog has a high readability score.

It’s recommended that text should not be smaller than 14 pixels. In fact, 16 pixels should be the optimal font size. Smaller font sizes would considerably affect text legibility, directly related to visual acuity (elder people need bigger text, but even the young prefer larger text values). There’s also another option to set font dimensions to percentages, instead of fixed values. Thus, text dimensions adapt to different screen resolutions and different browser displays.

Optimal character spacing

Depending on the typography style you choose for the text (be it for title, subtitle or simple text in the page), you should carefully choose values for the distance between letters. There are WordPress themes that make it easy to adjust character spacing, based on how it looks on the page and readability criteria.

To test appropriate letter spacing (also known as kerning in web design), you might want to try this tool.

 

Bad kerning vs. good kerning

Golden ratio typography

The golden ratio typography is a simple system helping you maintain perfect proportionality for all the text elements you use in the blog pages. With this tool, you can view how the text is displayed to users, both in title and in paragraphs.

Enter the font family, preferred font size and the content width, and you’ll have a sample of how your text looks like:

 

 

Optimal paragraph length

Still for readability purposes, consider adjusting the length of paragraphs so it should be easy for users to go through them.

The optimal paragraph length in the design of a blog is considered to be somewhere between 17 and 20 words.

In the sample text above (displayed with the Golden Ratio Typography Calculator), the paragraph length has a value of 700 px – that is about 16 words.

Left-align text (Do not set text to justify)

The use of justified text in a blog pages is not recommended. This is because, sometimes, unattractive gaps appear in justified text. Hence, readability decreases, and the page will not look so good.

Instead, align text to the left. This alignment type follows the natural language flow and gives text better chances to be scanned or read entirely.

How much white space to use in your blog design?

White space (aka negative space) plays a major role in a blog’s design. It serves to driving attention to certain parts of the blog pages and supports the principle of proximity in that blog’s design (in that it reinforces elements’ proximity to one another).

 

This is an example of negative space at work (where negative space is not white).

 

In terms of negative space, use it generously. Just think a blog design needs both active white space and passive white space:

The active white space is used to draw users’ attention towards certain elements of the blog.

The passive white space is used for creating balance, harmony, and comfort for users scanning the blog pages.

Social Buttons

Social buttons placement deserves some little extra consideration, when it comes to integrating them in your blog design.

Placing them at the beginning of an article might be a bit too early for readers to take action and start sharing your content. Likewise, placing social buttons at the end of an article might prove a bit too late for readers to take action and share, once their reading task has been completed.

Instead, place them:

  • Either in-line with posts – users are captured in the middle of their reading process, so it’s more likely they’ll push the share button
  • Or in floating bars – social media buttons are included in a left floating bar moving alongside the article, while users scroll down the page. Thus, users will feel more inclined to share the article, as their attention to the subject is maximal.

Below is an example for the first recommended placement:

 

Make it easy to subscribe

This is where design meets functionality. Be sure you catch readers who’ll want to see more of your blog posts. Make sure you put a subscription form in a visible place and make it easy for them to follow your blog activity.

Here’s an example of how Lilistravelplans.com encourages readers to subscribe for more articles:

 

Stick to clean design, avoid clutter

An overall principle you should observe in defining your blog design is to make it clean, and avoid embarrassing elements such as: banners, popups, crowded sidebars, etc. Keep the blog design as simple as possible, including only needed elements.

A nice example of clean blog design:

Navigation style – keep the menu simple

If blog design is chosen to be minimalist, so should be the navigation menu. The menu should contain categories you are blogging about, and it should help readers navigate simply within the blog pages.

As a general rule, don’t go overboard and make the menu original. Keep things simple, sticking to a classic design wholly meeting functional criteria.

Here’s an example of a blog menu you will surely like:

 

Recommended blog layout

One of the latest trends, also promoted through newest templates, is the grid-based layout. It helps you give a clean design to your blog. Also, it’s easy to scan in search for the topic that best interests your readers. The featured images offer a nice visual presentation of the articles.

Here’s how Brit.co uses such a layout:

 

Details that can be customized, to induce certain effects upon readers

 

Unique header image for every blog post

The option that’s available for adding specific header images to every blog post is to set a featured image. If you’re using WordPress, you’ll find this option in the editor interface.

A unique header image for every post page will clearly signal the unique content in that blog article. It adds specific color and design to the page, and it serves as a branding element for that very article.

 

Bio section for the blog author/authors

It’s important to create a dedicated bio section for the blog author.

Telling a few words about the author of the blog posts will add credibility and authenticity to the blog content. In this section, you can be as innovative as you like, and you can transmit, through design, exactly how you want to be perceived by your readers.

For instance, Legalnomads.com developed their About section into an entire blog post:

 

 

Popular posts and pillar content

It’s recommended that you showcase best content of the blog. For this, you should think of including sections for popular posts and pillar content in the blog home page. The blog design should be customized to bring best content upfront.

This is how Cafedelites.com invites readers to explore delicious recipes:

 

 

 

No additional customization

Instead of adding customizations to the blog design, you can focus on creating compelling content. Your blog will thus take its uniqueness from the content you produce. You’ll have the possibility to better communicate with your readers, by getting them more involved with your content (text, images, videos) – no complicated design will result in sharper attention to the content.

 

10 blogs to take as your models

Jungalow.com is a blog that makes good use of visuals and color. The bio section is visible on the very front page, and it fits perfectly in the images mix, due to the photo.

 

 

Witanddelight.com is perfectly adapted to scanning behavior. White space is wisely spread onto the blog pages, giving you – the reader – time to enjoy reading, wit and delight.

 

 

 

Quintessenceblog.com is special. It’s special in having a background image that makes the blog stand out. Moreover, the color scheme includes blue and orange, in a wise combination of complementary colors.

 

 

Camillestyles.com has a top-notch design, in that it uses both a grid-style layout and beautiful fonts (Georgia, serif).

 

 

Tipswithtykes.com uses much active negative space that plays a major role in better emphasizing visuals (colourful images, in this case).

 

 

Mariakilliam.com manages to bring images and color to the front. Visuals have the role to catch readers’ attention and gain their engagement from the very first visit to the blog.

 

 

Retouchist.net is a blog that wonderfully uses the grid-style layout. Moreover, the social media icons “accompany” users all throughout articles, while they are reading them.

 

 

Davidduchemin.com has an unusual blog header, made up of images and links to other websites. This blog impresses through originality, both in design and in content that’s published.

 

 

Contrastly.com has a subscription form that’s easy to find and fill in, once you’ve decided to join the readers’ community.

 

 

101cookbooks.com is a food blog presenting different recipes in a visually appealing manner. The menu is simple, with no specific customization, and placed on the left.

 

 

 

A wrapping word

We hope we’ve managed to bring you closer to creating your amazing blog. All of the above is intended to serve as a few guidelines, once you’ve decided to start your own blog. Knowing that true originality resides in your own blogging style, we’ve gathered some recommendations that’ll help you quickly go through designing your blog and pass to the next step: creating compelling content.

We wish you happy blogging!