EMIL für Lehrende

9. Gendergerechte, barrierefreie und/oder responsive Inhalte erstellen

9.3. Hinweise zum responsiven Design von Inhalten für Smartphones

Nicht immer kann oder muss EMIL auf einem hochaufgelösten Desktop-Monitor, Tablet- oder Laptop-Display dargestellt werden. Ständig verfügbare und hochmobile Endgeräte wie Smartphones oder kleine Tablets sind über Browser-Apps dazu ebenfalls in der Lage. Um auf verschiedenen Auflösungen, von Monitoren bis zu Smartphones, dargestellt werden zu können, muss ein responsives - d.h. ein sich anpassendes - Design der Inhalte Ihres Kursraums beachtet werden.

Gründe für ein responsives Design von Inhalten

  • Die Nutzung von kleineren Displays durch Studierende kann budgetär oder technisch bedingt sein: Zu Beginn der Pandemie im SS 2020 stimmten z.B. ca. 7,5% der Studierenden teils oder entschieden gegen die Aussage Mein Endgerät (PC, Tablet, etc.) ist für digitale Lehre geeignet.” (Aus der Umfrage Sommersemester 2020. Online-Lehre an der HAW Hamburg).
  • Ständig verfügbare Endgeräte wie Smartphones oder kleine Tablets sind gut geeignet, um Wartezeiten zwischen Veranstaltungen oder Pendelzeiten in öffentlichen Verkehrsmitteln zur Bearbeitung von Studieninhalten zu nutzen. Dies entspricht ebenfalls einem Trend zum mobile Learning↗, wobei Smartphones ergänzend zu anderen Endgeräten eingesetzt werden.

  • Durch ihre Mobilität sind Smartphones ebenfalls gut geeignet, um Inhalte in den Kontext eines physischen Orts oder einer Tätigkeit einzubinden. Sollten also z.B. Informationen vor Ort verfügbar sein, z.B. bei Exkursionen, Ausstellungen, im Labor oder der Werkstatt, dann bietet sich das Smartphone mit responsiven Inhalten an. Ein Beispiel wären z.B. anleitende Texte für mobile Laborexperimente (z.B. via einer Smartphone-App wie PhyPhox↗).
  • Smartphones sind weiterhin mit teils sehr guten Kameras und Mikrofonen ausgestattet. Für Exkursionen, Experimente im Freien, Labor- und Werkstatttermine können deshalb leicht transportierbare und als Aufzeichnungsgerät eingesetzte Smartphones zur mobilen Dokumentation und Medienerstellung durch Studierende deshalb praktischer sein als Laptops. Dies kann z.B. geschehen über das Panopto-Plugin oder die "Audio aufnehmen"-Funktion des Texteditors (2-minütige Audioclips). Falls von den Studierenden via Smartphone erstellte Inhalte geteilt werden sollen, ist ein responsives Design ebenfalls praktisch.
  • Synchrone Kommunikation über Audio- oder Textchat gehört zur routinierten, täglichen Nutzung von Handys und Smartphones dazu. Es liegt nahe, dies für Absprachen, Planungen oder kleinere Diskussionsgruppen zu nutzen, sofern dazu keine weitere parallele Mediennutzung nötig ist. In der synchronen Kommunikation hat Moodle/EMIL leider ein Defizit, so dass für dieses Einsatzfeld begleitend auf andere Apps zurückgegriffen werden muss.

Responsive Inhalte in EMIL/Moodle erstellen

Generell unterstützt EMIL/Moodle responsive Inhalte, sofern diese im Texteditor erstellt werden - also in quasi allen Texteingabefeldern in EMIL. Sollten für die Darstellung oder Bearbeitung externe Programme (z.B. Excel, Word etc.) benötigt werden, achten Sie darauf, dass es spezielle, auf allen Smartphone-Betriebssystemen verfügbare Versionen dafür gibt.

