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

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

Die Begriffe „adaptives Webdesign“ und „responsives Webdesign“ finden eine breite Anwendung. Hinsichtlich der Unterschiede zwischen diesen zwei Ansätze sind die Webdesigner und Web-Entwickler nicht komplett einig. Einige sind davon überzeugt, dass adaptiv und responsiv ein Synonyme sind. Andere haben die Meinung, dass diese Fachbegriffe sehr unterschiedliche Sinne haben. Die Inkonsistenzen in der Web-Terminologie folgt dafür, dass viele Fachbegriffe irrtümlich benutzt werden.

Dieser Artikel folgt dem Zweck in der bestehenden Undeutlichkeit zurechtzufinden. Es wird der Unterschied zwischen den Arten von Layouts und Ansätze für die Web-Entwicklung erklärt.

Welche Arten von HTML-Site-Layouts gibt es?

Eine kleine Bemerkung: im diesen Artikel geht es um die dynamischen HTML-Modelle und nicht um die statischen Entwurf -Modelle, die gewöhnlich über Sketch, Photoshop & InDesign gemacht werden.

Im ersten Teil dieses Artikels werden:

  1. die feste,
  2. die flüssige,
  3. die adaptive,
  4. die responsive,
  5. und die gemischte HTML-Layouts betrachtet. 

Im zweiten Teil werden wir folgende Begriffe präzisieren:

  1. responsive Website Design,
  2. der Ansatz „Mobile First“,
  3. adaptive Website Design. 

Der zweite Teil können Sie hier aufrufen.

 

 

 

Festes Seitenlayout (static, fixed page layout)

Festes Seitenlayout (static, fixed page layout)

Ein festes HTML-Layout hat eine strenge in Pixel festgelegten und fixierten Seiteninhalt. Die Breite des Seiteninhalts ist statisch und ändert sich nicht bei Änderung der Browserfenstergröße.

Die Breite der Webseiten wird durch die Auflösung der populären Bildschirmgrößen bestimmt. Z.B.: 800x600, 1024x768, 1200x800 und so weiter. Obwohl solche Layouts 2018 extrem überholt sind, kann man die immer noch in der Verwendung oft finden.

Flüssiges Seitenlayout (liquid page layout)

Flüssiges Seitenlayout passt sich an jeder Bildschirmauflösung des Benutzers an. Die Lösung: die Werte der Strukturelemente der Website werden nicht in den absoluten Zahlen (Pixel) dargestellt werden, sondern in den relativen Zahlen definiert werden (Prozent). Zum Beispiel: Zellenbreite wird im CSS Code nicht mit 560px definiert, sondern wird als 50% geschrieben.

Dieser Typ des Layouts von HTML-Seiten ist auch veraltet, weil er die aktuellen Anforderungen an das UX/UI Designs nicht entspricht. Flüssiges Seitenlayout sieht auf großen Desktops sowie auf kleinen Bildschirmen des Smartphons gleich aus.

Adaptives Seitenlayout (adaptiv page layout)

Achtung! Verwechseln Sie nicht mit adaptivem Webdesign. Der Unterschied wird später erklärt.

Adaptives Layout basiert auf der Verwendung von Medienanfragen CSS (cascading style sheets media queries). Der Inhalt passt sich so an verschiedene Bildschirme an. Die Lösung: wenn sich die Bildschirmbreite des Benutzergeräts ändert, "springt" das adaptive Layout entlang der Kontrollpunkte (auch Steuerpunkte). Der Inhalt wird jedes Mal verschoben, verkleinert oder vergrößert.  Da ist nicht die Bildschirmgröße ein Prüfungskriterium, sondern die nächstliegenden Kontrollpunkte.

Mehrere Kontrollpunkte geben eine feste Position und Inhaltsgrößen auf verschiedenen Bildschirmen an. Das heißt, dass adaptive Layout mit dem Webseite-Inhalt passt sich an die Bildschirmgrößen an.

