php-homepage.com

Responsive Design - Beispiele und Übungen

Hintergrund und Überlegungen

Theoretische Hintergründe zu Responsive (fluid)Design findet man hier: Unterschiede Responsive, fluid, adaptive Meine älteren, aber nicht weniger aktuellen Artikel zum Thema fluid layout und fluid design

Responsive Layout mit CSS - konkretes Beisiel

Wer sich nicht ohnehin schon länger mit dem Thema beschäftigt, dem dürften die Schlagworte "responsive design", "responsive layout" bzw. mobile design zumindest vermehrt aufgefallen sein.
Was bedeuted dies nun tatsächlich?
Respond, also antworten bzw. in diesem Fall reagieren, bedeuted, dass Webseiten schon lange keine statischen Dokumente mehr sind, sie sollen sich möglichst auf den Nutzer "anpassen". Anpassen, also adaptieren - ein weiteres Schlagwort "adaptive design", macht das Thema nicht einfacher.

Adaptives bzw. Responsives Layout mögen auf den ersten Blick das gleiche Ergebnis liefern, machen im Grunde also das Gleiche?
Bei oberflächlicher Betrachtung, JA, aber sieht man genauer hin: NEIN!

Grundlegender Unterschied ist, vereinfacht gesagt, dass responsive sich an den viewport anpasst, also immer möglichst das gleiche Ergebnis liefert. Adaptive hingegen geht noch etwas weiter ins Detail und liefert für den jeweiligen viewport adaptierte Inhalte.
In erster Linie geht es aber erstmal darum, zumindest responsive design umzusetzen, und damit beschäftigen wir uns hier im ersten Schritt!
Ist dieser erste (leichter umzusetzende) Schritt erledigt, können wir auf adaptive design eingehen, sonst wird das Ganze zu verwirrend:-)

Responsive Design Beispiel und Erklärung

Wer gerne selbst eigene templates erstellt, bzw. ein eigenes "CMS" verwendet oder entwickelt, findet im folgenden Beispiel die grundlegende Struktur für den Aufbau einer Webseite mit responsivem Layout:

Schauen wir uns dazu das Ergebnis dieser page hier an:

Webseite in full HD Auflösung (1920*xxx)
diese Seite mit Auflösung
1920*1200
Webseite in 1280*xxx
diese Seite mit horizontaler
Auflösung von 1280 pixeln
Und hier nun die unterste Grenze der Desktop Auflösungen (1024*xxx)
horizontale Auflösung
von 1024 Pixeln

Die obigen drei Screenshots zeigen die Seite in voller Breite, wobei das Grundlayout gleich bleibt. Die Container Header (orange), Menü, Content (grau) und sidebar rechts (blau) passen sich der verfügbaren Breite (width) an.
Um die Lesbarkeit in hohen Auflösungen zu gewährleisten, habe ich die maximale Breite (erster Screenshot) aber begrenzt, was in der Auflösung 1920*xxx an schmalen weißen Streifen ersichtlich ist.

Bei Webseiten mit fixer Breite sieht man in höheren Auflösungen oft massive Ränder, die eine effiziente Nutzung der Bildschirmgröße verhindern.

Seite mit fixer Breite
Hier mal ein Negativbeispiel mit fixer Breite...

rund 50% der Bildschirmbreite bleiben ungenutzt
Das Bild ist absichtlich unleserlich gehalten, ich will ja niemandem auf die Füße treten.
Natürlich muss man hier Kompromisse eingehen - die Ränder sollten nicht zu groß werden, andererseits ist zu breiter Textfluss aber schwer lesbar.

Responsive Design und 4k Monitore

Noch wichtiger wird responsives Design bei den sich gerade am Markt etablierenden hochauflösenden Monitoren.
High DPI-Displays zeigen "klassische" Webseiten, also solche mit statischem Layout aufgrund der Pixeldichte (PPI) nur sehr klein an und sind somit bei kleinen Bildschirmdiagonalen unleserlich!

Hintergrundwissen zu 4k Monitoren und high-dpi displays habe ich hier bereits beschrieben.

Responsive Layout für Mobilgeräte

Die Screenshots oben zeigen das Ergebnis von flüssigem Layout bei hohen (Desktop) Auflösungen, aber wie sieht es nun bei Geräten mit weniger als 1024 Pixeln Breite aus?

