Two significant updates to the Tempest hub page design

Avatar:
Author:
Publish date:
Social count:
5

We're excited to announce a number of updates to the hub page design. These changes are a first step towards addressing two key issues we've heard from many Tempest customers:

1. Inconsistent Cropping

Today, the promo image used on the cards is cropped differently based on what device the user is on. While we do our best to make sure the image looks good everywhere, sometimes the automatic cropping doesn't work as well as we'd like, and the inconsistency makes it tough for editors to choose a great promo image.

For example, this double card looks great on desktop:

Image 1.png

However, on mobile, the crop is entirely different and unexpected.

Double card on mobile - rev2

2. Skimability on Mobile

The card design on mobile only shows one or two articles per screen, which makes it hard to quickly skim a hub to find interesting content.

Introducing the New Hub

In the updated hub design, all image crops are consistent across all device sizes.

The Full Size Card

The full size card always uses a big 16x9 image and always takes up 100% width, perfect for your most important features.

Full sized card
Full card mobile - rev2

The Double Card

The double card is double width on larger screens, and full width on mobile, so use it for articles that you want to stand out. The mobile layout will scale to maintain a consistent aspect ratio and image crop across any mobile screen size.

Double sized card
Double card mobile - rev2

The Image Card

The image card uses a tall image instead of a horizontal one. It's great for your everyday content when you want to feature a high-quality vertical image.

Image card

On mobile, the image card appears with the text beside the image in order to use the same vertical crop.

Image card mobile - rev2

The Standard Card

The standard card uses a horizontal image. Use this for your everyday content when you have a horizontal promo image.

Standard card

On mobile, the standard card appears with the text beside the image in order to use the same horizontal crop.

Standard Card Mobile - rev2

The List Card

For sites that use list hubs instead of grid hubs, the list card appears consistently across devices.

List card
Mobile List Card - rev4

Better Mobile Browsing

This new design is better optimized for mobile, allowing more articles to appear per screen. With mobile making up more than 50% of Tempest traffic, we're continually looking at ways to optimize this layout to help drive readers to more content.