Responsive Webdesign – Was hat das mit mir zu tun?

Das Thema Responsive Webdesign hat inzwischen jeden von uns, der mit offenen Augen durch das Internet läuft, mindestens einmal berührt. Quasi wie aus dem Nichts ist diese Disziplin über Nacht zum neuen Buzzword unter Webdesignern/Entwicklern und Marketingleuten geworden. Responsive Webdesign gilt einfach als sexy, auch wenn die eigentliche Idee dahinter nicht gerade neu ist.

Jeder kennt diesen Moment, wenn man sein Browserfenster verkleinert und die darauf dargestellte Website auf einmal ihr Aussehen ändert, um sich den neuen Dimensionen des Browsers anzupassen. In der Welt des Internets, wo bis vor kurzem jede dargestellte Website in Stein gemeißelt schien, sorgt dies immer wieder für ein beeindrucktes „Woahou“ und hinterlässt dieses unangenehme Prickeln im Hinterkopf, wenn man nicht genau weiß wie etwas gemacht wurde.

Aber abgesehen von dem Ziel, Kunden und Kollegen aus der Webbranche mit den eigenen, phänomenalen Design und Codingfähigkeiten zu beeindrucken, gibt es auch näherliegende, greifbare Absichten, die mit Responsive Webdesign verbunden sind.
Alles auf Anfang
In der Vergangenheit geisterte das Schlagwort „Crossbrowser Compatibility“ wie ein Schreckgespenst durch die Internetgemeinde. Inzwischen ist der IE6 beinahe am Ende und wir konnten uns fast vollständig vom Leid der Multibrowser Unterstützung erholen, da steht bereits der große Bruder unseres einstigen Peinigers vor der Tür. „Crossplatform Compatibility“ hält neuerdings die Welt in Atem, und Schuld ist ganz allein Apple.
Zumindest hat Apple mit seinem Siegeszug von iPhone und iPad neue Probleme und Aufgabenstellungen für uns Webdesigner/Entwickler aufgestellt. Webseiten werden inzwischen nicht mehr nur auf Desktoprechnern oder Notebooks angeschaut – inzwischen browsen viele Internetuser per Smartphone oder Tabletrechner durch die Welt. Die Problematik die dadurch zustande kommt, lässt uns nicht mehr über unterschiedliche Berechnungen von Margins und Borders oder voneinander abweichende Floatverhalten nachgrübeln, vielmehr müssen wir die Art und Weise wie das Internet erfahren und erlebt wird neu bedenken.

Aber warum?
Der offensichtliche Teil dieser Rechnung ist die Tatsache, dass all diese neuen Geräte, unterschiedliche Bildschirmgrößen mit sich bringen. Haben wir Webdesigner uns also bis vor kurzem noch gefreut, dass sich bei Desktoprechnern Bildschirmauflösungen jenseits der magischen 1024 x 768 Pixel langsam durchsetzen, werden wir nun quasi in die Steinzeit zurückgetreten wo Auflösungen im Bereich von 320 x 240 Pixel gängig sind. Und eine Website die für 1024 x 768 Pixel ausgelegt ist, muss auf einem Smartphone mit einer Auflösung von 320 x 240 Pixel einfach zum Abgewöhnen aussehen.

Der zweite Teil ist die abweichende Art der Bedienung. Auf einem Desktoprechner klickt man sich mittels Maus durch das Internet, auf einem Smartphone oder Tablet gibt es so etwas nicht. Hier wird alles mittels Fingerberührung bedient und verglichen mit der relativ präzisen Bedienbarkeit der Maus, ist diese Art der Bedienung sehr grob und ungenau.

Was also machen?
Wichtig ist es zunächst einmal, klar zu stellen das Responsive Webdesign keine neue Technik ist. Es gibt keinen neuen Tag in HTML 5, keinen bis vor kurzem noch unbekannten CSS3 Befehl der alles wieder gut macht und auch keinen magischen Schalter in Javascript der uns von allem Übel dieser Welt befreit. Responsive Webdesign ist eher einen neue Disziplin oder auch Herangehensweise an das Thema Webdesign. Es handelt sich um das Ziel eine responsive Webseite zu erschaffen, aber das wie ist eine Kombination aus verschiedenen Techniken und Mitteln sowie dem eigenen Einfallsreichtum. Dennoch gibt es bereits einige Best Practices dort draußen, die zeigen wie Responsive Webdesign erreicht werden kann.