Die responsive Darstellung stößt an ihre Grenzen, wenn eine besondere didaktisch-strukturelle Aufbereitung der Inhalte nötig ist (z.B. die Rezeption von komplexen Diagrammen oder von umfangreichen Programmstrukturen, das Editieren oder Annotieren von Texten) oder wenn nicht-responsive Medien wie z.B. PDFs, detailreiche Bilder oder hochaufgelöste Videopräsentationen verwendet werden (müssen).
In diesem Fall können z.B. lediglich ggf. einzelne Abschnitte des Inhalts responsiv verwendet werden. Generell muss hier abgewogen werden zwischen Aufwand, Nachfrage und didaktischem Verwendungszweck.


  • Texte: Über den Texteditor erstellte Texte und Textseiten werden umgebrochen, die Zeichen bleiben aber in einer lesbaren und einstellbaren Größe erhalten.
  • Bilder: Grafiken werden entsprechend der Ansicht proportional verkleinert, sollten aber entsprechend der originalen Auflösung per Zwei-Finger-Touchgeste vergößert werden können.
    Achtung: Bilder als Dateianhänge werden, abhängig vom Browsertyp, meist nicht responsiv dargestellt.
  • Videos: Videos werden entsprechend der Ansicht proportional verkleinert. Dies kann Videos mit einer essenziellen Darstellung detailreicher Präsentationen in der Brauchbarkeit einschränken, auch wenn sich hier wie bei Bildern bei manchen Smartphones Ausschnitte des Videos ggf. per Zwei-Finger-Touchgeste vergrößern lassen.
  • Audios/Podcasts: Dem Medium entsprechend gibt es hier keine Einschränkungen, achten Sie hier allerdings auf qualitativ hochwertige Audioaufnahmen.
  • Tabellen: Im Texteditor erstellte Tabellen werden nicht verkleinert und bleiben in beiden Achsen scrollbar. Für die Darstellung von Excel-Tabellen empfehlen sich ggf. spezielle Smartphone-Apps↗.
  • PDF: PDFs können durch ihre fixe Auflösung und Größe problematisch sein und werden in EMIL nur in bestimmten Aktivitäten angezeigt; üblicherweise stellt der Browser sie dann alternativ separat dar oder lädt sie zur Ansicht über einen externen PDF-Viewer herunter.
    Längere PDF-Fließtexte sind ggf. durch text-to-speech-Funktionen (TTS) nutzbar, über die das Smartphone sie den Nutzenden vorliest.
Wenn es um Mobile Learning, also das Lernen "unterwegs", in kleinen zeitlichen Abschnitten und ggf. mit Ablenkungen aus der Umgebung geht, dann sind von der Lernzieltaxonomie eher die unteren Stufen von "Erinnern" bis eventuell "Verständnis" umsetzbar. Von der Strukturierung der Inhalte sind kleine, leichter erfassbare Lerneinheiten zu bevorzugen, in die nach Unterbrechungen leicht wieder eingestiegen werden kann.
Ggf. können auch einzelne, geeignete Themenabschnitte im Kursraum als technisch und didaktisch geeignet für die mobile Nutzung gekennzeichnet werden.
Generell ist die Voranstellung von Leitfragen, die bei der Rezeption von Texte und Videos helfen, empfehlenswert.

Zu beachten ist, dass unterschiedliche Betriebssysteme der Smartphones sowie unterschiedliche Browsertypen und -versionen zu unterschiedlicher Darstellung der Inhalte und Nutzbarkeit von Funktionen führen können (z.B. Videoclip-Aufnahme-Funktion des Texteditors).


Die eigenen Kursräumen in einer Smartphone-Ansicht erleben


Sie können Ihre Kursräume im Browser Ihres Smartphones testen. Einige Browser ermöglichen das Einstellen der Ansicht von Webseiten auf typische Smartphone-Auflösungen, so dass Sie in mehreren Browsertabs mit verschiedenen Ansichten Ihres Kursraums arbeiten können.
Verwenden Sie hierzu z.B. die eingebauten Entwickler-Tools von Firefox oder Chrome:

Testoption von Webinhalten in kleineren Bildschirmgrößen über Firefox 97.0 (MacOS BigSur)


Ansicht des EMIL-Dashboards in einer Smartphone-Auflösung über Firefox 97.0 (MacOS BigSur).
Die Darstellung der Menüs und Bedienelemente passt sich aktiv der Auflösung an.



Weitere Ressourcen zur technischen und didaktischen Gestaltung von responsiven Inhalten