von Andy Pillip

Responsive Relaunch Leitfaden

Der Weg Ihrer Web­site auf mobile Geräte/zur Responsive Website

Mit einem Relaunch Ihrer Seite als Responsive Website bauen Sie auf bestehenden Arbeiten und Workflows auf, statt alles neu zu machen.

Der Relaunch versetzt Sie zudem in die Lage, Ihre optimierten Inhalte auch an zukünftige Apps auszuliefern.

Inhalt

Eine Web­site für alle Geräte: Responsive Web­design

Eine responsive Website — eine Website, die mitgeht — passt sich an das verwendete Gerät an. Dabei ist in diesem Fall hauptsächlich der verfügbare Platz auf dem Bildschirm gemeint.

Je nachdem, ob sie die Seite auf Ihrem kleinen Smartphone, dem 5"-Schinken, einem 7 oder 10"-Tablet, ihrem Netbook, Laptop, oder an Ihrem gigantischen iMac besuchen, präsentiert sie sich in einem Layout, das für die Bildschirmgröße am passendsten ist.

Das macht ihre Seite zukunftssicher — denn wer weiß, was für Geräte in den nächsten Jahren noch auf den Markt kommen.

Die Seite präsentiert sich damit immer passend, hat aber immer die gleiche Adresse. Ihre Besucher können sie also ohne Probleme auf Facebook teilen und Google kann sie indizieren.

Weiter kann die Seite dann natürlich auch darauf eingehen, ob Sie eine Maus benutzen, eine Tastatur oder einen Touchscreen, oder ob Sie GPS-Koordinaten abfragen können.

Reduktion auf das Wichtigste: Mobile First

Das Ziel am Ende des Relaunches ist eine Website, die sich nicht nur am kleinsten Bildschirm einfach und übersichtlich anfühlt, sondern auf allen Geräten.

Nachdem auf dem kleinen Smartphone-Bildschirm nicht viel Platz ist, sind sie gezwungen, sich auf das wirklich Wichtige zu konzentrieren: Was sind die Anwendungsfälle? Welche Information brauchen Ihre Besucher?

Diese Reduktion und Einfachheit ist gut: Sie hinterlassen bei Ihren Besuchern ein Gefühl der Kontrolle und wecken Vertrauen. Genau aus diesem Grund sollten Sie diese Reduktion auch auf größeren Bildschirmen beibehalten.

Bei einem neuen Projekt ist das erst einmal einfacher, weil Sie mit der Informationsarchitektur am kleinen Bildschirm beginnen können. Aber nutzen Sie die Arbeit, die Sie in den Relaunch stecken, auch zur Verbesserung des Layouts an großen Bildschirmen. Im responsive Design benötigen Sie ja ohnehin die gleiche Informationsarchitektur.

Wichtig ist: Sie dürfen auf keinen Fall auf kleineren Bildschirmen Inhalte weglassen. Sie verprellen damit Ihre Besucher, die diese Inhalte erwarten.

Was nicht wichtig genug für den kleinsten Bildschirm ist, wird auf einem großen Bildschirm nicht wichtiger.

Der Mythos vom mobilen Benutzer

In der Einleitung wurde der Ausdruck mobile Geräte verwendet.

Damit ist gemeint, dass die Geräte portabel sind — keinesfalls ist gleich davon auszugehen, dass ein Benutzer gerade mobil unterwegs ist, nur weil er ein solches Gerät benutzt. Oft werden Tablets und Smartphones auch im Café oder auf der Couch zuhause verwendet.

Beschränken Sie Ihr Angebot auf diesen Geräten also keinesfalls auf Anwendungsfälle unterwegs.

Erst machen, dann lesen: Interaction first

Auch, wenn Ihre bestehende Website überwiegend einfach nur Information bietet, gibt es sicher Seiten, auf denen Benutzerinteraktion möglich ist. Zum Beispiel Suchformulare und -filter oder simple Kontaktformulare.

Interaktion hat oberste Priorität! Das Formular oder Bedienelement muss als Erstes am Bildschirm erscheinen, scrollen darf nicht nötig sein. Der Benutzer will aktiv werden.

