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

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:

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

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

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

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

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

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://

w.oose.de/

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

Bullshit Bingo

Platz 5

RWD? Klar, ich verwende Bootstrap!

Bootstrap ≠ RWD

Bullshit Bingo

Platz 4

Wir machen RWD im Wasserfall (wie immer!)

Wasserfall-Vorgehenssmodell

Frontend Planning / Contract

Proto- typing

ContentStrategy

DeviceTesting

StyleTileAtomic DesignContent

Testing

CreateContent

ContentWireframe

LinearDesign

Bullshit Bingo

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

Bullshit Bingo

Platz 2

Testen? Kein Problem - wir haben Simulatoren für

alle Zwecke!

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

Carrier / Device Bugs / Performance

Bullshit Bingo

Platz 1

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

ParallaxScrolling

Responsive Web Design

CSS3Animations

Full-width Background Images

FullscreenTypography

QR CodesInfinite

ScrollingDecoupled

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/

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://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: lobacher@plus-werk.comWeb: 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!

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

Internet

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

Souper Tuesday - Responsive Webdesign

Panorama 5/2012: Scheitern

Wie funktioniert Responsive Webdesign?Wie funktioniert ... · Wie funktioniert Responsive Webdesign?Wie funktioniert Responsive Webdesign? ˜˚˛˝˙ˆ˛ˇ˘˚ ˚ ˚˛ˇ ˆ in 5 Minuten.

Responsive Design Whitepaper

U5 Responsive Webdesign - mediencommunity.de Responsive Webdesign_0.pdf · U5: Responsive Webdesign Vorteile - Mehr Usability - Mehrere Darstellungen auf versch. Endgeräten - Reichweite

Responsive chitosan-based microgels

Warum scheitern Wikis? *

Responsive Content Experience

Responsive Design mit Drupal

Responsive Design - Reality Check

Warum Innovationen scheitern.

Responsive Design oder Apps?

Responsive Images

Responsive Webdesign Agentur Hamburg

Warum Innovationen scheitern

Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics

Responsive Design - ITB Kongress · 2017-12-19 · Referenzen Responsive Design Lufthansa Miles & More Relaunch Newsletter im Responsive Design. Internationales Newsletter Management

Responsive Webdesign

Responsive Web Design

Polymeric redox-responsive delivery systems bearing ... · Polymeric redox-responsive delivery systems bearing ammonium salts cross ... (PDEA) can be found in the ... Polymeric redox-responsive