9 Blog Layout Best Practices to Remember in 2018
Your business’s blog is a staple for driving new users to your website who seek knowledge and answers to the questions they have. It thrives on expert content marketing that’s valuable to your audience which ultimately helps drive visitors to grow your business.
In fact, small businesses that blog get 126% more lead growth than small businesses that do not blog (Source: HubSpot).
While content marketing 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 your content, and your blog as a whole, you need to accompany it with a design that’s able to draw customers into headlines, entice interactions & reading, optimize for conversions, and create a lasting impression.
But where do you start? How do you organize everything to increase your blog's subscribers & conversions while keeping it aesthetically pleasing?
To help guide you, we’ve assembled the most important elements your blog's design should have and how they work individually to help optimize your blog to hit your numbers.
1. Keeping Your Blog's Grid Small
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 such as newspapers, magazines, etc.
This technique has been applied to web design to help provide a consistent experience for users due to the variety of screen sizes users view your content on.
Similar to a research paper stretching 11 inches in content width, blogs with grid widths that are 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 1024px screen widths, your grid width for your content should range from around 900px - 1100px, with 1024px being the ideal. Helpscout has utilized 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 it helps users differentiate elements throughout your blog (sidebars, headers/body text, images) from one another. The grids effectiveness in organizing your blog's information is the foundation for keeping your content under control.
2. Using a Blog Card Layout
Many of us are putting out a lot of content. Depending on whether your 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.
Due to the number of posts, you’re going to want to organize them in a way that allows users to see the variety of content you’ve put out without overloading them with too much information.
One of the most UX friendly layouts to capitalize on is a 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 information that’s important to the card's viewer.
The card design is 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 and focus on incorporating these elements into the card (the bold are the most important and should be included!):
- Featured image
- Blog Title
- Blog Author (And image if there's room)
- Blog Excerpt
- Post Date
- Social Share Links
- Read More Button
Using Usabilias card design as an example; try laying out the card to highlight the featured image and title as the most prominent elements. They will act as the focal points that will help the user quickly decide whether or not they will read the article. Put the cards in columns of 2 or 3 depending on your arrangement of the information within it.
Dates allow the user recognize if the blog is new/current while blog author gives more personality to your posts (as well as helping out with thought leadership for your bloggers).
The excerpts help the users not only decide whether or not the article is right for them, but helps entice the user to click through if the title still left them unconvinced.
3. 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.
Despite the word ‘trend’ being used, this design choice isn’t one without reason. Take Medium’s inner blog template for example. While there 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 Medium’s, it’s important to allow your featured images size to be large enough so it’s recognized as one and holds enough visual weight from the elements in close proximity to it.
Feel free to play around with it, while companies like Medium choose to go full width on their images, other blogs like HubSpot's keep their images contained to the grid and smaller so you can see the content peaking into the fold.
4. Put Your Best Content Forward
After blogging for 2, 3 or even 6+ years, you may soon start to find specific blog articles performing drastically better than 90% of the rest of your content. These blog articles could rank well for certain keywords and be generating you a significant amount of organic traffic, have a higher than average conversion rate or are consistently shared on other platforms.
These blog articles may be targeted specifically for some of your buyer personas, or, they just do the best job of showcasing how knowledgeable you or your company are on specific topics.
If these blog articles achieve any of these points, then you definitely shouldn’t hide them. Instead, try showcasing these articles somewhere on your main blog page, so visitors know where to look if they want the best of what you have.
Do this by first giving all these articles a specific tag (ex ‘Most Popular Articles’, ‘Best of Blog Name’). Then, you can pull articles with that topic onto your main page.
HubSpot does something similar to this on their main blog. Next to their most recent article above the fold, they placed a column showing some of their most popular content.
If you can’t find the space on your main blog to show a feed like this, you can tag the blog articles instead. If you do, make that tag visible so users can click it to be brought to a feed of other articles with that same one.
5. 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. And 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 to 110% - 140% 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 down to mobile.
If you are looking for some examples of websites who’ve mastered typography & sizes on their site, I suggest checking out these companies:
6. Short Descriptive Subheadings
Although the trend today may be to write longer, more in-depth blog articles, that doesn’t mean your visitors will take the time to read them in entirety.
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 being the case, it’s your job to make sure that experience is easy for them to fulfill. So when you're writing your articles, you need to have clear headers to section off your article. I’m not talking about ‘Section 1’, or generic ones like ‘why’ and ‘how’, you need headers that define exactly what they 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 first to get you organized.
Otherwise, you need to be writing subheadings that add quality to your writing and help make your article engaging for your visitors, especially new ones. Copyhackers does a phenomenal job at this. In this blog article, titled ‘Here are 36 Facebook Ad Hacks for 2017’, each point has a clear and concise header allowing readers to come to this article and scan them rather than reading into each and every one.
If you’re looking for some tips on how to write them, or even spice them up a little, check out this article by Copyblogger to help guide you.
7. Make Social Sharing Accessible on All Devices
Most blogs these days are using social sharing to allow users to share blog articles. But, many sites aren't granting that same experience for tablet and mobile users.
A Pew survey released back in July 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 the IMPACT blog, the social buttons are placed right at the bottom of the window and stick with you as you scroll the page, giving users the chance to share whenever.
Other companies, like CNN, hide their social links in a ‘Share’ button, that will give you all the potential options when you click it.
Bonus tip: You may notice some sites utilizing Facebook Messenger or Slack as additional platforms to share on as of recently. 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 you see is 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.
8. Strategically Placed Lead Magnets
Many of us find ourselves with a healthy amount of traffic but struggle to get the number of subscribers, or conversions for that matter, 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 way is to use it 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 for your users to convert on.
In IMPACT's blog optimization package, we use this technique in 2 different ways. One way is on the blog listing page; as the CTA that sits at the halfway point on the page. The other is a popup that appears once daily to users who are not subscribed to your blog.
Both instances of the lead magnet need the following elements for it to perform optimally:
- A cover of the offer, so users visually see what they will be receiving.
- A header that helps the user understand what the offer is.
- A subheader that ties into the necessity of the offer with a disclosure that the form fill will subscribe them to the blog.
- A button color 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 interaction with it. 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 Benetech’s one seen below.
For the popup, make sure the area with the content in 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.
9. Highlighting Your Authors
Your authors put a lot of time and effort into creating the content they do 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's on your blog. Better yet, have individual author pages with all the posts they’ve written on them.
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 on your blog. And those increased metrics are closer than you think.
For $799 IMPACT will implement all these layout best practices and more with our blog optimization package.
Seriously, we will.
Our team has an exclusive, fully-optimized HubSpot COS Blog template that's mobile friendly, cross-browser optimized, quick loading, and up-to-date with today's design principles to bring the best experience possible to your readers.
Want it for your business website? Get it here right now!
About Christine Austin
As the front-end web designer/developer for IMPACT, Christine uses her knowledge to help create dynamic visual and interactive solutions. Her attention to detail, innovative skills, and passion for anything UX drives her to constantly learn and improve. In her off time, Christine enjoys doing anything involving yoga, watching cat videos on youtube, or dabbling in fine art.