Responsive vs. Adaptive

Die zwei typischen Layoutvarianten

Zum Verständnis des Aufbaus von adaptiven und responsiven Webseiten muss man die beiden grundlegenden Layoutvarianten

  • Fixed Layout - Layout mit festen Breiten in Pixel.
  • Fluid Layout - Layout mit flexiblen Breiten in %.
    Hierbei ist in der Regel die Breite des übergeordneten Containers mit einer festen Breite in Pixel definiert.

unterscheiden.

Hierzu habe ich einfache Webseiten als Beispiele erstellt, um den Aufbau und das Verhalten bei sich ändernden Fensterbreiten zu beobachten. Bei den Beispielen handelt es sich um den Grundaufbau einer einfachen Webseite mit:

  • Übergeordnetem Container
  • Kopfbereich
  • Hauptinformationsbereich
  • Bereich(e) für "zusätzliche Informationen"
  • Fußbereich

Um den Quelltext schneller zu Erfassen und ggf. direkt einzusehen, habe ich keine Inhalte eingefügt und die CSS-Definitionen direkt im Kopf des Dokumentes eingefügt.

Fixed Layout

Hier ist die Breite in Pixel festgelegt.
Testen Sie das Verhalten der Layouts durch Verkleinern und Vergrößern des Fensters! Fertigen Sie ggf. Skizzen an.
Sie können auch die Quelltext analysieren - rechte Maustaste verwenden und Seitenquelltext anzeigen lassen.
Verkleinern Sie das Browserfenster und beschreiben Sie das Ergebnis.
Wählen Sie der angegebenen Seiten zum Testen von mobilen Endgeräten und geben Sie die Adresse der Seite ein. Beschreiben Sie das Ergebnis.

BEISPIEL 01 FIXED LAYOUT

Fluides Layout

Das Layout des Beispiels aus oben ist hier in ein fluides Layout umgewandelt worden. Hierzu sind die fixen Breiten (Pixelwerte) in Prozentwerden umzurechnen und in die css einzutragen.
Die feste Breite des containers soll über das ganze Browserfenster gehen, d.h. sie entspricht 100%. Die anderen Werte sind entprechend zu ermitteln.
Testen Sie das Verhalten der Layouts durch Verkleinern und Vergrößern des Fensters! Fertigen Sie ggf. Skizzen an.
Sie können auch die Quelltext analysieren - rechte Maustaste verwenden und Seitenquelltext anzeigen lassen.
Verkleinern Sie das Browserfenster und beschreiben Sie das Ergebnis.
Wählen Sie der angegebenen Seiten zum Testen von mobilen Endgeräten und geben Sie die Adresse der Seite ein. Beschreiben Sie das Ergebnis.

BEISPIEL 01 FLUIDES LAYOUT

Weitere Quellen mit Informationen

  1. Kulturbanause (mit Video)
  2. Die Produktmacher (mit Video)

Übung:Fixed to Fluid

Erstellen Sie auf der Basis der beiden Beispiele layoutFixed01.html und layoutFluid01.html ein Weblayout mit folgenden Eigenschaften:
a) Fixed: header und footer 1200px breit, main 2/3 mit zwei nebeneinander liegenden Informationsbereichen und aside 1/3 (drei Spalten nebeneinander) - die Außenabstände sollen eigenständig festgelegt werden (margin-left, margin-right).

b) Fluid: modifizieren Sie das Layout aus a zu einem fluiden Layout (Umrechnung in % auf die volle Fensterbreite).
Als Grundlage können Sie den Quelltext des vorangegangenen Beispiels verwenden.

Musterlösungen zum Vergleichen

Fixed

Fluid

Erweiterung:Fluid mit maximaler Breite und Responsives Verhalten

Der Nutzung der vollen Fensterbreite wird bei großen Monitoren und öffnen der Seite im "vollen" Browserfenster die Leselänge insbesondere bei reinen Textseiten zu lang.

Daher wird häufig eine fluide Variante mit fester, maximaler Breite eingesetzt. Sehen Sie sich hierzu die drei Beispiele unten an und beschreiben Sie das Verhalten.
Achten Sie hierbei auch auf das Verhalten bei Verkleinern und Vergrößern des Browserfensters.
Sehen Sie sich die Seiten auch bei unterschiedlichen mobilen Endgeräten an ("Testumgebungen-Mobile-Geräte").

Musterlösungen zum Vergleichen

Fluid-1200px Max einfach

Fluid-1200px Max-2

Fluid-1200px Max-3

ADAPTIVE WEBSITES VS. RESPONSIVE

Hierzu finden Sie im Internet ausführliche Informationen mit Beispielseiten.

Quellen

Von fixed zu fluid - Beispiel

Über ein Anwendungsbeispiel soll die Erstellung einer einfachen Webseite mit responsivem Verhalten beschrieben werden.
Hierbei wird von einem HTML-Dokument mit Fixed-Layout ausgegangen. Die Ausgangsdatei enthält nur die Grundstruktur ohne weiterreichende Inhalte.

Weiterführende Quellen