Responsive Webdesign ist Pflicht statt Kür

Ohne responsive Design geht es nicht mehr. Denn schon bald werden mobile Endgeräte den klassischen Heimcomputer als Tor zum World Wide Web abgelöst haben. Zwar sind diese weitestgehend fähig normale Webseiten darzustellen, wer seine Kunden aber hofieren möchte, sollte ein wenig in die Trickkiste greifen. Gerade in typischen Handheld-Situationen, in denen sich der Benutzer eigentlich anderweitig beschäftigt, wie in der U-Bahn oder in einer Warteschlange, ist die Zugänglichkeit der Seite entscheidend. Und allein die Notwendigkeit eine normale Website zu zoomen um an die Informationen zu kommen, kann den User dazu veranlassen sein Telefon wieder einzustecken. Es ist also höchste Zeit, den eigenen Internetauftritt an ein neues Zeitalter anzupassen.

Seperate Mobile Webseite

Die simpelste Variante Inhalte mobiltauglich zu machen ist schlicht und einfach eine zweite, für mobile Endgeräte angepasste, Website. Im Idealfall erkennt die normale Website wenn jemand mit entsprechender Hardware zugreift und leitet automatisch zum kleinen Geschwisterchen weiter.

Entscheidender Nachteil dieser Variante ist Redundanz, die man automatisch eingeht. Immerhin müssen, wenn man konsistent zur Hauptseite bleiben will, alle Inhalte doppelt eingepflegt werden. Jedoch ist das auch bei existierenden Seiten nahezu ohne Veränderungen an der ursprünglichen Website durchführbar und man muss nicht erneut erst die damaligen Entwickler bemühen.

Hat man jedoch bei der Erstellung der Seite ursprünglich auf den richtigen Partner gesetzt und ein Umbau der Seite wird nicht mit einem horrenden Kostenvoranschlag quittiert, so gibt es deutlich effizientere Methoden.

Server Side Feature Detection (Browser Sniffing)

Dabei versucht der Server anhand der in der Anfrage enthaltenen Metainformationen zu “riechen”, mit welchem Endgerät er es zu tun hat und liefert dementsprechend eine andere Website aus. Wie granular die Reaktion dann gesteuert werden kann hängt sehr stark vom eingesetzten CMS ab. Bei den meisten wird es relativ einfach möglich sein ein anderes Template oder Theme auszugeben. Damit ist es zwar notwendig gleich zwei (oder mehr) Layouts zu entwerfen und zu implementieren, aber zumindest die Inhalte müssen nur einmal gepflegt werden.

Die größte Schwäche dieses Ansatzes ist jedoch die Abhängigkeit von den Informationen die der Client zur Verfügung stellt, da es keinen einheitlichen Standard dafür gibt. Man kann entweder eigene Mechanismen entwickeln, um halbwegs akkurat zu raten oder man verlässt sich auf externe Quellen wie WURFL. In beiden Fällen besteht die Gefahr nicht mehr ganz aktuell zu sein, weil gerade neue Smartphones / Tablets mit einem noch größerem Screen auf den Markt geworfen wurde.

Media Queries

Der umgekehrte Ansatz ist eigentlich schon seit längerem Teil der CSS Spezifikation. Und zwar ist es möglich, CSS Regeln zu definieren, die nur unter bestimmten Bedingungen, wie maximale oder minimale Bildschirmbreite, Pixeldichte oder Farbtiefe, Anwendung finden. So springt die Sidebar rechts zum Beispiel ab einer gewissen Bildschirmbreite nach unten, um für den eigentlichen Inhalt mehr Platz zu machen. Der Fantasie sind dabei kaum Grenzen gesetzt. Die Website mediaqueri.es sammelt eindrucksvolle Beispiele von denen man sich inspirieren lassen kann, wie etwa Fit for a frame.

Fixed vs. Fluid

