Responsive Header

Responsiver Seitenkopf und Inhalt adaptiv

Bei dieser Variante des Seiten-Layouts, wird nur der Kopfbereich der Seite responsive ausgeliefert und passt sich somit flexibel der Größe des Browserfensters an. Das responsive Verhalten des
Seitenkopfen ist dann wieder für mobile Endgeräte wie Smartphones oder Tablet-Computer bestens geeignet. Der Inhaltsbereich wird je nach Auflösung des Endgerätes,
als adaptives Layout dargestellt. Verwendet werden dafür s.g. Breakpoints, die sich über Media Queries steuern lassen.

Inhaltsbereich

Adaptiv und Responsive

Die Inhalte in diesem Bereich des Seitenlayouts, werden wieder mit einem Container umgeben, der eine feste Anzeigebreite für verschieden Ausgabegeräte bereithält.

Es sind verschiedene Kombinationen möglich, entweder eine Adaptive Website oder eine Responsive Website oder einen Mix aus responsivem und adaptivem Seitenlayout zu realisieren.

Ob das Webseiten Design nun responsiv oder adaptiv sein soll, kann je Anwendungsfall und für die optimale Webseiten-Präsentation, flexibel bestimmt werden.

Übersicht

Seitenlayout Varianten

Alles fließend

Kopf- und Inhaltsbereich des Seitenlayouts passt sich responsive dem Viewport an

Seitenkopf fließend

Inhalte im Kopfbereich des Seitenlayouts passen sich responsive dem Endgeräte an

Seiteninhalt fließend

Nur der Inhaltsbereich des Seitenlayouts passt sich flexibel der Größe des Browserfensters an

Responsive Webdesign

Ein Design für alle Fälle

Responsives Webdesign oder kurz RWD genannt, ist aus dem englischen responsive ‚reagierend'.

Responsive Design

Reagierendes Webdesign

Ein Webdesign für mobile Endgeräte wie Smartphones oder Tablet-Computer und Desktop PC.

Responsive Layout

Mobile Web Traffic

Dieser macht bereits mehr als 50% aus. Layout, Typografie und Medien sollten dafür gerüstet sein.