Responsive Web Design, So gelingt das Redesign

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?