(c) by Screen Concept 2014, Autoren: Melinda Lini, Serge Barsotti. Präsentiert im Rahmen des Internet Briefings am 5. Mai 2014, Zürich.

2. MELINDA LINI
@MELINDALINI
SERGE BARSOTTI

3. WARUM SIND WIR
HIER?

5. DIE DIGITALE WELT
IN 60 SEKUNDEN

6. DIE DIGITALE WELT
IN 60 SEKUNDEN
278000
204MILLIONEN
EMAILS

7. DIE DIGITALE WELT
IN 60 SEKUNDEN
2000000
278000
83000 204MILLIONEN
EMAILS

8. DIE SCHWEIZ IST EIN
MOBILES PARADIES
QUELLE: MEDIA USE INDEX 2013

9. DIE SCHWEIZ IST EIN
MOBILES PARADIES
QUELLE: MEDIA USE INDEX 2013: ¾ DER SCHWEIZER NUTZEN DAS INTERNET PER MOBILE DEVICE

10. MOBILE DEVICES
QUELLE: MEDIA USE INDEX 2013, INTERNETNUTZUNG PER MOBILE DEVICE 2013

11. WIE VIELE ZUGRIFFE
WELTWEIT ÜBER
SMARTPHONES?

12. ZUGRIFFE ÜBER SMART-
PHONES WELTWEIT
11%
2012 2013
17%
QUELLE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG

13. NORDAMERIKA
SÜDAMERIKA
EUROPA
AFRIKA
OZEANIEN
ASIEN
15
7 24
10
27
15
QUELLE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG
ZUGRIFFE ÜBER SMART-
PHONES

14. QUELLE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390
WAS IST EIGENTLICH
EIN …

15. QUELLE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390

16. DATENEXPLOSION
AUF MOBILE
1 EXABYTE =
1 MILLIARDE GIGABYTE2011
6
0
2012 2013 2014 2015 2016
QUELLE: DE.STATISTA.COM/INFOGRAFIK/131/PROGNOSE-MOBILES-DATENVOLUMEM

18. BLACK FRIDAY 2013
MOBILE TRAFFIC
2012 waren es nur 30%
40%
QUELLE: THE NEW YORK TIMES

19. MOBILE STRATEGIEN

20. MOBILER MYTHOS:
ICH BRAUCHE EINE
NATIVE APP

21. MOBILER MYTHOS:
ICH BRAUCHE EINE
NATIVE APP
Für welches Gerät darfs denn sein?

22. MOBILER MYTHOS:
ICH BRAUCHE EINE
NATIVE APP
Für welches Gerät darfs denn sein?
Iphone?
Android?

23. BILDSCHIRM-
AUFLÖSUNGEN
2010
97
2013
232

24. DIE NATIVE APP
Kostenintensive
Entwicklung
Aufwändige und teils
doppelte Inhaltspflege
Schliesst viele Geräte
aus
Hohe Performance
Software Support
Verkauf über den Apple
Store

25. DIE WEBAPP
Kostenintensive
Entwicklung
Optimierte Performance
Informationsarchitektur
sehr flexibel

26. DER TWEAK
Oft langsames
Rendering, da Medien
nicht optimiert sind
Informationsarchitektur
kann nicht angepasst
werden
Schnell und
kostengünstig
Inhalte werden zentral
gepflegt

27. DIE RESPONSIVE SITE
Informationsarchitektur
gleich wie auf Desktop
Langsames Rendering
wenn die Bilder nicht
richtig optimiert
werden.
Schnell und
vergleichsweise
kostengünstig
Inhalte werden zentral
gepflegt

28. FAZIT: RESPONSIVE IST
GRUNDSÄTZLICH DIE
BESTE WAHL

29. RESPONSIVE IST NICHT
GLEICH RESPONSIVE

30. FIXED VERSUS FLUID

31. DEMO
TIME

32. NEUE
HERAUSFORDERUNGEN

33. HERAUSFORDERUNG 1
(MOBILE) CONTENT

34. RESPONSIVE HEISST
CONTENT FIRST
Der Platzmangel auf mobilen Geräten ist ein
Vorteil, denn er zwingt zum Priorisieren.

