Grenzen von Responsive Design “Wir wollen Alles – und das überall.“ Ein logischer Wunsch eines Multi-Device-Users. Unabhängig davon wie groß oder klein das Device jetzt ist oder in Zukunft sein wird. Ist Responsive Design das Allheilmittel um dem gerecht zu werden? Wo stoßen wir in Konzept, Design und technischer Umsetzung auf besondere Herausforderungen und wie lösen wir diese?

2. GRENZEN VON RESPONSIVE DESIGN
SUMMIT 2014

3. 3Grenzen von Responsive Design

4. COPE

5. CREATE ONCE PUBLISH EVERYWHERE

6. tap it
6Grenzen von Responsive Design

7. scan it
7Grenzen von Responsive Design

8. view it
8Grenzen von Responsive Design

9. swipe it
9Grenzen von Responsive Design

10. scroll it
10Grenzen von Responsive Design

11. read it
11Grenzen von Responsive Design

12. touch it
12Grenzen von Responsive Design

13. scale it
13Grenzen von Responsive Design

14. do what you want with it
14Grenzen von Responsive Design

15. 15Grenzen von Responsive Design

16. 2010 ……. 2014 …

17. 17Grenzen von Responsive Design
Qualität
vs.
Performance

18. 18Grenzen von Responsive Design
Qualität
vs.
Performance
Picture
Element.
Danke.
>

19. 19Grenzen von Responsive Design
Tabellen
und
Übersicht

20. 20Grenzen von Responsive Design
Tabellen
und
Übersicht
• Prioritäten
• Scrolling
• Selektionen
>

21. 21Grenzen von Responsive Design
Komplexe Struktur
und
wenig Platz

22. 22Grenzen von Responsive Design
Komplexe Struktur
und
wenig Platz

23. 23Grenzen von Responsive Design
Wie groß ist ein Finger? In Pixel!
45 – 57 Pixel

24. 24
RESS
RESS: Responsive Design und Server Side Components
Ich kann doch
nicht alles
machen!
RESS bitte.

25. Alles lösbar – alles gut?
Konzept, Design und Technik machen’s möglich?

26. 26Grenzen von Responsive Design
Oje
1
Oje
2
Oje
3
Oje
4

27. 27Grenzen von Responsive Design
RESPONSIVE DESIGN WON’T FIX
YOUR CONTENT PROBLEM.
-­‐
Karen
McGrane
Oje
1

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

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

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

31. 31Grenzen von Responsive Design
Typ
Headline
Kategorie
Betonung
Text
Autor
Lead in
Tags
Bilder
Videos
EIN
ARTIKEL
Geo Location

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

33. 33Grenzen von Responsive Design
Content
Management
statt
Web
Publishing
Source:
Rasmus
Skjodan,
der
Typo3
NEOS
UX
Lead

34. Bye bye - WYSIWYG!
Welcome multi-device
and multi-channel!

35. 35Grenzen von Responsive Design
EINE FÜR ALLE IST BILLIGER.
Oje
2

36. 36Grenzen von Responsive Design
“Wir möchten eine neue Website. Was kostet das?“
- Ein Kunde
“XX,-“
- Agentur

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

38. 38Grenzen von Responsive Design
“Wir wollen unsere Website optisch modernisieren.
- Ein Kunde
“OK – also ein Refreshment!“
- Agentur

39. 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. 40Grenzen von Responsive Design
RESPONSIVE WEB ERSETZT KEINE APP!
Oje
3

41. 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. 42Grenzen von Responsive Design
WE PROUDLY PRESENT:
THE HAMBURGER
Oje
4

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

44. 44Grenzen von Responsive Design
Hamburger A/B Test:
1. Test
Source:
hDp://exisweb.net/mobile-­‐menu-­‐abtest

45. 45Grenzen von Responsive Design
Hamburger A/B Test:
1. Test
Source:
hDp://exisweb.net/mobile-­‐menu-­‐abtest
✔

46. 46Grenzen von Responsive Design
Hamburger A/B Test:
2. Test
Source:
hDp://exisweb.net/mobile-­‐menu-­‐abtest
Baseline
Menü + Border Hamburger + Menü Menü

47. 47Grenzen von Responsive Design
Hamburger A/B Test:
2. Test
Source:
hDp://exisweb.net/mobile-­‐menu-­‐abtest
✔
Baseline
Menü + Border Hamburger + Menü Menü

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