Vielleicht haben Sie eine äußerst durchdachte Form der Bedienung, zu der Sie viel zu sagen haben. Lassen Sie die Interaktion für sich selbst sprechen! Wer mehr wissen möchte, besorgt sich die Information selbst, zum Beispiel, indem er nach unten scrollt.

Benutzerfreundliche Oberflächen erschließen sich von selbst, eine Erklärung sollte nicht nötig sein. Ihr Responsive Relaunch ist auch eine gute Gelegenheit, nochmals die Usability zu überprüfen.

Redesign

Natürlich ist beim Launch Ihrer bestehenden Website ein Design mit diversen Layouts entwickelt worden — oft auch gleichzeitig mit einem Corporate Design, vielleicht sogar mit Styleguides.

Dieses können Sie erneut aufgreifen, um die Übertragung auf kleine Bildschirme zu unterstützen. Kleine Design-Prototypen machen die Anpassungen für kleine Bildschirme erleb- und damit diskutierbar.

Wenn Sie sich vorher Gedanken zur Reihenfolge der Informationen auf dem Bildschirm gemacht haben, ist jetzt schon klar, wie sich diese auf dem kleinsten Bildschirm anordnen, und die Entscheidung für größere Layouts ist einfacher.

Liefern Sie also Ihrem Designer für die Responsive Website diese Unterlagen mit.

Greifbar muss es sein (Touchability)

Bei der Gestaltung von Inter­aktions­elementen, besonders von Links, muss der Designer natürlich darauf achten, dass diese groß genug ausfallen, um auch mit dicken Fingern bedient zu werden.

Jeder Griff daneben frustriert den Benutzer. Es ist also wichtig, dass allen Elementen — inklusive der Schrift — genug Platz eingeräumt wird. Darum ist die Priorisierung extrem wichtig.

Optimal wäre die Touch-Bedienung dann mit Thumb-Flow, also wenn zentrale Aufgaben ohne Umgreifen nur mit dem Daumen erledigt werden können.

Eingaben vereinfachen

An den modernen Geräten sind durch den Touchscreen viel direktere Interaktionen möglich als mit Maus und Tastatur.

Untersuchen Sie Ihre Website auf Eingaben, die nur mit Tastatur und Maus möglich sind oder auf Touchscreens unnötig umständlich. Überlegen Sie Sich Lösungen für diese Fälle. Vielleicht finden Sie auch Eingabemöglichkeiten, die am Touchscreen mehr Spaß machen.

Wichtig ist, dass Sie das Danebengreifen verhindern, indem Sie die Elemente groß genug machen.

Formulare aufräumen

Beschränken Sie Ihre Formulare auf wirklich wichtige Angaben.

Der Grundsatz der Datensparsamkeit aus dem Datenschutz kommt auch Ihnen zugute, indem mehr Besucher Ihre Formulare tatsächlich abschicken, weil das Ausfüllen schneller geht. Gerade an Geräten ohne richtige Tastatur sind Eingaben mühsam.

In sehr vielen Fällen können Sie weitere Informationen zur Marktanalyse auch später erfragen. Der Benutzer ist nach dem Erreichen seines Ziels auch eher dazu bereit, solche Angaben zu machen.

Idealerweise haben Sie auch hier zu jedem Formular bereits Überlegungen angestellt, welches Ziel der Benutzer damit erreichen möchte. Falls nicht, ist jetzt Gelegenheit, dies nachzuholen.

Mit dem Ziel des Nutzers vor Augen, fällt es Ihnen dann leicht zu entscheiden, welche Eingaben tatsächlich benötigt werden.

Ist die Notwendigkeit eines Feldes nicht direkt ersichtlich, weil sie sich nur durch die Prozesse im Unternehmen ergibt, sollten Sie auch dem Benutzer erklären, wofür diese besondere Angabe benötigt wird. Das schafft Vertrauen.

Benutzereingaben erleichtern

Denken sie darüber nach, auch langfristig nach dem Relaunch Benutzereingaben zu vereinfachen.

Durch oft schon kleine Änderungen vereinfachen Sie die Eingabe von Informationen an modernen Geräten ungemein.