768 Pixel Breite
Auf (Mobil-)Geräten mit
768 Pixeln horizontaler Auflösung
Mobilgerät mit 320 Pixeln horizontaler Auflösung
Minimalste Auflösung mit320 Pixeln Breite

Selbst bei 320 Pixeln width erhält man noch ein akzeptales Ergebnis,
hier musste ich aber die Sidebar unter den Content bringen.
(typische Vorgehensweise bei zweispaltigem Layout)
Soweit so gut. An dem Beispiel wollte ich zeigen, dass man mit dieser Variante von fluid layout den Bildschirm selbst bei unterschiedlichsten Auflösungen (Full HD 1920*xxx bis HVGA 320*xxx optimal nutzen kann.
xxx steht für vertikale Auflösung, diese hängt ab vom Verhältnis des Bildschirms 4:3, 16:9, 16:10,... und spielt für Webseiten keine nennenswerte Rolle;

Soweit zum Ergebnis einer Webseite mit fluid layout, aber wie kommt man nun dahin?

Ich verwende im gezeigten Beispiel 3 verschiedene Stylesheets, unterteilt in verschiedene Bereiche von Auflösungen.
Realisierbar ist dies recht einfach mittels media queries, einer praktischen Neuerung von CSS3.
Kurz gesagt: man bindet mehrere Styleshhets für diverse Auflösungen ein und entsprechend kommt für jeden Bereich von Auflösungen ein anderes Stylesheet zur Anwendung:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (max-width:719px)" href="/styles/small.css" />
<link rel="stylesheet" media="screen and (min-width:720px) and (max-width:1023px)" href="/styles/standard.css" />
<link rel="stylesheet" media="screen and (min-width: 1024px)" href="/styles/large.css" />

Die erste Zeile ist zusätzlich nötig, um die automatische Skalierung einiger Geräte zu deaktivieren (scale=1), da wir ja ohnehin ein responsives layout haben. content="width=device-width..." weist den browser an die native Breite des Gerätes zu nutzen.
Die folgenden 3 Zeilen sind eine einfache Einbindung von .css Dateien, wie wir es gewohnt sind, mit der zusätzlichen Medienabfrage nach Auflösung des verwendeten Browsers.
Ob man nur zwei Stylesheets oder gar mehr als drei einbindet, ist Geschackssache. Erfahrungsgemäß verwende ich dieses System mittlerweile auf vielen meiner Seiten ohne CMS.
Zum Abschluss bleibt noch zu erwähnen, dass man mit der "fluid"-Variante von responsive Layout ein tolles Darstellungsergebnis erzielt, aber bei Photos/Bildern muss man sich eine passende Lösung überlegen.

update 20.04.2017:
Mittlerweile wurde das Problem von responsiven bzw. adaptiven Bildern besser gelöst:
Responsive Bilder mit Scrcset

Adaptive Design

Wie schon Eingangs erwähnt, ist responsive design für sich nur ein Teil der Aufgabe, des "perfekten" Layouts/Designs.
Im Verlauf dieses Artikels sollte klar sein, was responsive bedeuted: Der Inhalt passt sich an den Bildschirm des Besuchers an! Ein feines schnelles tool bietet: responsive design testen

Kommen nun aber Medien z.B. Bilder ins Spiel, wird es bei genauer Betrachtung unter Umständen nötig, sogar spezielle (adaptierte) Inhalte für das jeweilige Endgerät zu liefern.
Gängige Praxis bei Bildern ist es etwa ein Bild mit hoher Auflösung in den Artikel einzubinden, und dieses dann mittels CSS für kleinere Auflösungen runter zu skalieren. (width:100%) Trotzdem muss das Smartphone/Mobilgerät mit winziger Auflösung erstmal das Bild in voller Auflösung und Dateigröße herunterladen, um es anschließend auf seinen Bildschirm zu verkleinern!
Technisch "unschön" und eine Verschwendung von Bandbreite und Systemleistung. Besser wäre es Bilder zumindest in mehreren Varianten zu liefern: klein, mittel und groß;

Hierfür wird aber eine gesonderte Anleitung nötig:

Photos/Bilder und Responsive Layout