Grid Opener Guidelines

• Grid Opener Cropping Guide

The grid opener has lots of options, and is highly dependent on its art. Unlike the other opener types, it’s possible to choose bad combinations, so use the following guidance to help avoid common pitfalls:

The Opener Production Checklist

Here’s what to check for when building a grid opener.

Page Performance:

• Are the images or videos too big? (Over 5 mb is probably too big.)
• If your image has transparency, does it follow these guidelines?

Text:

• Is the hed/dek/caption too long? (If heds are over 120 characters, it’s probably too long.)
• If text is over the art, is it readable? If not, use the scrim or textbox color.

Mobile/desktop Layout:

• Does the opener layout work well in mobile and desktop? There are separate image fields if different image crops are needed. (Default Image and Desktop Image).
  • The majority of our audience is on mobile, so prioritize that if you have to choose between the two.

Light/dark Mode:

• Is the text visible in both light and dark mode? (Hed, dek, byline, topic)
  • Has it been checked on both mobile and desktop?
• Is the opener excessively bright in dark mode?
  • Many people come to our articles from Twitter, Slack, WhatsApp, and other applications that support dark mode. If they’re clicking through a link, it is a bad experience to be suddenly blasted by bright light.

Cinemagraphs:

• Do the cinemagraphs have poster images?
  • Do the cinemagraphs’ aspect ratio match that of their poster images?
• Do the cinemagraphs follow the file size recommendations?
• Do the cinemagraphs loop seamlessly?
• Avoid cinemagraphs that can cause motion sickness
  • Avoid high amounts of panning or twisting
  • Avoid rapid jump cuts
  • Avoid flashing or strobing that can cause seizures
• If there are separate desktop/mobile versions:
  • Does the caption/credit work for both versions? (The two versions should not depict completely different material.)
  • Does the page layout work in both versions?

What Each Option Does

Default Image:

• The art that, by default, gets used as:
  • The article opener, across mobile/desktop.
  • The promo art, used on the homepage and other landing pages, story promos, and newsletters. (Both 3:2 and 1:1 aspect ratio). Can be overridden by uploading a separate Promo Image.
  • Social media previews (roughly 2:1 aspect ratio). Can be overridden by uploading a separate OG Image.

Desktop Image:

• Upload an image here to override the art in the article opener on desktop. Note that this has no effect on mobile, off-platform, promo art, or social media.

Default Video:

• Upload a video here that will appear as a silent, autoplaying cinemagraph. They should meet these guidelines and this checklist by Lucas.
• The aspect ratio of the video should match the aspect ratio of the Default Image (which will serve as the poster image). Note that off-platform, the image will be displayed instead of the video.

Desktop Video:

• Upload a video here that will appear as a silent, autoplaying cinemagraph on desktop. They should meet these guidelines.
• The aspect ratio of the video should match the aspect ratio of the Desktop Image (which will serve as the poster image). Note that off-platform, the image will be displayed instead of the video.

Align: Controls the horizontal text alignment.

• Use the “Center” option for short or medium length headlines, or a magazine-style hed, for a softer opener.
• Note: choosing the “Center” has stylistic implications – vertical lines are added between the topic <-> hed/dek <-> byline. Do not use this option if the text is too long, checking both on desktop and mobile.

Vertical Align: Controls the vertical text alignment. Has no effect on mobile.

• Use this to place the text in a safe area over the art. If there isn’t textbox background applied, check that the text is readable on desktop.

Background Color: Force a background color on the opener. It will be the same color on light/dark mode.

• If you’re not using the default option, and text appears over the background (not over the art), check that it’s readable on dark mode. You will likely need to set the text color to a different value from the default “Mixed”.
• Don’t use “White” if it results in a big area of white on the opener (e.g. any time the art is not full-bleed). It can be useful to hide distressed or transparent edges on an image.

Textbox Color: Puts the opener text inside a colored box.

• Use if the text appears over the art and is not readable.
• If you’re using the “Black” or “White” option, check that the text is readable on dark mode. You will likely need to set the text color to a different value from the default “Mixed”.
• Don’t use “White” if it results in a big area of white on the opener (e.g. if the hed/dek is long). It can be useful to hide distressed or transparent edges on an image.

Text Color: Force a color on the text. It will stay the same across light/dark mode.

• If you aren’t using the default “Mixed” option, check that the text is readable on dark mode.

Art Start: Where the art’s left edge is.

• A number between 1-6 (think the the opener as a 6 column grid). 1 means starting on the very left. 3 means starting in the middle.

Art Width: How wide the art is.

• A number between 1-6 (think the the opener as a 6 column grid). 3 means half of the total width. 6 means full-width.
• If set to 1-4:
  • On mobile web, as well as off-platform, the art will be cropped to a 1:1 square aspect raio.
• If set to 5-6:
  • On mobile web, as well as off-platform, the art will be cropped to a 9:16 portrait aspect ratio.

Text Start:

• A number between 1-6 (think the the opener as a 6 column grid). 1 means starting on the very left. 3 means starting in the middle.

Text Width:

• A number between 1-6 (think the the opener as a 6 column grid). 3 means half of the total width. 6 means full-width.

Art Inset:

• Turning this on will cause the image to not expand to the full height of the browser, but fit itself inside its given width while maintaining its aspect ratio.
• Useful for portrait photos, or for images that you want to put over a color matte background.
• Note that this has no effect on the image crop when off-platform.

Art Scrim:

• Turning this on adds a dark gradient on the bottom edge of the art. Use this when the hed is placed along the bottom edge of the art to help make the text more readable.

Include Dek and Include Byline:

• By default, these are turned off. Turn these on to include the dek and bylines in the top opener area. Avoid having too much text in the opener, since they can pile up quickly and cover the art.
• Generally, one of two combinations are recommended:
  • Hed + Byline (leave Dek below)
  • Hed + Dek + Byline