Responsiv: Dieses Wort wird schon seit einigen Jahren wie ein Schlagwort in der Branche verwendet, besonders im Bereich Webdesign. Aber was bedeutet es? Und noch wichtiger, was bedeutet es für Ihr E-Learning?
Sprechen wir zunächst darüber, was „responsiv“ im ursprünglichen Webdesign-Kontext bedeutet. Anschließend können wir darüber sprechen, wie das Konzept auf das E-Learning angewendet werden kann – und warum es wichtig ist.
Was ist responsives Design?
Angenommen, Sie wurden gebeten, ein Inhaltslayout für ein Blatt Papier in der Standardgröße A4 (210 x 297 mm) zu entwerfen. Es ist vergleichsweise einfach, da alle Abmessungen feststehen, richtig?
Fügen wir nun eine neue Anforderung hinzu: Wir möchten, dass Sie dasselbe Inhaltslayout auf eine Haftnotiz mit den Abmessungen 76 mm x 76 mm und ein Blatt Papier im A3-Format mit den Abmessungen 297 x 420 mm übertragen. Natürlich sollten alle Inhalte weiterhin vergleichsweise einfach lesbar sein, unabhängig von der Größe des Papiers, auf dem sie stehen. Wenn die Abmessungen nicht mehr fest sind, wird das Design etwas komplexer, oder?
Dies war im Wesentlichen die Herausforderung, denen sich Webdesigner gegenübersahen, als zu Beginn der 2000er-Jahre die Zahl der Mobilgeräte förmlich explodierte. Da es keine Verfahren für ein responsives Design gab, mussten Webdesigner mehrere Versionen der Website erstellen. Die Websites waren eine Kopie der ursprünglichen Website, wurden jedoch speziell für Benutzer von Mobilgeräten entworfen. Mehrere Websites auf diese Art zu verwenden, stellte einen zeit- und kostenaufwändigen Ansatz dar, um die steigende Nachfrage nach Inhalten für Mobilgeräte zu erfüllen. Da die Zahl der Geräte ständig stieg, wurde klar, dass es einfach nicht möglich war, diesen gerätespezifischen Ansatz an alle neuen Geräte oder Verwendungsszenarien anzupassen.
Der Begriff „responsives Design“ wurde vom Webdesigner und Webautor Ethan Marcotte in einem 2010 erschienenen Artikel in „A List Apart“ mit dem Titel „Responsive Web Design“ (Responsives Webdesign; nur auf Englisch verfügbar) eingeführt. Er verwendete diesen Begriff, um einen Webdesign-Ansatz für die Optimierung von Websites zu beschreiben, damit diese auf verschiedenen Geräten funktionieren. Kurz gesagt schlug Ethan Marcotte vor, dass Webdesigner responsives Design anwenden, um ein optimales Benutzererlebnis zu bieten. Dazu sollten die Inhalte und Features einer Website so beibehalten werden, dass Benutzer sie in Bildschirmen aller Größen und auf allen Geräten leicht lesen und per Navigation finden können.
Technisch gesehen wird ein responsives Design dadurch erreicht, dass fließende Raster, flexible Bilder und Medienabfragen (Teil der CSS3-Spezifikation) verwendet werden. Praktisch gesehen definieren Webdesigner einfach die Art und Weise, wie auf einer Website bei verschiedenen Grenzwerten für Bildschirmgröße und ‑auflösung Inhalte neu positioniert, hinsichtlich der Größe verändert, ausgeblendet oder getauscht werden. Beim responsiven Design leistet der Browser unter Anleitung von CSS die Schwerstarbeit.
Ein Webdesigner kann beispielsweise angeben, dass ein Inhaltslayout von einer Spalte in zwei Spalten geändert wird, abhängig von den horizontal verfügbaren Pixeln. Das bedeutet, dass der Inhalt in einer einzigen Spalte angezeigt wird, wenn er auf einem Gerät mit einem schmaleren Bildschirm erscheint, beispielsweise einem Smartphone. Der gleiche Inhalt würde auf ein breiteres Layout mit zwei Spalten erweitert werden, wenn Benutzer auf Tablets mit größeren Bildschirmen darauf zugreifen.
Das responsive Design löst die komplexe Aufgabe, die ich Ihnen zuvor gestellt habe – ein Inhaltslayout zu erstellen, das gleich gut auf einer Haftnotiz, einem Blatt A4-Papier und einem Blatt A3-Papier funktioniert. Sie müssen nicht mehr getrennte, angepasste Layouts für jedes Papierformat erstellen. Sie können nun definieren, wie das Layout abhängig vom Papierformat geändert werden soll. Sie müssen also nicht mehr für jedes mögliche Papierformat ein eigenes Design erstellen. Sie legen einfach nur die Regeln dafür fest, wie die Inhalte auf Einschränkungen durch unterschiedliche Papierformate reagieren.
Dieses Beispiel, ein Inhaltslayout an unterschiedliche Papierformate anzupassen zeigt, wie das responsive Design einige der Herausforderungen löst, die beim Bereitstellen von Webinhalten in einer Welt mit vielen verschiedenen Geräten entstehen. Wie hilft das responsive Design uns jedoch, die Aufgabe zu lösen, E-Learning-Kurse auf verschiedenen Geräten bereitzustellen?
Responsives E-Learning nutzt das gleiche Konzept der fließenden Anpassung wie das responsive Webdesign. Es gibt jedoch einige wichtige Unterschiede. Um diese besser zu verstehen, betrachten wir zunächst die spezifischen Herausforderungen beim Entwickeln von E-Learning-Inhalten für verschiedene Geräte.
Die Herausforderungen
Bei Webseiten wird ein vertikales Layout für auf- und abwärtsfließende Texte und Bilder verwendet, durch das Bildläufe durchgeführt werden können. Die meisten der heutigen E-Learning-Kurse folgt hingegen einer folienbasierten Konvention mit einem horizontalen Layout, das davon abhängig ist, dass Objekte eine feste Position relativ zu anderen Objekten einnehmen und beibehalten.
Folienbasierte E-Learning-Kurse bestehen häufig aus vielen verschiedenen Arten von Inhalten – von einfachen Folien mit Grafiken und Texten bis zu interaktiven Folien, die verschiedene Medien nutzen, über die Lernende taktil mit Inhalten interagieren.
Das responsive Webdesign funktioniert, da die relative Positionierung von Webinhalten eigentlich nicht wichtig ist. Die Inhalte ergeben beispielsweise auch dann noch Sinn, wenn der Text nicht mehr in drei, sondern nur noch in einer Spalte angezeigt wird oder wenn sich Bilder an anderen Stellen befinden.
Dies ist jedoch bei folienbasierten E-Learning-Inhalten nicht der Fall. Folienbasiertes E-Learning würde für die Lernenden keinen Sinn ergeben, wenn Objekte auf kleineren Bildschirmen die Position verändern oder ausgeblendet werden. Damit folienbasiertes E-Learning auf verschiedenen Geräten funktioniert, darf sich die Position der Elemente auf dem Bildschirm nicht ändern, unabhängig von der Bildschirmgröße oder dem Seitenverhältnis. Dies brachte die meisten Entwickler von E-Learning-Inhalten in ein Dilemma: Wie konnten sie E-Learning-Inhalte (mit Elementen, deren Positionen fest bleiben mussten) entwickeln, die sich fließend an die Desktops, Laptops, Tablets oder Mobiltelefone der Lernenden anpassen?
Obwohl für zahlreiche E-Learning-Inhalte das folienbasierte Design das Design der Wahl ist, haben sich einige Anbieter dafür entschieden, das folienbasierte Layout zugunsten von E-Learning-Formaten aufzugeben, die sich am Stil von Websites orientieren und in denen Bildläufe durchgeführt werden können. Im Grunde haben sie keine interaktiven E-Learning-Inhalte, sondern Micro-Websites entwickelt.
Da diese Art von Inhalten mithilfe von Tools und Strategien für das responsive Webdesign entwickelt wird, eignet es sich für Mobilgeräte und besitzt nicht die gleichen Anforderungen hinsichtlich der relativen Positionierung von Elementen wie folienbasierte Inhalte.
Der Nachteil dieses Ansatzes? Bei den Tools, die für responsives E-Learning verwendet werden, handelt es sich ursprünglich um Tools für die Webentwicklung und nicht um Tools für das Erstellen von E-Learning-Inhalten. Das bedeutete bis vor Kurzem, dass für die Erstellung webbasierter, für Mobilgeräte geeigneter E-Learning-Inhalte mehr Zeit, Programmierkenntnisse und Webentwicklungstools erforderlich waren, als die Mehrzahl der E-Learning-Entwickler besaß.
Wie bewältigen E-Learning-Autoren also die Herausforderungen, die mit der Entwicklung responsiver Kurse verbunden sind?
Die Lösungen
Hier stelle ich Ihnen kurz Autorentools vor, die dies leisten können – wenn Sie das nicht interessiert, können Sie zum nächsten Abschnitt überspringen. 😉
Die kurze Antwort auf diese Frage ist: Die Technologie muss die Schwerstarbeit für die Kursautoren übernehmen. Bei Articulate erreichen wir dies mithilfe zweier entscheidender Tools.
Ein webbasiertes Autorentool zur Erstellung vollständig responsiver E-Learning-Inhalte
Rise ist ein neues Autorentool, um responsive E-Learning-Inhalte direkt im Browser zu entwickeln. Es nutzt die gleichen Technologien, die auch Tools für das Erstellen responsiver Websites verwenden, um responsive Inhalte zu produzieren. Rise unterscheidet sich jedoch von diesen Tools dadurch, dass es für E-Learning entwickelt wurde. Es umfasst acht Arten von Lektionen, die alle äußerst einfach ausgebaut werden können. Die Kursentwickler fügen einfach Texte zu den vorgefertigten Video-, Zeitachsen-, Grafikbeschriftungs-, Sortier-, Prozess-, Quiz- und URL-/Einbettungslektionen hinzu. Sie können auch selbst angepasste Lektionen erstellen, indem sie Blöcke mit Texten, Medien und interaktiven Lerninhalten kombinieren.
Alle Lektionen in Rise sind responsiv und wurden speziell für Mobilgeräte entwickelt. Sie sehen gut aus und funktionieren auf jedem Gerät in jeder Ausrichtung, ohne dass Programmierarbeiten oder Optimierungen erforderlich sind. So haben die Lernenden ein optimales Benutzererlebnis.
Ein responsiver mobiler Kurs-Player
Rise ist das perfekte Tool, um responsive E-Learning-Inhalte in wenigen Minuten zu erstellen – viele Anbieter streben aber die Entwicklung hoch interaktiver, folienbasierter E-Learning-Kurse an, die auf sämtlichen Geräten funktionieren. Und mit dem neuen responsiven Kurs-Player in Storyline 360 und Studio 360 erreichen sie genau das.
Der responsive Player erkennt das Gerät, das der Lernende verwendet, und passt sich fließend an verschiedene Bildschirmgrößen und ‑ausrichtungen an. Auf Geräten mit kleineren Bildschirmen wird er ausgeblendet, um den auf dem Bildschirm für Inhalte verfügbaren Platz zu maximieren. Auf Smartphones blendet der responsive mobile Player beispielsweise Seitenleisten aus, entfernt überflüssige Browserelemente und stellt Playback-Steuerelemente bereit, die für Mobilgeräte optimiert wurden. Am wichtigsten ist jedoch, dass der responsive mobile Player folienbasierte E-Learning-Inhalte so beibehält, wie sie entwickelt wurden. Da die Objektpositionen fest sind, trägt der Kurs-Player die Hauptlast, sie an das Gerät des Lernenden anzupassen, nicht der Ersteller des Kurses.
Warum ist responsives Design für E-Learning wichtig?
Da wir alle Mobilgeräte immer stärker nutzen und immer neue Internet-kompatible Geräte auf dem Markt erscheinen, ist es nicht mehr realistisch anzunehmen, dass Lernende nur auf Desktopcomputern auf Kurse zugreifen. Wir leben in einer mobilen Gesellschaft und wir alle sind mobil Lernende.
Angesichts des hohen Entwicklungsstands der Märkte für Mobilgeräte und Tablets sowie der großen Auswahl an Mobilgeräten ist es nicht überraschend, dass Anbieter Hindernisse für unsere Lernerfahrungen beseitigen müssen und wir dies auch von ihnen erwarten. Wir erwarten Kurse, die gut aussehen und die auf jedem Gerät intuitiv funktionieren, das wir verwenden.
Nutzen Sie die kostenlose 30-Tage-Testversion von Articulate 360, um Rise und die responsiven Features in Storyline 360 und Studio 360 zu testen.
Um zukünftige Updates nicht zu verpassen, abonnieren Sie meinen Blognewsletter, und vergessen Sie nicht, mir auf Twitter zu folgen.
