Storyline Design Size for Web Browser 1920x1080 Resolution

Oct 26, 2017

Hi,

I am trying to figure out the sizing for my Storyline file. The main goal is to try to make use of all of the space in the web browser so that it would view in full screen. The only thing that is visible should be the address bar at the top of the browser. 

I tried resizing to 1900 x 463, but would that resolution affect loading time of the file? 

 

I never designed specifically for full screen web browser, so I am not very familiar with the sizing.

 

Thank you all in advance! 

4 Replies
Michael Anderson

Steven, 463 pixels high seems a little small if you just plan on having the browser's address bar visible. It should be pretty easy to create a test project, add just a background photo to it, and then resize and publish the project a few times until you find the size that works best for you. Make sure you are using the player settings that you intend to use, as that will affect the size also.

A larger resolution project will affect loading time only if you have large graphic elements that use that space. You can check this by trying different sizes and then checking to see what the total size is of your published output folder.

Bob O'Donnell

Steven, That browser size is a 16:9 ratio so you could set your development size to be 16:9 by choosing something like 800x450 or 1024x576 to mirror that ratio. As Michael mentioned, the story size and playback/load time will be affected by the size of your graphics and videos used.

You can safely work at a smaller screen size and set your player options to fill the users browser. There's a lot of control settings under the Player Custom tab to accommodate what you want to do. Most of our projects have the player set to fill the users browser.

The other thing to consider for screen size is whether you are using all the player options, like the side menu. You will need to delete those measurements (player frame and menu size) from your story size. Story size only accounts for the main content. I know there are other posts on doing this that include the specs. Research it and test what options work best for you.

Jan Zet

hi guys, i am a complete novice here, however jumping into Sl360 from PPT or Adobe graphical tools it seems be like traveling to mars, at least in the beginning and for some very obvious functionalities i cannot locate :) do you have any idea how someone did this full screen mode in this story ? http://illumengroup.com/dev/charneyd/EarthToTheMoon/story_html5.html

i cannot figure it out and any of the plater nor story size presets help me to avoid white frames around my full-slide/going-to-edges graphics..

thanks in advance for your expertise!

 

Ashley Terwilliger-Pollard

Hi Jan,

Such a cool example - I hadn't seen that one before. Sadly it took me a few tries.. 😉

Without seeing the original, I can't say for sure - but my guess is that it's a combination of story size and using the "chromeless" player method in combination with the player colors matching the black background of the slide.

Did you reach out to the author of that course?

This discussion is closed. You can start a new discussion or contact Articulate Support.