7 beautiful blog layouts

Discover 7 blogs that do their content justice.

John Moore Williams
November 15, 2015
Inspiration

If content is king, then blogs (and news sites) are its diplomatic corps — the means content distributes itself throughout the world. 

Most web designers end up designing a blog at some point in their career, even if only for their personal sites. And while it might seem like your design options are limited — list or grid — these 7 sites show that there remain a wealth of tricks and techniques you can try to make your blog more engaging, easier to read, or just bigger, bolder, and more powerful.

Here, in no particular order, are 7 of my favorite blog designs.

1. A List Apart

A List Apart's blog index page
A List Apart puts the focus on words.

As soon as A List Apart loads, you know you’ve found a unique blog. Rather than set their logo left, center, or even to the right, A List Apart spans the screen, relying on the bottom half of the letters to make the site title clear enough.

Below a full-width featured story, the layout consists of a simple list, but does away with the standard thumbnail image, keeping you focused on the text. The typography achieves a nice balance between the bold sans-serif headline, delicately set metadata, and a summary of varying length. (One of the advantages of a list design: no need to worry about keeping your summaries to the same length.)

The feed design also takes an interesting risk, highlighting a popular reader comment just below one of the top stories. It’s not often you’ll see a blog’s homepage sacrificing so much real estate to a comment!

On the blog’s index page, a narrow sidebar calls out content from the latest issue, as well as recent columnists’ posts. The latter section highlights the author with a headshot, reinforcing the value of a column as a source of ongoing insights from a respected individual.  

2. Nautilus

The Nautilus' blog index page
Nautilus boasts a beautifully balanced grid. 

When you load up Nautilus, you’re presented with a full-screen image reminiscent of a magazine’s cover — which makes sense, given that this is an online magazine. You’re also given a choice: click “SEE FULL ISSUE” to dive into an index of the current issue, or scroll down to see content from the current chapter of the issue. (Nautilus’ issues are long-running explorations of a topic divvied up into chapters with a regular release cadence.)

And while the issue’s index page is beautiful, it’s the chapter’s index that I really love. Here you see a tidy grid of featured stories with a mix of photos and beautiful illustrations. But the star of the show is the typography: Freight Sans, Display, and Text thoughtfully combined to let each style play to its strengths.

3. The Atavist Magazine

The Atavist Magazine's homepage
The Atavist Magazine goes minimal on load, but offers more on rollover.

The Atavist Magazine’s homepage presents a grid of stories with a nice balance between image and text. Short, evocative titles are set in all caps over equally evocative images, effectively setting the tone for each story. Individual stories feature flexible layouts that allow either massive images or big, bold text steal the show.

The Atavist Magazine's hero section features either an image or, in this case, a textual intro
Sometimes, a few powerful words say far more than an image.

4. The Great Discontent

The Great Discontent's homepage
The Great Discontent focuses on people—and their insights.

The Great Discontent does one thing very well: interviews with creative people. So it makes sense that their homepage is dominated by massive images that put the focus on human beings. Interspersed among the portraits you’ll find insightful quotes from featured interviewees, teasing you to dig deeper and see what else these people have to say.

In individual posts, large, responsive type keeps you immersed in the story, while grid-breaking photos and blockquotes work as mileposts, providing the same sense of accomplishment and completion as the end of a chapter in a book.

But then, you can’t help but read on …

5. Fubiz

The Fubiz homepage
Tell Fubiz who you are, where you're from, and what you're looking for to get truly personalized stories.

Beyond the massive, beautiful images and the wealth of things to click on, what really gets me about Fubiz is its personalization.

Fubiz makes it clear that they want you to take part in curating its content, making the site your own. How? By offering several options for you to affect what stories you see. First, there’s the “Creativity Finder,” which lets you define who you are, where you live, and what content you’re looking for through a Mad Libs–style form.

Further down the page, you get a chance to see what’s trending in another cosmopolitan city, so you can see what’s inspiring people from Tokyo to San Francisco.

6. Domus

Domus' homepage
The Domus' design creates a news magazine feel.

