MELINDA LINI
@MELINDALINI
SERGE BARSOTTI
WARUM SIND WIR
HIER?
DIE DIGITALE WELT
IN 60 SEKUNDEN
DIE DIGITALE WELT
IN 60 SEKUNDEN
278000
204MILLIONEN
EMAILS
DIE DIGITALE WELT
IN 60 SEKUNDEN
2000000
278000
83000 204MILLIONEN
EMAILS
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/MOBILETRAFFI...
NORDAMERIKA
SÜDAMERIKA
EUROPA
AFRIKA
OZEANIEN
ASIEN
15
7 24
10
27
15
QUELLE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/0...
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 GIGABYTE2011
6
0
2012 2013 2014 2015 2016
QUELLE: DE.STATISTA.COM/INFOGR...
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 Pe...
DIE WEBAPP
Kostenintensive
Entwicklung
Optimierte Performance

Informationsarchitektur
sehr flexibel
DER TWEAK
Oft langsames
Rendering, da Medien
nicht optimiert sind
Informationsarchitektur
kann nicht angepasst
werden
Schn...
DIE RESPONSIVE SITE
Informationsarchitektur
gleich wie auf Desktop
Langsames Rendering
wenn die Bilder nicht
richtig optim...
FAZIT: RESPONSIVE IST
GRUNDSÄTZLICH DIE
BESTE WAHL
RESPONSIVE IST NICHT
GLEICH RESPONSIVE
FIXED VERSUS FLUID
DEMO
TIME
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 gleich...
KUNDENERWARTUNG
57% werden die Seite verlassen, wenn sie 3
Sekunden warten mussten.
QUELLE: WWW.STRANGELOOPNETWORKS.COM/AS...
-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…
DEMO
TIME
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 Sei...
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?
Responsive Web Design, So gelingt das Redesign
Responsive Web Design, So gelingt das Redesign
Responsive Web Design, So gelingt das Redesign
Responsive Web Design, So gelingt das Redesign
Responsive Web Design, So gelingt das Redesign
Próximos SlideShares
Carregando em…5
×

Responsive Web Design, So gelingt das Redesign

1.223 visualizações

Publicada em

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

