Responsive Design ist ein Ansatz um Webseiten auf allen Anzeigegeräten auf ihre Größe angepasst und optimiert darzustellen. In unserem Artikel zum Thema habe ich unter anderem festgestellt, dass die ilscipio Webseite nicht für die Darstellung auf mobilen Geräten optimiert ist – und das obwohl wir hier auch regelmäßig über die steigende Bedeutung von mobilen Aufrufen für Webseiten berichten.

3 Möglichkeiten für mobile Ansichten

Grund genug um über eine mobile Ansicht für die ilscipio Webseite nachzudenken! Grundsätzlich hätten wir hier drei Möglichkeiten verfolgen können:

1. eine getrennte mobile Webseite unter z.B. m.ilscipio.com
2. eine losgelöste Darstellung der bestehenden Webseite durch ein eigenes Stylesheet
3. den Umbau unseres bestehenden Designs zu einem Responsive Design

Wie die Überschrift ja bereits vermuten lässt, haben wir uns für den Umbau unseres bestehenden Designs entschieden, bei dem nun die Darstellung sich anpasst und dabei drei grundsätzliche Formen annimmt: (klick aufs Bild zum groß anzeigen)

Das wichtigste an einer Webseite: Die Inhalte!

Der Grundgedanke ist hier immer der gleiche: der Inhalt steht im Vordergrund und sollte gut lesbar sein, ohne das viel zoomen notwendig ist oder Inhaltselemente zu schmal werden. Darum werden z.B. aus den drei Boxen nebeneinander am unteren Ende der Startseite zwei Boxen in der mittleren Ansicht und in der mobilen Ansicht stehen die Boxen übereinander anstatt nebeneinander. Doch nicht nur hier war eine andere Anordnung notwenig.

Der Knackpunkt: Die Navigationslinks

Die größte Änderungen stellt die Navigationsleiste dar. In der Desktop-Ansicht haben wir eine Navigationsleiste, die von links nach rechts unter dem Header alle Navigationslinks anzeigt. Doch wird der Bildschirm kleiner müssten wir hier die Elemente in zwei oder mehr Reihen anordnen. Dies führt zu einer unübersichtlichen Lösung, die zusätzlich noch schwer schön zu stylen ist. Aus diesem Grund haben wir uns dazu entschlossen die Navigation per media-queries auf die jeweilige Displaygröße besser zu optimieren. Bei der mittleren Ansicht erscheint die Navigation nun am linken Rand und die links sind von oben nach unten angeordnet. Der Inhalt der Webseite rückt so neben die Navigation und im Blog rückt zusätzlich die Seitenleiste nach links unter die Navigation um ein dreispaltiges Layout zu verhindern.

Doch auf einem Handy ist selbst diese Darstellung ungeeignet, da die Navigation zu breit dargestellt werden müsste um unnötige Zeilenumbrüche zu verhindern. Zusätzlich ist bei der kleinen Größe des Displays auch die Höhe der Navigation kritisch, da es hier schnell passieren kann, dass der Nutzer beim Klick auf einen Link keine Änderung im Bild sieht, weil die Navigation die gesamte sichtbare Fläche einnimmt. Keine schöne Lösung! Aus diesem Grund haben wir uns eine Lösung entschieden, welche eine Agentur bei der Umsetzung der Webseite des Boston Globe eingesetzt hat, bei der nur der aktuell ausgewählte Navigationspunkt sichtbar ist und durch einen Klick die Navigationsleiste ausgeklappt werden kann. So ist die Navigation leicht erreichbar ohne ständig sichtbar zu sein oder wichtigen Platz am oberen Ende der Webseite wegzunehmen.

Technische Umsetzung dank CSS3 und Media Queries

Diese Ergebnisse werden rein durch den Einsatz von CSS erreicht – am HTML der Webseite und deren Aufbau wurde nichts verändert. Die größte Änderung fand bei den Breiten der Elementen statt: Anstatt hier pixelgenaue Breiten anzugeben (z.b. 960 Pixel für die Gesamtbreite des Inhalts), basiert unsere Webseite nun auf Prozentangaben und einer maximalen Breite für den Inhalt (wobei diese nicht zwingend notwendig ist). So wurde jede unserer Pixelbreiten einfach in den passenden Prozentwert bei einer Basisbreite von 960 Pixeln umgerechnet. So ist der Inhalt dieses Blogposts am Desktop nun 65.625% der Gesamtbreite weit. Diese Änderung wurde für alle Breiten und Abstände durchgeführt, so dass sich nun alles relativ aufeinander anpasst (Wichtig: die Breite berechnet sich immer in Abhängigkeit zum Eltern-Element, nicht zur Grundbreite!).

Doch was ist mit den spezifischen Änderungen für kleinere Displays? Nun, CSS3 wartet mit einem neuen Feature namens Media Queries auf, durch das man konditionelle Regeln einführen kann (Alternativ kann man auch im HTML je nach Display unterschiedliche CSS-Dateien aufrufen) . Das bedeutet, dass man z.B. CSS-Regeln nur anwenden kann, wenn das Display zwischen 320px und 480px in der Breite hat. Hierdurch ist es nun möglich bestimmte Geräte anzusprechen oder einfach aufgrund der Breiten bei denen das bestehende Design bricht, zusätzliche Regeln einzuführen, welche die allgemeinen Regeln überschreiben und so Sonderregeln für bestimmte Größen erlauben. Da einige der Änderungen auch für kleinere Desktop-Bildschrime durchaus interessant sein können, kann man durch Javascript-Funktionen diese neue Funktion von neuen Browsern auch in älteren Browsern nachstellen und somit auch hier die Vorteile der Media Queries genießen.

Das Ziel: Die Inhalte immer gut lesbar im Fokus!

Insgesamt muss der Umbau einer Webseite zu einem Responsive Design nicht mehr als ein oder zwei Tage in Anspruch nehmen, solange der Aufbau gut ist und das CSS mit Voraussicht geplant und implementiert wurde. Doch egal, wie der Code aussieht, dass wichtigste sind immer die Inhalte und das diese optimal dargestellt werden und aufgerufen werden können. Darum ist die Planung der Anordnung der Elemente auf unterschiedlichen Anzeigegeräten wichtiger als die technische Umsetzung. Denn es geht darum, dass Sie die Menschen erreichen und nicht nur technische Geräte!