Running a blog takes a lot of work. It means staying constantly updated on the latest trending topics, marketing trends, blogging sites to place your content and SEO best practices.
And that’s not all: these days, user experience (UX) is another make-or-break element of Google’s algorithm. With 70 million blog posts published monthly, you need everything you can get your hands on to stand out from the crowd. If your blog doesn’t keep users engaged, Google probably won’t rank it anywhere near the first page of its search results.
That’s why in this post, we’ll discuss seven best practices (content and UX design) for keeping your blog as user-friendly as possible.
Let’s dive right in.
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 doesn’t matter how informative or deep your writing is if you can’t hold your readers’ attention. 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:
In short: it’s crucial to optimize a blog post design for SEO, increased engagement, and positive UX signals from your user persona.
Now that you know how important UX is for your blog and SEO, line-height for it, let’s look at seven actionable steps you can take today to improve engagement on your blog posts.
People are consuming visual content now more than ever. Long gone are the days when you could slap up some walls of text and expect people to stick around.
You need to incorporate visual elements throughout your posts to stop people from skimming over your content. This trick will entice users to start reading and paying attention. In addition, it can prevent people from returning to the search results and staying on your page longer.
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 to use 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 will they 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:
They use this tactic in all of their blog posts.
The quote can be a lesson you learned, a takeaway from a study, 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 so 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 reading time and make the information much easier to grasp. 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:
Boring, right? People already don’t like reading, and if you give them a text-heavy blog, they will likely click away.
However, there are a few best practices to follow when including an image in your blog posts.
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.
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.
Most screenshots are of shallow quality. To ensure your next screenshot is good to go, you can use the Awesome Screenshot Chrome extension to solve the issue.
Reducing the image file size will not affect your site speed. You can use one of the many free image optimization services available.
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:
Another creative element that you can add to your blogs is a comparison table. Check out this example for the Security.org blog:
With this table, they were able to achieve many positive UX points like:
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.
It’s a problem: Google favors 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. Your readers can easily find the parts they’re looking for 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:
The sticky sidebar on the left enables the user to:
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:
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:
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.
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:
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, break up your content into easy-to-read sections. For example, try reading the text below with all the text squished together.
Now, I like to use lots of space between sentences and within each paragraph, coupled with images, on my blogs. Plenty of images.
Notice the wide margins on the left and right, making 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:
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:
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.
It adds a healthy amount of whitespace, which allows other elements, such as sidebars, share buttons, images, and other visuals, to stand out.
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:
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.
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:
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:
The video doesn’t just appear out of nowhere, as I added context beforehand.
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.
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:
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 they seamlessly fit your design. Even your newsletter signup form needs to be present but not too dominant.
One blog with an effective newsletter signup that integrates well with its 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. You can always get rid of it with a clear X button.
Perfect.
There are other CTAs, but the point here is to ensure the best user experience while maintaining a high conversion rate.
If content is king, design is queen—which is why it’s crucial to make your blog as user-friendly as possible.
Incorporate visual components like graphics, whitespace, and video to keep your website visitors more engaged with your content. 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?
About the author
Alladdine Djaidani is an entrepreneur, translator, internet marketer, and founder of hustlrethos.com. There, he writes about how people can make money online and grow businesses in the digital space.
This is where we place all the possible blocks that we use for our articles…
Creating illustrations for a children’s book is challenging, especially if you're not an artist. Learn…
Nostalgic typefaces are trendy and more varied than ever. Discover the story behind vintage typography…
Curious about the diverse world of nostalgic fonts? Keep reading to explore typography from the…
Check out arrow icons in different aesthetics and get some inspiration on how to implement…
Step-by-step tutorial on generating AI illustrations for the online school landing page design.
This website uses cookies.