Teil 2: Wissen Sie was der Unterschied zwischen adaptiven und responsiven Web Design ist?

Lesezeit ist circa 5 Minuten. Keine Zeit jetzt zu lesen? Kein Problem! Dann share es und lies das später durch.

Im zweiten Teil des Blog-Eintrag "Adaptive Web Design vs. Responsive Web Design, wo liegt der Unterschied?" werden wir folgende Begriffe präzisierenm, was genau "Respinsvie Website"-Design ist.

 

Was ist “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. 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 Webdesigns ist:

  • flüssige Seitenlayout,
  • media-queries (Medienanfragen),
  • flüssige Medienelemente (Video und Bilder).

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 / Abschluss

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.

Hier kommen Sie zu dem ersten Teil des Artikels.

Die positiven Erlebnisse sind das wichtigste Teil einer nachhaltigen Interaktion auf der Webseite.

Möchten Sie eine Webseite erstellen, die Besucher zu Kunden macht?

Sprechen Sie um uns an!

Anfrage schicken
Kotenlose Beratung anfordern

bit.Pakete

Schauen Sie sich noch andere Leistungen an.