Responsive Web Design, So gelingt das Redesign

1.171 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Business
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.171
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
28
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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?

×