Ein Vortrag von Hans Auer, GF von Fonda beim Werbeplanung.at Summit 2014
Eigentlich verfolgen wir mit Responsive Design die Idee von “COPE” – Create Once, Publish Everywhere. Unabhängig davon ob wir dann Inhalte ansehen, klicken, touchen, swipen, scrollen, skalieren. Das heißt, wir müssen uns keine Sorgen um die Darstellung unserer Websites machen, nur weil Amazon jetzt sein Fire Phone auf den Markt bringt.
Probleme, die die Web Community seit dem Responsive-Hype 2010 zu lösen versucht sind eher technischer oder designseitiger Natur. Und für die meisten davon gibt es auch schon Lösungen:
Wie kann ich Bilder so verwenden, dass die Qualität für den Einsatz als großes Headerbild reicht, aber die Seite trotzdem nicht zu groß wird?
Mit gehe ich mit Tabellen um? Die wollen einfach nicht auf den kleinen Screen.
Wie gestalte ich mein Menü so, dass es immer erreichbar ist, aber dennoch nicht dauernd im Weg?
Ein Smart-Device ist kein Rechenzentrum.
Je mehr man sich in Konzept, Design und Technik um die optimale Auslieferung der Inhalte für alle Devices kümmert – desto mehr Leistung wird von den Geräten verlangt.
Deswegen hier die Strategie mehr auf die Server zu verlagern mit RESS – Responsive Design und Server Side Components.
Wir ersparen uns Insellösungen, Screengrößen von HD bis sehr klein tun uns nicht weh. Und wenn’s mal zu lange dauert liegts vielleicht auch an der Verbindung ;-)
Dennoch gibt es ein paar Punkte wo uns Responsive Design auch nicht helfen kann:
Basis all unserer Anstrengung ist: Wir haben etwas zu erzählen, wovon wir denken, dass es die Welt da draußen auch interessiert.
Wir haben im Idealfall einen Content. Oft sind es mehrere – was es noch schwieriger macht.
Und der soll über all hin. Auf die Website, auf Landingpages, ins Auto, auf die Uhr oder einen Kühlschrank.
Das heißt wir müssen daran arbeiten, unseren Inhalte aufzubereiten.
Nachdenken über strukturierten, auch reduzierten, Content schadet grundsätzlich nicht. Der nahe Verwandte der Faulheit ist die Lesefaulheit.
Aber was müssen wir tun um hier zukunftssicherer zu werden. Um ihn mit Hilfe von Responsive Design den Leuten bestens aufbereitet liefern zu können.
Ein Artikel – als kleine Einheit – braucht viele noch kleinere Fragmente, die je nach Channel unterschiedlich verwendet werden.
Wir müssen also unseren Inhalt unabhängig betrachten und erstellen. Das beginnt schon bei einem manuellen Zeilenumbruch an der richtigen Stelle im CMS, damit’s auf Desktop gut aussieht.
Also weg vom Web Publishing – hin zum cleanen Content Management.
Das bedeutet auch für Redakteure sich vom Frontend-Editing endgültig verabschieden zu müssen – also Bye Bye – WYSIWYG.
Und unsere Workflows müssen multi-device und multi-channel ausgerichtet werden. Ansonsten hilft uns die Raffinesse von Responsive Design auch nicht weiter.
*Illustration Folie 2: Copyright http://alistapart.com/
26. 27Grenzen von Responsive Design
RESPONSIVE DESIGN WON’T FIX
YOUR CONTENT PROBLEM.
-‐
Karen
McGrane
Oje
1
27. 28Grenzen von Responsive Design
CONTENT
Website
Intranet
Social Media
Mobile Web
Smartphone Apps
Tablet Apps
Print
Uhren
Car Entertainment
Toaster
Smart TV
Google Glasses
Landingpages
Microsites
Kühlschrank
Blogs
28. 29Grenzen von Responsive Design
“Verpflichte dich dem Multi-Channel-Anspruch. Sorg dafür,
dass die Leute über besseren und strukturierteren Content
nachdenken.“
- Leisa Reichelt, die Leiterin des Government Digital Services in UK
29. 30Grenzen von Responsive Design
“For example, because our recipes were never properly
tagged by ingriedients and cooking time, we floundered for
about 15 years trying to figure out how to create a useful
recipe database. We can do it now, but only after spending a
huge sum to retroactively structure the data.“
- The New York Times Innovation Report
30. 31Grenzen von Responsive Design
Typ
Headline
Kategorie
Betonung
Text
Autor
Lead in
Tags
Bilder
Videos
EIN
ARTIKEL
Geo Location
31. 32Grenzen von Responsive Design
“The future of content management systems is in their ability
to capture the content in a clean, presentation-independent
way.“
- Daniel Jacobson, Netflix
32. 33Grenzen von Responsive Design
Content
Management
statt
Web
Publishing
Source:
Rasmus
Skjodan,
der
Typo3
NEOS
UX
Lead
33. Bye bye - WYSIWYG!
Welcome multi-device
and multi-channel!
35. 36Grenzen von Responsive Design
“Wir möchten eine neue Website. Was kostet das?“
- Ein Kunde
“XX,-“
- Agentur
36. 37Grenzen von Responsive Design
“Wir möchten eine neue Website. Was kostet das?
Ach ja – und sie soll auf allen Geräten optimal funktionieren.“
- Ein Kunde
“XX,- + 50%“
- Agentur
37. 38Grenzen von Responsive Design
“Wir wollen unsere Website optisch modernisieren.
- Ein Kunde
“OK – also ein Refreshment!“
- Agentur
38. 39Grenzen von Responsive Design
“Ja genau – ein Refreshment.
Ach ja – und sie soll auf allen Geräten optimal funktionieren.“
- Ein Kunde
“Stopp! Also doch ein Komplettrelaunch!“
- Agentur
40. 41Grenzen von Responsive Design
Nein, die Website kann nicht …
… offline genutzt werden!
… so performant sein!
… verkauft werden
… zu 100% auf die User-
Situation eingehen.
… alle Gerätefunktionen
nutzen
… im App-Store beworben
werden
… die gleiche UX bieten
42. 43Grenzen von Responsive Design
“No one understands the icon,
let’s add the word menu.
The word is too small,
let’s add a pop-up calling it out.“
Luke Wroblewski - pic.twitter.com/Jargi7gavX
43. 44Grenzen von Responsive Design
Hamburger A/B Test:
1. Test
Source:
hDp://exisweb.net/mobile-‐menu-‐abtest
44. 45Grenzen von Responsive Design
Hamburger A/B Test:
1. Test
Source:
hDp://exisweb.net/mobile-‐menu-‐abtest
✔
45. 46Grenzen von Responsive Design
Hamburger A/B Test:
2. Test
Source:
hDp://exisweb.net/mobile-‐menu-‐abtest
Baseline
Menü + Border Hamburger + Menü Menü