47
GRENZEN VON RESPONSIVE DESIGN SUMMIT 2014

Grenzen von Responsive Design | Werbeplanung.at Summit 2014

Embed Size (px)

DESCRIPTION

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/

Citation preview

Page 1: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

GRENZEN VON RESPONSIVE DESIGN SUMMIT 2014

Page 2: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

3 Grenzen von Responsive Design

Page 3: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

COPE

Page 4: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

CREATE ONCE PUBLISH EVERYWHERE

Page 5: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

tap it

6 Grenzen von Responsive Design

Page 6: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

scan it

7 Grenzen von Responsive Design

Page 7: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

view it

8 Grenzen von Responsive Design

Page 8: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

swipe it

9 Grenzen von Responsive Design

Page 9: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

scroll it

10 Grenzen von Responsive Design

Page 10: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

read it

11 Grenzen von Responsive Design

Page 11: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

touch it

12 Grenzen von Responsive Design

Page 12: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

scale it

13 Grenzen von Responsive Design

Page 13: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

do what you want with it

14 Grenzen von Responsive Design

Page 14: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

15 Grenzen von Responsive Design

Page 15: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

2010 ……. 2014 …

Page 16: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

17 Grenzen von Responsive Design

Qualität vs. Performance

Page 17: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

18 Grenzen von Responsive Design

Qualität vs. Performance

Picture Element. Danke.

>

Page 18: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

19 Grenzen von Responsive Design

Tabellen und Übersicht

Page 19: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

20 Grenzen von Responsive Design

Tabellen und Übersicht

• Prioritäten • Scrolling • Selektionen

>

Page 20: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

21 Grenzen von Responsive Design

Komplexe Struktur und wenig Platz

Page 21: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

22 Grenzen von Responsive Design

Komplexe Struktur und wenig Platz

Page 22: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

23 Grenzen von Responsive Design

Wie groß ist ein Finger? In Pixel!

45 – 57 Pixel

Page 23: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

24

RESS

RESS: Responsive Design und Server Side Components

Ich kann doch nicht alles machen! RESS bitte.

Page 24: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

Alles lösbar – alles gut?

Konzept, Design und Technik machen’s möglich?

Page 25: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

26 Grenzen von Responsive Design

Oje  1   Oje  2   Oje  3   Oje  4  

Page 26: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

27 Grenzen von Responsive Design

RESPONSIVE DESIGN WON’T FIX YOUR CONTENT PROBLEM.

-­‐  Karen  McGrane  

Oje  1  

Page 27: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

28 Grenzen 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

Page 28: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

29 Grenzen 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

Page 29: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

30 Grenzen 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

Page 30: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

31 Grenzen von Responsive Design

Typ Headline

Kategorie

Betonung

Text

Autor

Lead in

Tags

Bilder

Videos

EIN    ARTIKEL  

Geo Location

Page 31: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

32 Grenzen 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

Page 32: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

33 Grenzen von Responsive Design

Content Management statt Web Publishing

Source:  Rasmus  Skjodan,  der  Typo3  NEOS  UX  Lead    

Page 33: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

Bye bye - WYSIWYG!

Welcome multi-device and multi-channel!

Page 34: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

35 Grenzen von Responsive Design

EINE FÜR ALLE IST BILLIGER.

Oje  2  

Page 35: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

36 Grenzen von Responsive Design

“ Wir möchten eine neue Website. Was kostet das?“ - Ein Kunde

“ XX,-“ - Agentur

Page 36: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

37 Grenzen 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

Page 37: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

38 Grenzen von Responsive Design

“ Wir wollen unsere Website optisch modernisieren. - Ein Kunde

“ OK – also ein Refreshment!“ - Agentur

Page 38: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

39 Grenzen 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

Page 39: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

40 Grenzen von Responsive Design

RESPONSIVE WEB ERSETZT KEINE APP!

Oje  3  

Page 40: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

41 Grenzen 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

Page 41: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

42 Grenzen von Responsive Design

WE PROUDLY PRESENT: THE HAMBURGER

Oje  4  

Page 42: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

43 Grenzen 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

Page 43: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

44 Grenzen von Responsive Design

Hamburger A/B Test: 1. Test

Source:  hDp://exisweb.net/mobile-­‐menu-­‐abtest  

Page 44: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

45 Grenzen von Responsive Design

Hamburger A/B Test: 1. Test

Source:  hDp://exisweb.net/mobile-­‐menu-­‐abtest  

✔  

Page 45: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

46 Grenzen von Responsive Design

Hamburger A/B Test: 2. Test

Source:  hDp://exisweb.net/mobile-­‐menu-­‐abtest  

Baseline

Menü + Border Hamburger + Menü Menü

Page 46: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

47 Grenzen von Responsive Design

Hamburger A/B Test: 2. Test

Source:  hDp://exisweb.net/mobile-­‐menu-­‐abtest  

✔  

Baseline

Menü + Border Hamburger + Menü Menü

Page 47: Grenzen von Responsive Design | Werbeplanung.at Summit 2014

Fonda Interaktive Medien und Kommunikation GmbH Neubaugasse 57/36 1070 Wien www.fonda.at

Danke!