Publicada em: Negócios
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.223
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
28
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Responsive Web Design, So gelingt das Redesign

  1. 1. MELINDA LINI @MELINDALINI SERGE BARSOTTI
  2. 2. WARUM SIND WIR HIER?
  3. 3. DIE DIGITALE WELT IN 60 SEKUNDEN
  4. 4. DIE DIGITALE WELT IN 60 SEKUNDEN 278000 204MILLIONEN EMAILS
  5. 5. DIE DIGITALE WELT IN 60 SEKUNDEN 2000000 278000 83000 204MILLIONEN EMAILS
  6. 6. DIE SCHWEIZ IST EIN MOBILES PARADIES QUELLE: MEDIA USE INDEX 2013
  7. 7. DIE SCHWEIZ IST EIN MOBILES PARADIES QUELLE: MEDIA USE INDEX 2013: ¾ DER SCHWEIZER NUTZEN DAS INTERNET PER MOBILE DEVICE
  8. 8. MOBILE DEVICES QUELLE: MEDIA USE INDEX 2013, INTERNETNUTZUNG PER MOBILE DEVICE 2013
  9. 9. WIE VIELE ZUGRIFFE WELTWEIT ÜBER SMARTPHONES?
  10. 10. ZUGRIFFE ÜBER SMART- PHONES WELTWEIT 11% 2012 2013 17% QUELLE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG
  11. 11. 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
  12. 12. QUELLE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390 WAS IST EIGENTLICH EIN …
  13. 13. QUELLE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390
  14. 14. DATENEXPLOSION AUF MOBILE 1 EXABYTE = 1 MILLIARDE GIGABYTE2011 6 0 2012 2013 2014 2015 2016 QUELLE: DE.STATISTA.COM/INFOGRAFIK/131/PROGNOSE-MOBILES-DATENVOLUMEM
  15. 15. BLACK FRIDAY 2013 MOBILE TRAFFIC 2012 waren es nur 30% 40% QUELLE: THE NEW YORK TIMES
  16. 16. MOBILE STRATEGIEN
  17. 17. MOBILER MYTHOS: ICH BRAUCHE EINE NATIVE APP
  18. 18. MOBILER MYTHOS: ICH BRAUCHE EINE NATIVE APP Für welches Gerät darfs denn sein?
  19. 19. MOBILER MYTHOS: ICH BRAUCHE EINE NATIVE APP Für welches Gerät darfs denn sein? Iphone? Android?
  20. 20. BILDSCHIRM- AUFLÖSUNGEN 2010 97 2013 232
  21. 21. 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
  22. 22. DIE WEBAPP Kostenintensive Entwicklung Optimierte Performance Informationsarchitektur sehr flexibel
  23. 23. DER TWEAK Oft langsames Rendering, da Medien nicht optimiert sind Informationsarchitektur kann nicht angepasst werden Schnell und kostengünstig Inhalte werden zentral gepflegt
  24. 24. 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
  25. 25. FAZIT: RESPONSIVE IST GRUNDSÄTZLICH DIE BESTE WAHL
  26. 26. RESPONSIVE IST NICHT GLEICH RESPONSIVE
  27. 27. FIXED VERSUS FLUID
  28. 28. DEMO TIME
  29. 29. NEUE HERAUSFORDERUNGEN
  30. 30. HERAUSFORDERUNG 1 (MOBILE) CONTENT
  31. 31. RESPONSIVE HEISST CONTENT FIRST Der Platzmangel auf mobilen Geräten ist ein Vorteil, denn er zwingt zum Priorisieren.
  32. 32. WÜRDEN SIE EIN PLAKAT DESIGNEN, OHNE DEN INHALT ZU KENNEN?
  33. 33. WIR HABEN JA CMS
  34. 34. MANCHMAL PASSIERT DANN DAS
  35. 35. WAS MÖCHTE DER MOBILE USER SEHEN? ?
  36. 36. MOBILER MYTHOS: WIR HABEN KEINE ZEIT
  37. 37. WAS MÖCHTE DER MOBILE USER SEHEN UND TUN? ALLES!
  38. 38. KEINE BEVORMUNDUNG DURCH MOBILE WEBSEITEN MIT WENIGER CONTENT
  39. 39. HERAUSFORDERUNG 2 PERFORMANCE FIRST Speed is the most important feature. FRED WILSON Performance is money. TIM KADLEC
  40. 40. KUNDENERWARTUNG QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG 85% der Mobile User erwarten die gleiche Geschwindigkeit wie auf ihrem Desktop.
  41. 41. KUNDENERWARTUNG 57% werden die Seite verlassen, wenn sie 3 Sekunden warten mussten. QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG
  42. 42. -11% PAGEVIEWS QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
  43. 43. -7% CONVERSION QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
  44. 44. QUELLE: HTTP://WWW.HANDELSZEITUNG.CH/UNTERNEHMEN/ZALANDO-250-MILLIONEN-UMSATZ-DER-SCHWEIZ-514814 833000 CHF pro Monat
  45. 45. HERAUSFORDERUNG 3 DER DESIGNPROZESS
  46. 46. PROZESS UND TOOLS
  47. 47. WIR BAUEN… WIREFRAMES DESIGNS
  48. 48. IN DEN GUTEN ALTEN ZEITEN EINE PSD-DATEI
  49. 49. WIE OFT BAUEN WIR DAS GLEICHE? WIREFRAMES DESIGNS FRONTEND
  50. 50. ALLE SAGEN DESIGNING IN THE BROWSER
  51. 51. ALLE SAGEN DESIGNING IN THE BROWSER …nur keiner macht es.
  52. 52. DESIGNING IN THE BROWSER = PRESENTING IN THE BROWSER …early prototyping.
  53. 53. ABER…
  54. 54. DEMO TIME
  55. 55. WARTEN AUF DIE NÄCHSTE GENERATION DER WEBDESIGN TOOLS
  56. 56. DENKEN IN ELEMENTEN
  57. 57. HERAUSFORDERUNG 4 RESPONSIVE IST MEHR ALS NUR CODE
  58. 58. RESPONSIVE CODE ZU ERLERNEN IST RELATIV EINFACH
  59. 59. ONCE UPON A TIME 
  60. 60. PROZESSE MÜSSEN HINTERFRAGT WERDEN
  61. 61. DESIGN UND CODE PARALLEL ENTWICKELN
  62. 62. JE ENGER DAS PROJEKTTEAM UND DER KUNDE ZUSAMMENARBEITEN, DESTO BESSER WIRD DAS ERGEBNIS.
  63. 63. HERAUSFORDERUNG 5 RESPONSIVE UND DER KUNDE
  64. 64. 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
  65. 65. KUNDENTYPEN DER KONSERVATIVE
  66. 66. KUNDENTYPEN DER KONSERVATIVE DER INNOVATIVE
  67. 67. KUNDENTYPEN DER KONSERVATIVE DER INNOVATIVE DER CONNAISSEUR
  68. 68. DIE FÜNF RESPONSIVE HERAUSFORDERUNGEN 5
  69. 69. Content first Performance first Neue Tools fürs Design Neue Prozesse Verständnis beim Kunden
  70. 70. WOHIN DIE REISE GEHT
  71. 71. DIE DIGITALE WELT WIRD IMMER BESSER
  72. 72. THX
  73. 73. SLIDES UND LINKS screenconcept.com/ de/talks/responsive-2
  74. 74. FRAGEN?

×