Storyline HTML5 Tips

Specifieke tips voor e-learning,  HTML5 en Articulate Storyline maar ook een paar algemene “best practices” voor e-learning ontwikkelaars.

Veel e-learning content wordt niet langer in Flash ontwikkeld maar bij voorkeur in HTML5. Voor alle devices, browsers en e-learning tools is HTML5 nog steeds een bewegend doelwit. Hoewel de HTML5 output van Storyline bij elke release steeds beter wordt, zijn er een paar aandachtspunten.

De onderstaande tips hebben zowel betrekking op de kwaliteit van de output als de snelheid van het eindresultaat. Een aantal tips zijn specifiek voor Android of iOS. Bedenk echter dat HTML5 support tussen browsers en versies van browsers verschilt – ook op desktop PC’s.

Test vaak, veel en volledig

• Test, test en test nog eens tijdens de ontwerpfase (ook voor desktop).
• Test de output op een webserver  of LMS  (in plaats van lokaal of binnen Storyline)
• Als je ontwikkelt voor iOS of Android – test de publicatie op het betreffende device:
• Bekijk bijvoorbeeld op deze website hoe goed je (mobiele) browser HTML5 ondersteunt.
• Verwacht niet dat alles (snel) werkt op oudere devices (iPad 1/2/3)
• Vermijd auto-start triggers  bij de media – deze niet worden ondersteund in iOS.
• Gebruik altijd de laatste update van de Storyline. Bekijk ook het overzicht op de Articulate website van ondersteunde features op verschillende devices.

Vereenvoudig het Ontwerp

Hou het ontwerp zo eenvoudig mogelijk met name van de Slide Master:

• beperk het aantal triggers
• beperk het aantal layers
• beperk het aantal variabelen
• beperk het aantal afbeeldingen

Content Tips

• Converteer  alle video’s (vooraf) naar mp4. Denk hierbij ook aan de resolutie van de video (hogere resolutie, resulteert in grotere bestandsgrootte en langere laadtijden).
• Maak afbeeldingen pasklaar. Gebruik geen grotere afbeeldingen dan nodig.
  • Zet foto’s om van PNG naar JPG. Comprimeer de JPG vooraf met een tool als TinyJPG.
  • Maak schermafbeeldingen altijd als PNG en comprimeer vooraf met een tool zoals TinyPNG.
• let op met het gebruik van variabelen in tekstvelden. Opmaak en lettergrootte van tekstveld kunnen na publicatie anders zijn.
• probeer de content  zoveel mogelijk op te knippen en plaats nieuwe hoofdstukken/onderwerpen in nieuwe scenes (laadtijd neemt toe bij grote scenes).

Helpdesk

Indien u vragen heeft over Storyline, HTML5 en de optimalisatie van uw project kunt u als klant altijd contact opnemen met onze helpdesk.