Design Guidelines

The markup elements of Instant Articles will help you recreate the structure and layout of the content you normally publish on the web. By the same token, the design hierarchies and content architectures you use in Instant Articles should parallel your own web versions as closely as possible. The markup elements in Instant Articles make it possible to do this, but when exact analogs aren’t possible, the correct use of Instant Article features takes priority. Markup elements in Instant Articles should be used only for their intended functions, and misapplication of elements is not allowed.

1. Markup Elements

To avoid common design mistakes, use Instant Article markup elements correctly. The customizable elements work together to create a clear, easy-to-follow layout in all your articles. Keep in mind these specific guidelines and best practices:

1. Create separate style templates for different sections of your publications or sub-brands that will be in the same feed, particularly if they have unique logos or color palettes.
2. Don’t forget to separately designate kickers and subtitles, along with your article titles.
3. Ensure body text renders in the body text style (and not, for example, as a long caption, or vice versa).
4. Hierarchies in caption design should be respected by using separate styles for the caption title (when there is one), caption body and a caption credit. Note that four different sizes can be set for captions and their titles, to provide a wide range of layout possibilities.
5. Differentiate between block quotes and pull quotes. Remember that pull quotes can have separate attribution, and this feature should be used when appropriate.
6. Slideshows and videos should include the same supporting elements found in web versions. Verify that elements like video play times, video thumbnails or photo gallery titles appear in Instant Articles. For example, if the web version of your article includes a video play time, make sure the play time also appears in the Instant Article.
7. Supplemental information should appear in the article footer as a best practice. This includes material such as credits, acknowledgments or notes.

2. Article Formatting

Instant Articles must not contain formatting that creates a confusing experience or which makes articles appear broken. For example:

1. Don’t repeat images or videos within the article. The image or video set as the cover in the article header may not appear a second time in the article body, unless you are granted a special exception by Facebook.
2. Avoid videos that begin with blank frames. If a specific poster image is not specified for the video, the placeholder image will default to the video’s first frame; if that frame happens to be blank, the video will look broken before it begins to play.
3. Play controls are applied automatically to all videos. You can take them out if you intend to create an ambient or atmospheric effect. Play controls do not override the autoplay feature, so you can use both.
4. The height of iframes must be correct for the associated media. For example, if too much blank space appears beneath an embed like a video player, the iframe height is probably set incorrectly in markup.
5. Decorative images and ornamental art used to signal section breaks should be non-interactive, with no Likes/Comments/Shares.

3. Images and Videos

Avoid pixelated images as a best practice. Images and videos should render details sharply in the screen sizes and display styles Instant Articles supports. Minimally, media in Instant Articles must have the same resolution as or better than in your web versions.

Images that zoom fullscreen should provide sufficient resolution to enable a good viewing experience for your readers. Disable the interactive tap-to-expand function in Instant Articles if a photo or video does not meet the following minimum resolution thresholds:

1. Images for fullscreen display must be 1024x1024, minimum. 2048x2048 or greater is preferred.
2. Videos for fullscreen display must be 640x480, minimum.

4. Facebook Likes, Comments and Shares

Apply the built-in Facebook Likes, Comments and Shares to your articles, unless you have a specific editorial reason not to do so. Enabling Likes, Comments and Shares multiplies the opportunities to increase organic reach and engagement.