Als wäre die Entscheidung zwischen Server Side Feature Detection und Media Queries nicht ohnehin schon schwer genug, spalten sich bei letzterem noch ein zusätzliches Mal die Lager. Entweder werden fixierte Layouts bevorzugt, die bei bestimmten Schwellwerten, so genannten Breakpoints, ihr Aussehen völlig verändern. So wird beispielsweise ein Breakpoint definiert, der die Seite exakt an das Display eines iPhone anpasst. Bei einem größeren Android Handheld bleiben dann jedoch links und rechts Bereiche der Seite leer.

Diese Vorgehensweise ermöglicht eine genaue Kontrolle, wie das Layout auf jedem Endgerät aussieht, da man sich jedoch bestenfalls auf die am meisten verbreiteten konzentrieren kann, verschwendet man meist auf Smartphones ach so kostbaren Platz. Fluid Layouts hingegen nutzen immer den vollen vorhandenen Platz und passen sich selbstständig an die Breite des Bildschirms an. Allerdings wird vom Designer deutlich mehr Know how abverlangt, da dieser das Design für alle Eventualitäten vorbereiten und dementsprechend viel über die Technologie dahinter wissen muss.

Mobile First

Ältere Browser wissen mit Media Queries nicht sonderlich viel anzufangen. Deswegen wird im Normalfall das “Standard” Desktop Layout umgesetzt und dann um Reaktionen auf bestimmte Bildschirmgrößen erweitert. Benutzer, die noch immer keinen Weg am Internet Explorer vorbei finden, kommen so auf jeden Fall in den vollen Genuss der Seite, da er die zusätzlichen Direktiven einfach ignoriert.

Adaptive Images

Will man ein wenig den Hardliner spielen, solche Benutzer der Strafe zuzuführen, die sie verdienen und damit seinen Teil beitragen das moderne Web ein Stückchen weiter zu bringen, dann gibt es die Möglichkeit den “Mobile First” Ansatz zu verfolgen. Dabei wird die Darstellung auf mobilen Geräten zum “Standard” und kleinsten gemeinsamen Nenner erhoben und erst im zweiten Schritt für größere Displays optimiert. Das hat zur Folge, dass Legacy-Browser zwar nur eine abgespeckte, aber dennoch nutzbare Version erhalten. Man kann jedoch davon ausgehen, dass auf einem Arbeitsplatz der noch auf Internet Explorer 6 oder 7 setzt auch sonst einiges im Argen liegt und eine ressourcenschonende, kleine Website vermutlich besser nutzbar ist als die mit Effekten und Animationen ausgestattete Vollversion. Adaptive Images

Eine Website besteht aber nicht nur aus Text, sondern lebt vor allem von den transportierten Bildern. Und auch die wollen passend dargestellt werden. Die einfachste Möglichkeit ist natürlich, das Bild in voller Größe auszuliefern und es einfach mit der Breite des Layouts mit anzupassen. Das stellt jedoch eine horrende Verschwendung von Bandbreite und Ladezeit dar. Man sollte also entweder mithilfe von Server Side Feature Detection herausfinden, welche Größe des Bildes benötigt wird und genau diese ausliefern, oder man verfolgt auch hier “Mobile First” und lädt standardmäßig die kleinste Version des Bildes um sie unter gegebenen Umständen automatisch durch eine hochauflösendere zu ersetzen. Dieser Ansatz gewinnt vor allem durch die Verbreitung von hochauflösenden (Retina) Displays an Bedeutung, da diese im Idealfall auch größere Versionen der Bilder benötigen.

All zu oft hört man davon dass “Adaptive Designs” ein Gimmick sind, dass in Wirklichkeit nicht notwendig ist, da ja niemand bewusst mit dem Handy im Web surft. Man sollte sich bei dieser Entscheidung aber eines Bedenken: Wer mobil nach Informationen sucht, braucht sie meistens schnell und dringend. Und in diesem Moment den Zugang unnötig zu erschweren hinterlässt weit mehr negativen Eindruck als die schönste Desktop-Website wieder wettmachen könnte.