Wir leben in einer Zeit der Digitalisierung und des mobilen Internets. Pizza bestellen übers Tablet, Eintrittskarten und Tickets speichern wir auf dem Handy und über den Laptop bestellen wir die Dinge des Alltags mit Amazon oder Ebay. Das alles ist nur möglich dank Responsive Webdesign. Andernfalls würden wir uns alle täglich über viel zu kleine Bilder und Texte und über eine unsägliche Usability ärgern.

Man kann also sagen, dass Webdesigner (und Programmierer) einen großen Teil dazu beisteuern, dass unser digitaler Alltag in den letzten Jahren (genaugenommen seit der Einführung des ersten iPhones am 29. Juni 2007) immer komfortabler wurde. Über Vor- und Nachteile der ständigen Verfügbarkeit von alles und jedem kann man jetzt steiten, aber dass könnte Thema eines anderen Blogbeitrags sein.

Bevor wie jetzt in die Tiefe beim Verständnis von responsivem Webdesign gehen, möchte ich noch gerne auf unsere themenverwandten Blogbeiträge verweisen, die als eine Art Grundlage für diesen Leitfaden dienen:

> Warum eigentlich 72 dpi?
> Was bedeuten eigentlich Retina und Amoled?

 

Was ist Responsive Webdesign überhaupt?

Als “responsiv” werden alle Webseiten bezeichnet, die technisch (und im besten Fall auch optisch) in der Lage sind, sich an die Eigenschaften des jeweiligen benutzten Endgeräts anzupassen. Zu diesen Geräten zählen in der Regel Desktop Computer und Laptops, Tablets, Smartphones und seit einigen Jahren auch sog. Smart-TV Geräte.

Grundsätzlich kann man responisve Webseiten in zwei Unterarten gliedern:

adaptive Webseiten
Die Website hat mehrere sog. “Breakpoints”, an denen sich der Aufbau der Website verändert. Diese Breakpoints richten sich nach der Breite des jeweiligen Anzeigemediums. D.h. die Website hat praktisch gesehen ca. 3-5 verschiedenen Designs mit jeweils verschiedenen Anordnungen der Elemente, die je nach betrachten auf dem Handy oder dem Desktop PC variieren. Vorteil dieser Variante ist, dass man stets die volle Kontrolle über das Aussehen der Seite hat.

liquide Webseiten
Im Gegensatz zu adaptiven Webseiten werden hier keine Breakpoints eingesetzt – die einzelnen Container der Webseite nutzen den verfügbaren Platz immer im gleichen prozentualen Verhältnis. Die Anordnung der Layoutelemente bleibt bis zu einem gewissen Punkt unverändert. Vorteil dieser Variante ist, dass sie auf allen Endgeräten funktioniert und auch für zukünftige, im Moment noch unbekannte Geräte und Größen adaptierbar ist.

 

Technische Funktionsweise von mobilen Webseiten

Anfangs stellte ich mir die Frage, wie es möglich sein soll, ein Webdesign zu erstellen, dass auf allen Endgeräten funktioniert. Dabei schossen mir folgende Fragen durch den Kopf:

> Warum werden responsive Webseiten auf dem Handy korrekt in der mobilen Version angezeigt, obwohl ein gängiges Handy doch heute eine gleichwertige Auflösung hat, wie ein Laptopmonitor oder der Bildschirm eines Desktop-PCs?

> Wie kann man Grafiken erstellen, die auf jedem Gerät gut aussehen, obwohl es eine scheinbar unendliche Vielfalt an Display- und Bildschirmauflösungen gibt? Angefangen vom Low-Budget Smartphone bis hin zum 4k Retina Desktop Monitor?

> Wie vermittle ich dem Programmierer, wie meine Website auf jedem Medium aussehen soll? Mache ich fünf (oder mehr) verschiedene Designs?

Responsive Webdesign ist zum Glück viel einfacher, als es auf den ersten Blick scheint.

Das wichtigste zuerst. Vergesst die vielen verschiedenen Auflösungen. Die unterschiedlichen Geräte und ihre hochauflösenden oder nicht-hochauflösenden Displays zeigen Webseiten immer so an, dass Sie für den Benutzer gut erkennbar und lesbar sind. Das liegt daran, dass es sog. “CSS Pixel” und “Device Pixel” gibt. 

