Don't Mess Up Your Grid Like Medium

When we started creating covers for our articles on Medium, we noticed that on every page they were cropped to very different ratios.

I wanted to know what ratio I should use when designing covers, so I searched pretty much everywhere I could think of. Since I couldn't find any guide on how to create covers for Medium, I decided to dig into the formats myself and write one. The results surprised me quite a bit.

First of all: Medium has a flexible grid. That's why I ran the analysis at a single desktop resolution, 1440x900. Between 1024 and 1920 pixels wide, every preview stays static and doesn't change ratio.

At the end of the article I've left some ideas for creating covers.

Analysis of Cover Image Ratios and the Grid

You may have noticed that even within the same page, the ratio of the covers changes. In the bottom row it's especially odd. It may have been done this way to avoid using 33.3% widths, but since Medium's grid is flexible, decimal values end up showing up elsewhere anyway.

Notice how nearly identical blocks have covers with slightly different ratios. In my view, it's a strange decision. Although it could also simply be an implementation bug.

On some pages, article previews use the image at its original ratio. That only happens when the article's first image doesn't take up 100% of the page width or isn't very large. It was probably a practical decision.

Below are three nearly identical blocks that appear in different sections. They have the same ratio, but the images are different sizes.

Results

In these images you can see the exact ratio on each page and how often it appears:

The results, in my opinion, are unexpected. I'm sure the situation will change, but as of today it doesn't work well, especially for anyone who cares a bit more than usual about their article covers. The analysis also shows that, for now, Medium's grid doesn't follow any particular rule.

Recommendations for Creating Covers

First I want to show you visually how the different ratios are distributed:

In the image below, the dark areas correspond to the regions that will always be visible in any type of cover. The darkest zone is the absolute safe area.

My recommendation is to use a ratio like the one in the image below. I call it the "golden middle ground."

One clarification: I didn't take into account the Publications page with dynamic grids, because there the covers behave completely unpredictably at any resolution.