Back to Learning Center
Subscribe
Join 40,000+ sales and marketing pros who receive our weekly insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer

What is <span>They Ask, You Answer</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
Free Courses & Certifications

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
Website Design

12 blog layout best practices to remember in 2021

By Christine Austin

12 blog layout best practices to remember in 2021 Blog Feature

A great 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 insights and information that’s valuable to your audience, which ultimately helps drive sales to grow your business.  

Marketers who prioritize blogging efforts are 13 times more likely to see positive ROI, according to HubSpot.

While consistently creating content is a crucial part of making sure you’re educating your audience, simply having the content isn’t enough. You need to make sure you’re making it as easy as possible for users to find and digest your content.

To help shape and optimize the readability of your content, you need it to be facilitated by a blog design that enhances the reading experience and highlights the most important information. It needs to be able to draw customers into headlines, entice interactions, optimize for conversions, and create a lasting impression.

But where do you start? How do you organize everything to increase your blog's subscribers and session duration while also keeping it aesthetically pleasing?

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 marketing goals.

1. Make it a cumulative “learning center”

If you’re like IMPACT and have been creating content for years, chances are you’ve accumulated a lot of varying types of content.

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. That’s why we recommend organizing content into a learning center.

Aside from ease, a cumulative learning center 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, which Google uses as criteria when ranking your site. The higher pages per session, but better your ranking. 

So, what should this look like? One way is how Aquila Commercial, an IMPACT client, approaches it. 

They have one page with a feed of every possible piece of content they have created. 

From there, you can filter by different personas, topics, or content types using the left side menu. Then, using the top right dropdown, you can sort by recent posts, or most popular.

Learning Center Aquila Commercial

If you still aren’t finding what you want, there is also a search bar. 

Another approach is how IMPACT does its own learning center.

IMPACT Learning Center

While similar to that of Aquila, IMPACT has 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 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 experts on the topic from our team. This helps the user identify individuals they should continue to seek content from, while simultaneously building trust with those authors. 

Learning Center Experts IMPACT

And finally, there is a feed of blog articles and podcasts organized by most recent, which updates automatically as new articles come out.

Learning Center Recent Articles

Overall, both approaches accomplish similar goals — getting your users 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. 

So, before jumping into this project, be sure to either talk internally to your dev team, or, if you don’t have one, feel free to reach out to us and chat so we can talk about how to make this a reality on your site.   

2. Include article quick-summary boxes

To rank well for competitive keywords and drive traffic to our website, most of the articles we write are around 1500 words. 

While writing content to that length is exactly what Google wants you to do, it’s not entirely intuitive for certain questions or for users who are looking for quick answers. 

For example, think of the query “what is content marketing?

Most of the search results associated with this kind of keyphrase 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 might be a little tedious. This is where summary boxes are really handy. 

Traditionally placed towards the beginning of a blog article, these boxes are where you can add in short answers to questions your article elaborates on. 

HubSpot and IMPACT do this on their articles, as seen in the example below. 

Featured Snippet HubSpot

 

Not only does this make it easier for users to find the info they want, but  Google will often use the content in these boxes for featured snippets. This means you show up as the first post on the SERP (search engine results page), setting you up for more click-throughs for your article.

Features Snippet Googlefeatured snippet impact blog

 

Using this box is not mandatory on all blog articles and will not guarantee a featured snippet either, but experimenting with it to see whether or not it improves your article’s ranking is certainly a tactic worth trying.

3. Use a blog card layout

To maximize your traffic and keep your website fresh, it’s likely you’re pumping out a lot of content. 

Depending on your publishing cadence, 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?

One of the most UX-friendly layouts to solve for this is card-based design.

As we know, physical cards (baseball, basketball, Pokemon, etc) have been around for quite some time and serve as easy ways to visually display and organize information.

The architecture of cards helps us easily recognize, recall, and read important information.

