Reading time: 11 min.

Running a blog takes a lot of work. It means staying constantly updated on the latest trending topics, marketing trends, and SEO best practices.

And that’s not all: these days, user experience (UX) is another make-or-break element of Google’s algorithm. And with 70 Million blog posts published each month, you need everything you can get your hands out to stand out from the crowd. If your blog doesn’t keep users engaged, Google probably won’t be ranking it anywhere near the first page of its search results.

That’s why in this post, we’ll go over seven best practices (content and UX design) to keep your blog as user-friendly as possible.

Let’s dive right in.

Why blog post design matters

If you’re passionate about growing your blog, you probably care most about creating quality content that provides value to your audience.

Quality is king, right? So what should it matter whether your blog’s aesthetic design is clunky or cool? Shouldn’t readers care more about what the blog says than how it looks?

In a perfect world, yes. In reality, statistics show that users are much more likely to click away from your fantastic post if it isn’t easy to skim, read and interact with it. If you can’t hold your readers’ attention, it doesn’t matter how informative or deep your writing is. No one will care about your content if it’s not user-friendly.

Here are a few reasons why you should care about improving your UX through blog post design:

  • Low bounce rate: a better user experience means a less frustrating time interacting with your site
  • Better lead generation, higher conversion rate, brand trust, and brand loyalty
  • Returning visitors: positive initial interaction with your site leads to a satisfied customer, making recurring customers higher

In short: it’s crucial to optimize a blog post design for SEO, increased engagement, and positive UX signals from your user persona.

7 UX best practices for your blog posts

Now that you know how important UX is for your blog and SEO, line-height, line-height for it, let’s look at seven actionable steps you can take today to improve engagement on your blog posts.

1. Establish a visual hierarchy

People are consuming visual content now more than ever. Long gone are the days where you could slap up some walls of text and expect people to stick around.

If you want to stop people from skimming over your content, you need to incorporate visual elements throughout your posts. This trick will entice users to start reading and paying attention. In addition, it can prevent people from going back to the search results and stay on your page longer instead.

And the longer people stay on your page, the better your page’s UX signal is for Google.

Try incorporating visuals like these:

Giant quotes:

This is a simple yet effective skim stopper. Most people today skim content instead of reading it. One of the best ways to stop readers from scanning and start paying attention to your content is by using a giant quote in the middle of the content.

It makes sense when you think about it. If a reader is trying to find the highlights of your content and suddenly a giant quote appears out of nowhere. It’s going to stop them in their tracks.

Not only are they going to read the quote, but they’ll go back to read the text before and after it to understand the context better, which can make a massive dent in your bounce rate.

Take this example from the BigCommerce’s guide on SaaS, PaaS, and IaaS:

7 UX Best Practices for Designing your Blog Posts in 2021. context before and after embeded video

They use this tactic in all of their blog posts.

The quote can be a lesson you learned, a takeaway from a study, an expert input, an interesting stat, you name it. As long as it brings value and adds value to the reader’s experience.

This leads me to my next visualization tactic.

Charts and infographics:

Using Charts and infographics, in general, have been around for a long time. They remain a staple in the content marketing world, and it’s not hard to see why.

Infographics can be an excellent skim stopper, a link building and PR tool, make information easily digestible, and the list goes on.

You can get creative with this one. You can either create your infographic using software like Venngage or go the other route and hire a graphic designer.

Infographics help you minimize the reading time and make the information much easier to grasp. And marketers seem to agree, as 32% of B2B marketers say that visual images are the most critical content marketing element for their business.

So if you’re not using infographics, you better start now.

Images and multimedia:

It goes without saying, but the more images you have in your content, the better engagement and user experience you’ll have on your blog posts. And imagine a blog post made of 100% text.

In fact, here’s how it looks:

7 UX Best Practices for Designing your Blog Posts in 2021. blog post made only with text

Boring, right? People already don’t like reading, and if you give them a text-heavy blog, they are likely to click away.

But there are few best practices that you need to keep in mind when including an image in your blog posts.

  • Include high-resolution images only

When you include images, make sure they are high resolution. Blurry screenshots, poor images will negatively impact your UX. You don’t want your readers to click off because your pictures are barely viewable.

