Tips For Designing Quality Magazine-Style Blog Layouts

Blogs have come a long way in the past 15 years both in content and design. Most print media brands have their own alternative websites and many publishers are opting towards the online model for revenue and content sharing.

But the best way to market a blog is to design it like a large authority magazine. A great design can command power and bring life to a relatively quaint blog.

In the past we’ve covered magazine-style blog inspiration and in this post I want to delve a bit deeper into specific tips you can use to create these magazine designs. At the end of the day you’re still basically running a blog. But it’s the reader’s perception that ultimately makes all the difference.

Featured Posts Widget

A blog’s homepage is the source of recent posts and popular content. Many traditional blogs follow the vertical list approach with recent content at the top flowing in a column. For archive pages this still works perfectly.

But most magazine-style homepages include the featured image box to push popular content more easily onto readers. Take a look at the ZDnet homepage to see a great example.

zdnet blog featured images

Their featured images span the entire screen of the layout and fit into a varied grid pattern. Featured images are used in the backgrounds of these block elements with headline text on top.

The vast majority of feature images rely on these criss-cross grid structures with fixed feature image sizes. Other design blogs follow this same approach – but instead of featuring popular posts they will show the most recent content in the grid which then flows into the vertical archive list layout.

Another design style for this featured post box can mix featured images along with small headline titles. Take for example the homepage for Entrepreneur.

entrepreneur blog homepage

You’ll spot just one featured image listed along the left side of the widget box and a list of headlines under “trending now”.

Entrepreneur publishes a handful of posts every day so there’s a lot of content to sift through. Many people find posts through Google but this featured widget is a way to showcase certain articles prominently at the top of the homepage.

It doesn’t really matter how you design the featured widget. But any larger magazine blog will always have one on the homepage in some form or fashion.

If you’re looking for specific design trends for creating feature post boxes check out this guide.

Full-Width Headlines

Another trend is to captivate the reader’s attention with a full-page headline. This is much more common in the magazine business where a click worthy headline is vital to the success of great content.

Some posts on Computer World have this style with a headline that spans the entirety of the page. So the content and sidebar both fall underneath the headline.

computer world post headline

This looks great for super long titles and for blog designs that use very large text for their h1 tags.

Computer World’s heading typography is very thick so each letter takes up a lot of space horizontally. This works well if the heading spans the entire page because it’s meant to capture eyeballs.

I honestly prefer this in many cases because it draws my attention to the topic at hand. I’m able to quickly comprehend what I’m reading and decide if I want to keep going with it or move on.

You’ll find another example of this design technique on WhatPixel which uses a thinner font style, but also has very large headlines(about 5.5em large).

whatpixel blog layout

This is another great technique you can use if your post titles are often very long with lots of words. Condense the letters a bit smaller and increase the size to keep readability in-tact.

Whenever the headline takes over the whole page it draws attention to that section. You can use this space to give credit to the author, attach the post categories/tags, share the post date, and even embed social sharing widgets if applicable.

And while I consider The Washington Post to be a news site rather than an online magazine, it does follow this exact same strategy for online articles.

washington post blog headline

Many newspapers have taken their content online because it’s where most people get their news. This means digital newspapers and magazines both need to consider the exact same trends when designing their layouts.

Larger headlines can also be combined with another technique of adding a sub-heading to various posts.

Headlines with Sub-Headings

One of the largest and move prolific design blogs on the web is Creative Bloq. They’re managed by the same company that puts out the .Net print magazine for web designers & developers, so they come from a print magazine background.

This is interesting because you’ll notice that some posts on their site include a sub-heading right underneath the post headline.

creative bloq layout

I don’t think this is necessary for all blogs because it requires extra time and customization work. But if you run a high-volume website these sub-headings can be used to expand on stories and give readers a taste of what’s to come.

Most news websites would benefit from this technique because it lets you share the important details without forcing visitors to scroll down.

You can see this on Ars Technica in some of their posts, especially their news posts.

ars technica blog layout

Smaller blogs really don’t need this feature because they have fewer readers and less of an authoritative stance on publishing.

But if you want some editorial liberties you can try adding this into your blog design and building custom subheadings for each post.

Draw Readers To Related Posts

Two of the best metrics for any blog are “average time on page” and “average pages per session”.

The first tracks how long people are spending on your site and the second tracks how many pages they’re visiting. Both of these metrics can be increased with the addition of related posts scattered throughout the design.

Larger blog magazines like TechCrunch pump out well over 100 articles each day. Their design features the most popular posts fixed along the left-hand side of the screen to ideally draw you into further reading.

techcrunch blog layout

But as you browse the website you’ll sometimes notice slide-in windows that direct you to the next post in the series.

These aren’t traditional models but they can work well if you don’t want to use a related posts plugin. WordPress has a bunch of choices but they’re all very server intensive and can drain CPU resources on your web host.

The alternative is to sprinkle related posts into your content as small boxes or widgets. Take a look at this Hongkiat post with a grey box right after the initial paragraph.

hongkiat blog related post

This box features another post on the site and drives readers onto related pages. This type of feature can be built into WordPress as a shortcode or theme function. It could also be hard coded into your HTML to always show the same block on the same posts each time.

Either way these related post boxes are contextually relevant and right in the line of sight. Many users have sidebar blindness and completely ignore the sidebar because to readers it’s mostly full of ads. This means related post widgets in the sidebar can often be ignored.

Contextually relevant links within the post help to bring attention where it belongs and drive more pageviews without being spammy.

You’ll see the same technique in this Mashable post but it doesn’t use a big fancy CSS box. Instead it’s just a paragraph with the bolded text “See Also” preceding a related link.

It’s possible to completely forego related posts altogether. But I find a much higher average session duration and higher pages per visit when applying this technique to blog/magazine layouts.

Consistent Posts Lists

And lastly we should look at the post archive page layouts. These layouts appear whenever users browse through your site posts through a tag, category, author archive, or date-based archive.

The most popular style nowadays is to include a featured image alongside the headline. Visuals tell a story quicker than words and you’ll be able to capture attention much quicker.

Check out the Recode homepage to see an example of this vertical archive layout.

recode blog layout

Blogs have always listed their content in vertical columns ranking posts from newest to oldest. But it’s only been in recent years with the addition of WordPress post thumbnails that magazine-style layouts have moved towards every post running a featured image.

You don’t always need to display these images on the actual post page. But these images provide visual appeal to any blog archive whether it’s the homepage or a paginated category archive.

Some blogs even break the vertical style and go with block-level lists in a grid structure. An example of this technique can be found on the Envato Blog just underneath their featured posts box.

envato blog listing

I personally like the vertical columnar structure because it’s easier to skim and it’s clearer which direction to read(top to bottom). Plus columns leave full horizontal widths for posts to show snippets from the article & metadata links.

But Envato uses the grid structure very well by focusing on the headline and the feature thumbnail.

There is no right or wrong way to do it, and the beauty of design is all the variety you get to choose from.

But if you’re about to launch a new blog you definitely need to consider all of these techniques. You certainly don’t need to implement them all at once. But if you’re going for a custom magazine design then your site will appear much more authoritative if you apply these tips to the design.

And to see more examples of blog/magazine layouts check out our related galleries:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.