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:
However, on mobile, the crop is entirely different and unexpected.
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.
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.
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.
On mobile, the image card appears with the text beside the image in order to use the same vertical crop.
The Standard Card
The standard card uses a horizontal image. Use this for your everyday content when you have a horizontal promo image.
On mobile, the standard card appears with the text beside the image in order to use the same horizontal crop.
The List Card
For sites that use list hubs instead of grid hubs, the list card appears consistently across devices.
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.