Mittlerweile haben fast alle davon gehört und jeder will es haben- Responsive Design. In der Theorie klingt es auch toll, auf jedem Device ein optimal angepasstes Design zu haben, die Praxis stellt die Entwickler aber vor Herausforderungen, die kein Kunde ahnt. Deswegen möchte ich ein paar wesentliche Fakten und ein paar nützliche Tipps für Webentwickler oder solche, die es noch werden wollen, anbringen. Im 1.Teil gibt es ein paar wissenswerte Fakten zu Auflösungen, Mediaqueries, Ladezeitersparnis durch Iconfonts und Responsive Layout.

Einer der schwierigsten Aufgaben für Webentwickler sind die rasenden technologischen Entwicklungen. Zu den klassischen Desktop-Browsern kommen mittlerweile mehrere mobile Plattformen mit den unterschiedlichsten Browsern. Smartphones, Tablets und Desktops von verschiedenen Herstellern mit variierenden Bildschirmauflösungen. Auch die Unterscheidung zwischen Landscape- (quer) und Portraitansicht (hochkant) spielt bei der „resonsivness“ eine wichtige Rolle.
Diese Grafik verdeutlicht ziemlich gut was ich mit Viewport Overflow meine:

(c) Flooch via Wikipedia, Creative Commons Attribution-Share Alike 3.0 Unported.

Diese Flut an unterschiedlichen Auflösungen erschwert eine saubere Arbeit für jeden Webentwickler und stellt ihn bei jedem Projekt vor neue Herausforderungen. Eine Lösung für eine perfekte Darstellung auf allen Devices gibt es leider noch nicht. Durchhalten!

Ein Lösungsansatz zumindest die üblichen Auflösungen wie gewünscht darzustellen sind Mediaqueries. CSS-Mediaqueries entscheiden zwischen verschiedenen Ausgabemedien (Drucker, Audio, Desktop,...) und sind daher ein wichtiger Bestandteil im Responsive Design. So kann Beispielsweise ein Stylesheet eigens für verschiedene Browserfensterbreiten angelegt werden:

<!-- Media selector im Link-Tag: -->
<link rel="stylesheet" type="text/css" href="styles.css" media="screen and (min-width: 800px)" />

Oder aber innerhalb geschweifeter Klammern im CSS:

/* media selector im css */
@media only screen and (min-width: 800px) {
/* hier dann die Anweisungen */
}


Es können beliebig viele Link-Tags oder Mediaqueries verwendet werden, um das Verhalten für verschiedene Auflösungen zu definieren. So lassen sich über Mediaqueries maximale/minimale Breiten und Höhen oder aber die Ausrichtung über Schlüsselwörter wie orientation: landscape bzw. orientation: portrait definieren. Eine konkrete Auflistung über Media-Selektoren findet man unter Selfhtml.

Der Einsatz von mehreren Größen einer Grafik ist hauptsächlich beim Einbinden von Content-Grafiken mit serverseitigem Handling der Bildformate praktikabel, für die Gestaltung von Responsive Websites aber nicht empfehlenswert. Vorallem mit der Vorstellung von Retina Displays ist die Auflösung von Grafiken zur Herausforderung geworden.
Eine Möglichkeit die Auflösungsprobleme zu umgehen sind Icon-Fonts. Hierbei werden Vectorgrafiken in einer Schriftart gespeichert. Die Schriftart wird auf der Webseite eingebunden und durch das Setzen von font-family und Zeichen können die Icons verwendet werden. Das reduziert den Overhead-Traffic und ermöglicht einfache Styleanpassungen.

Für komlexere oder größere Bilder oder Logos eignen sich jedoch eher .svg-Dateien (skalierbare Vektorgrafiken).

Beliebte Elemente des modernen Webdesigns sind Mehrspaltige Layouts, welche sich hervorragend für Responsive Designs eigenen. Je nach Auflösung werden entsprechende Spaltenanzahlen angezeigt. Die folgende Grafik zeigt ein vereinfachtes Beispiel einer solchen Spaltendarstellung.
Im CSS werden für die verschiedenen Spalten Prozentwerte für die width angegeben und diese verhalten sich entsprechend der Gesamtbreite des genutzten Bildschirms. Die Berechnung der einzelnen Spaltenbreiten kann zum Teil recht komplex werden, da die Gesamtbreite abzüglich der Spaltenzwischenräume 100% sind. So sind zwei Spalten nicht 50% und 50% breit, sondern beispielsweise 45,5%. Dies ergibt sich aus: 2% (Abstand links) + 45,5% (Spalte 1) + 5% (anstand zwischen den Spalten) + 45,5% (Spalte 2) + 2% (Abstand rechts). Alles in allem ist das eine komplexe Rechnerei, die uns so Grid-Systeme wie Bootstrap oder Foundation, um nur einmal die bekanntesten zu nennen. Meines Erachtens ist es nichts verkehrtes, wenn man auf bereits fertig berechnete Grids zurück greift und sich somit eine Menge Zeit spart.

Zeit sparen lässt es sich auch, wenn man ein paar Kniffe und Tricks beherrscht, dazu werde ich in Teil 2 etwas schreiben.