ArcGIS StoryMaps

Employing, and enjoying, sidecar’s docked and floating panel layouts

You may have noticed that, with our latest release, ArcGIS StoryMaps’ sidecar immersive block now features an additional layout choice. The original docked panel layout has been joined by a new floating panel option.

Here’s how the options are previewed within the builder. Remember that you can switch back and forth between the layouts at any time; your initial choice isn’t irrevocable.

Those of you who have been making story maps for several years are likely aware that sidecar is analogous to our classic Story Map Journal (here’s an example: Around the World in Seven Spaceports). You’re probably also aware that one of the more popular features of our classic Story Map Cascade was an immersive section with which you could fill the screen with maps, photos, videos, etc.; accompanying text and supporting media appeared in floating panels that moved vertically across the media window as readers scroll. This feature was often used to good effect as a way of maximizing the visual impact of key parts of your stories. An example is A World of Forests, an installment in our occasional series on the Anthropocene.

We’re excited that this floating panel experience is now integrated into our second-generation storytelling tool, as we think it will add drama and visual variety to your stories—and perhaps woo those of you who are still building stories using our classic products over to ArcGIS StoryMaps.

Docked and floating: compare and contrast

I thought it would be interesting to compare the two layouts by incorporating them into two otherwise identical stories, as a way to explore the formats’ strengths and shortcomings.

To do this I used another awesome function that appeared with the latest ArcGIS StoryMaps release: the ability to duplicate a story. I opened our Urban Africa story map in the builder, and clicked on the three little dots to the right of the Publish button. In the dropdown I clicked Duplicate story, and—voila—in seconds I’ve got an identical twin to my original, with the one difference being the addition of “(Copy)” to my story’s title. I then changed the title and added a brief introductory section with buttons linking to the original story, and to this blog post.

Let’s use the two stories to consider the virtues of floating panel vs. docked panel. You might want to open the two story maps—Urban Africa and To dock or to float?—in separate browser tabs in order to easily compare them.

The introduction to the Urban Africa story features attractive landscape photographs. In this initial section I strongly prefer the floating panel layout. The photos feel confined by the side panel, whereas they have plenty of breathing room beneath the floating caption boxes. The more immersive, full-screen images act like a dramatic fanfare, placing you vividly in the African continent.

Docked panel left, floating panel right

The set of circle graphs at the end of the opening section sit much less comfortably in the floating panel layout. The panel interferes with the graphs—even though I moved the caption to the right. If my team and I had made the original story when both layouts were available, I would either have put the graphs in their own docked panel section, or simply made the graph and accompanying text part of the standard scrolling experience.

Next comes the African urbanization section. Here I think it’s pretty evident that the docked panel layout is preferable. The shape of Africa fits nicely next to the side panel, and the text and graphics accompany the maps without overlapping them—as they do on the floating panel layout. It might seem tempting to use the map settings controls to nudge the Africa maps to the right, out from under the floating panel. But that won’t work on mobile devices, where smaller screen real estate requires that the floating panel sit directly atop the map.

Docked panel left, floating panel right

For the brief, final section inviting users to explore the data, I could go with either layout. I lean toward the floating panel option in this case, because it gives the story a little rhythm and variety, and it might be nice to have the final section echo the format of the introduction.

In general, here are a few good reasons to choose the docked panel layout:

Here are some circumstances where floating panel is likely to be the best choice:

My colleague Hannah Wilber has written a clever tutorial in story map form. It takes you, step-by-step, through the process of authoring and editing sidecar sections.

In general I’m a big fan of the floating panel layout. But that’s not to say I’d use it everywhere. The big visuals in the floating caption layout stand to lose much of their impact if they appear throughout a narrative. Much better to save the drama for key moments. A symphony performed solely at fortissimo volume quickly becomes wearisome; much better to vary the dynamics for maximum dramatic effect.

Enjoying three panel widths

Not only can you choose different sidecar layouts, but within each you can now change the width (as well as the placement) of the docked or floating panels. Adjusting the floating panel width gives you greater flexibility in seeking a visual balance between background and foreground elements. If your floating panels contain images, widening the panel will better feature them. The obvious trade-off is the extent to which the panel may obscure your background media.

I’m especially excited about the panel width options in the docked layout. The default (narrowest) side panel width allows lots of space for the media panel, but it comes at the cost of making the media in the side panel look kind of puny. Widening the side panel not only better features the multimedia content within it — it can also provide a significantly different storytelling experience.

As you can see above, the side panel options do change the look of your story. As the panel widens, the narrative text and its supporting visuals play more of a starring role in your production. Coolest of all, though, is that the widest option splits the screen, 50-50, left and right. And you can use that split screen to dramatic effect.

I recently finished a story on two landscape designers of the 17th and 18th centuries. André Le Nôtre designed grand, geometric French gardens for Louis the XIV. Capability Brown sculpted naturalistic landscapes into the British countryside. Their approaches and philosophies were diametrically opposed. I played off that idea with the split-screen format, putting narrative on the left and satellite imagery on the right for Le Nôtre, and doing the opposite for Brown. Note that a tap on a side panel image anywhere in the immersive sections enlarges it; a click on the expand icon in the upper right of the map expands it, too.

The split-screen format also provides a nice alternative to our guided tour immersive. If your tour text is longer than a paragraph or two, or if you want to mix text and images with greater flexibility in your tour, side panel immersive / docked panel layout / widest option is a great way to go!

About the author

Allen founded the story maps team at Esri. Prior to joining Esri in 2010, he worked at National Geographic for 27 years in a variety of positions, including art director of National Geographic Magazine and chief cartographer at National Geographic Maps.

Inline Feedbacks
View all comments

Next Article

What's new in ArcGIS StoryMaps (January 2022)

Read this article