{"id":818081,"date":"2022-06-30T18:00:43","date_gmt":"2022-07-01T01:00:43","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=818081"},"modified":"2022-06-30T18:27:08","modified_gmt":"2022-07-01T01:27:08","slug":"employing-and-enjoying-sidecars-docked-and-floating-panel-layouts","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/employing-and-enjoying-sidecars-docked-and-floating-panel-layouts","title":{"rendered":"Employing, and enjoying, sidecar\u2019s three immersive layouts"},"author":7221,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37131],"tags":[398132,23201,407372,28471,27881],"industry":[],"product":[36611,380802],"class_list":["post-818081","blog","type-blog","status-publish","format-standard","hentry","category-constituent-engagement","tag-arcgis-storymaps","tag-cartographic-design","tag-sidecar","tag-slideshow","tag-storytelling","product-story-maps","product-arcgis-storymaps"],"acf":{"short_description":"Sidecar, one of the immersive blocks in ArcGIS StoryMaps, now features three layouts. Here are some thoughts about how best to utilize them.","flexible_content":[{"acf_fc_layout":"content","content":"

You may have noticed that, as of June, 2022<\/a>, ArcGIS StoryMaps\u2019 sidecar immersive block now features an additional layout choice. The original\u00a0docked and floating panel\u00a0layouts have been joined by a new\u00a0slideshow layout\u00a0option.<\/p>\n

Those of you who have been using ArcGIS StoryMaps for some time will likely remember slideshow as its own stand-alone block. Now that it has been folded into sidecar, storytellers can combine all of the capabilities of sidecar with slideshow\u2019s horizontal click-to-scroll functionality. (Note that all preexisting slideshow blocks have automatically been converted to the slideshow layout of the sidecar block, and that you can still add a fresh slideshow-layout sidecar to a story directly from the block palette.)<\/p>\n

This post will walk through all three layouts and take a look at some instances of when it makes sense to use each one.<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"content","content":"

The evolution of sidecar<\/h2>\n

At its start<\/a>, sidecar was intended to be somewhat analogous to our classic Story Map Journal template. But one of the more popular features of our classic Story Map Cascade was an immersive section where you could fill the screen with media such as maps, photos, videos, or embedded content, while accompanying text and supporting media appeared in floating panels that moved vertically across the media window as readers scroll.<\/p>\n

We were excited to integrate this floating panel experience into our next-generation storytelling tool in April of 2020<\/a>. It gave storytellers the ability to add drama and visual variety to their stories\u2014and was a big step in encouraging those who were still building stories using our classic templates to migrate over to ArcGIS StoryMaps.<\/p>\n

And now, offering a horizontally based option as part of sidecar\u2019s robust immersive experience provides an even greater level of storytelling versatility.<\/p>\n

Here\u2019s 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\u2019t irrevocable.<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1647242,"id":1647242,"title":"choose a sidecar layout","filename":"choose-a-sidecar-layout.png","filesize":301664,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/choose-a-sidecar-layout.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/employing-and-enjoying-sidecars-docked-and-floating-panel-layouts\/choose-a-sidecar-layout","alt":"","author":"302462","description":"Choose sidecar layout","caption":"","name":"choose-a-sidecar-layout","status":"inherit","uploaded_to":818081,"date":"2022-06-29 23:04:04","modified":"2022-06-29 23:04:21","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2400,"height":1288,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/choose-a-sidecar-layout-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/choose-a-sidecar-layout.png","medium-width":464,"medium-height":249,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/choose-a-sidecar-layout.png","medium_large-width":768,"medium_large-height":412,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/choose-a-sidecar-layout.png","large-width":1920,"large-height":1030,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/choose-a-sidecar-layout-1536x824.png","1536x1536-width":1536,"1536x1536-height":824,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/choose-a-sidecar-layout-2048x1099.png","2048x2048-width":2048,"2048x2048-height":1099,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/choose-a-sidecar-layout-826x443.png","card_image-width":826,"card_image-height":443,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/choose-a-sidecar-layout-1920x1030.png","wide_image-width":1920,"wide_image-height":1030}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

 <\/p>\n

Docked and floating: compare and contrast<\/h2>\n

I thought it would be interesting to compare the two vertically-scrolling layouts by incorporating them into two otherwise identical stories, as a way to explore the formats\u2019 strengths and shortcomings.<\/p>\n

Let\u2019s use the two stories to consider the virtues of floating panel vs. docked panel. Feel free to open the two stories\u2014Urban Africa<\/a>\u00a0and\u00a0To dock or to float?<\/a>\u2014in separate browser tabs in order to easily compare them yourself. (And remember that duplicating stories<\/a> is a great way to experiment with different layouts even as you\u2019re building a story).<\/p>\n

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.<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":819641,"id":819641,"title":"sidecar pictures","filename":"sidecar-pictures-scaled.jpg","filesize":403470,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-pictures-scaled.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/employing-and-enjoying-sidecars-docked-and-floating-panel-layouts\/sidecar-pictures","alt":"","author":"7221","description":"","caption":"Docked panel left, floating panel right","name":"sidecar-pictures","status":"inherit","uploaded_to":818081,"date":"2020-04-15 11:11:26","modified":"2020-04-15 11:19:43","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1582,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-pictures-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-pictures-scaled.jpg","medium-width":422,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-pictures-scaled.jpg","medium_large-width":768,"medium_large-height":475,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-pictures-scaled.jpg","large-width":1748,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-pictures-1536x949.jpg","1536x1536-width":1536,"1536x1536-height":949,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-pictures-2048x1265.jpg","2048x2048-width":2048,"2048x2048-height":1265,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-pictures-753x465.jpg","card_image-width":753,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-pictures-1748x1080.jpg","wide_image-width":1748,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

 <\/p>\n

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\u2014even 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.<\/p>\n

Next comes the African urbanization section. Here I think it\u2019s 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\u2014as 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\u2019t work on mobile devices, where smaller screen real estate requires that the floating panel sit directly atop the map.<\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":819661,"id":819661,"title":"sidecar maps","filename":"sidecar-maps-scaled.jpg","filesize":265858,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-maps-scaled.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/employing-and-enjoying-sidecars-docked-and-floating-panel-layouts\/sidecar-maps","alt":"","author":"7221","description":"","caption":"Docked panel left, floating panel right","name":"sidecar-maps","status":"inherit","uploaded_to":818081,"date":"2020-04-15 11:17:49","modified":"2020-04-15 19:01:29","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1582,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-maps-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-maps-scaled.jpg","medium-width":422,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-maps-scaled.jpg","medium_large-width":768,"medium_large-height":475,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-maps-scaled.jpg","large-width":1748,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-maps-1536x949.jpg","1536x1536-width":1536,"1536x1536-height":949,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-maps-2048x1265.jpg","2048x2048-width":2048,"2048x2048-height":1265,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-maps-753x465.jpg","card_image-width":753,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/04\/sidecar-maps-1748x1080.jpg","wide_image-width":1748,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

 <\/p>\n

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.<\/p>\n

In general, here are a few good reasons to choose the docked panel layout:<\/p>\n