WebCampus auf der PERSONAL Nord 2018

Responsive Design – So machen Sie’s richtig

Mittwoch, 11. April 2018 - 0 Kommentare - Kategorie: Tipps & Tricks

Ein wichtiger Erfolgsfaktor für einen E-Learning Kurs besteht heutzutage darin, mobil erreichbar zu sein, so dass die Nutzer jederzeit und überall darauf zugreifen können. Damit dies reibungslos gelingt, ist es wichtig, die Webseite den unterschiedlichen mobilen Geräten anzupassen. In diesem Artikel erfahren Sie 6 Regeln, wie Ihnen dies mittels „responsive Design“ gelingen kann!

Responsive Design – So machen Sie’s richtig

Ob Tablet, Smartphone oder am Computer: Unsere heutige Gesellschaft ist dauerhaft online – ein Grund, warum E-Learning Kurse immer wichtiger werden. Doch mit dem Erstellen eines einzelnen Designs für den Online-Kurs ist es oftmals nicht getan. Denn die Web-Ansicht des Kurses verändert sich je nach Art des genutzten Gerätes und kann enorm verzerrt werden. Um dies zu vermeiden und sicher zu stellen, dass die Webseite sich den Geräten anpasst, sind speziell darauf ausgerichtete Design-Tools optimal geeignet. Dabei kann man grundsätzlich zwischen zwei Arten von Webdesign unterscheiden – „adaptive“ und „responsive“ Design. In einem unserer letzten Artikel wurden die Unterschiede sowie Vor- und Nachteile zwischen diesen zwei Arten genauer dargestellt. Nun wollen wir uns dem responsiven Design etwas genauer zuwenden und teilen mit Ihnen sechs Regeln für eine erfolgreiche Anwendung.

1. Fokus auf M-Learning

Potenzielle Nutzer möchten Ihre Online-Trainings immer und überall durchführen können. Gerade deshalb steht der Begriff M-Learning immer mehr im Fokus.  Das „M“ steht für „mobil“ und bezeichnet die Möglichkeit, Trainings auch am Smartphone oder Tablet durchzuführen und nicht mehr nur „klassisch“ am Laptop oder PC. Dies bringt Herausforderungen für die Webseite, da diese optimal an die verschiedenen Bildschirmgrößen angepasst werden muss. Hier kommt die Lösung des responsive Designs ins Spiel, damit die E-Learning Nutzer auf allen Geräten ein effektives und erfolgreiches Lernerlebnis haben können!

2. Je einfacher, desto besser

Wenn es um die Navigation auf E-Learning Plattformen geht, sollte grundsätzlich auf ein simples, leicht zu erschließendes Format gesetzt werden. So kann garantiert werden, dass die Nutzer das gesuchte Themengebiet schnell finden, ohne lange Zeit für die Suche aufwenden zu müssen. Vor allem bei Smartphones muss auf eine bildschirmgerechte Anpassung des Menüs geachtet werden. Dafür sollten einzelne Themenblöcke zunächst gebündelt in Kategorien erscheinen. Wenn der Nutzer dann im nächsten Schritt auf die gesuchte Kategorie klickt, erscheinen alle passenden Unterkategorien. Auf diesem Wege kann das gesuchte Training ohne großen Zeitaufwand gefunden werden. Einfach, aber effizient!

3. Schnelle Ladegeschwindigkeit der Webseite

Mit hoher Wahrscheinlichkeit wollen Nutzer, die mobile Geräte für ihren E-Learning Kurs nutzen auf diesem Weg Zeit sparen. Eine Möglichkeit die Zeitersparnis zu vergrößern, bietet die Reduktion der Ladezeiten Ihrer E-Learning Webseite. Darunter fällt beispielsweise die Verkleinerung von datenintensiven Grafiken und Bildern, welche lange Zeit zu laden brauchen (vor allem bei schwacher Verbindung). Am besten geeignet sind dafür JPEG oder GIF Formate für Bilder, wohingegen PNG Dateien eher ungeeignet sind. Achten Sie außerdem darauf, dass auf den verschiedenen Geräten keine Verzerrungen der Bilder oder ein Mangel der Qualität auftreten.

