Designing a course for mobile devices, laptops, and desktops

bcondie007 Community Member Posts: 6
I want to make sure that the course I am developing will be compatible with mobile devices. How do I make sure that it is HTML5 compatible? Or,what are the steps to setting it up right at the beginning?


  • ssneg
    ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
    Lectora outputs valid HTML5 compatible files, so you don't have to worry about it. You can use Lectora to convert audio and video files to correct formats (MP4), and of course you cannot add any Flash files to your course.
  • bcondie007
    bcondie007 Community Member Posts: 6
    Thank you very much for the response. Just so I understand correctly, does that mean that there are not any settings I need to mess with in order to get my course to work correctly on any mobile device and also work well with laptops and desktops?
  • ssneg
    ssneg Community Member Posts: 1,456 ♪ Opening Act ♪
    No, you don't have to mess with the settings. But what you absolutely should do is to test, test and test your course. As early as possible.
  • bcondie007
    bcondie007 Community Member Posts: 6
    What is the industry standard for screen resolution. Again, I am designing a course that needs to be available via laptops, ipads, and other tablets.

    Is there a standard resolution screen size? Or, can I go with the 1024 x 768?

  • ummakumma
    ummakumma Community Member Posts: 97

    Here is an How-To Course: Creating Content for Tablets. The dimensions of that title is 1009x662 but I think you can use the 1024px widht as well.

    And here is another useful link

    I think it is mainly designed for iPad. Other tablet devices have different screen resolutions, but the course can be viewed there too.

    But if you design a course to smartphones that is another story. :)
  • dariodoc
    dariodoc Community Member Posts: 1
    Personally speaking I think that when you design an e-learning course you should put a tremendous effort in boosting the user experience. This means creating dedicated versions of your courses for different devices. It's normal that a course developed for desktop or tablet use won't have a nice user experience on mobile. Developing in HTML5 will surely shorten dev time, but won't bring the best results.

    Hope it was helpful,



    Digital marketing Manager at Docebo, the global e-learning provider
  • dmcglynn8112
    dmcglynn8112 Community Member Posts: 6
    What solutions have people developed for playing the closed captions of their Lectora elearning on mobile devices?
  • kstagg
    kstagg Community Member Posts: 230 ☆ Roadie ☆
    Here is something I found that should prove very useful for you. It's a test course created by Lectora:
    How-To-Course: Creating Content for Tablets - A Designer's Guide

    By opening the course within your tablet, and making selections about what elements you will be including within your course, it will recommend the settings you'll need for your course.

    Also, there is this:
    Building Finger-friendly Buttons for m-Learning (Lectora)

    Attached please also find a Responsive Course Design Storyboarding Kit put out by Lectora....

    Remember - there are many elements you need to consider when developing mobile learning including:
    • No flash
    • No drag-drop interactions
    • Export video to MP4
    ... just to name a few.

    Have fun!
  • kstagg
    kstagg Community Member Posts: 230 ☆ Roadie ☆
    Oh, found this too...

    Responsive Course Design in Action: What You Need to Know

    These are for my benefit as well as yours. Still trying to refresh my Publisher skills from the past. :]
  • mnorris9121
    mnorris9121 Community Member Posts: 1
    When designing my course for Phone Portrait in Lectora Inspire, I am having an issue with the page size adjusting.

    Goal: My page size is 480w x 763h. The Action: When I person clicks on a box, the action is to reveal additional text in that box. The revealed box should push the other text down, thus allowing the viewer to scroll to see the moved text if the they leave the revealed box open.

    Problem: Right now, when a person clicks the text, the other text moves down - but off the visible screen. It doesn't become scroll-able.

    Any suggestions?

    Thank you!