Blog design: best practices 2018

Good blog content coupled with search engine optimization can drive customers to your business. A HubSpot study found that monthly leads grew by 126 percent for businesses that publish a blog.

So what’s the downside?

All the effort you put into content and SEO won’t matter if your blog drowns in its own words and design. If users get lost, they’ll click away.

Here are some best practices for good blog design that will keep your customers engaged:

Headers and subheadings

Readers will skim to find what they want before committing to read a full article — 43 percent of people admit to skimming posts (source). Headers and subheadings help guide a reader while creating all-important white space.

White space

A cluttered page is the enemy of user experience, especially on the small screen of a mobile device. White space is the space between text, images and any element on a page. White space is a vital design tool because it helps to focus the reader’s attention. Therefore, it can determine what a reader will first look at and where their eyes will go next. Avoid distracting readers with too many elements packed on a page. Use lots of white space to create the optimal experience.

Images

Every post should be accompanied by a compelling image. Avoid stock photos that look too canned or staged. Images are key because blog articles with images get 94 percent more views (source).

Mobile friendly blog design

Blog design should be optimized for reading on mobile because that’s where readers are. A majority of Google searches come from mobile devices, according to Mashable. Meanwhile, 85 percent of adults in the United States get their news on a mobile device — including seniors — according to a Pew survey. That means a mobile-friendly design is paramount.

Card layout for blogs

Because mobile devices are becoming the most common way people will see your website and blog, a card layout optimizes the user experience. A card harkens to the old-fashioned baseball card that contained an image and vital information. It’s an excellent way to organize information without overloading the reader. Each card represents a blog post. The layout is versatile because the cards can be stacked horizontally or vertically. A user can scroll easily from topic to topic. Each blog card should contain the following elements:

• • Image
  • Title
  • Author name
  • Excerpt
  • Date
  • Category
  • Share links
  • Read more button

The image should be prominent. The title should be catchy. The excerpt helps readers decide whether to read more after the image or headline has caught their eye.

For examples of a card layout, visit the Usabilla and HubSpot blogs. The Firebrand blog also uses cards.

Font size — bigger is better

For decades, 12-point has been the standard font size. A smaller font size allows for more text to fit in a limited space, but this can have a negative effect when people have trouble reading and comprehending the content. This is especially the case on a mobile device, which is what most people now use for reading blog posts. Studies show that 12-point font is too small for readability on a mobile device. What is the optimal font size? Some studies suggest 14-point or 16-point for body copy. One study suggests readability and comprehension improved as high as 18-point but anything larger was not practical for main text.

• 10 point – this is 10 point font – too small for most readers
• 12 point – this is 12 point font – traditional size, but perhaps too small for mobile
• 14 point – this is 14 point font – the size used for this blog post
• 16 point – this is 16 point font – more sites are starting to use this size
• 18 point – this is 18 point font – recommended by some for mobile readers

Help readers navigate

Put a navigation bar at the top of your blog so readers can easily go back the blog home page or access other parts of your website.

Use calls-to-action

Give readers a next step when they finish a post. For example, a call-to-action (or CTA) can give people the opportunity to download resources, click on a product page or subscribe to an email newsletter. The functions can include:

• Download button
• Pop-up window
• Subscription fields
• Native ads

Highlight best performing blog material

Create a card for your best-performing blog posts and showcase them on the top of the blog home page or in a sidebar. These posts have created a lot of traffic for a reason. Let new visitors see your best work. You can title it “Most Popular Articles” or “Best of the Blog” and tag each post as such.

Highlight blog authors

A short author bio and photo at the end of each post gives readers a sense of the expertise your company provides. Authored blogs are good for branding and users can search for authors they like and trust. You can see mine below by way of example.

Create frequent content that covers different topic areas

Make sure weeks don’t go by without a new blog post. A Demand Gen Report found that 47 percent of customers viewed three to five pieces of content before engaging with the company. At that rate, posting frequent content will lay the necessary foundation for readers to become inspired to buy your product.

Write short sentences and paragraphs — but not short posts

Keeping sentences short and pithy will keep readers engaged. Aim for two or three sentences for each paragraph. The regular breaks in paragraphs create white space and are easy on the eyes. But this doesn’t mean you should short shrift the actual content in a blog post. According to a Searchmetrics study, the average word count of top-ranking content in Google is about 1,200 words.

---

 

If you want your marketing programs to cut through all the clutter, they must be creative. Learn about creativity, improve personal and team creativity, and troubleshoot creative problems with our free guide.

[inbound_button font_size=”14″ color=”#ed7433″ text_color=”#ffffff” icon=”” url=”https://www.firebrand.marketing/guide-50-ways-to-improve-creativity/” width=”300″ target=”_blank”]FREE GUIDE: 50 WAYS TO MAKE YOUR MARKETING MORE CREATIVE[/inbound_button]