Card design is also now frequently applied throughout the web. Big players like Pinterest, Twitter, and Google have it ingrained in their UX:

Blog Card Layout

Similar to the examples above, it’s important to keep your blog cards simple.

They should have a consistent, repeated structure, but use different image and font sizes to represent the most important to least important elements of the card to make them more legible for those reading them.

Also, make sure to focus on incorporating these elements into the card (the bold are essential):

  • Featured image
  • Blog title
  • Blog author (and image, if there's room)
  • Post date
  • Category
  • Blog excerpt
  • Social share links
  • Read More button

With this list in mind, let’s use Zenefits’ blog as an example:

Blog Cards Zenefits

In their card layout, they highlight the featured image and title as the most prominent elements. Then, they also included excerpts, which not only help users decide whether or not the article is right for them, but can entice them to click through if they were on the fence.

They also have dates that allow the user to recognize if the article is new or current, and authors (with pictures) to humanize the brand and establish thought leadership. 

Usually, on your articles listing page, we recommend arranging these cards in columns of two or three depending on what information you’re including to maximize how many posts are seen at once. 

4. Use large, high-quality featured images

As blogging becomes more prominent and social media becomes more visual, one of the most effective and differentiating things you can do for your blog is incorporating large, non-stocky hero images.

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 also draws the eye.

Featured Image Intercom

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 and re-emphasize the topic at hand.

While it’s not as necessary to go as large as Intercom, 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 near it.

Feel free to play around with your layout. While companies like Intercom choose to go full width on their images, others, like Drift, overlap their articles title over half of the hero area, allowing the body text to peek above-the-fold.

Featured Image Drift

This gives more balanced focus to the hero image and title while making it more convenient for your users to start reading immediately, as opposed to having them scroll first before seeing text. 

4. Narrow grid for your blog content

One of the easiest places to start achieving a clean and organized design is by utilizing a grid system. In short, a “grid serves as an armature or framework on which a designer can organize graphic elements in a rational, easy-to-absorb manner,” as explained by Wikipedia

This technique has been used widely throughout print layouts in newspapers and magazines to improve reading and the absorption of content easier. Grid systems in print mediums can also vary depending on the layout of the medium. 

Blog Grid Layout

In recent years, this technique has been applied to websites to help with responsive design and provide a consistent experience for users across a variety of screen sizes.

Imagine you have a printed 8.5 by 11-inch 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 18 inches wide? For most people, 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 for users on larger screens) will create readability trouble. It risks them losing their place, while also making your content appear shorter and awkwardly spaced.

Since the vast majority of users are using monitors that are 1300px to 1400px wide (laptop size), your blog’s grid width should range from 900px to 1100px, with 1024px being the ideal.

One company that does this well on their website is Helpscout. Notice how they utilize the grid to keep their blog content contained in the middle of the page. By limiting where the content can go, they avoid you having to scroll side-to-side to read. 

This technique also gives you a healthy amount of whitespace throughout your blog. It helps users differentiate elements throughout your blog (sidebars, headers/body text, images, share icons) from one another and guide the eye.

6. Utilize legible typography across all devices

Not all people coming to your website have 20/20 vision, and those who do still don’t want to read your 12pt font. It can cause eye strain, especially on digital screens. 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 now 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 to21px, 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 dives further into some of the most common sizes used for header tags, from desktop to mobile.

If you are looking for some examples of websites that have mastered typography and sizes on their site, I suggest checking out these companies:

Wired

Font Size Wired

Wired used a variety of different blog card sizes with fonts that scale proportionately to the box they’re contained in. This helps dictate the hierarchy of the cards.

Medium

Font Size Medium

Medium's use of very bold and consistent font sizes, combined with the neat organization of their blog cards, makes it very easy for users to scan the listings available.

The small fact that they also darken the titles, while using a lighter color on the sub-headers/dates, adds to the ease of scalability.

The Economist

Font Size Economist

