SlideShare ist ein Scribd-Unternehmen logo
1 von 79
Downloaden Sie, um offline zu lesen
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/MOBILETRAFFIC-WELTWEIT.JPG
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
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/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
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 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…
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 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?

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (18)

Yo soy porfirio
Yo  soy porfirioYo  soy porfirio
Yo soy porfirio
 
U.D.C
U.D.CU.D.C
U.D.C
 
PROYECTO
PROYECTOPROYECTO
PROYECTO
 
Healthy life
Healthy life Healthy life
Healthy life
 
Presentacion terminada
Presentacion terminadaPresentacion terminada
Presentacion terminada
 
control de lectura "Werther"
control de lectura "Werther"control de lectura "Werther"
control de lectura "Werther"
 
Computacion Móvil-UCV
Computacion Móvil-UCVComputacion Móvil-UCV
Computacion Móvil-UCV
 
Daun majemuk2
Daun majemuk2Daun majemuk2
Daun majemuk2
 
Carbon y petroleo
Carbon y petroleoCarbon y petroleo
Carbon y petroleo
 
Tema1 lapsicologacomocienci
Tema1 lapsicologacomocienciTema1 lapsicologacomocienci
Tema1 lapsicologacomocienci
 
Educacion y lucha de clases
Educacion y lucha de clasesEducacion y lucha de clases
Educacion y lucha de clases
 
Rio alto
Rio altoRio alto
Rio alto
 
Proyecto educativo g8
Proyecto educativo g8Proyecto educativo g8
Proyecto educativo g8
 
Educacion y lucha de clases
Educacion y lucha de clases Educacion y lucha de clases
Educacion y lucha de clases
 
Mercados
MercadosMercados
Mercados
 
Mapa mental de elementos de la calidad total. marianella mendoza
Mapa mental de elementos de la calidad total. marianella mendozaMapa mental de elementos de la calidad total. marianella mendoza
Mapa mental de elementos de la calidad total. marianella mendoza
 
Lenguaje una facultad humana
Lenguaje una facultad humanaLenguaje una facultad humana
Lenguaje una facultad humana
 
Mitos y leyendas
Mitos y leyendasMitos y leyendas
Mitos y leyendas
 

Ähnlich wie Responsive Web Design, So gelingt das Redesign

One design to rule them all
One design to rule them allOne design to rule them all
One design to rule them allScreen Concept
 
2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"Johannes Waibel
 
Meine 10 TOP Nachrichten zu Mobile der vergangenen Wochen
Meine 10 TOP Nachrichten zu Mobile der vergangenen WochenMeine 10 TOP Nachrichten zu Mobile der vergangenen Wochen
Meine 10 TOP Nachrichten zu Mobile der vergangenen WochenStefan Pfeiffer
 
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017Namics – A Merkle Company
 
Social Mobile Internet Everything - Herausforderungen und Perspektiven für Di...
Social Mobile Internet Everything - Herausforderungen und Perspektiven für Di...Social Mobile Internet Everything - Herausforderungen und Perspektiven für Di...
Social Mobile Internet Everything - Herausforderungen und Perspektiven für Di...Patrick Comboeuf
 
Touch Mahal - Mobile Hype
Touch Mahal - Mobile HypeTouch Mahal - Mobile Hype
Touch Mahal - Mobile HypeBusinessVALUE24
 
GO SMART 2012 - Studie zur Smartphonenutzung 2012
GO SMART 2012 - Studie zur Smartphonenutzung 2012GO SMART 2012 - Studie zur Smartphonenutzung 2012
GO SMART 2012 - Studie zur Smartphonenutzung 2012Trendbüro
 
Dem mobilen Internet gehört die Zukunft
Dem mobilen Internet gehört die ZukunftDem mobilen Internet gehört die Zukunft
Dem mobilen Internet gehört die Zukunftahorn. gmbh
 
Mobile First - Kommunikationsdesign für den Markt der Zukunft
Mobile First - Kommunikationsdesign für den Markt der ZukunftMobile First - Kommunikationsdesign für den Markt der Zukunft
Mobile First - Kommunikationsdesign für den Markt der ZukunftLasse Lüders
 
Mobile First - Kommunikationsdesign für den Markt der Zukunft
Mobile First - Kommunikationsdesign für den Markt der ZukunftMobile First - Kommunikationsdesign für den Markt der Zukunft
Mobile First - Kommunikationsdesign für den Markt der ZukunftMartin Spitzenberg
 
WordPress 2025 (WordCamp Frankfurt 2016)
WordPress 2025 (WordCamp Frankfurt 2016)WordPress 2025 (WordCamp Frankfurt 2016)
WordPress 2025 (WordCamp Frankfurt 2016)Sven Wagener
 
Die wichtigsten Fakten zum Trend-Thema Mobile
Die wichtigsten Fakten zum Trend-Thema Mobile Die wichtigsten Fakten zum Trend-Thema Mobile
Die wichtigsten Fakten zum Trend-Thema Mobile TWT
 
Banken auf dem richtigen Kurs?
Banken auf dem richtigen Kurs?Banken auf dem richtigen Kurs?
Banken auf dem richtigen Kurs?accenture
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Designkuehlhaus AG
 