This Italian art and design blog lets the latest stories dominate its full width, but makes related articles easily accessible through a category-based global navigation on the index, and a dedicated metadata section at the top of each story.

Within individual stories, short paragraphs of large-set text keep you focused on the content, with beautiful photos and embedded videos providing moments of rest.

7. The New Yorker

The New Yorker offers many paths to content
The New Yorker gives you all kinds of ways to dig in to the content.

The New Yorker translates to the modern web in a way that makes the most of both a powerful brand and the versatility of the web as a communication medium.

The New Yorker is all about intelligent reads, so most articles consists of long passages of text devoid of distractions beyond well-spaced ads. If you start to scroll up while reading, a modal pops up, inviting you to email yourself a link to the article to finish reading later. Not necessary for more tech-savvy readers, but handy for those who haven’t delved deep into cross-platforming.

The New Yorker makes the most of all the ways you can slice and dice content by offering all kinds of paths in to stories. You can choose from the stories their editors have highlighted, pick the latest from popular contributors, or see what other people are liking.

You can even click through a gallery of cartoons, if that’s your jam.

What are your favorite blog designs?

These are just a few of my faves, and I purposefully stayed away from design-focused blogs. If you’ve got some you’d love to share, let’s hear about ‘em on Twitter.

What else should I consider?

While speed, reliability, scalability, and security should be your chief concerns, Webflow offers a host (pun sheepishly intended) of other features that have a significant impact on SEO and performance, and may not be offered by most hosting services.

HTTP/2

2015 saw the release of the first new Hypertext Transfer Protocol since 1999: HTTP/2.

This new standard promises faster websites across the web — but not all hosting platforms support it yet. Because Google has always cared about page speed, there’s a good chance that HTTP/2 will become a component of their ranking algorithm soon.

Here are some benefits of HTTP/2 support/compatibility:

  • Multiplexing: Your browser can receive requests over multiple connections, not just one. Think of it like switching from a one-lane road to an interstate.
  • Header compression: Your browser loads the top of your pages first, before the rest of the page, which means your site visitors see content faster. On mobile especially, this is a big improvement.

Webflow’s hosting has been HTTP/2 compliant for a couple years now, unlike services out there. (And even hosts who do offer it typically only do so on higher-tier packages.)

Today, all assets published to a Webflow site are served via HTTP/2 — increasing page load performance when a large number of assets need to be downloaded.

Other powerful features of Webflow hosting

Everything above is more or less essential, but there are many other features that can make managing your website a lot easier and more convenient. These include:

  • Automatic backups and version control (you can also save and name a site version whenever you’d like with the key combo Command + Shift + S on Mac or Control + Shift + S on Windows)
  • Site-wide and per-page password protection
  • Simple publishing workflows
  • Responsive images
  • Protection against distributed denial of service (DDoS) attacks

On top of these features, Webflow hosting includes:

  • Form submissions (manage lead gen and let us store your data for you). It’s like Wufoo, but built into Webflow!
  • SEO and social tools: manage OpenGraph and SEO meta tags in one convenient interface. Easily combine it with the CMS to automate your metadata optimization.
  • Dynamic embeds: integrate Webflow CMS with Shopify for ecommerce, SoundCloud for music, Eventbrite for events, and anything else that uses custom code embeds.

Webflow combines all these elements in a first-class global hosting infrastructure that’s available at the click of a button. This means that when you publish with Webflow, your site’s files and assets are published across the globe and immediately ready for any amount of traffic, from any location.

Want to know how much we believe in Webflow hosting?

We put a lot of thought and effort into making Webflow hosting one the the best hosting services out there. We’ve seen Webflow-using businesses like Kisi grow their organic traffic by over 300%, while also supporting thousands of requests per second for businesses like Eventbrite.

In fact, when Eventbrite launched their Amstel Live festival page with Webflow, they received over 10,000 requests a second — resulting in over 3,000,000 page views in just one hour. Webflow hosting was able to handle it without a hitch.

But above all, we believe in our hosting platform so much so that we use it for our own websites, which see hundreds of thousands of visitors from around the globe every day, and have seen nearly perfect performance over the last year.

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.