Der Unterschied zwischen adaptive und responsive Webdesign. Teil 2.
Was ist ein „Responsive Website“-Design?
Der Name „Responsive Webdesign“ ist durch die Analogie mit der „Responsive Architecture“ angelehnt. Die responsive Architektur ist die Anpassung der Form und die Farbe des Gebäudes an den Zustand der Umwelt.
Im Jahr 2011 wurde das Buch “Responsive Web Design” von Ethan Marcotte veröffentlicht. Der Autor beschrieb eine systematische Anpassungsmethoden von Webseiteninhalten und die Problemlösung der Abbildung auf alte Browserversionen und auf veraltete Endgeräte.
Die Basis von responsiven Webdesign ist:
Das heißt: flüssige Seitenlayout + flüssige Medienelemente durch HTML5+CSS3.
Was ist der Ansatz „progressive improvement“?
Progressive Improvement ist eine Strategie zur Entwicklung von Webseiten, die sich auf der Verfügbarkeit von Inhalten auf der niedrigsten Ebene (html) basiert. Höhere Ebenen, wie CSS und JavaScript sind nur „Add-ons“. Das heißt, dass man sich bei der Entwicklung nicht auf moderne Browsern konzentriert. Es werden einfache Inhalte für ganz alte Browser umgesetzt und der modernere Content für gängige Browser wird nachgerüstet.
Was ist der Ansatz „Mobile First“?
Der Begriff „Mobile First“ ist eine Strategie im Webdesign. Laut diesem Konzept wird eine für Mobilgeräte optimierte Version zunächst erstellt und nachdem für die Tablets, stationären PCs, Konsolen Fernsehgeräten und anderen spezifischen Endgeräten erweitert. Der Ansatz von „Mobile First“ ist ein Trend, weil immer mehr Nutzer mit ihren Smartphones oder Tablets im Internet surfen und nicht mit dem Desktop-PC.
Was ist ein adaptives Website-Design?
Adaptives Website-Design ist nicht nur CSS und HTML Code, sondern auch eine Webentwicklungsstrategie, die Best Practices aus den Konzepten „Mobile First“ und „Progressive Improvement“ beinhaltet. Die Anpassung des Layouts wird mithilfe der Technik des Responsive Designs und durch neue Web-Technologien ergänzt.
Das adaptive Design ist das Beste in einem Ansatz. Adaptives Design verwendet reines HTML als Grundlage für die Website-Struktur. Die weiteren Verbesserungen des Layouts werden durch CSS + JavaScript (JS) eingebaut.
Mal angenommen, dass wir eine Funktion haben, die auf moderne Browser funktioniert. Das bedeutet, dass wir diese Funktion auch universell auf andere ältere Geräte verwenden wollen. Auch wenn diese Funktion auf anderen Geräten nicht direkt unterstützt wird. Hier hilft die Backward Compatibility (Abwärtskompatibilität Link zu https://www.w3.org/People/Bos/DesignGuide/compatibility.html) Strategie von Adaptives Website-Design.
Schlussfolgerung
Zusammenfassend kann man sagen, dass es wichtig ist, ein responsives und adaptives Webdesign nicht zu verwechseln.
Responsives Webdesign:
- Layoutaufbau: % + media-queries + %-media
- In Verwendung: flüssiges Seitenlayout, flüssige Medienelemente, media-queries
Adaptives Webdesign:
- Layoutaufbau: % + media-queries + %-media + JavaScript + magic
- In Verwendung: flüssiges Seitenlayout, progressive improvement, backward compatibility
Also lass uns die Websites so entwickeln, dass der Nutzen und die User-Experience auf jeder Bildschirmgröße beibehalten wird. Nehmen Sie heute noch Kontakt auf.
