Responsive vs. Adaptive Design

Mittwoch, 14. Februar 2018 - Kategorie: E-Learning Trends

Das Internet wird immer mobiler - das bedeutet auch, dass jeglicher Online-Content mobil anschaubar sein sollte. Damit Ihre (E-Learning) Inhalte stets optimal angezeigt werden, sollten Sie entweder responsives oder adaptives Webdesign verwenden. Was das genau ist, welche Unterschiede es gibt und was die jeweiligen Vor- und Nachteile sind, erfahren Sie in diesem Artikel.

Responsive vs. Adaptive Design

Jeder Onlineauftritt muss heutzutage unter der Berücksichtigung einer sehr fundamentalen Frage erstellt stellen: Wie stelle ich es an, dass mein Webauftritt auf verschiedenen mobilen Endgeräten optimal dargestellt wird? Die ansteigende Anzahl von verschiedenen mobilen Endgeräten (Smartphone, Tablet, Laptop, PC, Smartwatch usw.) erhöht einerseits die Möglichkeit des mobilen Zugriffs auf Ihren Inhalt extrem. Damit dieser Vorteil andererseits jedoch wirklich so positiv wie gewünscht ausfällt, ist es wichtig, dass der angezeigte Inhalt auch zum Screenlayout des einzelnen Endgeräts passt. Hierbei ist es ganz egal, welcher Inhalt dargestellt werden soll: Wollen Sie also z.B. Ihre Website auch mobil zugänglich machen oder geht es vielleicht um einen spannenden E-Learning Kurs, der zum Mobile Learning bereitgestellt werden soll? Hierbei ist anzumerken, dass in 2017 bereits 47% aller Firmen Mobile Learning auf mobilen Endgeräten in ihr offizielles Training integrieren.1 Wichtige Gründe, wieso Mobile Learning ebenfalls eine gute Idee für Sie sein könnte, gibt es hier

Jetzt aber zurück zum ursprünglichen „Problem“: In diesem Artikel möchten wir Ihnen den Unterschied zwischen „Responsive Design“ und „Adaptive Design“ erklären. Beide Designarten stellen Möglichkeiten dar, Ihren Online-Content mobilfreundlich zu veröffentlichen. Neben einer generellen Begriffserklärung, möchten wir Ihnen ebenfalls Pros und Cons für beide Techniken mitgeben, sodass Sie eine fundierte Entscheidung für Ihre individuelle Situation treffen können.2

Damit Ihr Mobildesign nicht aussieht, wie auf diesem Bild, müssen Sie sich entscheiden: „Responsive“ oder „Adaptive“ Design?3


„Responsive“ Design

Wie der Name bereits andeutet, handelt es sich bei diesem Design, um ein Webdesign, das auf die jeweiligen Screenbedingungen des einzelnen Endgeräts „antwortet“. Somit wird das Design auf eine bestimmte Art und Weise programmiert, die es erlaubt, dass ein und dasselbe Layout an verschiedene Bildschirmgrößen angepasst werden kann.4

 

Das responsive Mobildesign passt den Inhalt an die Screengröße des jeweiligen Gerätes an.

 

PROS3+4 CONS3+4
  • Nur ein Layout benötigt

     Einfacheres Development für den Webdesigner
     Einfacheres Verständnis für die Lernende, wenn die       Oberfläche stets identisch aussieht

  • Veraltete Browser und/oder Endgeräte benötigen zu lange, um responsive Designs zu laden
  • Schnelle Customization möglich
  • Verschiedene User Experiences in Desktop und Mobil Anwendungen sind oft schwer in einem Layout zu vereinen
  • Änderungen müssen nur einmal vorgenommen werden
  • Verlängerte Ladezeit möglich (am Desktop sowie am mobilen Endgerät)
  • Geringere Entwicklungskosten
  • Elemente werden z.T. verschoben
  • Geringere Entwicklungsressourcen
  • Eventuell geschaltete Werbung kann durch die Größenanpassung „verschwinden“
  • Suchmaschinenfreundlich
 

 

„Adaptive“ Design

Beim „Adaptive“ Design, werden einzelne Layouts an die Bedingungen der verschiedenen Endgeräte angepasst. Wenn also z.B. von fünf verschiedenen Endgerätarten ausgegangen wird, werden auch fünf verschiedene Layouts erstellt. Öffnen Sie nun Online-Content, wird der vorhandene Screen-Platz identifiziert und dann das passende Layout ausgewählt. Im „Responsive“ Design würde an dieser Stelle das generelle Layout an die jeweilige Größe angepasst werden.3

Beim adaptiven Design werden verschiedene Layouts für verschiedene Devices genutzt.

 

PROS3+4 CONS3+4
  • schnelle Ladezeiten
  • höhere Kosten und benötigte Ressourcen
  • Verbesserte User Experiences, da diese jweils auf das einzelne Gerät angepasst werden können
  • Je mehr einzelne Layouts bestehen, desto höher wird die Komplexität
  • ermöglicht erhöhte Reichweite
  • Ist nicht für alle mobilen Endgeräte möglich
  • ermöglicht extensive Kontrolle über das gesamte Design
  • Änderungen müssen in jedem Layout einzeln geändert werden
  • Mobile Endgeräte können das beste Layout individuell wählen
  • Suchmaschinen haben oftmals Probleme damit identische Inhalte an verschiedenen Stellen anzuerkennen
  • Eventuell geschaltete Werbung kann durch Nutzerdaten von Smart Devices optimiert werden
 

 
Quellen:
  1. 7 Surprising Mobile Learning Statistics eLearning Professionals Should Know
  2. Multi-Device Elearning: Responsive eLearning Design or Adaptive - What's the Best Choice?
  3. Adaptive vs. Responsive Design
  4. Responsive VS Adaptive Mobile Authoring - Pros and Cons

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