7 UX Best Practices for Designing your Blog Posts in 2021: low and high resolution image comparison

Increase the resolution of your image in Smart Upscaler for free

  • Explainer images

You can add explainer images like diagrams and flowcharts that make your blogs much easier to digest and add to the fact that they are easy to produce with tools like Pixpa, Canva, and plenty more.

  • Take screenshots the right way

Most screenshots are shallow quality. To make sure your next screenshot is good to go, you can use the Awesome Screenshot Chrome extension to solve the issue.

  • Optimize big images

Ensure that your site speed isn’t affected by reducing the image file size. You can use the many free image optimization services around.

The last step is making sure that your images are legal. After that, you’re good to go!

Use interactive elements:

It doesn’t stop there; you can also make your posts more visually appealing through interactive elements such as
colored buttons, comparison tables, and other graphics.

Interactive visuals help personalize your content and keep your audience engaged. Here’s a good example from my article on the best survey sites:

7 UX Best Practices for Designing your Blog Posts in 2021

Another creative element that you can add to your blogs is a comparison table. Check out this example for the Security.org blog:

7 UX Best Practices for Designing your Blog Posts in 2021. Best Smart Home Table

With this table, they were able to achieve many positive UX points like:

  • Summarizing the benefits of each product in a quick, conducive manner
  • Add a hyperlink to other posts related to the products mentioned, which are suitable for both UX and search engine crawlers
  • It helps with conversion rate and more affiliate commissions
  • It helps the reader stop in their tracks and focuses on the page more, which is another positive signal to search engines

An easy way to add these elements to your blog posts is by using a theme page builder such as Elementor, LeadPages, Astra, or any other page builder. Or, you can go the technical route and code those elements in the backend by hiring a developer.

2. Use a table of contents

It’s a problem: Google favors both long-form content and content that’s easy to read and navigate.

How do you fill both those requirements? With a responsive table of contents.

This solution lets you write a comprehensive long-form article with plenty of easy-to-read sections, while your readers can easily find the parts they’re looking for—just by referring to the table of contents.

Let’s dive into the best ways you design your table of contents for both desktop and mobile.

Table of contents for desktop

For the desktop version of your site, you have a wider space for creativity.

Navigating your website on a big desktop screen with a mouse makes it easy for the reader to find what they are looking for—but you can still make a noticeable improvement in your user experience by creating a sticky table of contents as a sidebar.

Here’s an example from G2’s learning hub:

7 UX Best Practices for Designing your Blog Posts in 2021. Add a heading

The sticky sidebar on the left enables the user to:

  • Quickly jump from one section to another
  • Refer to a portion of the post without having to scroll aimlessly
  • Find everything they’re looking for in a split of a second
  • The table of the content doesn’t disappear as they keep scrolling down

All of that equals more engagement, clicks on the page, UX signals. In other words, you keep your readers happy and satisfy the search engines hitting two birds with one stone.

Or, you can include a traditional table of contents at the top of the post with hyperlinks that allow readers to jump to their desired section of the article. Whatever table of contents style you choose, several WordPress plugins are available that can fit the bill nicely.

Mobile table of contents

Optimizing your table of contents for mobile is a little bit trickier.

The small screen is not as flexible or as conducive to long reads, meaning that the traditional table of contents isn’t going to cut it. Users will have to scroll up and down to find what they want, which is not the greatest thing for your user experience.

To fix this problem, you’ll need to use creative and interactive layouts that let users navigate the text quickly or access the table of contents from anywhere in the article.

For example, you could use a table of contents that sticks to the top of the page and expands when needed, like this one from my free gift cards article:

7 UX Best Practices for Designing your Blog Posts in 2021. Add a heading

Or, you could take a leaf out of Wirecutter’s book and use an accordion layout to help readers scan through your long-form content more quickly.

After A/B testing their old design and the new one, the new phone design has reportedly increased on-page view time by 26% after the interactive table of contents was added:

7 UX Best Practices for Designing your Blog Posts in 2021. Add a heading

Users can click on the arrows to expand the content and read more about the sections they’re interested in, and the overall layout helps keep the page from looking overwhelmingly long to a mobile user.

3. Encourage social sharing

