CSS | Responsive Webdesign

Die unterschiedlichen Varianten multidevicefähig zu entwickeln

laptop 1483974 1920

Bei nachfolgenden Ausführungen handelt es sich nicht um offizielle Empfehlungen, sondern was sich im Zusammenhang mit Responsive Design und Multidevicefähigkeit in Ausübung meiner Tätigkeit herausbildete. Budget, Kundenwunsch, Ausführung und Komplexität von Design und Inhalten bestimmen die Auswahl der geeigneten Methode.

0. Nur für Desktopbrowser

Der Aufwand möglichst allen in den verschiedensten Endgeräten vorkommenden Auflösungen entsprechen zu wollen übersteigt jenen der desktopbrowseroptimierten Entwicklung spürbar. Daher entstehen nach wie vor auch Themes die primär für Desktopbrowser geeignet sind. Darauf würde ich in keinem Fall mehr (freiwillig) setzen, da dieses Vorgehen nicht zukunftssicher ist.

1. Geräte sollen nach ihrer Bildschirmauflösung berücksichtigt werden

Über Mediaqueries legt man fest, ab oder bis zu welcher Auflösung des Gerätes bestimmte Stile angewendet werden. Die Anwendung ist unabhängig von der Breite des Browserfensters. Das Design wirkt daher auf Desktoprechnern statisch, passt sich jedoch auf Geräten mit geringeren Auflösungen an.

2. Das Design soll auf die Breite des Browserfensters reagieren

Das Design ist “liquid” und wird mit dem Browserfenster schmaler, kann aber auch irgendwann seine maximale Breite erreichen, ab der das Layout statisch bleibt. Elemente verschieben sich im schmalen Fenster untereinander, manche verschwinden vielleicht sogar ganz oder sehen anders aus als vorher. Über Mediaqueries werden je nach Breite und (optional) Höhe des Browserfensters ab so genannten “Breakpoints” (Maß an dem das Design bricht) angepasste Stile angewendet. Wahlweise kann der Fokus auf Desktopgeräten liegen und es wird auf kleinere Auflösungen angepasst. Es gibt auch eine Reihe namhafter Webentwickler die auf “Mobile First” plädieren. Die auf Mobilgeräte hin optimierten Stile werden dann für höhere Auflösungen angepasst. Aus welcher Richtung ich die Anpassung vornehme hängt vom Fokus des Kunden und des Designs ab.

3. Der jeweiligen Plattform wird gezielt entsprochen

Das Theme integriert eine Logik die Browser und Plattform identifiziert und daraufhin selektiv Elemente und geräteoptimierte Stildateien lädt (RESS = Responsive Web Design with Server-Side Component). Das funktioniert in Kombination mit Variante 1 oder 2. Der Vorteil dieser erweiterten Methode ist, dass innerhalb eines Themes unterschiedliche Ausführungen einer Website zur Verfügung gestellt werden können, was unter anderem aus Performancegründen sinnvoll sein kann. Nicht für eine Plattform vorgesehene oder geeignete Elemente werden gar nicht erst geladen. Phones können auf diese Weise eine abgespeckte Version der Site erhalten (mit eigenem Widgetbereich) oder kleinere Ads, wenn sich die Website über Werbeeinschaltungen finanziert.

Die Erkennung ist nicht 100-prozentig sicherzustellen. Bei Nichterkennung werden gegebenenfalls die auch hier eingesetzten Mediaqueries wirksam. Alternativ können Umschaltbuttons angeboten werden. Die manuell gewählte Plattform wird dann vorrangig behandelt (die so gesetzte Variable überschreibt die der automatischen Erkennung).

Zudem werden die Standards auch dafür immer besser, beispielsweise durch Deklaration der Geräte als Phone oder Tablet im User Agent String.

Speziell für die 3. Variante hat es sich bewährt mit LESS zu arbeiten. Im aktuellen Prototypen meines Themes ist LESS integriert und wird nach Modifikationen an den Stilen über ein PHP-Include neu in die CSS-Datei übertragen. Eine durchdachte Organisation (nach Auflösung) vermeidet, dass dieselben Stile in mehreren Dateien verwaltet werden müssen. Die nach Auflösung (max oder min) getrennten LESS-Dateien werden am Ende zu Gerätedateien vereint. So ist nur ein HTTP-Request für die Stile erforderlich, ein weiterer Vorteil von LESS, denn ein Import innerhalb einer CSS-Datei ist äußerst ungünstig für die Performance.

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.