Creative Lead, 7+ Years of Web Design and Development Experience
January 15th, 2020
Your business’ blog is a staple for driving new users to your website who seek knowledge and answers to the questions they have. It’s full of expert content marketing that’s valuable to your audience, which ultimately helps drive visitors to grow your business.
In fact, marketers who prioritize blogging efforts are 13 times more likely to see positive ROI, according to HubSpot.
To help shape and optimize the readability of your content you need it to be facilitated by a blog design that’s able to draw customers into headlines, entice interactions, optimize for conversions, and create a lasting impression.
To help guide you, we’ve assembled the most important design components your blog's design should have and how they work individually to help optimize your blog to hit your numbers.
1. Organize your content into a learning center
If you’re like IMPACT and have been creating content for years, chances are you’ve accumulated a lot of content of many different types.
Naturally, you’ve probably done what many other organizations have done and separated the content into a variety of different areas. For example, videos live in a video library, articles on a blog, whitepapers, and ebooks in a resource center — you get the idea.
While this organizes everything nicely from a content type standpoint, your user isn’t always going to want to view only video or only blog content.
Pretend the user is you, and you are on a journey to discover more about a particular topic.
Would you rather jump around different parts of the site to see what’s available for that topic, or, would you want you to have one location where you can view everything on that topic, be it blog, video, pillar, or downloadable content?
My guess would be the latter.
Aside from ease, this approach makes it more likely your user will spend more time on your site since the barrier of finding what they want has been decreased significantly. This will also likely result in an increase of your pages per session, too.
So, what should this learning center look like?
Well, there are a couple ways you can approach this.
They have one page with a feed of every possible piece of content they have created.
From here, you can filter by different personas, topics, or content types using the left side menu. From here you could sort by recent posts, or most popular.
If you still aren’t finding what you want, there is also a search bar.
Another approach is how IMPACT does our own learning center.
While similar to that of Aquila, IMPACT has individual pages with specific layouts for each of the inner topic pages.
In this approach, pieces that are the most comprehensive, such as pillar pages, are listed first.
Below that are recommended pieces — ones that are either the most popular or would be most useful for someone seeking knowledge on that specific topic.
In the next section, IMPACT lists any experts for the topic. This is useful in case you ever wanted to reach out to anyone with specific questions.
And finally, there is a feed of blog articles and podcasts organized by most recent, which updates automatically as new articles come out.
Overall, both approaches accomplish similar goals — getting your user the most relevant content possible. Depending on how your content is currently organized, and how your website's built, one approach may be better than the other.
One of the easiest places to start achieving a clean and organized design is by utilizing a grid system —a technique that’s been used widely throughout print layouts in newspapers and magazines.
This technique has been applied to web design to help provide a consistent experience for users across a variety of screen sizes.
Imagine you have a printed 8.5 by 11inch paper with a typed essay in front of you. At its current state, it's fairly easy to read. But what would happen if you stretched the paper to 18inches wide?
It becomes significantly more challenging to go from line to line reading. This is why you see newspapers and magazines employ more narrow column formats.
This idea is also the same for blogs. If your blog’s grid width is too large (especially if users are on larger screens) will create readability trouble for your users.
It risks them losing their place as they read line to line, while also making your content appear shorter and awkwardly spaced.
Since the vast majority of users are using monitors that are 1200px - 1300px wide (laptop size), your blog’s grid width should range from 900px - 1100px, with 1024px being the ideal.
One company who did this well on their website was Helpscout, notice how they utilize the grid to keep their blog content easily legible and appealing.
This technique also gives you a healthy amount of whitespace throughout your blog. Using a grid helps users differentiate elements throughout your blog (sidebars, headers/body text, images, share icons) from one another.
The grid’s effectiveness in organizing your blog's information is the foundation for keeping your content under control.
3. Use a blog card layout
Many of us are putting out a lot of content. Depending on whether you’re blogging once a week or twice a day, you could already have up to 600+ blog posts on your website at the end of a year.
With that many posts, how do you best use your website’s real estate to organize those articles so you can display the most at once without hitting visitors with information overload?
As we know, physical cards (baseball/basketball, Pokemon, historical) have been around for quite some time and serve as easy ways to visually display and organize information.
The architecture of cards has helped us easily recognize, recall, and read the information that’s important.
The card design has now been applied throughout the web. Big players like Pinterest, Twitter, and Google have it ingrained in their UX:
Like these guys did, keep your blog cards simple.
Using different image and font sizes to represent the most important to least important elements of the card will make them more legible for those reading them.
Also, make sure to focus on incorporating these elements into the card (the bold are essential):
Blog author (and image, if there's room)
Social share links
Read More button
With this list in mind, let’s use Zenefits’ card design as an example to see how they applied these elements.
In their card layout, they highlight the featured image and title as the most prominent elements.
The excerpts not only help users decide whether or not the article is right for them, but entice the user to click through if the title still left them unconvinced.
Dates allow the user to recognize if the article is new or current, while having an author (with a picture!) gives more personality to your posts —as well as helping establish thought leadership for your writers).
On your articles listing page, arrange these cards in columns of 2 or 3 depending on your arrangement of the information within it to maximize how many are seen at once.
4. Choose large, beautiful featured images
One of the current trends across many blogs is incorporating large, non-stocky hero images for each blog card and inner blog post.
This design choice isn’t one without reason. Take Intercom’s inner blog template, for example.
While their featured image may seem large, so much so that it pushes down the content, it acts as a compelling element to help connect the user to the article before reading anything beyond the title or author.
In terms of hierarchy, it also adds a nice anchor to the top of the page, allowing the user to easily recognize where the article begins.
While it’s not as necessary to go as large as Intercom's, it’s important to allow your featured image size to be large enough so it holds enough visual weight to stand out from the elements in close proximity to it.
Feel free to play around with your layout While companies like Intercom choose to go full width on their images, other blogs like Drift keep their images contained to the grid, which allows you to see the content peeking into the fold.
5. Utilize legible typography across all devices
Let me set the record straight —
Not all people coming to your website have 20/20 vision, and those who do still don’t want to read your 12pt font. Just because the smaller font shortens everything up doesn't necessarily make your readers want to keep reading.
I can’t count how many times my parents and friends arrive on blog articles only to find themselves zooming in just to read what’s on the page.
Sounds pretty ridiculous, right?
You want your website's font sizes, especially on your blog, to be the last thing users are complaining about.
So then comes the question — what font sizes should I be using?
When it comes to body font, my experience leads me to say somewhere in between 17px - 21px, depending on what font you are using (some are naturally larger than others).
For your headings size and a more in-depth analysis as to why this all matters, I suggest checking out this article. It gives you a full chart of some of the most common sizes used for header tags, from desktop to mobile.
If you are looking for some examples of websites who’ve mastered typography and sizes on their site, I suggest checking out these companies:
For example, think of the query ‘what is content marketing.’
Most of the search results associated with this kind of key phrase are comprehensive guides, giving you everything you would want to know about the topic.
But if you’re someone just looking for the definition of content marketing, skimming a 4000 word article to find it might be a little tedious. This is where short summary boxes are really handy.
Traditionally placed towards the beginning of a blog article, these boxes are where you can add in the short answer to the larger question your article is about. HubSpot and IMPACT do this on their articles, as seen in the example below.
This also has another advantage, aside from getting the user the answer they want faster. Google will often use the content in these boxes for featured snippets.
This means you show up as the first post in the SERP, resulting in an increase in click-throughs for your article.
Using this box is not mandatory on all blog articles. It should be mainly used on articles where a frequently searched question that would likely have a featured snippet would benefit from a shorter answer.
7. Use short descriptive subheadings
Speaking of looking for quick answers to questions...
Another important characteristic you should practice is writing short, clear headers to section off your article into pieces that make it easy for your readers to consume.
Typically, people are coming to these articles with the intent of skimming them until they find the section(s) that answers their questions.
With that in mind, you need to make sure you have clear headers to section off your article so readers can accomplish this. I’m not talking about ‘Section 1’, or generic ones like ‘why’ and ‘how.’
You need headers that define exactly what readers will learn about in those grouped paragraphs of your article.
You need to be writing subheadings that add quality to your writing and help make your article engaging for your visitors, especially those visiting for the first time. Copyhackers does a phenomenal job at this.
8. Make social sharing is accessible on all devices
Most blogs these days use social sharing to allow users to easily share blog articles. But, many sites aren't granting that same experience for tablet and mobile users.
A Pew survey found that 85% of U.S. adults now get their news on a mobile device at least some of the time, including those over the age of 65.
Those same people are also browsing social platforms on their mobile devices, so you can bet they are willing to share content on mobile too (so long as they find it knowledgeable and have an easy means to do so).
But where should you be placing your social buttons? With limited space on smaller devices, many just don’t know where to put them.
On Mashable’s blog, the social buttons are placed on the right of the navigation and stick with you as you scroll the page, giving users the chance to share whenever.
NBC takes a similar approach by also putting their share options in a fixed top bar that appears once the user scrolls past a certain point on the page.
If you’re looking for platforms that can create your share buttons easily (withno coding required) check out tools such as AddThis, ShareThis, or Sumo.
Bonus tip: You may notice recently some sites utilizing Facebook Messenger or Slack as additional platforms to share on. This is done in an effort to make it easy to get content to users on the platforms and software they are using the most.
If you know your users are hanging out somewhere new, make sure your social links reflect that. Or, if you have a social link to a platform that’s rarely used, maybe it’s time to ditch it.
This keeps your experience current and decreases the potential for missed social sharing opportunities in the most popular platforms.
9. Strategically place your lead magnets
Many of us find ourselves with a healthy amount of traffic but struggle to get the number of subscribers or conversions that we want. This is where utilizing an enticing and aesthetically pleasing lead magnet can be very desirable.
Ideally, you want the lead magnet to be something that resonates with your target audience so you’re attracting qualified leads into your system.
While many people use the lead magnet as a stand-alone offer throughout the blog, a more strategic use is as an offer that's received when people subscribe to your blog.
This way you’re not only increasing your subscriber count, but your conversions as well!
Once you figure out what offer works best for your audience, you now need to make it visually convincing.
In IMPACT's client blogs, we use this technique in two different ways.
The first is on the blog posts page (where your users see all the articles you’ve posted).
After a user scrolls past a few of the listed articles, a call-to-action to either download a guide or subscribe is placed.
The second technique is through a popup that appears once daily to users who are not subscribed to the websites blog.
Both instances of the lead magnet need the following elements for it to perform optimally:
A cover of the offer or image, so users visually see what the offer relates to
A header that helps the user understand what the offer is
A subheader helps the user understand why they need the particular offer and what value it is to them
A button color that stands apart from your site's color palette so it’s very recognizable.
Keep the inline lead magnet slightly less intrusive. There’s no need for animations or forced interactions.
It should comfortably fit into your listing page, while using a different variation of the layout and colors to stand apart from the articles, such as Armstrong Transport's one seen below.
For the popup, make sure it is easily distinguishable.
For example, darkening the background and creating a white container can help emphasize the popup and prevent the users from being distracted by the blog under the black overlay.
10. Highlight your authors
Your authors put a lot of time and effort into creating the content for your blog, and you should celebrate that by posting them as the author of their respective articles.
Not only that, but you should also give them short bios that appear at the bottom of articles so your users are able to distinguish who’s written what on your blog. Better yet, have individual author pages that showcase all the posts they’ve written.
This helps the UX of your blog so users have an easier time searching for articles by authors they like, while also giving your authors a place to showcase all the insights they’ve provided on various subjects.
The sooner you can implement these design principles onto your blog, the sooner you will begin seeing more conversions and traffic.
If you feel this has helped you get a handle on things, then it's time to get going. Work with your team internally to come up with new designs that can tie in at least 4 of the items above and work you way to a fully updated version of your blog.
If you think you still need some guidance as to what other areas of your blog need improving, consider submitting your site to a free website critique. In 10 minutes, you’ll walk away with actionable and personalized to-dos to help improve everything from messaging to SEO and design.
Here Are Some Related Articles You May Find Interesting