Working with Story Map Journal (and Shortlist) on different screen sizes

[BethanyBalisky]

When I create a Story Map Journal based on a certain screen/monitor size, I size the text, custom sizing of web page content, etc. according to how it looks best on that monitor. When I pull up the same story map on another computer with different size, the text, content and etc. do not scale automatically but instead are disproportionate. What's the best way, if any, to work around this?

[OwenGeo · Accepted solution]

Hi Bethany -- thanks for posting your question. Story Maps are responsively designed so that the on-screen elements, like the side panel, will resize based on different screen resolutions, browser window sizes, and aspect ratios. Also, below a certain size the layout will switch over to something that is more mobile friendly. Currently, however, the text doesn't resize (other than when the story switches over to the mobile view).

Could you please share the resolutions of the two monitors you are working with and perhaps even screenshots of the text and content on each monitor? It'd be helpful to see the differences you are seeing so we can consider addressing this in a future release.

You may be able to design around this by choosing an overall smaller text size that looks better at more resolutions. Also, developers can download the code for our Story Map apps here on Github and customize it with HTML, CSS, or JavaScript to add behaviors that aren't currently included. You can read more about how to do that here.

[kmsmikrud]

Hi,

I have a question related to Bethany's and wonder if someone might have info on how to customize the HTML, CSS, or JavaScript to accommodate. I have Story Maps in the Shortlist template and just noticed they now have the autoplay function included. We currently have the Story Map running at times on the front desk large screen on the wall behind the counter. While the Story Map looks great on a regular computer sized screen on the monitor the size of the map looks to take up too much of the screen and it would be nice if the location photos/text could be bigger. Is there a way to include code for screens larger than......to modify the size of the location photo or ratio of the location photo to the map?

The information folks thought it looked good but currently would look even better if we could modify the photo/text size in the location box. We do have the code hosted on our server but I'm not exactly sure what I would modify to get the effect we would like.

Thanks in advance!,

Kathy 

[RupertEssinger]

Hi Kathy

Good point. Unlike the other Story Map apps with side panels, (Map Journal, Map Series and Map Tour), which automatically display that side panel at at width relative to the width of the entire display window, Story Map Shortlist's side panel, which shows the tabs containing the places is a bit more constrained because it contains tiles. It displays the tiles in 2, 3, or 4 columns depending on the size of the display, but doesn't get any wider than 4. So if you have a very wide display, or if you stretch the browser window displaying a Shortlist (example Shortlist if anyone needs ones and wants to try) so it goes over two monitors (such as your primary and secondary monitor) you'll notice that the side panel doesn't get wider than 4 columns, so when you are viewing specific places their pictures are fairly small compared to the map. We should perhaps bump this up a bit more so that on very wide displays, we'd display one or two more columns of tiles in the tabs, which would therefore make the panel wider too when a single place is being displayed. I'm not sure how easy it would be to do that customization yourself. I can ask our dev when he is back from vac unless there is another Geonetter who has tried this.

Do you know the display size/aspect ratio of the monitor you are using? Is it a wider aspect ratio than the standard wide screen monitor (mine is 1920x1080). Or would it be possible for you to take a picture of your Shortlist running on the monitor behind your counter we can see what it looks like (assuming it is OK for public consumption and not classified material or location).

Rupert

[OwenGeo]

I'd also suggest trying the browser zoom to increase the size of all the on-screen elements. How it works will depend on the resolution of the display, but it might help for the very wide screen.

[RupertEssinger]

Good point too and that's the easiest approach of all.   Increasing the browser zoom does expand the width of the side panel accordingly 

[kmsmikrud]

Hi Owen and Rupert,

Thanks so much for your quick replies and explanations of the Story Map template shortlist. I don't have a photo at the moment to include but I will work on that. Basically the front desk set up is a 65 " screen with 1920 x 1080 resolution at a 16:9 ratio. I will try increasing the browser zoom as a work around on a similar screen in another room here easier to test out than at the front desk. It was exciting to see up on the larger screen especially now that the shortlist includes the autoplay function but instinctively a person does want to increase the location photos.

Thanks,

Kathy

[RupertEssinger]

Here's another idea for you: If your story is very photocentric the Story Map Tour's new Side Panel layout might be a good way to present your places. The Side Panel layout is like the Shortlist but the map and the picture are switched, so the image is nice and large. It can look pretty nice on a large monitor.

Here's an example:
http://brampton.maps.arcgis.com/apps/MapTour/index.html?appid=e9d28a5c06a145569dacd039a75aae1f 

and here's the same one with the Autoplay parameter added to the end:

http://brampton.maps.arcgis.com/apps/MapTour/index.html?appid=e9d28a5c06a145569dacd039a75aae1f&autop... 

Rupert

[kmsmikrud]

Thanks Rupert. You know that might be a good idea just for having a improving the display for the front desk monitors at our office locations. We chose the shortlist over the map tour so we could add in other layers in the map (roads, trails,...etc) once a person zooms in. Also the text editor was easier to add formatting to at the time. That said I could now easily export my points/info/photo url links and  make it into a map tour for presentation purposes. 

[RupertEssinger]

You can add your supporting layers into the map that the Map Tour uses too. They will be displayed exactly the same as in Shortlist, except that Map Tour doesn't support clicking on them to get popups. You can also add some basic HTML into the Map Tour caption to do formatting, Here's a Map Tour I made with the Side Panel layout option that has trolley stations and lines added, and also HTML formatting in the caption to change font sizes and add hyperlinks: Hidden San Diego 

You also don't need to choose between Tour and Shortlist: you could make both so that you have both styles available for different purposes. Perhaps the tours highlight a few places (with the best photos) from the larger Shortlist dataset and for display in kiosks.

Rupert