Story Map Best Practices

This document outlines some suggestions on creating effective stories using ArcGIS StoryMaps.

Story Map Flow & Length

Story maps lend themselves to walking through readers through a media-rich story, but they aren't the best tool for projects that rely on lengthy blocks of text. Make sure to break up long sections of text with interesting media that contributes to the message of the story.

Story maps that incorporate a large amount (> 20) large images, layer-rich maps or videos can be slow to load. Please refer to Planning a Story Map for guidance and make sure to always test your story map.

Also keep in mind that most users will scroll to advance your Story Map. Long story maps can create a tedious amount of scrolling. If you end up with a story that requires a large amount of content, there are two best practices, listed below:

• Add a navigation bar

  A navigation bar is a UI element that sits at the top of your story. It allows for users to quickly navigate to different sections of your story map by clicking on links. To add a navigation bar to your story map, follow Add story navigation (opens in a new tab).

• Break up your story map into a collection

  A collection is group of thematically related story maps. If you find your story map is branching into other related topics or is broken up into distinct sections, a collection might be the right choice. To create a collection, head to https://storymaps.arcgis.com/collections (opens in a new tab). An example of a collection is Ancient LA (opens in a new tab).

Images

The ArcGIS StoryMap platform supports a variety of file types which include: GIF, JPEG, PNG, and SVG. Each of these file types have their weaknesses, strengths and use cases. For a detailed explanation of when to best use these file types you can visit Esri's A Guide to working with images in ArcGIS StoryMaps (opens in a new tab). Below is a summary of those file types and when to use them:

• JPEG: by far the most ubiquitous file type used for images.

  • No transparent backgrounds

  • "Lossy" compression — images are compressed to keep file sizes small

  • Small file sizes load faster but can lead to blurriness in finer details like text

  • Best for: complex images and many colors without small text or the need for transparent backgrounds

• PNG

  • Transparent background support

  • No compression – this results in larger file sizes that take longer to load

  • Best for: images that require transparent backgrounds or need small text to be readable

• SVGs: vector art that is often used to store icons or assets developed with programs such as Adobe Illustrator

  • Transparent background support

  • SVGs will never be pixelated, regardless of the size they are displayed at

  • Best for: vector-based art

• GIF: perhaps best known for their use for animated photos

  • Transparency support

  • Only have access to 256 colors

  • Can be very large

  • Best for: short animations that could not be otherwise be a video

Image size and resolution

ArcGIS StoryMaps allows for images to be up to 10 MB in size. However, the larger the size of the image, the longer it will take to load. In general, ArcGIS StoryMaps will serve smaller sized images to smaller devices, it is still best to find the optimal size/resolution. As a general rule of thumb, images should be no more than 1MB and ideally be under 500KB

In general, most web graphics will remain sharp at 72 ppi. PPI (pixels per inch) refers to the resolution of an image. If you export an image from Photoshop, for example, it will allow you to set that PPI. Image with small text or images that will be very large may require a higher PPI. Its best practice to not exceed 300 ppi.

Image size key practices

• Most images should be 72 ppi
• Images that require higher resolutions should not exceed 300 ppi
• You images should be no more than 1MB in size
• Ideally an image should not exceed 500KB

Cover media

Cover media can bring a story to life, but it is important to know the best type of image and image dimensions to use to make sure it looks good across device sizes. This section will provide information on the types of cover media and provide guidance on how to make sure cover media works on a variety of screen sizes.

Due to how ArcGIS StoryMaps resizes images for responsive design, it is possible that cover media can be cut off, resulting in inconsistent sizing across devices

Cover media is an image or video that is displayed at the top of a story map. In the Story Map creator you can add cover media by clicking the "Add cover image or video" button in the top right corner.

Cover media best practices

• Don't use images with text
• Repeating patterns are a good option — they scale well across screen sizes
• Don't use videos that need to have acompanying sound, the sound won't be played
• Use images with at least 300 ppi
• If using the same image for thumbnail, reduce its size for thumbnail image

Cover media scaling

Cover media on a Story Map will be scaled in ways that can crop parts of the image/video across screen sizes. For some images, like those consisting of repeating patterns, this might not be a problem. Cover media scaling can, however, be a source of frustration when an important part of an image is cropped on certain screen sizes.

Asisde from testing a story map before publishing, you can choose an image aspect ratio that will work best across screen sizes and device types. As of the writing of this document, there are three cover media formats. Below is a list of each format and the suggested aspect ratio that will ensure minimal cropping of images.

Minimal

• Best for: Detail rich graphics, illustrations, photographs or patterned backgrounds
• Ideal aspect ratio: 143 : 3