Kümmern wir uns zunächst einmal um das erste Problem, die Bildschirmauflösung. Es gibt verschiedene Ansätze Herr der Lage zu werden. Meistens wird es nötig sein, mehrere Techniken mit einander zu kombinieren, um die gewünschten Resultate zu erzielen:

1. Fluid Grids
Wir Frontendentwickler sind es gewöhnt in Pixeln zu denken und zu rechnen, denn immerhin sind Pixel die Währung eines jeden Bildschirms. Nur leider gibt es ein Problem, Pixel sind ein absoluter Wert, absolut unbrauchbar wenn eine Website in verschiedenen Auflösungen gleich aussehen soll. Wer sich in den letzten Jahren richtig Mühe gegeben hat, folgte dem allgemeinen Trend zu relativen Größenangaben – meist hat sich hier die Angabe mittels „em’s“ durchgesetzt. Der Effekt war, das es damit möglich war, Webseiten zu skalieren. Vor allem im Bereich der Barrierearmut wurde dies gerne genutzt um den Browserzoom für Schriften dazu zu nutzen, um ganze Webseiten zu zoomen. Inzwischen können aktuelle Browser dies selber tun, sie benötigen keine em’s mehr dafür.

Der neue Trend heißt Prozentangaben. Denn während sich em’s auf die Schriftgröße des Elternelements beziehen, wirken sich auf Prozentangaben die aktuellen Werte des Elternelements im jeweiligen Stylebefehl aus. Ist ein Div etwa mit einer Breite von 80% definiert, so wird er 800 Pixel breit sein wenn das Elternelement 1000 Pixel breit ist. Misst das Elternelement hingegen nur 10 Pixel in der Breite, so ist unser Div lediglich noch 8 Pixel breit – also immer 80%.

Dieses Verhalten wird genutzt, um Fluid Grids zu konstruieren, welche sich beständig an die verfügbare Fenstergröße anpassen. In welchem Umfang diese Technik genutzt wird, ist immer abhängig vom jeweiligen Design. Die CSS Befehle min-width und max-width, bzw ihre Pendants für height sind sehr hilfreich dabei, diesen Effekt einzugrenzen.

2. Flexible Images
Neben dem Raster der Seite, ist es zudem nicht schlecht, wenn auch Inhaltsbilder in ihrer Größe flexibel sind. Flexible Images ist ebenfalls wieder mehr eine Idee denn eine Universal Lösung. Es ist möglich Bilder mittels CSS zu reskalieren, allerdings liegt es in der Natur eines Pixelbildes, das es an Darstellungsqualität verliert, wenn daran gezehrt wird. Besonders das Rendering von gestauchten Bildern ist auf Windowsrechnern anderen Plattformen unterlegen und bringt oftmals unschöne Darstellungsfehler mit sich. Vom Großrechnen kleiner Bilder mittels Browser will ich gar nicht erst anfangen. Es gibt daher auch jenseits der CSS Befehle zum Reskalieren eines Bildes Möglichkeiten, Flexible Images zu optimieren.
http://unstoppablerobotninja.com/entry/fluid-images

Eine Möglichkeit ist das Verwenden von Vektorgrafiken mittels SVG. Nur leider hat SVG einige Nachteile. Zum einen wird SVG vom IE bis Version 8 nicht unterstützt, zum anderen ist es recht kompliziert und aufwändig mit SVG zu arbeiten. Hinzu kommt das Vektorgrafiken allgemein ungeeignet sind, um komplexe Bilder wie etwa Fotos darzustellen.
http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

Interessant finde ich den Ansatz ein Bild in mehreren Versionen im HTML Code zu hinterlegen, sagen wir ein normal aufgelöstes für Desktoprechner und eine kleine Variante für Smartphones. Angezeigt wird immer nur die Version des Bildes, die zur aktuellen Browsergröße passt. Spinnt man diesen Gedanken weiter, so kann man eine Webseite auch gleich noch vom übertragenen Datenvolumen sinnvoll für mobile Geräte erweitern. Wird zum Bespiel nur die kleine Version des Bildes mittels Bildtag an den Browser übermittelt und die große Variante nur als Link (beide Tags sind logisch über ihrer IDs miteinander verknüpft), so kann man auf Desktoprechnern mittels JavaScript das href Attribut des Links in das src Attribut des Bildes übertragen. Auf Smartphones bleibt dieser Schritt aus und wir haben kein unnötig großes Bild geladen.

