Optimal Story size for publishing for laptop and mobile phone - Storyline 360

What are the best publishing parameters  and the best Story size to use so that the content looks equally good on laptop and mobile phone.

Our experience was that when we use story size of 768 X 1024 the content looks good on laptop, not as good on mobile.  

When we use story size of 720 X 540 it looks good on mobile but not as good on laptop.

What do you recommend?

3 Replies
Alyssa Gomez

Hi Norma!

Storyline 360's responsive player fluidly responds to the screen size and orientation of any mobile device for the best viewing experience--your course should look great no matter what device you're using. 

Could you share a link to your published content? I'd be interested in testing it on a few different devices. Which mobile devices have you tested on? 

Abraham Ysmael Alvarez

Hello Alyssa!

I'd like you to test our published 360 content on mobile and see if this responsive player successfully scales on your device. (AMP is disabled here btw)

Here is the 360 link https://360.articulate.com/review/content/a98060b1-3f88-4dfa-a1dd-604cdf416a31/review

On our device, when viewed, the module has black borders(I'll attach a word file containing the screenshots we took while testing).

Is there a way to remove these black borders?
Any form of assistance is appreciated. 

Ashley Terwilliger

Hi Abraham,

Storyline 360’s superior HTML5 output and new responsive player give learners the best viewing experience on tablets and smartphones, but one unique benefit of the Articulate Mobile Player app is the option to view content offline.  So if you don't need to see the content offline, you wouldn't have to include the AMP output anyway (which would entail a user to download the mobile player app to the iPad or Android device). 

As for the black bars you're seeing, on iOS devices, Mobile Safari shows browser bars in portrait mode. If you rotate to landscape mode, it'll make the course full screen. You also will see the browser chrome (i.e. top address bar) in portrait mode, but it should disappear in landscape and go full screen (unless you tap/swipe to bring it back). 

I do notice the right side of the course shows a bit of black screen, and I am curious how this displays outside of Review? Have you looked at uploading to another test site? You could see how it looks when you upload to Tempshare as another way to test web published content.