“Device Pixel” sind die tatsächliche Anzahl von Bildpunkten, die ein Gerät hat. Das iPad 3 hat zum Beispiel 2048 x 1536 Bildpunkte in Breite und Höhe. Etwas vereinfacht und bildlich gesprochen passiert nun folgendes: der Browser erkennt, dass es sich um ein kleines Display eines iPads handelt und sagt der Website, dass sie so tun soll, als würde sie auf einem nicht-hochauflösenden Display dargestellt werden und gibt statt “2048” nur “1024” als Information weiter. “1024” ist hier der CSS Pixel.  “CSS Pixel” sind also nicht die tatsächlichen Bildpunkte, sondern sagen vielmehr etwas darüber aus, wie groß Informationen im Internet tatsächlich dargestellt werden. Hier ein kleines Beispiel:

Wie man in dem Beispiel sehen kann, werden die Inhalte auf allen Monitoren und Displays in etwas gleich angezeigt. Auf dem Tablet etwas kleiner, weil man dieses Gerät in Regel auch näher am Auge hat, als einen normalen Computer Bildschirm.

Nun gibt es sozusagen verschiedene “Breakpoints” für die unterschiedlichen Geräte, die vom Programmierer frei gewählt werden können. Diese Breakpoints definieren (am Beispiel einer adaptiven Website), wann welcher Webseitenaufbau eingesetzt werden soll. Dabei gibt es keine festen Größen oder eine bestimmte Anzahl. Die Festlegung der Breakpoints richtet sich nach Erfahrungswerten der am meist genutzten Geräte auf dem Markt und daran, wie viel Arbeit man in das Projekt stecken möchte. Die CSS Pixel sind völlig unabhängig von den tatsächlichen Device Pixel, sondern richten sich nach der physikalischen Displaygröße des jeweiligen Geräts.

Einziges Problem hier ist, dass Pixelgrafiken auf Retina oder Amoled Displays unter Umständen leicht unscharf abgebildet werden, wenn im Hintergrund kein hochauflösendes Alternativbild hinterlegt ist. Details hierzu in unserem Blogbeitrag “Was bedeuten eigentlich Retina und Amoled?”.

Wie gestalte ich Responsive Websites?

Egal ob in Photoshop oder Indesign oder anderen Grafikprogrammen – wie so oft im Leben gibt es hier keinen Königsweg der zu 100% korrekt ist.  Wir können hier lediglich den Weg beschreiben, den wir für uns als den praktischsten herausgefiltert haben:

(1) Starte mit dem Layout für “1024” oder “1280” CSS Pixel

Mit anderen Worten: Arbeite dich von groß nach klein. In Regel sind auf der Desktop Variante einer Website alle Informationen vorhanden, wo hingegen die mobile Handy Variante der Website sich auf das nötigste beschränkt. Wir persönlich finden es leichter, erst das “große Ganze” zu gestalten und danach Informationen zu entfernen, als anders herum. Aber hier sollte jeder seinen eigenen Weg gehen.

(2) Achte auf die Verschiebung der Container

Gerade bei liquiden Webseiten hat man als Gestalter ab einem gewissen Punkt keinen richtigen Einfluss mehr auf die Gestaltung, sondern muss sich auf die Fachkenntniss des Programmierers verlassen. Trotzdem sollte man immer im Auge behalten, welche Container sich bei kleiner werdendem Display wohin verschieben. Die Grundregel hier: die rechte Seite schiebt sich unter die linke Seite:

(3) Erstelle Layouts in verschiedenen Breiten

In der Regel reicht es aus, wenn man dem Programmierer die Layouts für die “1280 CSS Pixel” Variante und die “320 CSS Pixel” Variante für Smartphones gestaltet. Die Zwischenschritte ergeben sich meist sowiso von selbst durch die Programmierung. Wichtig hierbei ist, dass man bei den verschiedenen Breakpoint Layouts nicht die Schriftgröße verändert. Dieser Faktor wird später selbst durch die jeweiligen Geräte selbst definiert und gesteuert.

(4) Versuche die Datenmenge zu reduzieren

Auch wenn die Bandbreiten sich ständig erhöhen – es wird noch eine lange Zeit dauern, bis man auch in ländlichen Gegenden unterwegs mit dem Handy einen optimalen Empfang hat. Diese Tatsache sollte man als Gestalter immer in Hinterkopf behalten und sowohl die Größe, als auch die Anzahl der Grafiken, auf das notwendige reduzieren (vor allem in der mobil Variante der Website). Muss es denn immer eine Pixelgrafik sein, oder kann man an der ein oder anderen Stelle auch eine Vektorgrafik einsetzen? Vorteil: Vektoren sehen auf allen Bildschirmgrößen scharf aus und verbrauchen weniger Datenvolumen. Auch Effekte wie “Schatten” oder “runde Ecken” lassen sich heute durch CSS Regeln steuern und müssen nicht mehr Teil des Bildes selbst sein.

Wenn man all diese Regeln beachtet, sollte das Erstellen von Responsive Websites kein Problem mehr darstellen.