MELINDA LINI
@MELINDALINI
FELIPE KAUFMANN
@EFFKAY
DIE DIGITALE WELT
IN 60 SEKUNDEN
DIE DIGITALE WELT
IN 60 SEKUNDEN
278000

204
MILLIONEN

EMAILS
2000000
DIE DIGITALE WELT

IN 60 SEKUNDEN

278000
83000

204
MILLIONEN

EMAILS
WIE VIELE ZUGRIFFE
WELTWEIT ÜBER
SMARTPHONES?
ZUGRIFFE ÜBER SMARTPHONES WELTWEIT
11%

2012

17%

2013

QUELLE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAF...
ZUGRIFFE ÜBER SMARTPHONES
10

15

EUROPA

NORDAMERIKA

7
SÜDAMERIKA

24

27
ASIEN

15
OZEANIEN

AFRIKA
QUELLE: HTTP://BLOG...
DATENEXPLOSION
AUF MOBILE

6

0

2011

2012

2013

2014

2015

2016

QUELLE: DE.STATISTA.COM/INFOGRAFIK/131/PROGNOSE-MOBIL...
BLACK FRIDAY 2013
MOBILE TRAFFIC

40%

2012 waren es nur 30%

QUELLE: THE NEW YORK TIMES
WAS MÖCHTE DER
MOBILE USER SEHEN

?
WAS MÖCHTE DER
MOBILE USER SEHEN?

ALLES!
KEINE
BEVORMUNDUNG

MOBILE WEBSEITE
KEINE
BEVORMUNDUNG

MOBILE WEBSEITE
MOBILER MYTHOS:
ICH BRAUCHE EINE APP
MOBILER MYTHOS:
ICH BRAUCHE EINE APP
Für welches Gerät darfs denn sein?
MOBILER MYTHOS:
ICH BRAUCHE EINE APP
Für welches Gerät darfs denn sein?
Iphone?
Android?
BILDSCHIRMAUFLÖSUNGEN
2010

97

2013

232
MOBILER MYTHOS:
WIR HABEN KEINE ZEIT
MOBILE MYTHS VON
JOSH CLARK

QUELLE: VIMEO.COM/48327889
DIE LÖSUNG:
RESPONSIVE DESIGN
DIE HERAUSFORDERUNG
RESPONSIVE HEISST
PERFORMANCE FIRST
Speed is the most important feature.
FRED WILSON
Performance is money.
TIM KADLEC
KUNDENERWARTUNG

85% der Mobile User erwarten die gleiche
Geschwindigkeit wie auf ihrem Desktop.

QUELLE: WWW.STRANGELOOPN...
KUNDENERWARTUNG

57% werden die Seite nach 3 Sekunden warten
verlassen.

QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES...
-11% PAGEVIEWS
QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
-7% CONVERSION
QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
833000 CHF
pro Monat
QUELLE: HTTP://WWW.HANDELSZEITUNG.CH/UNTERNEHMEN/ZALANDO-250-MILLIONEN-UMSATZ-DER-SCHWEIZ-514814
BRINGEN SIE SCHON
MAL
DESIGNVORSCHLÄGE
MIT.
RESPONSIVE HEISST
CONTENT FIRST
Der Platzmangel auf mobilen Geräten ist ein
Vorteil denn er zwingt zum Priorisieren.
ABER…
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.
WARTEN AUF DIE
NÄCHSTE GENERATION
DER WEBDESIGN TOOLS
DENKEN IN ELEMENTEN
JE ENGER DESIGNER
MIT ENTWICKLERN
ZUSAMMENARBEITEN,
DESTO BESSER WIRD
DAS ERGEBNIS.
THE RESPONSIVE
DEVELOPER
WAS IST RESPONSIVE?
@media screen and (max-width:480px)
FRONTENDS WERDEN
KOMPLEXER
TIPPS
1

PREPROCESSOREN
BENUTZEN
1

PREPROCESSOREN
BENUTZEN

Syntactically Awesome Stylesheets
MIXIN BEISPIEL
2

FANG NICHT BEI
NULL AN
2

FANG NICHT BEI
NULL AN
MINIMUM: HTML 5
BOILERPLATE BY PAUL IRISH
FRAMEWORKS WIE
FOUNDATION UND
BOOTSTRAP
EIGENES BOILERPLATE
ODER FRAMEWORK
EIGENES BOILERPLATE
ODER FRAMEWORK?