The Economist has a much lighter font-weight that they use throughout their headers, but their size, combined with the red topic that rests above, helps guide the user’s eyes as they scan the article titles.

7. Use short descriptive subheadings

Speaking of looking for quick answers to questions...

Typically, people are coming to blog articles with the intent of skimming them until they find the section(s) that answers their questions or pique their interest.

Your headings should aid this goal by being specific and descriptive. 

I’m not talking about “Section 1”, or generic ones like “why” and “how.” You need headings that define exactly what readers will learn about in those grouped paragraphs of your article.

Copyhackers does a phenomenal job at this. In this blog article, titled ‘How to Engage Instagram Followers with Copy So They Love Your Brand and Buy Your Products, each point has a clear and concise header allowing readers to scan them.

Headings - Copy Hackers

If you feel you can’t do that with your blog articles, I suggest checking out some writing tips here to help get you organized. If you’re looking for some tips on how to write subheadings, or even spice them up a little, use this article by Copyblogger to help guide you.

8. Make social sharing is accessible on all devices

Social sharing links (aka buttons that let people easily post your article to their social media profiles) are one of the easiest ways to encourage people to distribute your content for you, 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). Make sure you not only have social share links but that they are easy to find and click. 

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.

Social Share Mashable

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.

Social Share NBC

This placement of your social links can also be easily applied to desktop. Just look at Atlassian’s blog for example. 

They place their social sharing links in the top right of their article navigation. The navigation sticks to the top of the page and follows you as you scroll down, meaning the social buttons are always accessible.

Social Share Atlassian

If you’re looking for platforms that can create your share buttons easily (with no 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 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 on your blog can be very desirable.

If you’re unfamiliar with the term, a lead magnet is an irresistible offer that users can receive in exchange for specific contact information. 

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 it as an offer that's received when people subscribe to your blog. It incentives the act of subscribing. 

Once you figure out what offer works best for your audience, you now need to make it visually appealing.

In IMPACT's client blogs, we’ve approached this 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 can be placed. It should comfortably fit into your listing page while using a different variation of the layout and colors to stand apart from the articles.

Below you can see how this was implemented on Armstrong’s blog, one of IMPACT’s clients. 

Lead Magnet Armstrong Listing Page

The second technique is through a popup that appears once daily to users who are not subscribed to the website’s blog. When implementing it, you need to 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. You can see this carried out in Armstrong’s lead magnet too. 

armstrong popup

Both instances of the popup and inline lead magnet need the following elements:

  • 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.

These will ensure a better experience when users encounter them, which will ultimately lead to each performing the best they can.

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.

Inc keeps their blog pages nice and simple. They start with the author's photo, bio, and social handles. Then, the remainder of the page features a feed of any articles they’ve written. 

Inc Author

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.

11. Include related articles

Many of the users who visit your website are on a journey to learn more about a particular topic. 

Your website should help them advance in that journey. The best way to do this is by featuring related articles or resources on the same page for them to click into next.

These should ideally be related either by topic or keywords, not random articles you want to force people to visit. 

One way to do this in your blog layout is to periodically place individual in-line links throughout an article. 

When doing this, you need to use styling that indicates slight separation from the reading flow. In Insider’s case, they preface the article's title with a bolded “Read more:” and a blue italicized title. 

Related Articles Insider

You can also take the approach of adding related articles to the end of an article. This might be more appealing to folks who would prefer to keep people focused on the article they are reading for longer.

The New Yorker has a dedicated section at the end of their articles that highlight four related articles. In this case, the post I clicked on was about COVID, so the related material focuses on that topic.  

Related Articles New Yorker

You also don’t need to take one approach over the other. 

Many publishers (like IMPACT) will combine these two methods, or, take it further by including a sidebar of more related articles. It's up to you to determine what's best for your audience and what's technically possible on your website. 

12. Show expected read time

Setting expectations up front for how long certain articles will take you to read is a great way to let users know if they will have time to fully dive into the material at hand. 

I can’t tell you how many times I find myself on a lunch break looking to squeeze in a few articles, only to find that the one or two I chose might have been unknowingly longer then expected.

Showing some sort of indicator of article length removes this impediment while also letting the user know how in-depth a particular article might go into a particular topic. This is typically done in two subtle ways. 

One is with an actual reading time estimate being shown at the beginning of the article. 

reading time

An alternative approach is to show users how much they have left. This is typically done with a progress bar that grows in length as you scroll down the page like Trello’s blog:

Read Time Trello

Each option illustrates a non-intrusive way to better help the user understand what they will likely expect before they read. 

Next steps

The sooner you can implement these design principles onto your blog, the sooner you will begin seeing more conversions and traffic.

It's time to get going! Work with your team internally to come up with new designs that can tie in some of the items above and test how they do.

If you think you still need some guidance as to what other areas of your website need improving, consider reaching out and talking to us about IMPACT’s Website Performance Mastery. Our team of website experts will work closely with your in-house team to develop a custom website strategy that fits your goals.

Topics:

Website Design
User Experience Design
Content and Inbound Marketing 101
Published on March 11, 2021

Recent Articles

9 Crucial Elements Every Homepage Should Have [+Video]

By Ramona Sukhraj on October 21, 2021
6 min read

5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)

