Want your content to stand out from the competition? Learn how to design a better blog post layout that converts more readers into customers.
If your business has a blog, then you probably already know the value of content marketing. You may also be familiar with strategy, keyword research, SEO best practices, link building, etc. All are essential to achieving success with your content marketing efforts, but it’s easy to get caught up in these considerations and totally miss the value of good design.
For most of us, a large proportion of the content we publish will be displayed within a blog post layout. Investing in the design of that layout is about more than aesthetics. It also improves the reader’s experience and makes your content more likely to convert. Visitors are more likely to trust your brand as current, authoritative, and thoughtful if your blog is well designed.
Remember, content marketing isn’t just about pleasing the search engines – your readers are real people. They may leave your site simply because they don’t like how it feels. This is where accessibility, UX design, and branding all intersect. But how do you achieve a balance with all of those things? What makes a blog post layout “great?”
The truth is, there is no magic formula to providing the optimal blog-reading experience. However, there are design principles and best practices you can follow to optimize your blog post layout. Let’s dive into the goals behind blog design, and how you can achieve them.
Before you start designing, you’ll need to decide what goals you want to accomplish through your blog's visual layout. Consider the primary objectives of your content marketing strategy and website, including your main CTAs, important content assets you want to draw attention to, and your target audience. Here are a few important goals your blog should accomplish through good design:
The elements you choose to include in your design will impact how users interact with your content. But if you’re designing a blog post layout completely from scratch, it can be tough to know where to start.
A lot of the key design choices (where to put CTAs, how to format images, background colors, etc.) come down to preference. But if you study the most effective blog layouts from companies that succeed in content marketing, you’ll see they follow a lot of the same practices.
Every blog post layout needs to have a title and body made up of the post text, headings, and images. Without these key elements, it’s hard to call it a blog. You will also want to have a supporting “hero” image at the beginning of the post to grab attention and suggest the tone of the piece. Aside from that, the date the post was last updated and the name of the author are often included at the beginning of a blog post for additional context.
In many cases, including a larger author section at the end of the post can accomplish a number of positive outcomes. This section should feature the author’s name, a profile image, and a few relevant links such as:
An author section imbues your post with personality and helps establish trust with your readers. Without the image or the name of an author, readers may feel like the content was written by a brand. While brands can certainly have personality, it’s more impactful to know that a specific person wrote the piece.
Most people are incredibly busy these days. You can help them optimize their time (and likely decrease bounce rates) if you tell them the approximate reading time at the beginning of the post. To calculate this, simply divide the number of words in your content by the average reading speed (250 words per minute). Then you can list a rounded version of the read time at the top of the post, near the title.
It’s also common for blog posts to include animated scroll indicators. This is similar to a progress bar on a YouTube video. As you scroll down the page, the brightly colored bar grows in size horizontally across the screen. This fairly simple animation helps the reader visualize how much they have read of the post so far and how much they have left.
To increase conversions, your blog post layout should always have a clearly visible CTA link. They may become convinced to buy something from your company at any point in the post, and you don’t want them to have to scroll or dig around to find the button. It should be ready for them to click right away while the idea is fresh.
That’s why you see some websites with sticky navigation bars (navbars that stay at the top of the reader’s screen) and brightly colored CTA buttons.
For example, take a look at the sticky navbar on this page. It remains fixed to the top of the page as you scroll through the blog post. If you’re reading this on a desktop, you’ll also notice that the bright blue CTA “Let’s Talk” button is intentionally designed to catch your attention by contrasting against the white background. If at any point you decide you want to schedule a call, the opportunity is there.
Breadcrumbs are the small text links that sometimes appear towards the top of a page. They help readers stay oriented within your site structure and illustrate the path to the current location on the site.
For instance, blog post breadcrumbs might look like this:
Home > Blog > Design > How to Design a Great Blog Post Layout
Each page listed (except the current page) should be linked, so the visitor can go to that page if they click on the text. Breadcrumbs should always start with the homepage and end with the current page the user is on. Since they improve user experience and provide useful internal links, they can also provide a marginal benefit in search.
While this isn’t always necessary for every blog post layout, a table of contents can be very helpful for longer posts. The goal is to present readers with a list of headings that link directly to specific sections within the content.
To do this, you’ll need to create anchor text for each heading tag in your blog post. This may require extra maintenance before publishing a new piece of content, but it’s often worth the effort. It improves the user experience and increases the chances your content will rank for certain featured snippets on Google.
In many cases, simply including a table of contents at the beginning of each post will work. However, you can also go the extra mile and create a sticky table of contents that scrolls with the reader on the side of the page.
While text links and navbar buttons are certainly effective forms of CTAs, you also want to design repeatable CTA banners to place throughout your content at strategic points. These should stand out from the content as individual elements, but remain in line with the text. Inline CTAs typically include an attention-grabbing graphic, a heading, a short paragraph, and a button.
You want the description and text for this CTA to be as clear as possible so that readers know why they are seeing it. More than eye-catching, you want it to feel like a natural extension of the content. It shouldn’t distract the reader from their reading experience. Rather, it should smoothly flow with the rest of the content.
When you craft a well-written blog post, you don’t want people to just read it and move on. You want them to engage with the post. To do this, it’s best to create buttons that allow them to share, bookmark, or comment easily.
Comments allow a space for your readers to ask questions, provide feedback or continue the conversation. They also create an opportunity for your content team to connect with readers, which may lead to conversions.
At any time, you want to allow readers to share your article with other people without much difficulty. That’s why almost all blog post layouts have social media sharing links. By building these links into your blog post layout, your readers can easily share your article on multiple different platforms for their followers to read, expanding the reach of your article exponentially.
If your site or CMS doesn’t support comments, you can also use social sharing buttons to link to your own social media post about that article. When the reader clicks the icon, they will be taken to the social media post where they can reply to and/or share that post. This allows you to bring the conversation about the blog post into a single common thread while gaining additional reach. Plus, since most conversations about content already occur on social media (rather than a comments section on a business blog), it may be more productive to move the discussion to those platforms anyway.
Once a reader finishes your blog post, if they haven’t converted on a particular offer, it’s usually best to keep them on the site longer in hopes of persuading them. One of the best ways to do this is to present them with more relevant content.
You may have a companion post that expands on a subtopic mentioned within the piece, or posts on related topics. If so, you can make those posts easy to access via a related posts section, which is usually placed toward the bottom of the post layout, below the CTA. Most blog post layouts only link to 2-3 related posts, in order to not overwhelm the visitor with too many choices.
Usually these related posts are displayed in cards, like the example above. While cards are a great way to group content, they aren’t always necessary. Your related posts may look better displayed as linked text with minimal formatting. However you design them is a matter of both preference and user experience, but the point is to offer the reader additional value and keep them on the site longer.
When designing anything for the web, user experience and design go hand-in-hand with SEO. If users consistently have trouble interacting with your site, this can hurt your ability to rank. If you want your blog posts to perform better in organic search, here are a few best practices you’ll want to implement in your design:
On the web, headings aren’t used only for visual style, but also for structure. It’s important to use specific HTML heading tags (H1, H2, H3, etc.) to convey the informational hierarchy of the content, clearly dilentiating between your main points and sub-points.
This way, the structure of the content is embedded into the code itself. Doing this correctly will help search engine crawlers to better understand the content, and thereby rank it for relevant search terms. You can visualize it like this:
For the first heading (the article title), use an H1 tag instead of the “title” tag. The next major point or heading that follows should be an H2. Any sub-points of that H2 should be H3s, and so on. The next major point should also be an H2, with the same structure cascading down.
Every page on your site should have a meta description, which is a short paragraph explaining what the content is about. If you don’t write your own, Google and other search engines will populate this text automatically, either by generating one of their own using AI, or pulling the first text that appears on the page.
The goal of writing your own custom meta description is to grab the interest of potential readers and give them a specific preview of what your content is about. You should also try to include important keywords related to your content topic and keep the description at 160 characters or less.
With mobile browsing now accounting for 58.99% of global web traffic according to Statista, optimizing your blog posts to work well on all devices is absolutely essential. Few things are more frustrating than trying to read an interesting article that doesn’t display well on mobile. Tiny buttons are annoying, and unintentional side scrolling can drive visitors mad.
Turns out, search engines share that opinion. Since 2016, Google has been focused on mobile-first indexing, meaning they primarily consider the usability of your website on mobile when determining whether it’s a quality result to display in search.
Adapting your layout to dynamically respond to any screen size usually involves:
In some cases, you may have to hide elements entirely or nest them inside something else. One common use case is maintaining your site’s navigation on mobile. While links to different sections of your website are typically displayed horizontally (possibly with dropdowns) on desktop:
Mobile layouts typically leverage hamburger icons, nesting the entire site navigation into a dropdown menu.
Lastly, if you have large, non-essential pop-ups on your desktop site, you’ll want to disable them on your mobile layout. Users don’t like them and neither does Google. Pop-ups block access to the content and make it hard to read.
Images are important for illustrating ideas and making your content more interesting. But for people who navigate the web using screen readers or other visual aids, you’ll need to explain what the image is trying to convey through alt text. This way, they can fully comprehend and engage with your content.
To be clear, most site visitors will never notice alt text. It’s only for those using screen readers or anyone inspecting the code on your site. Alt text is also crawled by search engines, which is an important factor in making sure your page ranks among competitors in image search.
Alt text doesn’t require excessive detail. It should be a simple description of the image (i.e. “a woman riding a bike in Central Park on a sunny day”). However, it should provide enough detail to understand why it’s included in the content.
You’ll need to add alt text to most images you use in your blog post layout, including icons. The only exceptions are images which are merely decorative. These are images used purely for decoration, which carry no other meaning. For example, you may use an image of a squiggly line, a half-circle, or something similar as a watermark in the background of your layout for decoration. Alt text for these images should be left blank so they aren’t read aloud by screen readers.
How you choose to layout text is one of the most important parts of your blog post layout. This is the part people come here for — the stuff they can read. While it may seem subtle, the way your text appears in your blog has a profound effect on how your users perceive your content. Here are some best practices for styling and customizing your text across your layout.
Remember that the most important goal for a blog post layout is readability. If visitors can’t easily read your content, they’re more likely to leave the page before they finish the article. Pay close attention to how you size and style your body text.
Choosing a font for your blog post isn’t about creativity. In fact, this should probably be the least creative part of your design. The font you choose should be legible and accessible to all readers.
Don’t choose a font because it’s fancy or cute. You may like Comic Sans (if you lack taste), but it’s not going to give readers the easiest experience navigating your content. Usually it’s best to stick with a medium weight sans-serif font, as these are the easiest to read. Here are a few examples of good body text fonts:
No matter what font you choose, make sure the font color has high contrast with the background. For white or light grey backgrounds, black or a very dark grey are the best choices for font color. Negative layouts (where the font color is lighter than the background) are possible, but are generally harder to read. We recommend only doing this if there is a dark mode version of the website.
For readability, text size should be set to a minimum of 16 pixels (px) or 1 REM. This is the default font size for most browsers. As a general rule, line height for all typography should be at least 140% of the text size. This prevents multiple lines in a paragraph from blurring together. Here’s an example:
Both of these paragraphs have the same text size (1 REM) and font. The paragraph on the left has line height set to 100% of the font size, and it’s obviously tough to read. The paragraph on the right has line height set at 150% of the font size, and it’s perfectly readable (except for the fact that it’s lorem ipsum).
You also want to keep the body text contained to a comfortable width for readability. When sentences are displayed across too much horizontal space, readers have to move their eyes back and forth across the screen to read the content, causing strain and slowing them down.
Ideally, a new line should begin approximately after every 8-12 words. Typically, this means body text should be sized to 640-800px (40-50 REM) wide. While some blogs can make their layouts work with wider body text, we’ve found this to be the ideal range in most cases.
However you choose to style your text, be sure to keep your style consistent. All standard paragraphs should use the same font, size, weight, and color (unless using an inverted background). The same goes for all headings, text links, block quotes, etc. This helps readers quickly understand and navigate your layout while easily distinguishing between different parts of the content.
While we know that heading tags are not only for style, they still need to consistently communicate the correct hierarchy visually. This means all H1 headings should be the same color, font, weight, and size. They should also be more visually prominent than all other headings. Most of the time designers show this with size (H1 is largest, H2 is smaller, H3 is even smaller, etc.). But you can also combine the effect with other styles (H1s are large, black, and bold while H2s are smaller, dark gray, and have less font weight).
However you achieve visual hierarchy in your design, readers should be able to distinguish between a main heading and a sub-point without thinking about it. By pre-styling the HTML tags for your headings across your site, you can set an H1 or H2 on any page and know that the text will be the same style as all the others.
When a user opens your blog post, they should immediately see the most important features. They should not have to scroll down in order to read the headline, or other basic information (author name, date published, reading time, etc.). It should all be there “above the fold” to grab attention and keep them focused on the content they came there to read.
You may also want to keep the hook in the introduction above the fold. This makes it more likely visitors will become engaged with the post, rather than bouncing to the next thing competing for their attention.
In layouts designed for reading, white space isn’t a mistake. While some business models utilize sidebar and banner ads to generate revenue, the truth is that no one likes ads (or anything else) cluttering up their reading space. Unless your business model is built on advertising to readers, it’s usually best to tailor your layout to provide the best possible reading experience. This will make it more likely that visitors become customers.
If possible, keep the sides of your blog post layout clear and use other elements sparingly. You don’t want to badger your readers with a scrolling CTA, table of contents, and a bunch of ads at the same time. The abundance of elements will distract the reader from what they really care about — the content. It’s best to pick only one thing to include on the sides of the body text and clear up the rest to keep the reading experience free from distractions.
High-quality images are essential for creating interesting content. Most of the time, you’ll want a hero image (an image at the top of the page) and a few supporting images throughout the content. Here are a few best practices for using images in your blog posts:
No matter where you use them, you want to make sure your images are high quality. Low-quality or low-resolution images appear dated and ugly. In many cases, they may turn visitors away from your post before they even start reading.
That said, there is no magic formula for picking a high-resolution image. Typically an image that’s about 1000px (62 REM) wide works well. But it depends on your layout. If possible, choose a PNG version of an image over a JPEG file. JPEGs tend to load more slowly.
You can also use GIFs, but they are often difficult to find in high resolution. GIFs also carry a playful connotation that may not be right for your brand.
In an ideal world, we would all be able to source custom photography and graphics for our blog posts. But hiring a photographer or graphic designer can be expensive (not to mention time-consuming). You may need to use stock images instead. That’s fine. Just make sure the images you choose fit visually with your brand and aren’t cheesy or too on-the-nose for your topic.
The images you choose should communicate something about your topic. The fact is that many stock photos are completely meaningless, so choose carefully. Here’s an example of a meaningless stock image:
If a photo doesn’t carry some kind of message about the mood, theme, or subject matter of the blog post, choose another one.
A lot of blog layouts (including this one) use large hero images to grab attention and create visual interest above the fold. From a content perspective, this can be a good thing. However, large media of any kind (especially video) will increase page load time.
Depending on how much your organization values pagespeed, and what portion of your target audience is likely to have access to high-speed internet, you may decide large hero images are worth the trade-off, or not. If you need to optimize for faster page loading, we recommend smaller hero images and using video assets sparingly.
You may choose to set the hero image as a background for the blog post title. While this is aesthetically pleasing for a number of reasons, it can create contrast issues if not properly formatted. For readability, there needs to be adequate contrast between the background image and the text.
For example, if your title is written in white text against a bright yellow background image, it can be very difficult to read. To be clear, this isn’t just poor design. People have been sued for contrast issues under the Americans with Disabilities Act (ADA). To be safe, make sure your text passes contrast standards under Web Content Accessibility Guidelines (WCAG) - this tool can help.
To create contrast with the text, you can add a dark (or light) overlay in front of the background image. Otherwise, you may need to rethink your color scheme or usage of brand colors to be sure it passes accessibility tests. To avoid this problem altogether, let your image stand alone on the page. Put the title of your blog post below the image against a high contrast background.
To help you see how these ideas work together, let’s look at a few examples of blogs that are doing it right. We selected these blogs because they include most of the elements we think are necessary in a great blog layout while offering a great reading experience across devices.
That said, some of these layouts don’t completely follow the best practices we’ve outlined here. But that’s okay. The best designers break the rules when they know it will benefit the design or the target audience.
Created by the founders of Twitter, Medium is a community blogging platform for writers that focuses on the sharing of ideas. With this goal in mind, Medium’s layout strikes an excellent balance. It’s different from most layouts because the platform is made only for reading. There is no CTA other than to keep reading more content.
While the right sidebar might be slightly distracting, it is aligned with the goals of the platform. At any time, you can choose to read more related posts or follow the current writer to receive updates about what they share next.
By standardizing the format for every blog post across different accounts, Medium hones in on an important blog design rule: don’t let the layout distract the reader. Instead, the minimalist typography, ample line height, and sparing use of color allow you to focus on what you care about most: the content and the writers.
As for usability, Medium provides several ways to interact with each post. At the top, you'll find sharing and bookmark buttons, along with other important pieces of information about the content (author, date, approximate reading time, etc.). Toward the bottom, you have a scrolling menu that allows you to give claps (kudos for good ideas/writing) or jump to the comments to join the discussion.
It’s no surprise that a web design platform would have a great blog post layout. Webflow’s blog has a clear informational hierarchy, plus a simple yet unique reading experience. At the top of the page, there’s a clear bold heading, an attention-grabbing description, and the author’s image and name. Webflow breaks typical conventions by putting all of this before a massive hero image that bleeds past the fold, showcasing their focus on visuals.
Below that, the content is aligned to the left and the body text is contained to a readable width. The sans serif typeface is plain but easy to read, and the line height gives breathing room to the text. Headings and body text are also clearly styled to communicate hierarchy.
The only thing you see scrolling beside the content (aside from the “Made in Webflow” badge) is a set of social sharing icons. This is convenient for readers, because you don’t have to scroll all the way up just to share the article. There is also a short selection of related posts that appears on the side at the halfway point. But the rest of the reading experience is free from distraction.
Because Webflow is a browser-based, no-code design platform, the main goal of their blog is to get readers to build a website using their software. That’s why there is always a high-contrast CTA button on the right side of the sticky navbar. If you already have an account, this button takes you to your project dashboard. If you aren’t logged in, it will say, “Get Started – It’s Free.” This prompts you to test ideas from the article and try designing on their platform at any time.
Kinsta’s blog certainly has a stronger commercial angle than some of the other examples in this list. But their approach is unique for their niche.
As soon as you open the blog post, you see a bold heading and a brightly colored illustration. Notice that the hero image is contained to the same width as the rest of the content. All around it is white space, allowing you to focus solely on the content in the center. You’ll also see the first paragraph of the post beneath the hero image, keeping the hook above the fold.
It’s important to note that all the hero images on Kinsta’s blog stick with the same isometric design style. The effect is a consistent brand identity across all posts. While it’s usually only feasible to do this if you have a consistent graphic designer and clear brand guidelines, it may be worth the extra money depending on your business goals.
Pay close attention to the CTAs in this layout. Kinsta offers Wordpress hosting for large sites, but they aren’t exactly the only ones to occupy that space. As such, the CTA that scrolls with you on the right has a unique purpose. First, it uses a subtle animation and bold text to grab your attention. Then they hit you with a dropdown menu that asks you to select your hosting provider and compare them against Kinsta. This CTA is personal to the reader, drives them further down the funnel into comparing options, and helps them become invested in the idea of switching providers.
In addition to the scrolling CTA, you’ll find a variety of inline CTAs throughout Kinsta’s content that compel readers to subscribe to their newsletter or learn more about their services. Notice how easily they fit into the content. These banners grab attention but still feel like a natural part of the blog post. You can choose to click on them or scroll past them and keep reading.
Many people know The New Yorker as a print magazine. But they also have a large online readership. More than just a publication, the New Yorker is also a brand with a reputation for high-quality content that’s both trustworthy and entertaining. While they gained some of this reputation from having great editorial standards, they’ve also been in business since 1925. This legacy is laden with credibility for many readers. Beyond that, the name itself is steeped in the art deco aesthetics of the roaring 20s, and the choices in this layout reflect that idea.
In early 2014, the New Yorker updated their website design to include larger images, more white space, and a new typeface that worked better on mobile devices (Neutraface). While they considered making Neutraface their new heading style for web content, they ultimately kept their traditional Irvin font for headings and Adobe Caslon for their body text.
Notice how the font, the narrow width of the body text, and the dropcap (the large first letter at the beginning of the post) are all reminiscent of print media. Normally, a serif font for body text wouldn’t be the obvious choice for readability on the web. However, The New Yorker defied web design conventions on purpose to keep with the typography style of their printed publication.
Just like Medium, the New Yorker’s goal is to get people to read more content and subscribe to their publication. That’s why the sticky navbar is decorated with links to featured posts and a “Subscribe” CTA button. On the left side, you’ll notice social icons, a bookmark button, and an option to print the article if you choose. While there are paid ads on the right side of the layout, they don’t overwhelm the reader.
The Outline is an online publication with an eccentric flair that covers news and cultural topics. As such, their blog post layout is packed with personality. Their method for intriguing visitors is unconventional but effective. Instead of putting the title of the post at the top of the page, they open with a full-page hero image, a quote from the article, and an animated arrow streaming through the middle of the quote, compelling you to scroll down. The title, the date, and all other identifying information is below the fold.
While The Outline uses a wide variety of styles for their hero images, these often function like white space. The central quote, logo, share button, and hamburger menu all stand out in contrast to the vast background.
The strong colors coupled with the squiggle link animation that occurs throughout the text make this page feel alive. That’s part of their goal — The Outline isn’t your normal publication.
The heading may have served to capture your attention, but it won’t be the main focus for long. Once you scroll down into the post, the layout focuses your attention on the blog content itself, combining a narrow column of text with ample white space and a friendly, readable typeface. Overall, this design both grabs your attention and allows you plenty of room to focus on reading.
A well-designed blog post layout is a powerful asset for your website. It can enhance both your content marketing efforts and readers’ perception of your brand. With so many blogs lacking in this area, making your posts look better can increase credibility and set you apart from the noise.
But trying to follow the latest design trend won’t always give you the results you want. Good blog design is about SEO, UX, aesthetics, branding, readability, accessibility, and much more. The good news is that there’s plenty of room to be creative and defy convention. To design a great blog post layout, you’ll need to consider what makes your brand unique and make conscious choices about how you want to communicate that to your audience.
If you’re ready to design a powerful blog post layout for your content but don’t know where to start, we’re here to help. At Conversion Media, we know what it takes to bring more of the right people to your website. Our team of experts can help you with SEO, content marketing, web design and more.
But whether or not you’re working on developing a new blog post layout, we’re always happy to chat about what you’re working on next. Schedule a call to see how we can help your team achieve your content marketing goals.
