Responsive Webdesign light: Gedanken und Umsetzung auf diesem Blog

Responsive oder nicht – Du entscheidest. (iPhone 4 Vector von Nutzer „ewiggy” auf vecteezy.com, Lizenz CC BY-SA 3.0)

Es ist der letzte Schrei, erfährt gerade einen große Hype und ist – glaubt man der Fachpresse – in aller Munde: Responsive Webdesign, also die Anpassung der Darstellung an die Bildschirmgröße verschiedenster Ausgabegeräte. Das Layout einer Website ändert sich dabei in Abhängigkeit vom Endgerät und gewährleistet so am Desktop, am Smartphone und am Tablet die optimal Les- und Bedienbarkeit. Kingt gut, oder? Aber ist das wirklich der Stein der Weisen und das Non plus ultra? In diesem Artikel schreibe ich über meine Gedanken zu dieser Thematik und wie ich dieses Blog „responsiviert” habe.

Jedem Topf sein Deckel

Die Anpassung von Website-Inhalten an Ausgabegeräte ist prinzipiell nicht neu. Wir kennen in HTML beispielsweise schon seit Jahren die Möglichkeit, über das media-Attribut im link-Element spezielle Stylesheets für verschiedene Ausgabemedien zu definieren. Beispielsweise ein Stylesheet für die Bildschirmausgabe, eins für die Druckausgabe, eins für Braille-Geräte und eines für Projektoren. Durchgesetzt haben sich in der Praxis allerdings nur zwei Medientypen: screen und print. Da es bei der Ausgabe auf Bildschirmen abhängig vom verwendeten Browser zusätzliche Unterschiede gibt, kennen wir auch seit langen die leidlichen Anpassungen an die verschiedene Ausgabesoftware. Insbesondere ältere Versionen des Internet Explorers sind hierbei immer weider ein Quell großer Freude. Unter dem klangvollen Titel Responsive Web Design passen wir nun auch noch an verschiedene Bildschirmgrößen an – natürlich alles im Sinne des Nutzers, der dadurch eine so viel bessere Experience bekommt. Tatsächlich?

Nichts ist konstanter als die Veränderung

Mich persönlich stört es mitunter wahnsinnig wenn eine Website, die ich vom Desktop kenne, beim mobilen Aufruf vom iPhone aus total anders aussieht. Die Sidebar, in der ich gestern auf dem Desktop noch den gesuchten Artikel verlinkt sah, befindet sich heute auf dem Smartphone am unteren Ende der Seite oder ist – noch viel schlimmer – komplett ausgeblendet. Das Bild, das in der Desktop-Ansicht soviele spannede Details zeigte, ist auf der Smartphone-Ansicht auf Bildschirmbreite eingeschrumpft, das Zoomen mit zwei Fingern in das Bild ist deaktiviert. Selbstverständlich nur, weil es ja so toll ist, die Inhaltswiedergabe auf das Ausgabegerät abzustimmen. Die gleiche Seite am iPad angesurft und erneut sieht alles etwas anders aus und ich muss mich erneut zurecht finden. Das Zoomen ist nach wie vor deaktiviert, dafür ist die Sidebar aber wieder da.

Alles hat seinen Platz

Responsive Webdesign hat seine Daseinsberechtigung, natürlich! Ich finde allerdings, dass die Frage nach dem User Benefit oft hinter die technische Goldgräberstimmung tritt, neue Trends um jeden Preis in die Webpräsenz zu implementieren. Weil es gerade angesagt ist. Eine Website, die nach starker Nutzerinteraktion verlangt (beispielsweise WebApps wie Facebook, Twitter, App.net) oder mit sehr langen Texten aufwartet (beispielsweise die Website der FAZ, heise oder diverse Blogs) werden mit einem angepassten Desgin zweifelsohne aufgewertet: Bedienelemente sind leichter mit dem Finger zu treffen, Texte sind sofort ohne manuelle Anpassung der Zoomstufe lesbar. Bei Business-Websites auf denen Unternehmen und ihre Produkte präsentiert werden sehe ich hingegen oftmals keinen Mehrwert.

It’s all about you – Responsive Design light bei vektorkneter.de

Letztlich ist es natürlich auch ein gutes Stück weit Geschmackssache – ich bin schließlich nicht das Maß der Dinge und man kann natürlich auch völlig anderer Meinung sein. Und möglicherweise ändere ich in den nächsten Jahren auch noch meine Meinung, weil sich mein persönliches Nutzungsverhalten ändert oder die überweigende Anzahl des Webtraffics zu Smartphones strömt. Wer weiß. Derzeit bin ich allerdings der Auffassung, dass im Idealfall der Nutzer entscheidet, wie er mit der Webseite interagieren möchte – mit einem angepassten Design oder so, wie er es vom Desktop kennt. Moderne Browser auf Mobilgeräten erlauben das einfache fokussieren auf ein Inhaltselement via Double-Tap und gestatten so auch auf nicht-responsiven Seiten die problemlose Navigation. Daher habe ich mich entschieden, das auf diesem Blog verwendete Theme (Infinty von DesignCoral, normalerweise nicht responsive) nur um ein Mindestmaß an Responsivness zu erweitern. Im Stylesheet befinden sich somit nur angepasste Anweisungen für Bildschirme zwischen 320 und 479 Pixel Breite. Diese Anweisungen treffen bei den meisten höherwertigen Smartphones nur auf das Hochformat (Portrait) zu – dreht man das clevere Telefon um 90° auf Querformat (Landscape) erscheint die Website in ihrem herkömmlichen Desktop-Look. Oldschool. Das Drehen des Telefons fungiert somit als Style-Switcher und erlaubt, dass jeder Nutzer wählen kann, was ihm besser gefällt.

Ein Fazit

Die Technik hinter Responsive Webdesign ist beeindruckend und man kann wirklich tolle Sachen damit machen. Es gibt sehr viele Beispiele, bei denen der Umgang mit verschiedenen Bildschirmgrößen sehr kreativ als auch nutzerfreundlich realisiert wurde. Allerdings gibt es auch einige Fälle, bei denen die Anpassungen und damit verbundenen Einschränkungen die Nutzbarkeit einer Website verschlechtern. Der Nutzen für den Anwender sollte also immer der Mittelpunkt aller Überlegungen sein und nicht die bloße technische Machbarkeit oder momentane Hipness. Ich probiere es hier in diesem Blog mal mit freier Entscheidung für oder gegen „responsivierter” Layouts. Für mich ist das ein guter Mittelweg aber schauen wir mal.