35. WÜRDEN SIE EIN
PLAKAT DESIGNEN,
OHNE DEN INHALT ZU
KENNEN?

36. WIR HABEN JA CMS

37. MANCHMAL PASSIERT
DANN DAS

38. WAS MÖCHTE DER
MOBILE USER SEHEN?
?

39. MOBILER MYTHOS:
WIR HABEN KEINE ZEIT

40. WAS MÖCHTE DER
MOBILE USER SEHEN
UND TUN?
ALLES!

41. KEINE
BEVORMUNDUNG
DURCH MOBILE
WEBSEITEN MIT
WENIGER CONTENT

42. HERAUSFORDERUNG 2
PERFORMANCE FIRST
Speed is the most important feature.
FRED WILSON
Performance is money.
TIM KADLEC

43. KUNDENERWARTUNG
QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG
85% der Mobile User erwarten die gleiche
Geschwindigkeit wie auf ihrem Desktop.

44. KUNDENERWARTUNG
57% werden die Seite verlassen, wenn sie 3
Sekunden warten mussten.
QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG

46. -11% PAGEVIEWS
QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/

47. -7% CONVERSION
QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/

48. QUELLE: HTTP://WWW.HANDELSZEITUNG.CH/UNTERNEHMEN/ZALANDO-250-MILLIONEN-UMSATZ-DER-SCHWEIZ-514814
833000 CHF
pro Monat

49. HERAUSFORDERUNG 3
DER DESIGNPROZESS

50. PROZESS UND TOOLS

51. WIR BAUEN…
WIREFRAMES DESIGNS

52. IN DEN GUTEN ALTEN
ZEITEN EINE PSD-DATEI

53. WIE OFT BAUEN WIR
DAS GLEICHE?
WIREFRAMES DESIGNS FRONTEND

54. ALLE SAGEN DESIGNING
IN THE BROWSER

55. ALLE SAGEN DESIGNING
IN THE BROWSER
…nur keiner macht es.

56. DESIGNING IN THE
BROWSER =
PRESENTING IN THE
BROWSER
…early prototyping.

57. ABER…

58. DEMO
TIME

59. WARTEN AUF DIE
NÄCHSTE GENERATION
DER WEBDESIGN TOOLS

61. DENKEN IN ELEMENTEN

62. HERAUSFORDERUNG 4
RESPONSIVE IST MEHR
ALS NUR CODE

63. RESPONSIVE CODE ZU
ERLERNEN IST RELATIV
EINFACH

64. ONCE UPON A TIME

65. PROZESSE MÜSSEN
HINTERFRAGT WERDEN

66. DESIGN UND CODE
PARALLEL ENTWICKELN

67. JE ENGER DAS
PROJEKTTEAM UND
DER KUNDE
ZUSAMMENARBEITEN,
DESTO BESSER WIRD
DAS ERGEBNIS.

68. HERAUSFORDERUNG 5
RESPONSIVE UND DER
KUNDE

69. WAS DER KUNDE ÜBER
RESPONSIVE WISSEN
SOLLTE
– Ca. 30% höherer Aufwand, initial und für
Erweiterungen
– Eine bestehende Seite kann man nicht einfach
„adaptieren“
– Den Kundenerwartungen entsprechen. Mobile
Nutzer haben die gleichen Erwartungen an ihr
Produkt

70. KUNDENTYPEN
DER KONSERVATIVE

71. KUNDENTYPEN
DER KONSERVATIVE DER INNOVATIVE

72. KUNDENTYPEN
DER KONSERVATIVE DER INNOVATIVE DER CONNAISSEUR

73. DIE FÜNF RESPONSIVE
HERAUSFORDERUNGEN
5

74. Content first
Performance first
Neue Tools fürs Design
Neue Prozesse
Verständnis beim Kunden

75. WOHIN DIE REISE GEHT

76. DIE DIGITALE WELT
WIRD IMMER BESSER

77. THX

78. SLIDES UND LINKS
screenconcept.com/
de/talks/responsive-2

79. FRAGEN?