Mobile Trends 2012 - MDAYS by Torsten Schollmayer, SapientNitro
Mobile Trends 2012 - MDAYS by Torsten Schollmayer, SapientNitroMobile Trends 2012 - MDAYS by Torsten Schollmayer, SapientNitro
Mobile Trends 2012 - MDAYS by Torsten Schollmayer, SapientNitroTorsten Schollmayer
 
Innovation und der richtige Zeitpunkt - Vortrag Reinhard Karger (DFKI)
Innovation und der richtige Zeitpunkt - Vortrag Reinhard Karger (DFKI)Innovation und der richtige Zeitpunkt - Vortrag Reinhard Karger (DFKI)
Innovation und der richtige Zeitpunkt - Vortrag Reinhard Karger (DFKI)WFG Westerwaldkreis mbH
 

Ähnlich wie Responsive Web Design, So gelingt das Redesign (20)

One design to rule them all
One design to rule them allOne design to rule them all
One design to rule them all
 
2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"2012 - Mobile Ausblick auf das "Jahr 2015"
2012 - Mobile Ausblick auf das "Jahr 2015"
 
Meine 10 TOP Nachrichten zu Mobile der vergangenen Wochen
Meine 10 TOP Nachrichten zu Mobile der vergangenen WochenMeine 10 TOP Nachrichten zu Mobile der vergangenen Wochen
Meine 10 TOP Nachrichten zu Mobile der vergangenen Wochen
 
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
 
Social Mobile Internet Everything - Herausforderungen und Perspektiven für Di...
Social Mobile Internet Everything - Herausforderungen und Perspektiven für Di...Social Mobile Internet Everything - Herausforderungen und Perspektiven für Di...
Social Mobile Internet Everything - Herausforderungen und Perspektiven für Di...
 
Touch Mahal - Mobile Hype
Touch Mahal - Mobile HypeTouch Mahal - Mobile Hype
Touch Mahal - Mobile Hype
 
GO SMART 2012 - Studie zur Smartphonenutzung 2012
GO SMART 2012 - Studie zur Smartphonenutzung 2012GO SMART 2012 - Studie zur Smartphonenutzung 2012
GO SMART 2012 - Studie zur Smartphonenutzung 2012
 
Dem mobilen Internet gehört die Zukunft
Dem mobilen Internet gehört die ZukunftDem mobilen Internet gehört die Zukunft
Dem mobilen Internet gehört die Zukunft
 
Mobile First - Kommunikationsdesign für den Markt der Zukunft
Mobile First - Kommunikationsdesign für den Markt der ZukunftMobile First - Kommunikationsdesign für den Markt der Zukunft
Mobile First - Kommunikationsdesign für den Markt der Zukunft
 
Mobile First - Kommunikationsdesign für den Markt der Zukunft
Mobile First - Kommunikationsdesign für den Markt der ZukunftMobile First - Kommunikationsdesign für den Markt der Zukunft
Mobile First - Kommunikationsdesign für den Markt der Zukunft
 
From Mobile Hype to Mobile Business
From Mobile Hype to Mobile BusinessFrom Mobile Hype to Mobile Business
From Mobile Hype to Mobile Business
 
WordPress 2025 (WordCamp Frankfurt 2016)
WordPress 2025 (WordCamp Frankfurt 2016)WordPress 2025 (WordCamp Frankfurt 2016)
WordPress 2025 (WordCamp Frankfurt 2016)
 
Die wichtigsten Fakten zum Trend-Thema Mobile
Die wichtigsten Fakten zum Trend-Thema Mobile Die wichtigsten Fakten zum Trend-Thema Mobile
Die wichtigsten Fakten zum Trend-Thema Mobile
 
Banken auf dem richtigen Kurs?
Banken auf dem richtigen Kurs?Banken auf dem richtigen Kurs?
Banken auf dem richtigen Kurs?
 
Was folgt auf Web 2.0?
Was folgt auf Web 2.0?Was folgt auf Web 2.0?
Was folgt auf Web 2.0?
 
Mobile Revolution
Mobile RevolutionMobile Revolution
Mobile Revolution
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
 
HTML5 is your friend
HTML5 is your friendHTML5 is your friend
HTML5 is your friend
 
Mobile Trends 2012 - MDAYS by Torsten Schollmayer, SapientNitro
Mobile Trends 2012 - MDAYS by Torsten Schollmayer, SapientNitroMobile Trends 2012 - MDAYS by Torsten Schollmayer, SapientNitro
Mobile Trends 2012 - MDAYS by Torsten Schollmayer, SapientNitro
 
Innovation und der richtige Zeitpunkt - Vortrag Reinhard Karger (DFKI)
Innovation und der richtige Zeitpunkt - Vortrag Reinhard Karger (DFKI)Innovation und der richtige Zeitpunkt - Vortrag Reinhard Karger (DFKI)
Innovation und der richtige Zeitpunkt - Vortrag Reinhard Karger (DFKI)
 

Responsive Web Design, So gelingt das Redesign