3. Media Queries
Media Queries kommen immer dann zum Einsatz, wenn die Fenstergröße des Browsers einen kritischen Punkt erreicht und ein Umbau am Seitenlayout nötig wird. Hierbei werden im Grunde Elemente ein und ausgeblendet oder teilweise vollkommen neue Styles für existierende Elemente vergeben.

Eine gute Vorlage für Media Queries zum Bedienen verschiedener Gerätearten findet man hier:
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

Allerdings können an solchen Stellen harte Sprünge im Design auftauchen, eine Unschönheit mit der sich der Designer Elliot Jay Stocks bereits beschäftigt hat. Interessant ist hier die Ergänzung der Media Queries mittels CSS Transitions um diese Übergänge zu animieren.
http://elliotjaystocks.com/blog/css-transitions-media-queries/

It’s the man, not the mashine.
Nun, die bisherigen Betrachtungen bezogen sich lediglich auf die technische Umsetzbarkeit. Genauso wichtig ist das Grundproblem, die Bedienung einer Website auf verschiedenen Gerätetypen. Wie bereits erwähnt, müssen wir Webdesigner uns mit dem Gedanken anfreunden, das Websiten mittels Berührungen bedient werden. Klassische Links, kleine Buttons sowie das Verwenden von Zuständen die es auf Touchdevices nicht gibt (z.B. hoover) führen auf entsprechenden Geräten zu Bedienmängeln.

Deshalb ist im letzten Jahr auch ein neuer Trend im Netz zu bemerken gewesen. Weißraum wird wesentlich freizügiger genutzt als bisher, Margins und Paddings bei Buttons und Links werden größer, insgesamt erscheinen aktuelle Webseiten etwas grober als früher. Dieser Trend versteht sich sehr gut mit einem weiteren Trend, dem Simplicism, also dem Reduzieren von Layouts auf das Wesentliche. All dies verursacht eine Designmethode namens „Mobile First Design“. Hierbei wird ein Design vom kleinsten gemeinsamen Nenner her aufgezogen, etwa einer Smartphone Variante – und alle weiteren Versionen werden um diese Version herum aufgebaut. Grundgedanke ist, ein Button den ich auf einem Smartphone gut mit dem Finger bedienen kann, ist mit der Maus auf einem Desktoprechner hervorragend zu bedienen. Quasi, was für Smartphones gut ist, kann für Desktopbrowser nicht schlecht sein.

Abschließende Gedanken
Responsive Webdesign erfindet das Rad nicht neu, bündelt aber eine ganze Palette von Ideen und Methoden die das Ziel „Eine Website für alle Geräte“ ermöglichen will. Nicht immer ist es sinnvoll auf ein responsives Design zu setzen aber schick ist es auf alle Fälle.

Worüber man sich im Klaren sein muss, Responsive Webdesign ist nichts was man mal eben anschalten kann. Es sind diverse Mehraufwände nötig, vom Erstellen diverser Screenvarianten bis zum Testing auf verschiedenen Geräten, von daher sollte vor Projektbeginn geklärt werden, ob Responsivität gewünscht ist oder nicht (z.B. um eine mobile Variante zu ermöglichen). Zudem muss das Thema in so einem Fall, von Beginn an in die Konzeption eines Portals mit einfließen.

Problematisch ist der Ansatz Responsive Webdesign besonders auf Webseiten die allzu viele Details und Informationen auf wenig Raum darstellen wollen. Wir kennen es alle von diversen Angebots- oder Hotellisten. Da werden in einem Listenelement teilweise mehr Informationen angeboten, als auf so manch kompletter SingleSitePage. Da gibt es Bild, Preisteaser, Titel, Addressdaten, Beschreibungstext, Kartenlink, Sterneanzahl und einen Merken/Buchen Button. Je mehr Details also dargestellt werden müssen, umso schwieriger wird die Bedienung auf mobilen Geräten und umso sinnloser der responsive Ansatz.

Abschließend möchte ich noch jedem folgende Artikel ans Herz legen:

Designing The Well-Tempered Web
über Kompromisslösungen und Probleme beim Webdesign für verschiedene Darstellungsgeräte:
http://uxdesign.smashingmagazine.com/2012/01/17/designing-well-tempered-web/

Responsive Web Design: What It Is and How To Use It
eine schöner Überblick zum Thema Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Responsive Web Design Guidelines and Tutorials
Eine Sammlung von Tutorials und ShortCuts
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

http://mattkersley.com/responsive/
Ein kleines Tool um eine Website schnell in verschiedenen Größen aufzurufen.