What's your Story Size?

Jun 21, 2012

Ryan Martin
By Ryan Martin

"They" say size doesn't matter, but in the case of eLearning it does. At least when it comes to the iPad App.

If you want your Storyline course to fit nicely on an iPad (iOS), your Story Size needs a 4:3 ratio. This 4:3 ratio is the default in Storyline, which is 720 X 540.

Now, for me, 720 is too narrow; considering the minimum resolution being 1024X768 on the desktop. I'm losing (giving up) a lot of desktop real estate at 720 (just for the sake of the iPad).

I'd like to hear from others:

  1. Now that you can change your Story Size, are you? Or you find yourself working with the default?
  2. How important is it that your course fits snug on the iPad (iOS)? Do you consider this?
  3. Is the iPad even at all important in your course delivery?

Cheers.

Ryan

76 Replies
Vispi Baria
almost 12 years ago06/27/12 at 11:26 am (UTC)

Great conversation guys! So far I have stuck to the default, partly because of what Gerry mentioned " Too much room and I tend to over-design or overwrite things", but I'd like to explore the space a little, so thanks for these suggestions.
No real ipad strategy yet, but because I am using the default size, what we have shown to clients has gone down very well.. Have to go down the html5 route at the moment as 'every' project needs an LMS/SCORM element! Looking forward to Tin Can implementation (any joy with playing with that?? Wish I could, just don't have the time at the mo  :-( )

regards,

Vispi. 

Ryan Martin
almost 12 years ago06/28/12 at 2:04 pm (UTC)

@Kevin - I really appreciate your candid feedback. Also, with your 1000X650 design, do you think the 1024 X 768 (scaled Player) would also be an option for your solution - pros vs. cons?

Keep in mind, when the 1024 Player is in a browser, which has a 1024X768 screen resolution, the actual Player dimensions are scaled down to 892X673.

@Everyone - The more I play around with a "responsive" (scaled) player, the more I like it; and can't think where it may "break" or inhibit the learner experience or design.

A 1024X768 Player is obviously an iPad strategy (iOS app) ... I figure the Storyline Showcase has too many good/quality courses working on the iPad to not have a strategy. I think the essential features are in place to give a decent experience; I can't say the same for HTML5 output (which I dread seeing the output after working so hard).

Another thing, a designer should be leery if you're not giving the user a proper "Apple iPad" experience; that's why Apple does have their Human Interface Guidelines - as it is now, Storyline can't mimic these guidelines, so things like scroling may frustrate and cause more damage than good as far as a user experience is concerned.

I've been talking a lot lately with Anna Sabramowicz about "mobile"; and too be clear when we are talking mobile for learning, for us, it's a Tablet, not a smart phone - which is the case with Articulate too.

Karen Loftus
over 11 years ago08/15/12 at 12:08 pm (UTC)

This is a really fascinating thread, and you guys are light years away from where I am. 

So here's an upcoming challenge I have.  Here at Goodwill Southern CA, some of our internal clients are people with a disability that work on special projects (like dismantling a video casette player for recycling purposes or placing a "made in the USA" sticker on a specific location of baseball caps for a big box vendor).  I'd like to use an iPad as the visual means by which the client watches a (looping) tutorial on how to do the X number of steps needed.  (Think visual job aid).

Because of the possibility of many types/forms of physical and/or mental disability, I'd like maximum graphic space, and minimal "buttons" or extras around the perimater to distract or confuse.

Given the previous conversations, is there an iPad size (ratio) you folks would recommend given the application I've laid out?

Ryan Martin
over 11 years ago08/15/12 at 12:29 pm (UTC)

If this is just for the iPad, go with 1024 X 768 - also use the scaled player for the desktop (which should look okay too!)

It'll look this size: http://www.elearnerengaged.com/1024/ - I think this link is iPad app ready?

Also, based on your clients, I'd use a simple full rightside, and full left side back-and-forth navigation. With big arrows visible.

In the middle have your steps - and always ask yourself (as you're developing), "Is this feature necessary?" and "How can I make this page simpler and less busy" - sometimes big clear text is better than a busy image ... 

I'm not too familiar with your use case, but I'd see what other manufacturers are doing for your clients (outside of elearning); just to see the usability of similar challenges.

Regards.

Ryan

Eric Rohrer
almost 11 years ago05/01/13 at 11:33 am (UTC)

This is a great post and equally great discussion, so I'm glad I stumbled on this!

For the past day I've been tinkering with a variety of different dimensions proposed in this thread. What I'm trying to accomplish is an optimum size taking the following into consideration:

  1. Does not use a sidebar (menu, glossary, etc.), Top Bar, or Title, and does not utilize the Previous or Back buttons. Essentially, eliminate/hide any element of a skin (menu and nav built w/i the Storyline canvas.
  2. Lock the presentation to an optimal size. I'm not a fan of scaling because of inherent issues associated to scaling (readability, fuzziness, etc.)
  3. Ability to display the output on a PC or Mac within just about any modern browser (IE, Chrome, Firefox), and iPad with no scrolling (horizontally or vertically). I also need to take into account, at minimum, the default UI real estate nuances across browsers.  Additionally, it needs to display in the Articulate iPad app w/o any scaling. 
  4. I do not want to launch (pop-up) the course in a new browser window (with no controls)

What I've concluded after many tests of different sizes, is that 988 X 641 seems to be an optimal size.

Note that this is not true 4:3 (which would be 988 X 741). But what I found (and was mentioned in an earlier post) is that a height 741 is simply too tall on a desktop (given your target spec is 1024 X 768) due to browser navigation controls. Even when I tested this w/o browser controls, it was still scrolling (on a Mac, the persistent menu bar at the top takes up 24 pixels, and on both Mac and PC the top of the browser window varies from 25-55 pixels). So, 768 resolution height is not really 768 - the "true" resolution is more like in the range of 689-743.

Therefore, if you go with true 4:3 at 988 X 741 you run the risk of vertical scrolling. Giving yourself a 100px buffer of 988 X 641 is pretty much a safe bet - even if the user has another browser UI element enabled (such as Chrome's bookmark bar, which has a height of 30 px, you will likely still be safe. Obviously you can't control all the toolbars and tweaks one can make to their browser that reduces real estate, but I'm pretty confident that 988 x 641is an optimal story size.

I'd be curious if my conclusion is true, or if there is anything I missed.

Eric Rohrer

Helix Knowledge | a digital learning design agency

 

email: eric.rohrer@helixknowledge.com

direct: 303.596.4564

web: www.helixknowledge.com 

Bart Collart
almost 11 years ago05/15/13 at 7:41 am (UTC)

RYAN DeWitt said:

I've discovered 2 sizes that work well with utilizing the entire iPad real estate with mobile Safari (iPad with no side bar menu) http://bit.ly/16KK07o  Maybe I'm missing something, but most aspect ratios I'm finding have white space on left and right.  Hope this helps.


I like these sizes Ryan, thanks. Especially 938x540. I found running the 1298x768 example from my iPad, the main nav buttons were shrunk down a bit too small for my liking.

Kevin Thompson
over 10 years ago10/11/13 at 11:09 am (UTC)

Hello everyone.  Great discussion on a topic we are wrestling with and searching for guidance on.

Trying to boil it down to a safe best practice recommendation for our projects...

If we assume an audience that may be using a number of different browsers or devices, would it be safe to recommend the following "Story sizes"?:

  • 988 x 641  (no left sidebar)
  • 756 x 567 (with left sidebar)

Is there not an option for the content to auto-size/auto-scale to the browser size similar to Presenter '09?  

Thank you.

XAn Choly
10 years ago02/03/14 at 8:46 am (UTC)

Luca Maggiolo said:

Hi All,

Does the useful information you provided apply to iPad mini too? Any overall information on the size to be used there? At the moment I am using the defaults 4:3, but some text comes out of the caption and the ´next-prev´ buttons disappear.

Thank you in advance for any suggestion.

Luca


I would be interested in this too!

Char Larkin
10 years ago04/03/14 at 9:58 am (UTC)

An old thread, but I have referred to it several times when trying to find a way to fill up the wide screen desktop.  I am converting several Captivate courses, where most of the screen could be utilzied nicely.  . 

Discovered that 1008 x 567 works beautifully for my work.  I am also keeping the side menu open due to client request. 

Matt Mayer
almost 10 years ago06/25/14 at 9:57 am (UTC)

Hello,

What LMS and or software is everyone using here?

I typically find that 1018x680 works nice using SumTotal's LMS platform while launching the module through Safari. This size ratio also worked well through their APP.

I find the size can easily vary but X amount of increments depending on browser/ app the module is running through. I have tested our modules on Saba's App and the header on the app is larger, such in turn forces me to reduce the height of the module so that it fits perfectly within the screen.

I find it imperative to develop a module that fits perfectly within the screen space given as it creates a cleaner and more refined look.

Further to this, I will try all sizes noted in this thread as there is much room for growth and improvement.

Has anyone else run into the issue of Articulate not supporting iFrame? 

Muhammad Bilal
almost 10 years ago07/06/14 at 9:23 pm (UTC)

Matt Mayer said:

Hello,

What LMS and or software is everyone using here?

I typically find that 1018x680 works nice using SumTotal's LMS platform while launching the module through Safari. This size ratio also worked well through their APP.

I find the size can easily vary but X amount of increments depending on browser/ app the module is running through. I have tested our modules on Saba's App and the header on the app is larger, such in turn forces me to reduce the height of the module so that it fits perfectly within the screen.

I find it imperative to develop a module that fits perfectly within the screen space given as it creates a cleaner and more refined look.

Further to this, I will try all sizes noted in this thread as there is much room for growth and improvement.

Has anyone else run into the issue of Articulate not supporting iFrame? 


Dear Mayer, I am trying to do similar in Moodle. However, none of the sizes from the conversation is fitting well. Mostly the right hand and bottom pixels are not visible in iPad and you have to scroll the window using two fingers scroll which is not easy to do every time when you have to press "NEXT, PREVIOUS" buttons as well as some of the content also cuts with it, specially in the landscape mode. Please see the attached images and any help will be highly appreciated

Thanks,

Muhammad

John Burton
over 9 years ago12/16/14 at 4:43 am (UTC)
Kevin Thorn

Great question, Ryan. We're in an era that makes us think through delivery with added devices and screen resolutions. Most desktops now come with widescreen 16:9 ration monitors. While iPad and the more common of the Android tablets are at 4:3. 

@Steve, the 756 x 567 is great to know. Thanks for sharing that! As for sidebars, I typically don't use them. If there is a menu, I'll move it to the top player as a dropdown.

Now here's where I poke the bear - I'm not in the camp that designs for desktop AND mobile. I design the learning first. If there is a request or need for multiple deliveries, I develop one for each. Yeah, I know it's more work on the front end but the end user experience is richer and I think better quality. Besides, it keeps me from having to keep up with what works/doesn't work on iOS or HTML5. Design for desktop I'm free to let go.

Hi Kevin,

Found this old post (apologies) and I'm wondering what you meant by "If there is a menu, I'll move it to the top player as a dropdown"?

I'd like an alternative to the standard navigation menu on the LH side.  Am using Storyline 2.

Cheers

JB

Brian Allen
over 9 years ago12/16/14 at 12:22 pm (UTC)

JB, with SL2 you can position the sidebar on the LH side, RH side, or move any items from the sidebar into the top of the player (again left or right) as a tabbed drop down.

Check out these tutorials if you haven't already played around with these features:

https://community.articulate.com/series/getting-started-with-articulate-storyline-2/articles/customizing-the-course-player

https://community.articulate.com/series/getting-started-with-articulate-storyline-2/articles/customizing-the-course-menu

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