FALLS IHR TEAM UNTER
N.I.H. SYNDROM LEIDET
3

BENUTZE EIN
RASTER
3

BENUTZE EIN
RASTER

IRGENDEIN
RASTER!
DYI RASTER
DYI RASTER
ANWENDUNG
4

PROGRESSIVE
ENHANCEMENT &
GRACEFUL
DEGRADATION
GRUNDSATZFRAGE
http://
dowebsitesneedtolookexactlythesame
ineverybrowser.com
UND ALTE BROWSER?
POLYFILLS & SHIMS
MODERNIZR

Scharfe Logos für
Retina Displays
5

MODULARISIEREN
5

MODULARISIEREN
SASS oder LESS
Das Rad nicht neu erfinden
Raster verwenden
Progressive Enhancement
Modularisieren
RESPONSIVE
BAUSTELLEN
SPEED &
MOBILE PERFORMANCE
RESPONSIVE IMAGES
http://css-tricks.com/which-responsiveimages-solution-should-you-use/
FRAGEN?
SLIDES UND LINKS
screenconcept.com/
de/talks/responsive
One design to rule them all
One design to rule them all
One design to rule them all
One design to rule them all
One design to rule them all
One design to rule them all
Nächste SlideShare
Wird geladen in …5
×

One design to rule them all

1.271 Aufrufe

Veröffentlicht am

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.271
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
299
Aktionen
Geteilt
0
Downloads
37
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

