Best Practices – Engaging Features
This week, we'd like to share a few best practices for the design and layout of Instant Articles. We've heard that publishers are looking for the easiest ways to make articles more engaging and interactive. Here are some tips and tricks that we've seen work well for many early partners.
The following are elements in your articles that you should consider optimizing: header art, logo scale, slideshows, Facebook 'Likes' and 'Comments,' pull and block quotes and the related articles module.
1. Header Art
The header art should be well formatted as the first part of your article that people see. It should ideally be a high resolution video or image not used elsewhere in the article. If your media is not available in high-resolution, be sure to turn off the default tap-to-zoom feature setting (by adding a 'non-interactive' tag) to avoid your header art pixelating. If you choose to include a video in your header, it must be embedded natively using the video element in your markup. Third-party players are not supported.
Header art must also fit the optimum aspect ratio, 4:3; other sizes will be cropped to fit in on the reader's device screen in that ratio, so please keep in mind the final output when selecting media for the header. We've created a downloadable template that allows you to preview crops on iPhones 4, 5, 6 and 6S.
Captions for header art will appear superimposed on the image when readers tap to expand it.
Learn more about header art specifications in our developer documentation.
2. Size your Logo
All your articles must have a logo in the header, and we recommend making your logo the appropriate size given the other elements at the top of the article. Logos that are too large can compromise the reading experience by clashing with other text and buttons, and overly small logos can complicate brand recognition.
Use the Logo Scaler in the Style Editor to resize your logo:
- Go to the Instant Articles Configuration tab in your Page Publishing Tools.
- Click into one of your existing style templates or click '+ Add Style' to create a new template.
- In the logo section of the 'Identity Bar' at the top of the Style Editor, click the 'Resize Logo' button and choose the size that fits best in the identity bar.
3. Slideshow
If your article has a large number of images, consider using our slideshow feature, rather than laying them out vertically inline. This feature groups series of related images in a horizontal-scrolling carousel that expands when tapped. We recommend using it especially if you have a similar module in the web version of a given article.
Enhance your slideshows with descriptive and interactive features like captions, geotags and Facebook 'Like' and 'Comment' buttons, all of which can be applied to individual images. Geotags and captions can be applied to individual images. The images in the gallery can also take on the same full screen and tap-to-zoom features as other images inline, or they can remain in aspect ratio.
Learn how to add slideshows in your articles in our developer documentation.
4. Facebook Likes and Comments
Apply the built-in Facebook 'Likes' and 'Comments' buttons to all media elements in your articles. These buttons provide more opportunities for readers to give feedback and create exponential virality for your article. Any native image, video or slideshow in the article can have its own set of social feedback prompts, and we recommend taking advantage of them to generate deeper engagement and increase organic reach.
We've seen many articles like the example above with multiple images that attract likes and comments — metrics like these can reveal which media elements people find particularly interesting in your article and can inform your media placement strategy. The 'Share' button will soon be available as well.
Learn how to add likes and comments to elements within your articles in our developer documentation.
5. Pull Quotes or Block Quotes
Publishers should create custom styles for pull quotes in Instant Articles (using the Style Editor on your Instant Articles Configuration page), to highlight key points or phrases within the body text. Stylistically it gives your articles visual texture, and it also makes clearer what readers should focus on. You can add pull quotes (or block quotes) into your articles by adding tags in your markup. Once you add the tags to the text you would like to emphasize, the pull quote will render in the color and font you have selected.
Learn how to add pull quote and block quote tags to your articles in our developer documentation.
6. Related Articles
If you plan on including links to related articles, we encourage the use of our native related articles units to maintain a consistent design for readers. You can use this feature for links in the body or in the footer by tagging them in your markup.
Learn how to add native related article units to you articles in our developer documentation.