Ein schönes Beispiel ist das Eingabefeld für E-Mail-Adressen. Weiß der Browser, dass eine solche erwartet wird, kann er die Touch-Tastatur bereits für die Eingabe optimieren. Zum Beispiel gibt es dann Tasten für @ und .com.

Lässt man bei Telefonnummern nur Zahlen zu, vereinfacht sich die Tastatur auf 11 Tasten und die Nummer ist wesentlich schneller einzutippen. Das Gleiche gilt für Kreditkarteninformationen.

Diverse Sensoren des Gerätes, wie zum Beispiel GPS oder die Kamera, können Eingaben sogar völlig überflüssig machen oder dem Benutzer eine Vorauswahl anbieten.

Inhalte mobilfähig machen

Ein großer Teil der Arbeit liegt darin, Ihre Inhalte für alle Geräte fit zu machen. Viel davon ist Routinearbeit und kann von Hilfskräften erledigt, wenn nicht sogar mit Skripten automatisiert werden.

Die Autoren müssen natürlich trotzdem die nötigen Änderungen verstehen, um zukünftige Inhalte mobilfähig zu erstellen. Hier kann eine Schulung zur Sensibilisierung für das Lesen am Bildschirm helfen.

Am besten stellen Sie dem Autorenteam ein kleineres Tablet zur Verfügung, damit sie die neue Präsentationsform ihrer Arbeit verinnerlichen können.

Ist diese Arbeit einmal erledigt, können Ihre Inhalte prinzipiell auch in Apps, E-Books oder weiteren Webseiten verwendet werden, weil sie gut strukturiert sind.

Inven­ta­risierung und Prio­ri­sierung

Die Gewichtung Ihrer Angebote und Informationen ist im Idealfall bereits bei der Erstellung Ihrer bestehenden Website passiert und Sie können die alten Dokumente ausgraben und aktualisieren: Welche Artikel, Bilder, Videos und Formulare sind derzeit auf Ihrer Website?

Ohne eine ordentliche Content-Strategie passiert es im Laufe der Zeit, dass Inhalte besonders auf der Startseite landen, die niemals so hoch priorisiert waren. Deshalb ist es umso wichtiger, dass Sie eine aktuelle Inventarliste Ihrer Website haben und diese entsprechend bewerten.

Ihr CMS-Administrator kann Ihnen sicherlich eine aktuelle Übersicht exportieren, die Sie dann in der Tabellenkalkulation gewichten. Spätestens jetzt sollten Sie diese Priorisierung unbedingt auch mit den Interessen Ihrer Besucher abgleichen, die Sie in der Besucheranalyse finden.

Nachdem der Inhalt festgelegt ist, müssen Sie nun entscheiden, was oben steht. Sie sollten dafür Ihre Inhalte in kleinere Portionen teilen und sortieren.

Texte

Am Bildschirm wird weniger aufmerksam gelesen als auf Papier — deshalb ist Orientierung im Text für den Benutzer extrem wichtig. Gute Texte (am Bildschirm) sind in genügend Absätze portioniert und haben Zwischenüberschriften, die dem Leser helfen, den richtigen Abschnitt schnell zu finden.

Besonders wichtig ist, dass die Texte mit den entsprechenden Formaten ausgezeichnet sind, und nicht zum Beispiel einfach mit Leerzeichen bündig gehalten werden, die dann auf kleinen Bildschirmen zu katastrophalen Ergebnissen führen.

Ein guter Schritt ist hier die Unterstützung eines Programmierers, der Ihnen in großen Textsammlungen solche kritischen Stellen auffinden kann.

Selbst können Sie Texte in ein einfaches Textprogramm kopieren (z.B. Notepad oder Editor) und das Fenster größer und kleiner ziehen (richtig klein). So sehen Sie, wo der Text Schwachstellen hat und Überarbeitung nötig ist.

Ideal ist auch hier, wenn das CMS Sie bei dieser Arbeit unterstützt, indem es die Struktur des Artikels erfassbar macht. Ein Ansatz ist, vereinfachte Markupsprachen wie Markdown anstatt eines WYSIWYG-Editors einzusetzen.

Tabellen

Auf kleinen Bildschirmen ist es sehr schwierig, tabellarische Daten darzustellen.

