Responsive Webseiten gestalten

Inhaltsverzeichnis

Flexibel entworfene Webseiten können helfen, sowohl Nutzern von Mobil- als auch von Desktopgeräten ein gutes Anwendererlebnis zu vermitteln. Die Umsetzung erfordert allerdings einige Überlegungen.

Themen wie Mobile First, Performance sowie Vor- und Nachteile von Responsive Webdesign wurden im Vorgängerartikel zum Thema ausführlich erklärt. Jetzt geht es darum, den praktischen Teil unter die Lupe zu nehmen: Wie weit lässt sich ein Layout mit MediaQueries umsetzen? Was passiert mit großen Bildern auf kleinen Geräten? Wie kann man Formulare benutzerfreundlich gestalten? Darüber hinaus soll betrachtet werden, welche Techniken es momentan gibt, aber auch welche in Arbeit sind und in naher Zukunft die breite Masse erreichen.

MediaQueries sind ein mächtiges Werkzeug und ein zentraler Bestandteil des Responsive Web Design. Sie sorgen dafür, dass sich die Webseiten "responsiv" verhalten und den Ausgabemöglichkeiten des Geräts optimal anpassen. Die Regeln sind kinderleicht und verstehen sich meistens von selbst. Als Beispiel beachtet ein Desktop-PC die Angabe von min-width: 800px, ein kleineres Smartphone hingegen kann sie problemlos ignorieren. Vor allem wenn bei der Entwicklung einer Webseite der Mobile-First-Ansatz beachtet wird, lassen sich Regeln Schritt für Schritt hinzufügen, ohne dabei die bestehenden ändern zu müssen.

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) and 
(orientation : landscape) {
}
 

Die obige Regel kommt beispielsweise nur zum Einsatz, wenn der Besucher ein Tablet verwendet und es quer hält. Bereits heute gibt es neben orientation (portrait, landscape) weitere nützliche Angaben, wie
webkit-device-pixel-ratio: 2 oder resolution: 96dpi für die Optimierung auf Geräten, die mit Bildschirmen mit einer besonders hohen Pixeldichte ausgestattet sind. Auch Typ-Angaben wie screen oder tv werden schon verwendet.

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){ 
    /* Optimierungen für retina / high-res */
}
@media screen and (device-aspect-ratio: 16/9), 
  screen and (device-aspect-ratio: 16/10) { ... }
@media tv and (scan: progressive) { ... }

Bis zu einem gewissen Maß an Komplexität lassen sich allerlei Optimierungen mit MediaQueries vornehmen, irgendwann kann allerdings kein Entwickler mehr den Durchblick behalten. Die Anzahl an CSS-Klassen wird unüberschaubar und die Redundanz vieler Angaben steigt, denn mit einem bisschen Copy-and-paste lassen sie sich an vielen Stellen im Code wiederverwenden. Dieses Problem lässt sich durch CSS-Präkompilierung mit einem SASS- oder LESS-Compiler schnell vermindern, häufig kann sich jedoch der Einsatz eines Grid-Systems als vorteilhafter erweisen.

Ein Grid sorgt für die Unterteilung des Layouts in Zeilen und Spalten. Jedes Gerät entscheidet anhand des verfügbaren Platzes, ob es die Spalten neben- oder untereinander darstellt. Viele Frameworks wie Twitter Bootstrap, Foundation oder Skeleton enthalten ein entsprechendes Werkzeug.

Zwar lassen sich komplexe Layouts ebenfalls mit floats und inline-blocks umsetzen, das ist meistens allerdings vergleichsweise aufwendig – gerade dann, wenn unterschiedliche Geräte zu berücksichtigen sind. Außerdem ist es ohne JavaScript nicht möglich, Elemente auf der Webseite anders anzuordnen. Mittlerweile gibt es Vorschläge für flexiblere Alternativen, zu denen die Flexbox und das CSS3 Grid Layout zählen.

Alternative Ansätze

Was ein display:block macht, sollte jedem Webentwickler bekannt sein. Laut Definition ist block ein Layout-Modus der beschreibt, dass Elemente einen Block bilden – ähnlich p oder dem div-Element. Durch den flex-Modus ergeben sich neue Möglichkeiten, Elemente innerhalb eines Containers auszurichten oder den Abstand zwischen den einzelnen Elementen automatisch zu optimieren. Der Container versucht dabei, die Elemente zu vergrößern, um den zur Verfügung stehenden Platz auszunutzen, oder zu verkleinern, um ein Überlappen zu verhindern.

Mit einem flex-Container lässt sich die Ausrichtung mittels flex-flow: row oder flex-flow: column den Kind-Elementen vererben. Je nachdem, welche Variante verwendet wurde, passt sich der Abstand links und rechts (row) beziehungsweise oben und unten (column) an.

.container {
    display: flex;
    flex-flow: row;
    justify-content: center;
}

Anders als beim Flexbox-Modell ermöglicht das Grid-Layout eine flexible Positionierung von Elementen in Zeilen und Spalten innerhalb eines Containers. Bei RWD bedeutet das, dass sich Elemente optisch je nach Auflösung anders positionieren lassen. Momentan unterstützt nur der Internet Explorer (10+) dieses Feature, und es bleibt offen, ob WebKit oder mobile Browser nachziehen.

Die Position eines Elements innerhalb eines Grid-Containers können Entwickler über ein Koordinatensystem festlegen:

#container {
   display: grid;
}
 
#element1 {
   grid-column: 1;
   grid-row: 1
}
 
#element2 {
   grid-column: 3;
   grid-row: 1;
}