Responsiv: seit Langem eines der großen Buzzwords der Tech-Branche, besonders im Web-Design. Aber was bedeutet es genau? Und vor allem: Was bedeutet es für die E-Learning-Entwicklung?
Machen wir zuerst einen kurzen Exkurs in den ursprünglichen Web-Design-Kontext und sehen wir uns anschließend an, wie das Konzept in die E-Learning-Welt übertragen wurde und welche Rolle es dort spielt.
Was ist responsives Design?
Stellen Sie sich vor, Sie sollen ein Layout für ein DIN-A3-Blatt erstellen. Das ist nicht schwer, denn die Maße stehen fest.
Jetzt gehen wir aber einen Schritt weiter und stellen uns vor, dass Sie danach Ihr Layout auf ein DIN-A5-Blatt und auf eine Karteikarte anwenden sollen. Natürlich soll in diesen Formaten immer noch alles genauso gut lesbar bleiben. Wenn die Dimensionen flexibel werden, wird der Auftrag ungleich kniffliger.
Genau vor diesem kniffligen Problem standen Web-Designer im ersten Jahrzehnt unseres Jahrhunderts, als Mobilgeräte aufkamen und schnell immer beliebter wurden. Zuerst hatten sie keine andere Wahl, als mehrere Versionen derselben Website zu erstellen – eine für jede Art von Gerät. Das war sehr aufwendig, nicht zuletzt in der Pflege und Aktualisierung der Inhalte. Mit den Jahren kamen immer mehr Geräte mit unterschiedlich gr0ßen Bildschirmen auf den Markt, was diesen Ansatz nicht mehr haltbar machte.
Der Begriff „responsives Design“ wurde erstmals 2010 von Designer und Autor Ethan Marcotte in seinem Artikel „Responsive Web Design“ auf A List Apart geprägt. Mit ihm beschrieb er einen Ansatz zur Optimierung von Websites, damit sie auf verschiedenen Geräten funktionieren, um die Benutzererfahrung zu verbessern und die Pflege zu erleichtern.
Technisch funktioniert responsives Design über fluide Gestaltungsraster, fluide Bilder und Medienabfragen (Teil der CSS3-Spezifikation). Was das praktisch bedeutet, ist, dass Web-Entwickler festlegen, wie eine Website die einzelnen Inhaltselemente umordnet, vergrößert oder verkleinert, ausblendet oder tauscht, um auf den verschiedenen Bildschirmgrößen gut lesbar angezeigt zu werden. Beim responsiven Design übernimmt der Browser einen guten Teil der Arbeit, unterstützt von CSS (Cascading Stylesheets).
So könnte ein Designer z. B. festlegen, dass der Inhalt ab einer bestimmten Anzahl horizontaler Pixel in zwei Spalten angezeigt wird, bei weniger horizontalem Platz aber in einer. Auf kleinen Bildschirmen wie Smartphones und Tablets wird die Website dann in einer Spalte dargestellt, auf einem PC in zwei.
So lässt sich das oben beschriebene Problem lösen, ein Layout zu erstellen, das auf DIN-A3, DIN-A5 und Karteikarten passt. Denn so müssen Sie keine 3 einzelnen Layouts mehr erstellen, sondern können einfach definieren, wann und wie die Seite umgestaltet werden soll, je nachdem, auf welchem Gerät sie aufgerufen wird.
Das Beispiel mit den verschiedenen Papierformaten zeigt, wie Websites in der heutigen Multi-Device-Welt gestaltet werden. Aber wie lässt sich dieser Ansatz jetzt in die E-Learning-Welt übertragen?
Responsives E-Learning-Design setzt auch auf dieselbe flexible Anordnung von Inhalten, bringt aber noch ein paar wichtige Aspekte mit rein. Diese zusätzlichen Aspekte wollen wir im Folgenden beleuchten.
Was macht E-Learning-Design für unterschiedliche Geräte so knifflig?
Anders als Webseiten, die vertikal scrollbar sind und das Umordnen der Elemente in eine lange Spalte leicht machen, bestehen E-Learning-Kurse klassischerweise aus Folien, die horizontal orientiert sind.
Auf diesen Folien sind die unterschiedlichsten Dinge angeordnet, von einfachen Textfeldern über Schaltflächen bis hin zu Multimedia-Interaktionen, die in der Regel alle in bestimmten räumlichen Relationen zueinander stehen müssen.
Responsives Web-Design funktioniert, weil die relative Anordnung der Inhalte auf einer Webseite meist egal ist, z. B. wenn der Text in einer statt in drei Spalten angezeigt wird oder ein Bild unter statt neben einem Textabschnitt steht.
Bei folienbasierten E-Learning-Kursen ist das anders. Wenn dabei Objekte plötzlich an anderer Stelle angezeigt oder auf kleineren Bildschirmen gar ausgeblendet werden, funktionieren die Kurse nicht mehr. Die Position der Elemente auf der Folie darf sich nicht ändern – unabhängig von der Größe und Ausrichtung des Bildschirms. Das war lange der Knackpunkt für E-Learning-Designer: Wie sollte man E-Learning-Einheiten (mit Elementen, die in bestimmten relativen Positionen zueinander stehen müssen) erstellen, die sich dennoch flexibel an unterschiedliche Geräte wie Laptops, Tablets und Smartphones anpassen?
Der folienbasierte Ansatz war lange Zeit der einzige, oder zumindest der bei Weitem vorherrschende. In den letzten Jahren haben immer mehr Anbieter Abstand von diesem Absatz genommen und sind dazu übergegangen, E-Learning in scrollbaren Webseiten-artigen Layouts anzubieten, sprich: statt interaktivem E-Learning quasi Mikro-Websites zu erstellen.
Diese Inhalte werden mit den Methoden und Strategien des responsiven Web-Designs erstellt, sie sind also automatisch für verschiedene Gerätetypen geeignet, da sie nicht mehr die fixen Positionierungsanforderungen haben.
Der Nachteil? Die Tools zur Erstellung dieser Lernangebote sind fürs Web-Design konzipiert, nicht fürs E-Learning-Design. Um responsives E-Learning auf diese Art zu erstellen, waren bis vor Kurzem also meist Programmierkenntnisse, mehr Zeit und mehr Web-Entwicklungstools erforderlich, als der durchschnittliche E-Learning-Designer hat.
Wie lösen wir das Problem?
Die kurze Antwort lautet: indem wir die Software für uns arbeiten lassen. Damit auch Sie sich den Löwenanteil der technischen Entwicklungsarbeit sparen können, haben wir von Articulate zwei revolutionäre Tools entwickelt.
Ein Web-basiertes Autorentool, das vollständig responsive E-Learning-Kurse möglich macht
Rise ist eine mehrfach ausgezeichnete App, mit der Sie direkt im Internet-Browser responsive E-Learning-Kurse erstellen können. Es macht sich die gleichen Technologien zunutze, auf die auch das responsive Web-Design setzt, geht aber über die dortigen Tools hinaus, da es gezielt für die E-Learning-Erstellung entwickelt wurde. Für das intuitiv bedienbare Tool sind keinerlei Programmierkenntnisse erforderlich. Sie können einfach Texte, Bilder und andere Medien einfügen und in zahlreichen vorgefertigten Lektionen darstellen: von einfachen Textblöcken und Bildern mit Unterschrift über beschriftete Grafiken und Ziehharmonika-Interaktionen bis hin zu Zuordnungsaufgaben und anderen Quizformen. Oder sie bauen aus den ebenfalls gebrauchsfertigen Blöcken ihre eigenen scrollbaren Lektionen.
Alle Lektionen in Rise sind von Hause aus responsiv, werden also auf Computern und Mobilgeräten gleichermaßen brillant dargestellt, hochkant oder querkant – ganz ohne Ihr Zutun. Das gibt Ihnen Freiheit im Design und den Teilnehmenden Freiheit in der Gerätewahl.
Der responsive Kurs-Player für Mobilgeräte
Rise ist das ideale Tool, um mit wenig Aufwand Kurse zu erstellen, die automatisch responsiv sind. Es gibt jedoch Fälle, in denen ein hochgradig individueller, interaktiver Kurs erforderlich ist – der folienbasiert besser funktioniert – der aber trotzdem auf allen Gerätearten gleichermaßen dargestellt werden können soll. Mit Articulate ist auch das kein Problem dank dem responsiven Kurse-Player in Storyline und Studio.
Der responsive Player erkennt, mit welchem Gerät jemand am Kurs teilnimmt, und passt die Darstellung automatisch an Bildschirmgröße und -ausrichtung an. So werden auf Smartphones z. B. Menüleisten und andere periphere Elemente ausgeblendet und die nötigen Bedienelemente in mobilgerätefreundlicher Art dargestellt. So können die folienbasierten Inhalte immer noch in ihrer intendierten Anordnung angezeigt werden. Der Player übernimmt die Hauptarbeit in der Anpassung und hält Ihnen bei der Entwicklung den Rücken frei.
Fazit
Zugriffe auf Online-Inhalte erfolgen inzwischen mehr über Mobilgeräte als über Computer. Das gilt auch für die Teilnahme an E-Learning-Kursen. So müssen wir davon ausgehen, dass die Zielgruppe unserer Kurse erwartet, dass unsere Angebote auf allen möglichen Geräten gleichermaßen funktionieren – und nicht nur funktionieren, sondern auch brillant aussehen und sich intuitiv bedienen lassen.
Mit den innovativen Lösungen von Articulate können Sie ihnen genau das bieten. In Articulate 360, unserem Rundum-sorglos-Paket für E-Learning-Designer, finden Sie alle Tools, die Sie dafür brauchen.
Neugierig geworden? Dann versuchen Sie es doch einmal mit unserer kostenlosen Testversion von Articulate 360.