Social shares are a big UX signal for Google. When your content is shared more on social media, your content is getting love from humans, equating to more love from search engines.

To increase social engagement with your blog posts, try the following techniques:

  • Create tweetable by using plugins like click to tweet. Make it as easy as possible for your readers to share your words of wisdom by tweeting pull quotes with the click of a button
  • Use a pin it button to make it easy to share your images on Pinterest. Many social sharing plugins make it easy to add “pin it” buttons to your photos. With those, readers can create Pinterest pins for your blog post and increase your engagement signal for Google at the same time
  • Use attractive headlines. Note: This isn’t permission to be clickbait-y. But it’s an unfortunate fact that out of 80% of people who will read your headline, only 20% will click and read the article. A powerful headline makes the rest easy
  • Make social sharing buttons mobile-friendly. Since most people use a phone to browse your site, you’ll need to pay attention to the sharing button plugin you choose and make sure it’s responsive on mobile. Buttons that obstruct content on mobile are a no-no

4. Utilize whitespace

Here’s a general rule of thumb: the more whitespace you have in your blog layout, the cleaner it looks — and the easier it is for your readers to navigate.

In web design, whitespace refers to the amount of space between text, images, elements, graphics, and other design elements.

Here are three main elements you can incorporate into your design today.

Break up your text into easy to read sections:

First, avoid long paragraphs. Remember all that stuff your grade-school teachers said about a section in 3-5 sentences? Forget it.

Since online readers tend to skim blog posts for the content that interests them, we can’t expect them to wade through massive walls of text and dense paragraphs.

When writing for the web, make it a habit to break up your content into easy-to-read sections. For example, try to read the text below with text all squished together.

7 UX Best Practices for Designing your Blog Posts in 2021. Blog with squished text

Now, I like to use tons of space between sentences and within each paragraph coupled with images on my blogs. Plenty of images.

7 UX Best Practices for Designing your Blog Posts in 2021. Paragraph with images in blog

Notice the wide margins on the left and right that make it even easier to skim.

Use a lot of subheaders

Subheaders help your readers to skim your content effectively. Here’s an example of a text with no subheads:

7 UX Best Practices for Designing your Blog Posts in 2021. Use subheaders

Aside from being a good user experience practice, subheads can help your SEO game tremendously. When bots crawl your content, they use subheads to understand the page; therefore, a page with no subheads will decrease its chances of ranking high.

Also, you need to keep an eye out for the text line-height.

Use a narrow grid:

Figuring the right grid measurement for your blog’s content is uber important. For users with wide screens to read from one line to the next, if your post takes up the entire width of the page.

Instead, contain your blog content in the middle column on the page. This clean look (with plenty of whitespace on both sides) will make it immediately easier for readers to focus on and ingest your post.

Take this example from Post Affiliate Pro:

7 UX Best Practices for Designing your Blog Posts in 2021. 9 affiliate mark article

Notice how they go from the screen-wide title, a non-cheesy colorful image header, and the lede text to narrowing the text right in the middle of the page, enticing the reader to keep scrolling down and keep reading. This helps their readers focus on what’s important – the content.

Needless to say that it adds a healthy amount of whitespace, and it gives a chance for other elements such as sidebars, share buttons, images, and other visuals to stand out.

5. Summarize main points with summary boxes

Since Google loves to reward long-form articles that answer questions as thoroughly as possible, many high-performing blog posts range from 1500 to 4000+ words.

But an average Google user searching for a term like “what is a triathlon” probably doesn’t want to skim through your 3500-word post on the history of endurance sports to find the straightforward answer to their question.

How can you improve the UX of your blog both for seekers of quick answers and curious readers looking for in-depth guides?

The best fix is to keep writing those high-quality, long-form blog posts — but start using a summary box in the introduction of your article. HubSpot does a great job of mixing the two:

7 UX Best Practices for Designing your Blog Posts in 2021. HubSpot blog post

A summary box is a great way to condense the main takeaway for your reader and have a chance at landing the zero position (otherwise known as the featured snippet) on the Google results page. Summary boxes are a worthy addition to all kinds of blog posts: from product reviews and roundups to list posts, tutorials, and case studies.

Either way, it’s a win-win.

6. Embed videos throughout your content