Dafür gibt es mehrere Ansäzte, der Einfachste ist, die Tabelle zu linearisieren: Die Zellen einer Zeile werden am kleinen Bildschirm dann untereinander statt nebeneinander dargestellt.

Es hängt aber stark vom Inhalt der Tabelle ab, ob das funktioniert. Oft ist es nötig, in jeder Zelle auch die zugehörige Überschrift einzufügen, damit der Zusammenhang noch klar ist.

Ihr CMS lässt sich erweitern, sodass die einzelnen Zellen dar Tabelle automatisch um Überschriften erweitert werden, und auf kleinen Bildschirmen dann in der Zelle statt z.B. in einer Kopfzeile angezeigt werden.

In jedem Fall ist unabdingbar, dass die Tabellen ordentlich formatiert und ausgezeichnet sind. Die Auszeichnung der Kopfzeile ist auch wichtig, damit diese im Ausdruck auf jeder Seite wiederholt werden kann. Überschriftenzellen müssen markiert werden, und ihr Bezug (Zeile oder Spalte) festgelegt werden.

Grafiken

Eine der größten Schwierigkeiten im responsive Webdesign sind derzeit noch Grafiken.

Zunächst gilt einmal, dass kleinere Bildschirme kleinere Grafiken benötigen. Das heißt dass Grafiken nicht nur verkleinert, sondern eventuell auch neu zugeschnitten werden müssen, um auf weniger Platz die gleiche Information zu transportieren.

Seit dem iPhone 4 mit dem Retina Display werden Bildschirme immer hochauflösender — damit benötigen plötzlich auch noch kleine Bildschirme die Grafik in höherer Auflösung.

Statt Grafiken in unterschiedlichen Auflösungen vorzuhalten, kann es besonders bei Illustrationen Sinn machen, sie gleich in einem geeigneteren Format, zum Beispiel als Vektorgrafik, bereitzustellen.

Ihr Logo auf dem Smartphone

Das Paradebeispiel ist hier vermutlich Ihr Logo. Das Logo von der bestehenden Website auf dem kleinen Bildschirm platziert, räumt Ihrer eigentlichen Dienstleistung, Information oder der Interaktion viel zu wenig Platz ein. Auch hier gilt: Ihre Dienstleistung spricht für Sie, nicht Ihr Logo.

Und wenn wir schon dabei sind: Wie wirkt Ihr Markenauftritt, wenn gerade Ihr Logo auf modernen Geräten unscharf aussieht?

Redaktionell gepflegte Bilder

Ihr CMS muss in die Lage versetzt werden, bestehende Grafiken in passender Größe und Auflösung an das jeweilige Gerät auszuliefern.

Das Verkleinern der Grafiken kann auf Bedarf automatisch passieren, es muss aber auf jeden Fall möglich sein, dass Ihre Autoren selbst redaktionell Bilder für unterschiedliche Bildschirmgrößen zur Verfügung stellen.

Technisch gibt es hier verschiedene Ansätze. Ladezeiten sind dabei natürlich wichtig, ganz besonders in Zusammenhang mit der verfügbaren Bandbreite.

Um beurteilen zu können, welche Grafiken eine Überarbeitung benötigen, können Sie auch hier einen Programmierer bitten, Ihnen alle Bilder in verkleinerter Form zur Verfügung zu stellen. Holen Sie sich dann am Besten einen unbeteiligten Tester und lassen Sie sich zu jedem Bild den Inhalt erklären. So identifizieren Sie Bilder, die verkleinert nicht mehr verständlich sind.

Dokumente

Informationslastige Websites bieten oft eine Dokumentensammlung zum Download an. Meist als PDF.

PDF funktionieren am Bildschirm aber alles andere als gut, außerdem umgehen Besucher Ihre Website, wenn sie über Google ein PDF auf Ihrer Seite finden.

Ihre PDF-Dateien sollten also in gleicher Form wie alle anderen Textseiten auf Ihrer Website vorgehalten sein, nämlich als HTML. Letzteres ist nicht ohne Grund das Format hinter eBooks.

Wenn unbedingt nötig, können Sie die alten PDF zusätzlich zum Download anbieten, aber keinesfalls exklusiv.