By John Becker on October 14, 2021
7 min read

Google shares new tools to audit website user experience

By Paul D. Grant on August 12, 2021
3 min read

New HubSpot CMS Hub starter tier released for growing businesses

By Paul D. Grant on August 6, 2021
4 min read

They Ask, You Answer and diversity, equity, and inclusion (Content Lab, Ep. 55)

By Liz Moorehead on July 29, 2021
2 min read

ICYMI: Digital marketing news update for July 26, 2021

By Liz Moorehead on July 26, 2021
6 min read

ICYMI: Digital marketing news update for July 19, 2021

By Liz Moorehead on July 19, 2021
6 min read

What the heck is going on with all the Google updates? (Content Lab, Ep. 54)

By Liz Moorehead on July 15, 2021
1 min read

8 best business website designs (updated for 2021)

By Sam Lauron on July 15, 2021
5 min read

ICYMI: Digital marketing news update for July 12, 2021

By Liz Moorehead on July 12, 2021
5 min read

Too many internal links in content can confuse Google about site structure

By Liz Moorehead on July 9, 2021
5 min read

Google July 2021 core update rolling out over next 2 weeks

By Liz Moorehead on July 2, 2021
4 min read

6 tips for building a great diversity and inclusion page (+examples)

By Ramona Sukhraj on June 29, 2021
7 min read

Google punts third-party cookie ban to 2023 for 'responsible planning'

By Liz Moorehead on June 25, 2021
6 min read

Finally, Google page experience core update is rolling out

By Liz Moorehead on June 18, 2021
3 min read

8 business blog design examples that keep readers engaged

By Steve Polito on June 16, 2021
6 min read

What is a featured snippet? [Definition + Examples]

By Kevin Church on June 10, 2021
4 min read

Google June 2021 core update live, July core update coming

By Liz Moorehead on June 4, 2021
3 min read

Google's June page experience core update will be mobile first, then desktop

By Liz Moorehead on May 21, 2021
3 min read

Why is growth-driven website design so freaking expensive?

By Daniel Escardo on April 14, 2021
5 min read

Strategy-driven website redesign: 5 IMPACT-built websites that solve client challenges

By John Becker on April 7, 2021
4 min read

10 Google Analytics metrics you absolutely must track (updated)

By Magdalena Day on March 29, 2021
5 min read

29 Best Contact Us Page Examples To Inspire Yours [Updated for 2021]

By Melissa Smith on March 25, 2021
17 min read

Website Performance Mastery: A better redesign process for your business website

By John Becker on March 24, 2021
6 min read

How much does a website design or redesign cost in 2021?

By Vin Gaeta on March 23, 2021
9 min read