One design to rule them all

  1. 1. MELINDA LINI @MELINDALINI FELIPE KAUFMANN @EFFKAY
  2. 2. DIE DIGITALE WELT IN 60 SEKUNDEN
  3. 3. DIE DIGITALE WELT IN 60 SEKUNDEN 278000 204 MILLIONEN EMAILS
  4. 4. 2000000 DIE DIGITALE WELT IN 60 SEKUNDEN 278000 83000 204 MILLIONEN EMAILS
  5. 5. WIE VIELE ZUGRIFFE WELTWEIT ÜBER SMARTPHONES?
  6. 6. ZUGRIFFE ÜBER SMARTPHONES WELTWEIT 11% 2012 17% 2013 QUELLE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG
  7. 7. ZUGRIFFE ÜBER SMARTPHONES 10 15 EUROPA NORDAMERIKA 7 SÜDAMERIKA 24 27 ASIEN 15 OZEANIEN AFRIKA QUELLE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG
  8. 8. DATENEXPLOSION AUF MOBILE 6 0 2011 2012 2013 2014 2015 2016 QUELLE: DE.STATISTA.COM/INFOGRAFIK/131/PROGNOSE-MOBILES-DATENVOLUMEM 1 EXABYTE = 1 MILLIARDE GIGABYTE
  9. 9. BLACK FRIDAY 2013 MOBILE TRAFFIC 40% 2012 waren es nur 30% QUELLE: THE NEW YORK TIMES
  10. 10. WAS MÖCHTE DER MOBILE USER SEHEN ?
  11. 11. WAS MÖCHTE DER MOBILE USER SEHEN? ALLES!
  12. 12. KEINE BEVORMUNDUNG MOBILE WEBSEITE
  13. 13. KEINE BEVORMUNDUNG MOBILE WEBSEITE
  14. 14. MOBILER MYTHOS: ICH BRAUCHE EINE APP
  15. 15. MOBILER MYTHOS: ICH BRAUCHE EINE APP Für welches Gerät darfs denn sein?
  16. 16. MOBILER MYTHOS: ICH BRAUCHE EINE APP Für welches Gerät darfs denn sein? Iphone? Android?
  17. 17. BILDSCHIRMAUFLÖSUNGEN 2010 97 2013 232
  18. 18. MOBILER MYTHOS: WIR HABEN KEINE ZEIT
  19. 19. MOBILE MYTHS VON JOSH CLARK QUELLE: VIMEO.COM/48327889
  20. 20. DIE LÖSUNG: RESPONSIVE DESIGN
  21. 21. DIE HERAUSFORDERUNG
  22. 22. RESPONSIVE HEISST PERFORMANCE FIRST Speed is the most important feature. FRED WILSON Performance is money. TIM KADLEC
  23. 23. KUNDENERWARTUNG 85% der Mobile User erwarten die gleiche Geschwindigkeit wie auf ihrem Desktop. QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG
  24. 24. KUNDENERWARTUNG 57% werden die Seite nach 3 Sekunden warten verlassen. QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG
  25. 25. -11% PAGEVIEWS QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
  26. 26. -7% CONVERSION QUELLE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
  27. 27. 833000 CHF pro Monat QUELLE: HTTP://WWW.HANDELSZEITUNG.CH/UNTERNEHMEN/ZALANDO-250-MILLIONEN-UMSATZ-DER-SCHWEIZ-514814
  28. 28. BRINGEN SIE SCHON MAL DESIGNVORSCHLÄGE MIT.
  29. 29. RESPONSIVE HEISST CONTENT FIRST Der Platzmangel auf mobilen Geräten ist ein Vorteil denn er zwingt zum Priorisieren.
  30. 30. ABER…
  31. 31. PROZESS UND TOOLS
  32. 32. WIR BAUEN… WIREFRAMES DESIGNS
  33. 33. IN DEN GUTEN ALTEN ZEITEN EINE PSD-DATEI
  34. 34. WIE OFT BAUEN WIR DAS GLEICHE? WIREFRAMES DESIGNS FRONTEND
  35. 35. ALLE SAGEN DESIGNING IN THE BROWSER
  36. 36. ALLE SAGEN DESIGNING IN THE BROWSER …nur keiner macht es.
  37. 37. DESIGNING IN THE BROWSER = PRESENTING IN THE BROWSER …early prototyping.
  38. 38. WARTEN AUF DIE NÄCHSTE GENERATION DER WEBDESIGN TOOLS
  39. 39. DENKEN IN ELEMENTEN
  40. 40. JE ENGER DESIGNER MIT ENTWICKLERN ZUSAMMENARBEITEN, DESTO BESSER WIRD DAS ERGEBNIS.
  41. 41. THE RESPONSIVE DEVELOPER
  42. 42. WAS IST RESPONSIVE? @media screen and (max-width:480px)
  43. 43. FRONTENDS WERDEN KOMPLEXER
  44. 44. TIPPS
  45. 45. 1 PREPROCESSOREN BENUTZEN
  46. 46. 1 PREPROCESSOREN BENUTZEN Syntactically Awesome Stylesheets
  47. 47. MIXIN BEISPIEL
  48. 48. 2 FANG NICHT BEI NULL AN
  49. 49. 2 FANG NICHT BEI NULL AN MINIMUM: HTML 5 BOILERPLATE BY PAUL IRISH
  50. 50. FRAMEWORKS WIE FOUNDATION UND BOOTSTRAP
  51. 51. EIGENES BOILERPLATE ODER FRAMEWORK
  52. 52. EIGENES BOILERPLATE ODER FRAMEWORK? FALLS IHR TEAM UNTER N.I.H. SYNDROM LEIDET
  53. 53. 3 BENUTZE EIN RASTER
  54. 54. 3 BENUTZE EIN RASTER IRGENDEIN RASTER!
  55. 55. DYI RASTER
  56. 56. DYI RASTER
  57. 57. ANWENDUNG
  58. 58. 4 PROGRESSIVE ENHANCEMENT & GRACEFUL DEGRADATION
  59. 59. GRUNDSATZFRAGE http:// dowebsitesneedtolookexactlythesame ineverybrowser.com
  60. 60. UND ALTE BROWSER?
  61. 61. POLYFILLS & SHIMS
  62. 62. MODERNIZR Scharfe Logos für Retina Displays
  63. 63. 5 MODULARISIEREN
  64. 64. 5 MODULARISIEREN
  65. 65. SASS oder LESS Das Rad nicht neu erfinden Raster verwenden Progressive Enhancement Modularisieren
  66. 66. RESPONSIVE BAUSTELLEN
  67. 67. SPEED & MOBILE PERFORMANCE
  68. 68. RESPONSIVE IMAGES http://css-tricks.com/which-responsiveimages-solution-should-you-use/
  69. 69. FRAGEN?
  70. 70. SLIDES UND LINKS screenconcept.com/ de/talks/responsive

×