4. Nur das Nötigste

Um die vorherigen drei Punkte zu unterstützen und das „responsive Design“ der Webseite erfolgreich umzusetzen, sollten nur die wichtigsten Inhalte mit in das Training übernommen werden. Darunter fallen außer Bilder und Grafiken auch Texte und andere Informationsquellen. Überlegen Sie bei allen Inhalten ganz genau, ob sie die Ladezeit und den zusätzlichen Platz in Ihrem responsiven Kurs Wert sind und verbannen Sie jegliche überflüssige Information.

5. Leserliche Schrift

Besonders wichtig ist eine Schriftart und Schriftgröße, die für den Nutzer leicht leserlich ist. Andererseits sollte sie auch nicht zu groß sein und den gesamten Bildschirm einnehmen. Der richtige Mittelweg ist hier gefragt, weshalb eine Schriftgröße von 12 oder 14 pt. empfohlen wird. Auch Buttons sollten größentechnisch nicht zu sperrig ausfallen, um Klickfehler der Nutzer zu vermeiden. Wenn sie Hyperlinks nutzen, bietet es sich zudem an, diese in einer anderen Farbe erkennbar zu machen, um sie vom üblichen Text abzugrenzen.

6. Frühzeitige Planung und Testläufe

Responsive Webdesign sollte immer frühzeitig mit in die Planung für einen E-Learning Kurs einbezogen werden, da es kompliziert werden kann, Änderungen im Nachhinein durchzuführen. Beachten Sie dabei alle vorher genannten Faktoren, wie Einfachheit, Schriftgröße, Navigation und Bildgröße um eine schnelle Ladezeit zu garantieren. Des Weiteren ist es notwendig, entsprechende Testläufe auf den unterschiedlichen Geräten wie Smartphone, Laptop und Handy durchzuführen und bei Bedarf weitere Überarbeitungen am Design vorzunehmen. Kooperieren Sie dabei gerne mit Teammitgliedern und Kollegen, um beispielsweise die Button-Größe zu testen und mehrere Meinungen zu haben. So können Sie die optimalen Anpassungen auf Ihrer E-Learning Webseite durchführen.
Ein weiterer Tipp, um Ihre Webseite auf responsive Design zu überprüfen, sind kostenfreie Tests, bei denen Sie nur Ihren Link einsetzen müssen (Zum Beispiel hier).

 

Abschließend kann festgehalten werden, dass heutzutage immer mehr Menschen mobile Lernmöglichkeiten in Anspruch nehmen und in den nächsten Jahren voraussichtlich noch viele weitere dazu kommen werden. Aus diesem Grund kann keineswegs auf eine Anpassung der E-Learning Webseite für alle möglichen Geräte verzichtet werden. Denn nur so kann ein qualitativ hochwertiges, ganzheitliches Lernerlebnis für die Nutzer sowie ein langfristiges Wachstum der Branche garantiert werden.

 


Quellen:
  1. The 8 Golden Rules Of Responsive eLearning Course Design


Kommentar verfassen:

Kommentar absenden

E-Learning Newsletter

Wir informieren Sie quartalsweise über aktuelle Themen und Trends im E-Learning.

Newsletter Anmeldung

E-Learning Feed

Abonieren Sie unseren RSS Feed

Archiv

WebCampus

Heimat Deines Wissens.

Alphabrik GmbH
Telefon: +49 (0) 40 30 20 803 0
Telefax: +49 (0) 40 30 20 803 99

Mitglied im BITKOM e.V.

Innovationspreis IT - Best of 2016
WebCampus made and hosted in Germany
DIQP Service Qualität 2017 / 2018: sehr gut
Kontaktieren Sie uns

Sie finden uns auch auf:

© 2017 Alphabrik GmbH