medani-pixel
news
04
Mrz 14

Responsive Webdesign, mobiles Design und der Designprozess

Warum Responsive Webdesign so verbreitet ist, was es von mobilem Design unterscheidet und wie Responsive Design den Designprozess an sich beeinflusst.

Einleitung: Warum Responsive Design?

Einige Zahlen rund um die starke Verbreitung von mobilen Geräten, machen deutlich, wie groß der Bedarf an mobilem Webdesign tatsächlich ist: Im Bereich Smartphones sieht die Verbreitung sehr hoch aus: bereits im ersten Quartal 2013 wurden knappe 426 Millionen Handys über reale und digitale Ladentheken verkauft, knapp die Hälfte davon (49,3 Prozent) waren Smartphones. Das sind etwa 210 Millionen Stück verkaufte Smartphones und die Menge entspricht 43 Prozent Wachstum im Vergleich zum Vorjahr 2012. (6)

Auch bei Tablets gibt es aktuelle Zahlen die die starke Verbreitung zeigen. Laut einer Statistik sollen im Jahr 2016 282.7 Millionen Tablets verkauft werden. Eine andere Quelle schätzt die Verkaufszahlen sogar höher ein, nämlich dass zwischen 2013 und 2014 eine halbe Milliarde Tablets verkauft werden. (3) Dass es inzwischen eine Notwendigkeit geworden ist, gutes Webdesign gezielt für die Formate mobiler Geräte anzupassen, wird dabei wieder einmal deutlich. Tablet User erzeugen dabei übrigens 20% mehr Umsatz im Online-Einkauf als andere Standard Desktop Internet-User. (3)

Responsive Design vs Mobiles Design

Dass sich bei diesen Bedingungen die Anforderungen an das Webdesign enorm verändert haben ist klar. Doch wie sehr der gesamte Designprozess davon beeinflusst wird, wird bei genauerer Auseinandersetzung mit dem Thema klar.

En Zitat von mobify, die einen soliden Artikel für mobile und Responsive Design herausgegeben haben, zeigt humorvoll und realistisch einen Einblick in die Lage von Webdesignern heute: „Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.“ (1)

Dass es heute wenig Sinn mehr macht, Webdesign an alle möglichen Geräte individuell pixelgenau anzupassen zeigt auch die Tatsache, wie viele unterschiedliche Bildschirmauflösungen es aktuell tatsächlich gibt. Zwischen 2005 und 2008 etwa, wurden bereits 400 verschiedene mobile Geräte verkauft. (1) Beachtet man dabei, dass viele dieser Geräte eigene Bildschirmauflösungen mitbringen, und die Mehrheit davon ebenso horizontal wie vertikal gehalten werden (portrait und landscape) vermehrt sich diese Zahl an möglichen Bildschirmauflösungen weiter. Und bedenkt man auch, dass wenige Desktop User ihre Browser immer auf 100% Größe eingestellt haben, sondern Browser in unterschiedlichsten Größen auf ihren Bildschirmen geöffnet haben, noch einmal.

Dass es eine andere Lösung geben muss Websites für all diesen Geräte zu optimieren ist klar: Responsive Design. Responsive Design ist Design, dass sich an alle Bildschirmauflösungen anpasst – sprich englisch: design that responds. Es geht hier generell gesehen nicht mehr darum, pixelgenau auf jedem Gerät ein Design abzubilden, sondern möglichst viele Geräte auf einmal durch flexible Lösungen anzusprechen. Kurz gesagt steckt der Clue darin, Formate für Spaltenbreiten, Textgrößen, Bildgrößen, etc. zu schaffen dich sich flexibel an die jeweilige Breite und Höhe des Gerätes anpassen.

Der Unterschied zum mobilen Design besteht generell darin, dass im Responsive Design ein flexibles Design geschaffen wird, das sich an alle Formate anpassen kann. Beim mobilen Design hingegen realisiert man meist eine zusätzliche separat realisierte Designlösung zur bestehenden Desktop-Website, die für mobile Endgeräte optimiert ist. Dass diese wiederum in ihrem Aufbau auf die Vielzahl der Smartphones und Tablet möglichst flexibel reagiert ist klar. Dass es aber zusätzlich die eigene Desktop-Version gibt, die grundsätzlich erhalten bleibt ist der Unterschied zum Responsive Design, wo eine flexible Lösung alle Formate bedienen kann.

Ob Responsive Design oder eine mobile Version zur bestehenden Website für Kunden vorteilhafter ist, beantwortet sich beim jeweiligen spezifischen Ausgangspunkt. Habe ich eine optimale Desktop-Website, die in den nächsten Jahren erhalten bleiben soll? Dann empfehlen wir eher eine mobile Version zusätzlich zu realisieren. Habe ich keine optimale Desktop-Seite, beziehungsweise brauche ich eine gänzlich neue? Dann empfehlen wir gleich eine neue Website im Responsive Design zu realisieren, da so finanziell und zeiteffizient das Beste Ergebnis erzielt werden kann.

