Question about optimal Size for HTML5 output on iPad

Hi,

I want to have a SL course that takes full advantage of the iPad (not the new iPad3) width in landscape orientation. My file does not have a top bar, nor a menu; only the player controls at the bottom. Taking into account the space taken up by the Safari browser bar, the SL left and right borders and the player bar at the bottom, I figure the dimensions of my file should be set to 1006*610. However, when I publish and run the SL file, there is quite a bit of "wasted" space to the left and right. Also, my size setting don't seem to have any effect in the player app.

What am I missing? Is my math wrong?

11 Replies
Michael Hinze

Hi Dave, thanks for getting back to me. See attached a screenshot of a sample course in HTML5 and in the player app. In both cases, the content is scaled down and not shown in its intended width (1024px). There is a lot of "wasted" screen real estate to the left and right in the browser and all around in the player app.

here is the sample file running in the player app:

Dave Mozealous

Hi Michael,

Yeah, in the app right now we will always have the grey area around it unless you launch it in full screen.  If you reverse pinch it will maximize it to the full available screen area.  Sorry, my wording above was poor.

In the HTML5 output it looks like you have an aspect ration of about 1.4 for the entire player, but the display area that you have available there in landscape mode has an aspect ratio closer to 2048/1346 = 1.5, so if you want to optimize the HTML5 output so it fits perfectly with no padding in HTML5 you would need to make the output (including the player size) closer to an aspect ratio of 1.5 width to height, so right now your presentation is too tall to use up all the available space.

Does that make sense?

-Dave

Dave Mozealous

Hi Joel,

For the story size I would stick with the default 720x540, because in the Articulate Mobile Player, when they go full screen it will be optimally sized for the display.

In HTML5 on the iPad we will scale to fit the view port, so size doesn't matter, it is just the dimensions.  Just keep in mind, if you make a presentation ridiculously large, and then display it on a smaller screen it will be harder to see. 

-Dave

Joel Barricklow

Hi Dave,

Thanks for your feedback. The tricky part is that the screen dimensions change depending on which player controls are used. I am building a project that doesn't use any player functions, I believe that the best dimensions end up being about 1:52 or something very close to that.

However, after creating the project at 800x520, the image is quite blurry when viewed on the iPad. If my module is primarily for the iPad... how big would you recommend it?

Thanks!

Joel

Jackie Metler

Thanks, Adrian. I guess I wanted to know in reply to Dave's answer "In HTML5 on the iPad we will scale to fit the view port, so size doesn't matter, it is just the dimensions.  Just keep in mind, if you make a presentation ridiculously large, and then display it on a smaller screen it will be harder to see. ".... i wanted to know if you there is a way NOT TO force the HTML5 export to view port. I wanted to create an interaction that is smaller than 720 x 540, and keep it at the smaller dimensions. But the HTML5 export is forcing it to a larger size on the iPad. (PS-i'm referencing the HTML5 options, not the mobile App)

Adrian Dean

Hello,

Peter does mention in the thread below that HTML5 does have it's limitations at this point.

http://community.articulate.com/forums/t/15073.aspx

This is a good article on some of those limitations.

http://www.javaworld.com/javaworld/jw-08-2011/110815-hard-truths-about-html5.html

http://www.quora.com/HTML5-Mobile/What-are-the-biggest-limitations-of-HTML5-mobile-apps-relative-to-native-apps

This is taken straight from the answer: 

I believe the fundamental limitation is (and may always be) how your user interface is constrained to fit the HTML model. Your app will look and feel like a web app, with web-style user interface controls and touch handling.

Hope this gives some insight,

Adrian