Warum Responsive Webdesign scheitern muss...
Patrick Lobacher GF +Pluswerk GmbH
02.09.2014
Disclaimer:
Keine Technik!
Patrick Lobacher GF +Pluswerk GmbH
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Patrick LobacherGeschäftsführer +Pluswerk GmbH
• 43 Jahre, glücklich verheiratet, wohnhaft in München
• Selbständig im Bereich Webentwicklung seit 1994
• Autor von 10 Fachbüchern und > 50 Fachartikeln zum
Thema TYPO3 und Webentwicklung
• Speaker, Trainer, Consultant, Coach, Nerd
Veröffentlichungen:
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Agentur für digitale Kommunikation+[ 10 ] Standorte in Deutschland +[ 130 ] Mitarbeiter +[ 999 ] realisierte Projekte mit Magento und TYPO3
Zuerst dachte ich, das wäre gutes RWD, aber dann habe ich 10 schreckliche Fehler entdeckt!! Besonders der 7. wird Dein Leben für immer verändern!
http://heftig.co/
Bullshit Bingo
© RTL
Die 10 peinlichsten RWD FehlerPlatz 10
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Ich habe den Artikel von Ethan Marotte gelesen - also bin ich fit in RWD!!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
http://alistapart.com/article/responsive-web-design
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
RWD = Media Queries + Fluid Grids + Flexible Images
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
http://ww
w.slideshare.net/slideshow
/embed_code/14528526
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Bullshit Bingo
© RTL
Platz 9
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Design First - wie immer!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
• RWD bei einer „führenden“ Kommunikationsagentur für einen Enterprise Kunden:
• 3 Designvorschläge • 30 Seitentypen • 6 Break-Points (7 Darstellungen) • >> 540 (ausgedruckte) PSD-Dateien <<
• > 150.000 EUR nur für das Design
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
• Der Design-Prozess muss sich „radikal“ ändern
• Mobile-First! (Content-First) • Kein Layout mehr • Iterativ (Agil)
https://www.flickr.com/photos/gernot/134998970/
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
http://smm.zoomquiet.io/data/20110511083224/index.html
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
http://bradfrostweb.com/blog/post/atomic-web-design/ http://patternlab.io/
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
http://styletil.es/
Bullshit Bingo
© RTL
Platz 8
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
RWD ist schön und gut - aber mit unseren Kunden
geht das nicht!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
• Killerphrase / Totschlagargument • „Beharrungs-Killerphrasen“
sollen Veränderungen verhindern • „Vertagungs-Killerphrasen“ sollen aus
Angst vor Fehlern Entscheidungen hinauszögern
• Beispiel: „Das haben wir schon immer so gemacht.“
• Beispiel: „Das ist mit unserem Kunden nicht möglich.“
Bullshit Bingo
© RTL
Platz 7
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Wieviel kostet RWD mehr als ohne?
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
• Verkaufen von Consulting • Verkaufen von Workshops • Agiler Festpreis! • Preis ca.:
Bis zu 2x Frontend-Anteil
Bullshit Bingo
© RTL
Platz 6
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Unsere Verträge funktionieren seit Jahren -
daher werden sie auch mit RWD funktionieren!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Werkvertrag Time & Material
Agiler Festpreis
Budget-sicherheit
Anforderungs-flexibilität
Verhandlungs-aufwand
Schätz-sicherheit
Qualitäts-risiko
Kalkulations-transparenz
Festpreis
Aufwandspreis
Agiler Festpreis
http://
ww
w.oose.de/
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
stuffandnonsense.co.uk/blog/about/contract-killer-3
Bullshit Bingo
© RTL
Platz 5
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
RWD? Klar, ich verwende Bootstrap!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Bootstrap ≠ RWD
Bullshit Bingo
© RTL
Platz 4
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Wir machen RWD im Wasserfall (wie immer!)
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Wasserfall-Vorgehenssmodell
1956
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Frontend Planning / Contract
RWD
Proto- typing
ContentStrategy
DeviceTesting
StyleTileAtomic DesignContent
Testing
CreateContent
ContentWireframe
LinearDesign
Bullshit Bingo
© RTL
Platz 3
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Bei den paar Geräten lohnt sich doch der
Aufwand nicht!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
http://www.businessinsider.com/android-fragmentation-2014-8http://www.timhordern.com/
iPhoneiPad
iWatchCarPlay
Bullshit Bingo
© RTL
Platz 2
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Testen? Kein Problem - wir haben Simulatoren für
alle Zwecke!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
http://bradfrostweb.com/blog/post/techcrunch/
Carrier / Device Bugs / Performance
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Bullshit Bingo
© RTL
Platz 1
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Was man nicht versteht, wird schlecht gemacht!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Zensur!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
2014 - Web Design - Bullshit Bingo (Schrei: „BULLSHIT BINGO“ wenn eine Reihe oder Spalte komplett ist)
Off-Canvas Flat DesignSingle PageWeb Design
Neon
ParallaxScrolling
Responsive Web Design
CSS3Animations
Full-width Background Images
FullscreenTypography
QR CodesInfinite
ScrollingDecoupled
CMS
InteractiveInfographics
Social MediaBadges
Black & WhiteDesign
Simplified Design
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
1. Bad Web Performance 2. Slow Loading Time 3. Longer Checkout Time and Higher
Cart Abandonment Rate 4. Bad for Sales 5. Not an Affordable Web Development
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Links
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Links• http://www.creativebloq.com/responsive-web-design/top-responsive-web-design-problems-and-how-avoid-them-8122790
• http://weblog.404creative.com/2007/02/14/website-mood-boards-a-successful-precursor-to-visual-prototyping/
• http://styletil.es/
• http://samanthatoy.com/washington-examiner/
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Links• http://responsivedesignworkflow.com/
• http://de.slideshare.net/stephenhay/mobilism2012
• http://www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/
• http://dmduplessis.com/responsive-design-and-the-art-of-being-busy/
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Links
• http://bradfrostweb.com/blog/post/atomic-web-design/
• http://maddesigns.de/responsive-workflow/#1
• http://stuffandnonsense.co.uk/projects/contract-killer/
• https://gist.github.com/slashadmin/4555492
Zum Abschluß:
Responsive Web Designbenötigt Euer Umdenken!
Danke!
Fragen? Oder komplett verwirrt?
Slides: www.lobacher.de/mtc14-rwd
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Pluswerk
10 Standorte in Deutschland
130 Mitarbeiter
5 Neos Websites
60 TYPO3 Experten
128 eigene Extensions
TYPO3 Association Platinum Member
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Portfolio - Lösungen
Strategie &Consulting - Digital Strategy - E-Commerce Strategy - Cross Channel Management - Agile Consulting / Coaching- Project Management
PerformanceMarketing - Conversion Optimization - Search Engine Marketing (SEM) - Search Engine Optimization (SEO) - Social Media Marketing (SMM) - Web Analytics
Websites &Portale - Corporate Websites - Brand Sites- Micro Sites - Intranets & Extranets- Mobile Applications
Technologie &Systementwicklung - CMS Development - Enterprise Search- CRM Development - Systemintegration - Software Development
Operations - Content Management - Content Localization - Shop Management- Support - Hosting
E-Commerce - Online Shops - Mobile Commerce - B2C / B2B- Social Commerce - Commerce Search
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Portfolio - Produkte
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision)
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Warum Responsive Webdesign scheitern muss… | www.plus-werk.com | 02.09.2014
Warum RWD scheitern muss… ]
Klassisch:+Pluswerk GmbHPatrick LobacherSolmstr. 6A60486 Frankfurt am MainFon: +49 89 130 145 20 Email: [email protected]: www.plus-werk.com !
Twitter: www.twitter.com/PatrickLobacherFacebook: www.facebook.com/patrick.lobacherBlog: blog.lobacher.de Schulungen: www.lobacher.deGoogle+:plus.google.com/105500420878314068694
XING: www.xing.com/profile/Patrick_Lobacher LinkedInwww.linkedin.com/pub/patrick-lobacher/4/881/171Slideshare: www.slideshare.net/plobacher Amazon: www.amazon.de/Patrick-Lobacher/e/B0045AQVEA
Kontakt
Besten Dank für Eure Aufmerksamkeit!