Wombats-Display

wombat’s hostels tablet view. quelle: medani / wombats

Wombats-Tablet

wombat’s hostels tablet view. quelle: medani / wombats

 

Responsive Design im Designprozess

Durch die Notwendigkeit ein Design zu entwickeln, das auf allen Geräten optimal wirkt, hat sich eine neue Denkweise im Design entwickelt, die in dieser Art im Webdesign neuartig ist. Wieder passt dazu ein Zitat von mobify, die die Frage stellen, welche Pixeldimensionen ein/e WebdesignerIn beim Beginn eines neuen Projektes in seinem Dialogfenster eingeben soll, um gleich die wichtigste Größe zuerst zu bearbeiten. Die Antwort: „Perhaps it doesn’t matter.“ so mobify, und weiter: „Consider this. The goal of this process is to create a website that begs to be read at any resolution. So, start at whatever resolution you’d like, whatever you’re comfortable with. Every resolution is important, not just the resolutions that last month’s analytics say are the most popular.“ (2)

Dass diese Thematik auch anders gelöst werden kann, zeigen andere Autoren. Viele sind nämlich der Überzeugung, dass es sinnvoll ist mit dem kleinsten Format zu starten. Warum? Die Gründe sind einleuchtend:

– Je kleiner das Format, umso größer die Notwendigkeit sich auf die wesentlichen Inhalte zu konzentrieren.
– Je mehr man sich auf die wesentlichen Inhalte konzentriert, desto klarer wird das Ergebnis werden und desto schlanker auch die Desktop Version –mobile Geräte werden immer verbreiteter und kleine Größen deshalb immer wichtiger.
– Wenn die wesentlichen Inhalte stehen, kann bei größeren Formaten Design dazu gebaut werden.

Dass das durchaus ein Vorteil sein kann sehen wir genauso. Klar zu arbeiten und dabei das Wesentliche in den Mittelpunkt zu bringen ist eines der wichtigsten Kriterien für erfolgreiches Design. Gleichzeitig ist es als DesignerIn genauso wichtig, sich die Vorgehensweisen anzueignen, die einem am meisten liegt und dabei frei zu bleiben um neue Wege zu gehen, die vielleicht bei einem bestimmten Projekt am zielführendsten sind.

Zusätzlich zur flexiblen Konzeption einer Website für verschiedene Formate, gibt es einen weiteren Ansatzpunkt im Designprozess, der gezielte Aufbereitung der Inhalte für unterschiedliche Formate erlaubt: Die hilfreiche Funktion CSS Funktion display: none; mit der es leicht möglich geworden ist, bestimmte Inhalte auf verschiedenen Oberflächen ein und auszublenden. Man kennt diese Funktion häufig von Menüs, die sich in kleinen Formaten auf ein Symbol reduzieren, aus dem bei Klick sie Navigation erscheint. Toggles oder Accordeons, die bereits in der Mehrheit der erhältlichen Themes vorhanden sind, tun ihr eigenes dazu, doch darüber hinaus gibt es weit größere Möglichkeiten. Denn diese Funktion gezielt in den Prozess miteinzubeziehen ist sehr hilfreich. Verwendet man sie zum Beispiel an spezifisch konzipierten Stellen, kann man komplexe Inhalte für iPhone und Co so aufbereiten, dass es besonders auf den kleinen Formaten äußerst Userfreundlich möglich ist. Man kann zum Beispiel große Inhaltsbereiche einer Seite auf der Desktop Version gleich sichtbar machen. In der mobilen Version hingegen spart man sich meterlanges Scrollen, in dem man statt dem ursprünglichen Block nur einen Button setzt, der statt dem Inhalt nur die Information gibt, was dahinter zu sehen ist. Klickt man den Button, wird der Inhaltsblock erst sichtbar und verschwindet nach dem Lesen wieder hinter seinem Button.

Sich hier gezielt mit diesen neuen Möglichkeiten auseinanderzusetzen, verändert die Möglichkeiten im Designprozess stark. Wenn beginnt diese auszuloten wird klar: Responsive Design ist viel mehr, als alle Informationen der Desktop Version auf allen Screens lesbar zu machen. Es ist möglich, gleiche Inhalte auf jedem Format zum individuellen Erlebnis zu machen. Responsive EMags geben dabei sehr gute Anregungen. (Siehe dazu auch Page „Das neue Layouten“ #03.2014, S.20)

Im nächsten Artikel zeigen wir eine Hand voll weitere zielführende Tricks, die die Usability eines Webdesigns speziell in kleinen Formaten und Touch Screens gezielt erhöhen können.