Warum Responsive Webdesign scheitern muss... (MobileTech Conference 2014)

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:

http://www.plus-werk.com




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




Ich habe den Artikel von Ethan Marotte gelesen - also bin ich fit in RWD!!





http://alistapart.com/article/responsive-web-design





RWD = Media Queries + Fluid Grids + Flexible Images





http://ww

w.slideshare.net/slideshow

/embed_code/14528526


Bullshit Bingo

© RTL

Platz 9




Design First - wie immer!





• 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





• Der Design-Prozess muss sich „radikal“ ändern

• Mobile-First! (Content-First) • Kein Layout mehr • Iterativ (Agil)

https://www.flickr.com/photos/gernot/134998970/





http://smm.zoomquiet.io/data/20110511083224/index.html





http://bradfrostweb.com/blog/post/atomic-web-design/ http://patternlab.io/





http://styletil.es/


Bullshit Bingo

© RTL

Platz 8




RWD ist schön und gut - aber mit unseren Kunden

geht das nicht!





• 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




Wieviel kostet RWD mehr als ohne?





• Verkaufen von Consulting • Verkaufen von Workshops • Agiler Festpreis! • Preis ca.:

Bis zu 2x Frontend-Anteil


Bullshit Bingo

© RTL

Platz 6




Unsere Verträge funktionieren seit Jahren -

daher werden sie auch mit RWD funktionieren!





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/





stuffandnonsense.co.uk/blog/about/contract-killer-3


Bullshit Bingo

© RTL

Platz 5




RWD? Klar, ich verwende Bootstrap!





Bootstrap ≠ RWD


Bullshit Bingo

© RTL

Platz 4




Wir machen RWD im Wasserfall (wie immer!)





Wasserfall-Vorgehenssmodell

1956





Frontend Planning / Contract

RWD

Proto- typing

ContentStrategy

DeviceTesting

StyleTileAtomic DesignContent

Testing

CreateContent

ContentWireframe

LinearDesign


Bullshit Bingo

© RTL

Platz 3




Bei den paar Geräten lohnt sich doch der

Aufwand nicht!





http://www.businessinsider.com/android-fragmentation-2014-8http://www.timhordern.com/

iPhoneiPad

iWatchCarPlay


http://opensignal.com/reports/fragmentation.php

Bullshit Bingo

© RTL

Platz 2




Testen? Kein Problem - wir haben Simulatoren für

alle Zwecke!





http://bradfrostweb.com/blog/post/techcrunch/

Carrier / Device Bugs / Performance





Was man nicht versteht, wird schlecht gemacht!





Zensur!





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





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





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/


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/




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/


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/




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


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




Pluswerk

10 Standorte in Deutschland

130 Mitarbeiter

5 Neos Websites

60 TYPO3 Experten

128 eigene Extensions

TYPO3 Association Platinum Member





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





Portfolio - Produkte





Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision)





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


http://twitter.com/PatrickLobacher

http://www.lobacher.de

http://www.xing.com/profile/Patrick_Lobacher

http://www.linkedin.com/pub/patrick-lobacher/4/881/171

http://www.slideshare.net/plobacher

http://www.amazon.de/Patrick-Lobacher/e/B0045AQVEA

Besten Dank für Eure Aufmerksamkeit!

Warum Responsive Webdesign scheitern muss... (MobileTech Conference 2014)

Internet

Transcript of Warum Responsive Webdesign scheitern muss... (MobileTech Conference 2014)