One design to rule them all
76
-
Upload
screen-concept -
Category
Technology
-
view
919 -
download
2
Transcript of One design to rule them all
MELINDA LINI @MELINDALINI
FELIPE KAUFMANN @EFFKAY
DIE DIGITALE WELT IN 60 SEKUNDEN
DIE DIGITALE WELT IN 60 SEKUNDEN
278000
204MILLIONENEMAILS
DIE DIGITALE WELT IN 60 SEKUNDEN
2000000
278000
83000 204MILLIONENEMAILS
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
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
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?
BILDSCHIRM- AUFLÖ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
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 nach 3 Sekunden warten verlassen.
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
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
Syntactically Awesome Stylesheets
1 PREPROCESSOREN BENUTZEN
MIXIN BEISPIEL
2 FANG NICHT BEI NULL AN
MINIMUM: HTML 5 BOILERPLATE BY PAUL IRISH
2 FANG NICHT BEI NULL AN
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
PROGRESSIVE ENHANCEMENT & GRACEFUL DEGRADATION
4
GRUNDSATZFRAGE http://dowebsitesneedtolookexactlythesameineverybrowser.com
UND ALTE BROWSER?
POLYFILLS & SHIMS
MODERNIZR
Scharfe Logos für Retina Displays
MODULARISIEREN 5
MODULARISIEREN 5
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-responsive-images-solution-should-you-use/
FRAGEN?
SLIDES UND LINKS screenconcept.com/de/talks/responsive
