Which size screen do you design for?

Nov 09, 2012

Hi, this is my first post (obviously lol).

I have a very basic question which I can't seem to find answered anywhere, but it seems like an important thing to know..

What size screen should I assume my learners are using? Assuming I'm going to make my slides with images and font to look best at a certain screen size, what size do I pick? And then of course not everyone will have that screen size - some will have a big computer screen, and some might have a little tablet screen - how does that work when you're designing, which size do you design for?

33 Replies
Adebare Showemmo

Hello Fiona,

If you are using storyline, the default size is 720 by 540, this work well for most computer screen and the HTML5 and iOS output work pretty well on Android and iphone repectively because the output files are automatically resize to fit thier screen. However, if you know the size of the sreen you are targeting, you can reszize the default page size by clicking on design and select story size.  

Jonathan Brown

If we're looking at supporting devices with high resolution displays (eg. iPad retina displays), shouldn't we produce courses to the largest dimension that storyline allows (2047px v 1536px) and then "Scale player to fill browser window". This is probably not the best solution as it will result in large file sizes but otherwise we'll end up having to produce the same course at different dimensions and this will create fragmentation and difficulties when you need to update a course. But with a small default size and then scaling up it will increasingly result in loss of quality. Eventually with the pace of change we may end up with a load of courses that are smaller than the standard display of most users.

More and more devices are going to deliver high resolution displays such as tablets and laptops, but moving forward we may need to deliver courses that are viewed on televisions.

Fiona  Telford-Sharp

Hi, that's not quite what I mean. I know there is a default size, it's more a question about how big or how small the objects within the screen need to be to look good when viewed on different devices.

I mean, do you design so your font size and pictures etc are going to look good and be readable on a standard computer screen? Or do you design so they are big enough that they are still readable on a smaller screen like a tablet? Does that make sense?

Howard Frederick

Jonathan Brown said:

If we're looking at supporting devices with high resolution displays (eg. iPad retina displays), shouldn't we produce courses to the largest dimension that storyline allows (2047px v 1536px) and then "Scale player to fill browser window". This is probably not the best solution as it will result in large file sizes but otherwise we'll end up having to produce the same course at different dimensions and this will create fragmentation and difficulties when you need to update a course. But with a small default size and then scaling up it will increasingly result in loss of quality. Eventually with the pace of change we may end up with a load of courses that are smaller than the standard display of most users.

 More and more devices are going to deliver high resolution displays such as tablets and laptops, but moving forward we may need to deliver courses that are viewed on televisions.

Fiona, also my first post!!  I got the most out of Jonathon's answer.  I'm just now developing courses for the smartphone.  I note that iPhone 4S is 640X960; iPhone 5 is 640X1136; Samsung Galaxy is 720X1280.  Now considering that those three have a huge share of the market, what resolution would you build your storyline in today?  To safeguard against loss of resolution as screens improve, if today you were to design a course for smartphones coming out in 2014, what screen size would you choose?  Thanks.
Maggie Cowan

Our clients typically don't have a standard size/resolution across all user machines.  Because of that, we design CBTs (in Storyline or other software) to fit the lowest resolution (1024 x 768).  However, to account for menu bars in browsers, we scale back to 1024 x 700 so the CBT fits on screen without requiring the user to scroll to see it all.  When we use Storyline to produce CBTs at this resolution, we have to set the story size even lower to account for the player.

Bruce Graham

Haniffa Beevi said:

Hi, 

Can someone help me how to set up Storyline to play in multi-devices?

The resolution that I used is 500x375. Once I published in html5, its play nicely at ipad but not android.

Thank you


Hi Haniffa, and welcome to the Heroes Community.

Storyline is not currently supported on Android - it may work fine, it may not.

http://en-uk.articulate.com/support/storyline/android-support

Adam Hain

720x405 (the default 16x9 in storyline) seems kind of small and can look fuzzy on a desktop screen.  I have a wide variety of users who could really be using any device or monitor.  If I bump up the resolution to one that Bill or Anuj suggest, are there any downsides when users are on mobile?

I ask because the mobile experience is pretty great with the default settings.  I can run a couple test outputs but was curious of others experiences. 

Philippe JEANTY

OK, again beginner question.

My presentation have to fit on projectors and the majority of them are still 1024 by 768. Can the player borders and title be totally suppressed ? In Adobe Director you design a stage and what you design is what you get. No extra around. I could sacrifice a band of pixel at the bottom for menu and navigation. What would be the screen size i have to use ? the setting for the player ? Any example of these I could look at ?

Leslie McKerchie

Hi Philippe!

That sounds like it would need to be a custom set-up. We do have a Storyline SDK here if you'd like to take a look, but this is not something I could help support.

You could also simulate a menu like you are describing I'm sure on the slide master of a chromeless player perhaps. Just a thought.

Hopefully someone will be able to pop in and assist with your design.

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