Where should the article image go? This question feels like it has a simple answer. Simple, that is until you consider all the factors in play.
It is the delight of an editor or author to find the perfect image as the featured photo or illustration for an article. I know I’ve spent a decent amount of time agonizing over searching for the ideal image with the right color, angle, and scale. But of equal concern, where should it go? How should it scale and move when viewed on narrow screens?
These are the decisions that I encountered as I worked on our new profile pages. Archived content poses an interesting challenge. It’s a page for one to find quick information. It does not require all the meta typically associated with an article page. You have to strike the right balance of text and headline size that needs to be readable yet strive to save space, so scrolling is efficient when looking for a post. A featured image generally goes above or below the headline. However, an archive page may call for a better location.
Here are my four rules:
1. The featured image should go on the right of the headline.
The image on the right is the best approach when there is no guarantee of an image being present. It sounds silly, but it happens a lot when aggregating content into your site. This method keeps a tidy left margin that doesn’t feel broken as the eye scans down the page.
2. The image scales down on mobile and retains its position to the right of the headline.
Generally, the featured image would fall below that text on narrow screens if positioned left or right of the headline or copy. By keeping it to the right, two key things happen:
- Good scannability by optimizing the vertical space as you scroll
- You will improve post recognition and discovery by displaying the image next to the headline as the eyes scan left to right.
3. The post author’s name below the headline is not necessary.
The author’s name is redundant information (on author archive pages) and takes up more vertical space. Scrolling is not a bad thing. We all scroll down a page with little thought. That said, we should be cautious not to add to a page’s vertical height for no reason.
4. A headline, image, and post date are all that are required.
I find that I look for a keyword from the headline or the featured image when scanning down an archive page. The inclusion of a small excerpt of 50 characters max would be ok as well (it’s a way to offer a little more context that will aid in discovery).
Finally, look at what others are doing.
I find it helpful to look at other online publications as well-proven resources to follow when making these types of design decisions.