Das Umwandeln von PDF-Dateien in andere Formate ist leider nicht automatisiert möglich — was einmal mehr verdeutlicht, wie ungeeignet das PDF für Bildschirme ist.

Wir haben uns im Rahmen einiger Projekte mit der Migration von PDF-Sammlungen beschäftigt.

Videos

Bewegte Bilder für unterschiedliche Bildschirmgrößen zu erstellen, ist technisch extrem komplex, zumal es immer noch kein einheitliches Format gibt.

Für kleine Bildschirme sind besonders wieder Szenen wichtig, die nicht mehr zu erkennen und zu verstehen sind. Ebenso die Dateigröße und damit der Kompressionsfaktor spielen eine große Rolle.

Zum Überprüfen Ihrer Videos können Sie diese abspielen und das Videofenster sehr klein ziehen.

Am Besten zeigen Sie auch die Videos jemandem unbeteiligten, und lassen sie oder ihn jede Minute eine Zusammenfassung abgeben. So stoßen Sie auf Stellen, die in verkleinerter Form nicht mehr verständlich sind.

Technisch bedarf es wie bei Bildern auch bei Videos verschiedener Dateien für verschiedene Geräte. Das CMS muss in der Lage sein, die Videos passend zum Bildschirm auszuliefern, im Idealfall auch passend zur Übertragungsgeschwindigkeit komprimiert.

Stellen Sie sicher, dass Benutzer Ihrer Website vor dem Abspielen des Videos abschätzen können, wie viel Zeit sie inklusive Download investieren müssen.

Lade­zeiten reduzieren

Dem Mythos vom mobilen Benutzer zum Trotz werden die portablen Geräte natürlich auch unterwegs eingesetzt, wo schlechte Bandbreiten zu erwarten sind. Es gibt neben technischen Optimierungen auch andere Stellen, an denen man angreifen kann, um die Ladezeit der Seiten zu verbessern:

  • Optische Effekte lassen sich mit modernen Webtechnologien statt mit Bildern umsetzen
  • Wo früher unflexible Grafiken mit Text als Überschriften eingesetzt wurden, lassen sich Webfonts verbauen
  • Die Anzahl der Bilder kann reduziert werden, z.B. indem auf kleinen Bildschirmen nur der oberste Newsartikel ein Bild bekommt oder der Rest kleinere Bilder. Alternative: Sie ersetzen manche Bilder für kleine Bildschirme ganz durch Text

Relaunch! Und jetzt 'ne App?

Schließlich sind Designer und Programmierer mit der Umsetzung der Responsive Website fertig, und alle Inhalte sind für die Auslieferung an kleine Bildschirme fit gemacht.

Jetzt ist wichtig, dass die Autoren und Redakteure entsprechend geschult sind, um auch im weiteren Betrieb der Seite zukunftssichere Inhalte zu publizieren.

Sie können jetzt auch darüber nachdenken, ob für Ihre regelmäßigen Nutzer eine ergänzende App sinnvoll wäre. Ihre Inhalte wird die App aus dem CMS für die Website beziehen — sie können Ihren gewohnten Workflow also auch für die App weiter beibehalten.

Fazit

Unsere Erfahrung zeigt, dass die meisten Kunden mit einer Responsive Website wesentlich besser bedient sind, und günstiger ans Ziel Mobiles Web kommen.

Ergänzend erstellen wir gerne auch Hybride Apps, die sich installieren lassen und das Angebot abrunden. Klar ist jedoch, dass sich eine Webseite wesentlich besser verbreitet, wenn ein Link verschickt werden kann. Deshalb ist die App erst der zweite Schritt nach der Responsive Website.

Egal ob Sie sich für eine oder mehrere native oder hybride Apps, zusammen mit oder anstatt einer Responsive Website entscheiden: In jedem Fall müssen Sie die Inhalte fit für alle Geräte gemacht werden. Dass diese dazu nicht jedes Mal kopiert werden können, sollte selbstverständlich sein: bereits nur eine Inhaltssammlung zu pflegen, überfordert viele Firmen.

Ihr CMS muss am Ende aus zentraler Stelle alle Apps und Webseiten beliefern.