How to check what an Evolve course looks like on mobile/tablet

As many of you will know already all published courses in Evolve are responsive by default.

That means that based on the device your learner accesses the course on the course will automatically adapt and flow the course into the available space with no intervention needed from the user or course author. See links at the end of this article for more information on responsive design in general.

More traditional authoring tools usually require a number of alterations to the course before it is able to display correctly on tablets and mobile devices. Evolve’s published courses use standard web technologies (HTML5, CSS and Javascript) to deliver the content and just work. You do, of course, have the option to use theming to change the default look and feel and tailor it according to device size but that’s for another day.

If you’d like to get a good general idea of how your Evolve course will look then you have a couple of options available;

Preview using Developer tools and look like a tech wizard.

  • Build your course
  • Run Live Preview

In Chrome:

  • Open Developer tools in your browser. In Chrome you do this by going to View > Developer > Developer tools Don’t be alarmed if it all looks a little technical. Most of what you’re seeing is available to web developers who want to be able to test, alter and explore the software they’re developing. It’s a way of ‘looking under the hood’ at what’s going on. What we’re interested in most is the little icon at the top of the tool bar.

39

  • Toggling this icon will switch your browser into an emulation mode. Effectively the browser will display your course as if it were on the device you select.
  • There’s a list of devices above the course. Clicking the arrow will show you this list. Select one and you’re course will now be displayed as if it were on the actual device. Cool? Probably not. Useful? Definitely.

Resize the browser window

  • Run Live Preview
  • Switch to the course that’s opened in a new tab
  • Using the your mouse click and hold on one corner of your browser window and resize it. You’ll notice that the content rescales automatically.

Additional resources and useful links

https://responsivewebdesign.com/


https://www.lukew.com/ff/entry.asp?1436

2 Likes

A post was merged into an existing topic: How to request an enhancement to Evolve