Adaptive Webdesign (AWD) fördert die Erstellung von mehreren Versionen einer Website. Dabei wird darauf geachtet, dass diese Versionen besser zu dem jeweiligen Gerät des Nutzers passen. Im Gegensatz zu anderen Webdesigntechniken wird nicht nur eine einzelne Version erstellt. Die Strategien des adaptiven Webdesigns können mit dem Responsive Webdesign (RWD) kombiniert werden.
Definition
Beim Adaptive Webdesign handelt es sich um einen Prozess der serverseitigen Erkennung, bei dem Designlayout und Größe für die Anzeige ausgewählt werden. Dabei können alle Arten von Webdesignlayouts verwendet werden. Das Adaptive Webdesign liefert verschiedene Versionen der Website für die diversen Geräte auf Grundlage der gängigen Bildschirmgrößen und Auflösungen. Der einzige Unterschied liegt hierbei in der Art und Weise, wie das Design aus der Sicht der Geräte betrachtet wird.
Techniken
Das Adaptive Webdesign verwendet mehrere Seitenlayouts für eine einzelne Website und greift dabei manchmal auch auf Progressive Enhancement (PE) zurück. Das Modell ist ein Mobile-Separate-Layout und steht im Gegensatz zu Mobile first und der progressiven Weiterentwicklung von Responsive Webdesign.
Mobile separate und PE
Beim Mobile-separate-Konzept steht im Gegensatz zum Mobile-first-Konzept ein separates Basislayout für die mobilen Geräte zur Verfügung und nicht bloß ein Einzellayout.
Da die Browser von Mobiltelefonen nicht fähig sind, JavaScript oder Medienanfragen zu verstehen, ist es empfehlenswert ein grundlegendes mobiles Layout zu erstellen und PE für Smartphones zu verwenden. Somit soll sich nicht mehr auf anmutige Verschlechterungen verlassen werden, nur um eine komplexe und meist bildschwere Website zum Laufen zu bringen.
Technologische Fortschritte
Für das Webdesign ist adaptives Webdesign ein breiter Ansatz, der seinen Fokus auf die Eignung für eine Vielzahl von Schnittstellen legt, anstatt sich auf das Format zu beschränken, welches für ein Desktopdisplay vorgesehen ist. Dies ist in der heutigen Zeit besonders bedeutsam, da das Smartphonesuchvolumen das Desktopsuchvolumen in zehn Ländern bereits überholt hat und das, obwohl die Tabletsuchanfragen in die Kategorie Desktop einfließen. Durch die neu herausgebildeten Technologien hat sich das Gesicht des Webdesign geändert und AWD wurde als wertvolles Konzept neues Leben eingehaucht. Dadurch ist Adaptive Webdesign eine verbreitete Praxis im Web und wird bei ca. 70.000 neuen Websites täglich verwendet.
Fluid-motion Drag-&-Drop-Editoren
Fluid-motion-Editoren sind keine HTML 5-eigenen Drag-&-Drop-Editoren und können deshalb nicht in Fluid Design Seiten verwendet werden. Sie ermöglichen eine flüssige Bewegung und die Platzierung von Objekten auf einem beliebigen Platz der Website. Außerdem basieren sie auf der absoluten Basierung der Objekte nach dem kartesischen XYZ-Koordinatensystem. Aktuell verwenden die beiden Editoren WIX und Flux Live dieses System und das Layout.
Vorteile von Editor und Layout
Diese Editor- und Layoutart weist einige Vorteile auf und ist das Standardlayout der meisten High-End-Grafikdesignprogramme.
- Fließende Bewegung: Ermöglicht ein schnelleres Design-Layout.
- 3D-Layout: Layout basierend auf dem kartesischen Koordinatensystem XYZ.
- Mehrseitiges Layout: Diese Editoren können Layouts für gängige Größen von mobilen Geräten enthalten.
- Mobile separate: Individuelle Layouts für mobile Geräte.
- Print: ideal für den Onlinedruck.
- Design-Layout beibehalten: Ohne ein Fluid-Design hat die Größenänderung der Seite keinen Einfluss auf das Design.
- Zoom: Manchmal wird die Seite besser in einem gezoomten oder skalierten Layout dargestellt.
Layout
Vier moderne Arten von Layouts werden im adaptiven Modell verwendet: Standard, Responsive, Scaled sowie Flux and Zoom
Standard
Adaptive Webdesign registriert die Bildschirmgröße und lädt daraufhin die entsprechenden Layouts. In der Regel würde eine adaptive Seite für sechs gängige Bildschirmbreiten entworfen werden. In den vergangenen Jahren wurde es populär, adaptive Designlayouts mit zwei Designs, Desktop und mobil, zu entwickeln. Dadurch wird bei der Desktopversion die Usability verbessert und eine maßgeschneiderte mobile Website ermöglicht.
Responsive
Beim Adaptive Responsive Layout werden weniger Seitenlayouts verwendet als beim klassischen. Des Weiteren gilt dieser Ansatz aufgrund der sich ständig ändernden Bildschirmgrößen der Geräte als weniger zukunftssicher als Responsive Design. Im Responsive Design werden die Seiten formatiert, wenn das naheliegende Layout bereitgestellt wird. Danach reagiert die Seite auf das Gerät des Nutzers.
Scaled
Hierbei wird ein flüssiges Designlayout verwendet und die Breite des Ansichtsfensters skaliert. In dieser Art können absolute Punkte und Pixel verwendet werden.
Modell
Dieses Layout erfordert absolute Einheiten, wie Punkte oder Pixeln. Typischerweise werden zweiseitige Layouts verwendet: zum einen die Desktopversion und zum anderen die mobile Version. Dabei werden CSS3-Medien-Abfragen und Haltepunkte verwendet, um die Website zu skalieren und somit an das Gerät des Nutzers anzupassen. Somit kann das nächstgelegene Layout verkleinert oder vergrößert werden und die Seite bleibt 3D im kartesischen XYZ-Koordinatensystem.
Layers (digitale Bildbearbeitungs)-basierte Fotoeditoren verwenden dieses Modell für die Darstellung des Designs in der Perspektive.
Layout
Es werden zwei oder mehr mittelgroße Layouts verwendet, die zwischen +/- 150 Pixeln schwanken. Es ist bereits eine Webdesignsoftware vorhanden, die Adaptive Page Serving und adaptive visuelle Editoren für die Unterstützung im Layout und Design bietet. In der Regel benötigt es weniger Zeit um zwei Designs im adaptiven Flux zu erstellen als im responsive Design. Dies liegt daran, dass die adaptiven Seiten im Flux nicht an die Regeln des Grid Responsive Webdesigns gebunden sind.
Vorteile
Adaptiver Flux & Zoom löst die meisten Probleme der anderen Webdesignlayouts und ist dabei gleichzeitig das einzige Layout, das Layers auf allen Plattformen unterstützen kann.
Popularität
Durch die neu auf den Markt kommenden adaptiven HTML-Editoren stellt das Adaptive Webdesign eine beliebte Alternative zum Responsive Webdesign dar, da die Schwierigkeiten, mehrere Seitenlayouts zu erstellen und die Seiten richtig zu bedienen, von der Software bewältigt werden.
Weiterführende Links
Internet
https://digitaler-mittelstand.de/business/ratgeber/adaptives-design-die-alternative-zur-responsiven-gestaltung-29655
https://entwickler.de/online/web/responsive-design-adaptive-design-unterschied-191160.html
https://entwickler.de/online/ux/multi-device-design-responsive-oder-adaptive-212750.html
Bücher
https://www.thalia.de/shop/home/artikeldetails/ID42757139.html?ProvID=11000522
https://www.amazon.de/Adaptive-Design-English-John-Garvey-ebook/dp/B07FF2W93F/ref=sr_1_3?ie=UTF8&qid=1533878798&sr=8-3&keywords=adaptive+web+design