Upload
screenconcept
View
590
Download
1
Embed Size (px)
DESCRIPTION
(c) by Screen Concept 2014, Autoren: Melinda Lini, Serge Barsotti. Präsentiert im Rahmen des Internet Briefings am 5. Mai 2014, Zürich.
Citation preview
MELINDA LINI @MELINDALINI
SERGE BARSOTTI
WARUM SIND WIR HIER?
DIE DIGITALE WELT IN 60 SEKUNDEN
DIE DIGITALE WELT IN 60 SEKUNDEN
278000
204MILLIONENEMAILS
DIE DIGITALE WELT IN 60 SEKUNDEN
2000000
278000
83000 204MILLIONENEMAILS
DIE SCHWEIZ IST EIN MOBILES PARADIES
QUELLE: MEDIA USE INDEX 2013
DIE SCHWEIZ IST EIN MOBILES PARADIES
QUELLE: MEDIA USE INDEX 2013: ¾ DER SCHWEIZER NUTZEN DAS INTERNET PER MOBILE DEVICE
MOBILE DEVICES
QUELLE: MEDIA USE INDEX 2013, INTERNETNUTZUNG PER MOBILE DEVICE 2013
WIE VIELE ZUGRIFFE WELTWEIT ÜBER SMARTPHONES?
ZUGRIFFE ÜBER SMART-PHONES WELTWEIT
11%
2012 2013
17%
QUELLE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG
NORDAMERIKA
SÜDAMERIKA
EUROPA
AFRIKAOZEANIEN
ASIEN15
7 24
1027
15
QUELLE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG
ZUGRIFFE ÜBER SMART-PHONES
QUELLE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390
WAS IST EIGENTLICH EIN …
QUELLE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390
DATENEXPLOSION AUF MOBILE
1 EXABYTE = 1 MILLIARDE GIGABYTE 2011
6
02012 2013 2014 2015 2016
QUELLE: DE.STATISTA.COM/INFOGRAFIK/131/PROGNOSE-MOBILES-DATENVOLUMEM
BLACK FRIDAY 2013 MOBILE TRAFFIC
2012 waren es nur 30% 40%
QUELLE: THE NEW YORK TIMES
MOBILE STRATEGIEN
MOBILER MYTHOS: ICH BRAUCHE EINE NATIVE APP
MOBILER MYTHOS: ICH BRAUCHE EINE NATIVE APP Für welches Gerät darfs denn sein?
MOBILER MYTHOS: ICH BRAUCHE EINE NATIVE APP Für welches Gerät darfs denn sein? Iphone? Android?
BILDSCHIRM- AUFLÖSUNGEN
2010
97 2013
232
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
DIE WEBAPP
Kostenintensive Entwicklung
Optimierte Performance Informationsarchitektur sehr flexibel
DER TWEAK
Oft langsames Rendering, da Medien nicht optimiert sind
Informationsarchitektur kann nicht angepasst werden
Schnell und kostengünstig
Inhalte werden zentral gepflegt
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
FAZIT: RESPONSIVE IST GRUNDSÄTZLICH DIE BESTE WAHL
RESPONSIVE IST NICHT GLEICH RESPONSIVE
FIXED VERSUS FLUID
DEMOTIME
NEUE HERAUSFORDERUNGEN
HERAUSFORDERUNG 1 (MOBILE) CONTENT
RESPONSIVE HEISST CONTENT FIRST Der Platzmangel auf mobilen Geräten ist ein Vorteil, denn er zwingt zum Priorisieren.
WÜRDEN SIE EIN PLAKAT DESIGNEN, OHNE DEN INHALT ZU KENNEN?
WIR HABEN JA CMS
MANCHMAL PASSIERT DANN DAS
WAS MÖCHTE DER MOBILE USER SEHEN?
?
MOBILER MYTHOS: WIR HABEN KEINE ZEIT
WAS MÖCHTE DER MOBILE USER SEHEN UND TUN?
ALLES!
KEINE BEVORMUNDUNG DURCH MOBILE WEBSEITEN MIT WENIGER CONTENT
HERAUSFORDERUNG 2 PERFORMANCE FIRST
Speed is the most important feature. FRED WILSON Performance is money. TIM KADLEC
KUNDENERWARTUNG
QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG
85% der Mobile User erwarten die gleiche Geschwindigkeit wie auf ihrem Desktop.
KUNDENERWARTUNG
57% werden die Seite verlassen, wenn sie 3 Sekunden warten mussten.
QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG
-11% PAGEVIEWS
QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
-7% CONVERSION
QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
QUELLE: HTTP://WWW.HANDELSZEITUNG.CH/UNTERNEHMEN/ZALANDO-250-MILLIONEN-UMSATZ-DER-SCHWEIZ-514814
833000 CHF pro Monat
HERAUSFORDERUNG 3 DER DESIGNPROZESS
PROZESS UND TOOLS
WIR BAUEN…
WIREFRAMES DESIGNS
IN DEN GUTEN ALTEN ZEITEN EINE PSD-DATEI
WIE OFT BAUEN WIR DAS GLEICHE?
WIREFRAMES DESIGNS FRONTEND
ALLE SAGEN DESIGNING IN THE BROWSER
ALLE SAGEN DESIGNING IN THE BROWSER
…nur keiner macht es.
DESIGNING IN THE BROWSER = PRESENTING IN THE BROWSER
…early prototyping.
ABER…
DEMOTIME
WARTEN AUF DIE NÄCHSTE GENERATION DER WEBDESIGN TOOLS
DENKEN IN ELEMENTEN
HERAUSFORDERUNG 4 RESPONSIVE IST MEHR ALS NUR CODE
RESPONSIVE CODE ZU ERLERNEN IST RELATIV EINFACH
ONCE UPON A TIME
PROZESSE MÜSSEN HINTERFRAGT WERDEN
DESIGN UND CODE PARALLEL ENTWICKELN
JE ENGER DAS PROJEKTTEAM UND DER KUNDE ZUSAMMENARBEITEN, DESTO BESSER WIRD DAS ERGEBNIS.
HERAUSFORDERUNG 5 RESPONSIVE UND DER KUNDE
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
KUNDENTYPEN
DER KONSERVATIVE
KUNDENTYPEN
DER KONSERVATIVE DER INNOVATIVE
KUNDENTYPEN
DER KONSERVATIVE DER INNOVATIVE DER CONNAISSEUR
DIE FÜNF RESPONSIVE HERAUSFORDERUNGEN
5
Content first
Performance first
Neue Tools fürs Design
Neue Prozesse
Verständnis beim Kunden
WOHIN DIE REISE GEHT
DIE DIGITALE WELT WIRD IMMER BESSER
THX
SLIDES UND LINKS
screenconcept.com/de/talks/responsive-2
FRAGEN?