Youtube is the most used platform in the world for a reason. People are drawn to the video!

Embedding videos throughout your content is a no-brainer. Video is the most powerful content-consuming medium, and if you’re not taking advantage of it, you’re missing out a great deal.

That’s why you should think about creating videos to embed throughout your posts, such as:

  • Demonstration videos
  • Explainer videos
  • Narrated slideshows
  • Repurposed content from your old blog posts

I mean, think about it. When readers end up on your blog posts, if you can get them hooked through a nice video tutorial, explaining something through a video rather than text tends to get people to stick around for longer.

Better yet, you can embed other people’s videos if you’re camera shy and can’t produce a high-quality video.

With that, here’s a step-by-step process on how to start embedding video in your content:

  • 1. Spot an area in your content where having a video is better than an external link. For example, I embedded a video instead of a link to an article to explain to my readers how to use the audio editing software Garageband:
7 UX Best Practices for Designing your Blog Posts in 2021. Embeded video
  • 2. Add context before and after you embed the video. Don’t just toss videos all over your content with no context around them.
7 UX Best Practices for Designing your Blog Posts in 2021. Embeded video

The video doesn’t just appear out of nowhere, as I added context beforehand.

  • 3. Rinse and repeat.

This technique won’t magically get you to rank number one on google. But over time, it can make a huge difference in your UX signals and stay on-site time.

7. Place your CTAs strategically

Your calls to action (CTAs) are important — they’re the reason why you create content. Your goal may be to grow your email list, sell a product, or convince readers to sign up for a free trial.

But you need to make sure that CTAs don’t ruin your UX. For instance, you don’t want your readers to bounce off the page because your email popup is nearly impossible to close, right?

When you place your CTAs on your blog, keep in mind how they fit into the overall design and readability of the page. Like a landing page, the goal for your CTAs should be to drive conversion without being too sales-y or unpleasant.

And don’t forget: since most users will be on their mobile devices, you’ll want to keep mobile popup best practices in mind.

For example, consider using scroll-triggered popups, simple form fields, and large close-out buttons. Here’s a great example from Cloudtalk:

7 UX Best Practices for Designing your Blog Posts in 2021. Cloudtalk CTA in site

Notice how they darken the background so the focus can all go to the popup, which has a big green button, an image of the lead magnet, and an easy X button to close it.

Nice.

When you figure out what CTAs work best for your audience, you need to make sure that it fits your design seamlessly. Even your newsletter signup form needs to be present but not too dominant.

One blog with effective newsletter signup that integrates well with their blog and content is the Cloudways blog. Below you can see how it appears out of nowhere when you scroll down and disappears when you go up. And you can always get rid of it with a clear X button.

7 UX Best Practices for Designing your Blog Posts in 2021

Perfect.

There are other CTAs, but the point here is to ensure the best user experience while maintaining a high conversion rate.

Final thoughts

If the content is king, design is queen — which is why it’s crucial to make your blog as user-friendly as possible.

To keep your website visitors more engaged with your content, make sure to incorporate visual components like graphics, whitespace, and video. Ensure your blog posts are easy to navigate and include a summary snippet for quick takeaways. And don’t forget to make it as easy as possible to share your post or follow through on your CTAs!

After all, your content is awesome. Don’t you want people to enjoy reading it?

Author bio: Alladdine Djaidani is an entrepreneur, translator, internet marketer, and founder of hustlrethos.com, where he writes about how people can make money online and grow a business in the digital space.

Try tools for creators by the Icons8 team:

Icons8 Icons8, a library of about 130K+ icons and clip art images
Offline app icons8 Offline app and plugins to drag’n’drop icons and clip art to any design tools
Moose Moose, the big collection of high-quality stock photos
illustrations Ouch! , a library of vector illustrations and collages
Background Remover Background Remover, AI-based online tool for removing background from any photo
Mega Creator Mega Creator, online tool for creating visual content from pre-made elements
Fugue Fugue, royalty free music for videos of any kind
Lunacy Lunacy, free graphic design software with built-in design resources
Smart Upscaler Smart Upscaler, image upscaler to enlarge and enhance images using AI
Generated Photos Generated Photos, unique, worry-free model photos generated by AI
Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit