Subscribe to THE LATEST
10 blog layout best practices to remember in 2020 Blog Feature

Christine Austin

Creative Lead, 7+ Years of Web Design and Development Experience

January 15th, 2020 min read

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.

While content on your blog is a crucial part of making sure you’re generating traffic to it, content alone will not ensure your blog is making the best impression.

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.

But where do you start? How do you organize everything to increase your blog's subscribers 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 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. 

One way is how Aquila Commercial, one of IMPACT’s clients, approaches it.

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.

learning center aquila


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.

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

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. Narrow your grid for your blog content

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.

magazine grid

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.

helpscout blog

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?

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

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:

card layout inspiration

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):

  • Featured image
  • Blog title
  • Blog author (and image, if there's room)
  • Blog excerpt
  • Post date
  • Category
  • 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.

zenefits blog cardIn 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.

intercom blog hero

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.

drift blog listing page

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:

Wiredwired blog homepage


medium on desktop

The Economist

the economist blog

7. Include article quick-summary boxes

In an effort to rank well for competitive keywords and drive traffic to your site, most of the articles we write that could be answered in a sentence or two end up as a 1500 word post. 

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

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. 

featured snippet hubspot blog

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.

featured snippet impact blog

featured snippet on google

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.

If you feel you can’t even do that with your blog articles, I suggest checking out some writing tips here to help get you organized.

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.

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.

copyhackers blog article

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 guide you.

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.

medium on mobile

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. 

nbc on mobile-1

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

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

armstrong lead magnet

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.

armstrong popup

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.

Next steps

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.

New call-to-action
Here Are Some Related Articles You May Find Interesting

Want to Contribute Content to impactplus.com? Click Here.