Der Nachteil solcher adaptiven Layouts besteht darin, dass die Inhaltsart und Layout von allen existierenden Endgeräten nicht berücksichtigt werden kann.

Responsives Seitenlayout (responsiv page layout)

Responsives Layout basiert sich auch auf der Verwendung von CSS - Medienanfragen (cascading style sheets media queries). Zum Unterschied vom adaptiven Seitenlayout erfolgt die Anpassung des Webseiteninhalts an die Kontrollpunkte beim responsiven Layout nicht absolut (in Pixel), sondern relativ (prozentual). Deswegen wechselt sich responsives Layout zwischen den Kontrollpunkten fließend.

Gemischtes Seitenlayout (adaptiv + responsiv page layout)

Gemischtes Seitenlayout ist eine Kombination von adaptiven und responsiven Layouts. Gemischtes Layout überprüft die Darstellung des Seiteninhalts auf den Gerätebildschirmen für alle Kontrollpunkte. Die Anzahl der Kontrollpunkte erhöht sich. Um den Wert der Elemente einzustellen, werden nach Bedarf die Pixel- oder Prozentsätze verwendet.

Manchmal wird dieser Ansatz verwendet, um das vorhandene Layout für mobile Geräte anzupassen und zu optimieren. In diesem Fall heißt es "Mobile Last".

Zusammenfassung

Nummer

Arten von Seitenlayouts

Lösungsvariante

Die Anpassung des Webseiteninhalts

Aktualität der Verwen-dung

 

1

Festes Seitenlayout /
fixed page layout

Die Werte der Strukturelemente der Website werden als absoluten Zahlen (Pixel) dargestellt.

Der Webseiteninhalt passt sich nicht an jede Bildschirmauflösung des Benutzers an.

Sehr veraltet

px

2

Flüssiges Seitenlayout/ liquid page layout 

Die Werte der Strukturelemente der Website werden als  relativen Zahlen (Prozent) definiert.

Der Webseiteninhalt passt sich an jede Bildschirmauflösung des Benutzers an.

Nachteil: er sieht auf den großen Desktop und kleinen Bildschirm des Smartphons gleich aus

Veraltet

%

3

Adaptive Seitenlayout

Der Ansatz basiert auf der Verwendung von Medienabfragen CSS.

Die Anpassung des Webseiteninhalts ist an den Kontrollpunkten absolut (in Pixel).

Layout "springt" entlang der Kontrollpunkte. 

Der Webseiteninhalt passt sich an den Bildschirmgrößen basierend auf den populären Bildschirmauflösungen der Benutzergeräte an.

Nachteil: Inhaltsart und das Layout aller existierenden Endgeräte können nicht immer berücksichtigt werden.

Modern

px + media-queries

4

Responsive Seitenlayout/ responsiv page layout 

Der Ansatz basiert auf der Verwendung von Medienabfragen CSS.

 Die Anpassung des Webseiteninhalts ist an den Kontrollpunkten relativ (prozentual).

 Layout wechselt zwischen den Kontrollpunkten fließend.

Der Webseiteninhalt passt sich den Bildschirmgrößen abhängig der Kontrollpunkte (prozentual) an. 

Modern

% + media-queries

5

Gemischte Seitenlayout/ adaptiv + responsiv page layout

Es ist eine Kombination von adaptiven und responsiven Layouts.

Der Webseiteninhalt passt sich an den Bildschirmgrößen abhängig der relativen (prozentual) und absoluten (in Pixel) Kontrollpunkten an.

Modern

px + % + media-queries 

 

Das war ein kurzer Überblick über die Layouts von Webseiten. Das Layout ist kein Design.

Das Design ist ein komplexes Konzept, das unter anderem den Ansatz der Webentwicklung und deren Methodologie umfasst und die Probleme der Benutzerinteraktion mit der Website auf verschiedenen Geräten löst (UX/UI Design).

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.