Responsive Web Design verkaufen - Developer Week DWX 2014

Responsive Webdesign verkaufen

Patrick Lobacher GF +Pluswerk GmbH

15.07.2014

Disclaimer:

Keine Technik!

Patrick Lobacher GF +Pluswerk GmbH


(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014

Responsive Webdesign verkaufen ]

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+[ 9 ] Standorte in Deutschland +[ 110 ] Mitarbeiter +[ 999 ] realisierte Projekte mit Magento und TYPO3





Agenda• Hype oder Realität?

• RWD ist doch einfach!

• RWD Workflow

• RWD verkaufen

• Verträge



Bullshit Bingo




Kennt Ihr das Spiel, mit dem man langweilige Meetings überlebt?

Regel: Sobald einer der Begriffe aus der folgende Matrix genannt wird, kreuze diesen an. Wenn Du eine Reihe oder Zeile komplett hast,

schreie laut „BULLSHIT BINGO“





Bullshit Bingo (Schrei: „BULLSHIT BINGO“ wenn eine Reihe oder Spalte komplett ist)

Proaktiv Win-Win Zielführend Mindset

Out of the box Synergie Strategie Kundenzentriert

ProzessAm Ende des

Tages...24 / 7 Die Wahrheit ist...

Fokussieren Kernkompetenz Mehrwert Benchmark





Um nun Daten für Eurer eigenes Spiel zu finden, googelt einfach nach:

„web design trends 2014“





2014 - Web Design - Bullshit Bingo (Schrei: „BULLSHIT BINGO“ wenn eine Reihe oder Spalte komplett ist)

Responsive WebDesign Flat Design

Single PageWeb Design

Neon

ParallaxScrolling

Off-CanvasCSS3

AnimationsFull-width Background

Images

FullscreenTypography

QR CodesInfinite

ScrollingDecoupled

CMS

InteractiveInfographics

Social MediaBadges

Black & WhiteDesign

Simplified Design





http://www.designpromotivate.comhttp://katieunderhill.co.uk/

http://www.smashingmagazine.com

HOT TOPIC 2014!!

WEB DESIGNTRENDS 2014


http://www.designpromotivate.com






Responsive Web Design - RWD

ist ein Trend!

Wirklich?





Die Wikipedia sagt dazu:

Als Fad ([fæd], engl. für „Fimmel“, „Masche“, „Modetorheit“; auch: Craze, Vogue, Rage) bzw. Hype oder Trend wird im kulturellen Diskurs des

englischsprachigen Raumes ein Verhalten bezeichnet, dem Bevölkerungsteile meist über eine sehr kurze Zeit hinweg mit

Begeisterung folgen, und zwar so lange, wie dieses Verhalten als neuartig und daher als interessant empfunden wird.

Fads ähneln Moden, sind aber kurzlebiger und eher arbiträre

Einzelereignisse als Stationen eines modischen Trends.


http://de.wikipedia.org/wiki/Englische_Sprache

http://de.wikipedia.org/wiki/Mode




„RWD ist kein Trend, sondern die fundamentale Basis von ernsthaften

Web Design und eine Notwendigkeit um den Zugang zum Web sicherzustellen -

jetzt und in der Zukunft“

Patrick Lobacher, 29.10.2013





Aber das ist einfach zu erreichen: iPad, iPhone, Nexus, Galaxy

#nicht

http://opensignal.com/reports/fragmentation.phphttp://www.timhordern.com/


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

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




Und was ist damit?

http://www.flickr.com/photos/taedc/10166827123/ http://www.flickr.com/photos/icebearger/8651979429/

http://www.flickr.com/photos/samsungtomorrow/8335500219/http://www.flickr.com/photos/raneko/3045816114/


http://www.flickr.com/photos/taedc/10166827123/







http://www.businessinsider.com/iwatch-concept-2013-8?op=1

Und was ist damit?

http://www.hotelmanagement-network.com/

http://www.apple.com/ios/carplay/

http://www.winnipegfreepress.com/


http://www.hotelmanagement-network.com/

http://www.apple.com/ios/carplay/

http://www.winnipegfreepress.com/

RWD ist einfach!




KundenWissen(leider)

Zutaten

• Neu-Anordnen von Inhaltselemente

• Ein flexibles Grid-System

• Flexible Bilder

• Media queries

• Serverseitige Komponenten (RESS)

• „einige“ Prozesse


http://en.wikipedia.org/wiki/Media_queries




Das ist alles!

Stimmt doch, oder?

http://ww

w.slideshare.net/slideshow

/embed_code/14528526


http://www.slideshare.net/slideshow/embed_code/14528526

Okay, okay - es ist nicht sooo einfach...

Aber letzlich nur ein technisches Problem!

Sicher?

NEIN: Responsive Design ist eben KEIN Problem

von Design oder Entwicklung!

RWD Workflow




http://commons.wikimedia.org/wiki/File%3AWaterfall_model_(1).svg

• Lastenheft

• Pflichtenheft

• Design-Prozess => PSD

• PSD => Design Freigabe

• PSD => Implementierung

• Verifizierung / Testing

• PSD => Endabnahme

• Fertig :-)

Klassischer Workflow



Was ist verkehrt mit diesem Workflow?

Er hat doch seit Jahren funktioniert?

Responsive Web Design benötigt ein

radikales Umdenken!

Es ist eine allumfassende Denkweise!

Und es betrifft *alle* Rollen:

CEO, Vertrieb, UX/UI, Designer, Entwickler,

Redakteure, Kunden, ...




GF / Freelancer / Entscheider

• Existiert die Vision, jedes Gerät jetzt und in der Zukunft zu unterstützen?

• Besteht der Wille, in die Fortbildung des gesamten Teams zu investieren?

• Sind alle bereit, zu akzeptieren, dass sich festgefahrene Prozesse radikal ändern werden? Für eine grundlegende Veränderung?





Designer

• Die Tools werden sich verändern! (Photoshop ist nicht tot - aber der Designer muss sich mit deutlich mehr bzw. anderen Tools beschäftigen)

• Erforsche das Medium ausführlich!

• Rein visuell arbeitende Designer müssen am meisten lernen!

• Bleibe offen für neues!





Kunde

• Wir beide (Kunde und Agentur) erschaffen „Business Value“ (geschäftlicher Wert) - und keine Pixel-genauen PSD

• Du brauchst Zeit - viel Zeit! Du bist in das Projekt deutlich mehr involviert als früher. Täglich! Ohne Deine Mitarbeit funktioniert es nicht!

• Auch Du benötigst ein Verständnis von RWD





Vertrieb

• RWD ist KEIN Produkt!!!

• Du brauchst neue Verträge

• Verkaufe RWD Consulting - da es essentiell notwendig ist, dass Dein Kunde sich damit beschäftigt

• RWD Projekte sind teuerer - dafür aber für den Kunden jeden € wert





➀ Entscheidungen

➁ Content Strategy

➂ Content Wireframes

➃ Content Erstellen

➄ Content-Testing ➉ Produktion

➅ Moodboard / Style Tile

➆ Linear Design

➇ Prototyping

➈ Geräte-Testing

Geklärte Anforderungen (Stories/LH/FH)

Weitere Programmierung & Finalisierung

Der RWD-Workflow





Der RWD-Workflow - Schritt 1

• Entscheidungen

• Stakeholder Matrix (Wer entscheidet was?) • Projekt Ziel / Vision • Breakpoint Entscheidungen (aufgrund des Inhalts) (Wichtig!) • Liste der zu unterstützenden Geräte und Browser (Top 5/3) • Dokument Bestandsaufnahme (CI-Manual, Richtlinien,

Bestimmungen, Rechtliches, ...) • Moodboard Briefing (Look & Feel) • Vertrag






• Content Strategy (Consulting)

• Erster Schritt ist das Sammeln, Auswerten und Bewerten des Contents

• Dies führt zu einem „Content Inventory“(Hauptnavigation, Sekundärnavigation, Logo, Links, Überschriften, Inhaltselemente, ...)

• Großes Excel-File mit Was/ Wo / Wer / Wann





Hauptnavigation

Logo Suche & Links

Überschrift

Inhalt

Footer

Irgendein Plugin


• Content Wireframes

• Welcher Inhalt ist wo • Nur Rechtecke • Kein Design! • Mobile first! • Für jeden Major-Breakpoint • Für jeden Seitentyp • Für jeden Inhaltstyp






• Content erstellen

• Identifizierung der verschiedenen Inhalts-Typen (Listen, Tabellen, Überschriften, Bild mit Text auf der rechten Seite, ...)

• Nur Text verwenden!

• Markup via Markdown / AsciiDoc / ReST

• Konvertierung zu HTML um einen Text-Dummy zu erhalten






• Testen des Contents

• Content Dummy Test

• in allen Breiten (Screensize)auf die man sich geeinigt hatte

• Dafür gibt es natürlich Tools :-)

• Freigabe durch den Kunden!




Responsive Webdesign verkaufen ]http://w

eblog.404creative.com/


• Moodboard / Style Tile

• Illustration des visuellen Stils (und der Stilrichtung)

• Look & feel der Website inkl. der Elemente (wie Navigation, Überschrift, …)

• Atomic Design (Pattern Lab)








• Linear Design

• Anreichern des Content Dummys mit dem Basis Design aus dem Moodboard

• Anfangs linear - noch nicht positioniert

• Dient dazu, um zu sehen, wie „richtiger/realer“ Content wirkt und aussieht







• Prototype (Design im Browser)

•Produktion eines Clickdummys mit HTML5/CSS3/JavaScript/...

•Dies führt zum finalen Layout - daher muss hier auf die Positionierung geachtet werden

• Interaktiver Prozess mit dem Kunden!







• Device testing

• Test muss auf realen Testgeräten durchgeführt werden - keine Simulatoren möglich!

• Gehe zu Open Device Labs (ODL)

• Für das Testen gibt es Tools!







• Produktion

• Integration in ein CMS (falls vorhanden

• Backend-Programmierung

• APIs

• ...


RWD verkaufen




Consulting

Workshop

Design

Programmierung

Testing

RWD verkaufen• Consulting

(Basis RWD Wissen für den Kunden)

• Workshops (Anforderungen, Entscheidungen, Inhalte, Wireframes, Clickdummy, Prozesse, ...)

• Design (Moodboard, Style Tile, Linear Design, Element Design, Atomic Design, ...)

• Produktion / Programmierung (Content Dummy, Clickdummy, ...)

• Testing (Content testing, device testing)





PSD

Full Layouts

RWD for Non-RWD Design

RWD AddOn

History Museum

Was sollte man nicht verkaufen• PSD

Statische Dokumente können NICHT verwendet werden!

• Full Layouts Design von Elementen und NICHT von Layouts

• RWD AddOn Es ist NICHT möglich, auf eine bestehende Website RWD „drüberzustülpen“. RWD ist KEIN Feature!

• RWD for Non-RWD Design Stelle sicher, das der Designer umfangreiche RWD-Kenntnisse besitzt

• History Museum Das Web existiert in der Gegenwart - halte daher nicht an alten Browsern fest





Wieviel kostet RWD?• (Sorry) Unsinnige Fragen:

• Wieviel kostet RWD?

• Wieviel kostet es mehr, wenn wir RWD machen?

• Richtige Antwort:

• Mehr als ohne!

• Wahrscheinlich bis zu ca. 2x Aufwand ohne RWD





Wieviel kostet RWD?

• Frage: Wieviel kostet RWD?

• Antwort: $13.47

• Nachzulesen bei: http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/


http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/




FAQ• Kunde: wir fangen jetzt schon mal an und machen RWD später

• NEIN - entweder von Anfang an, oder erst beim nächsten Relaunch

• Kunde: Wir haben eigene Designer

•Stelle (wirklich) sicher, das die Designer ein tiefes und umfangreiches Verständnis des RWD Prozesses haben - ansonsten lieber jemanden anderen beauftragen (oder die Rechnung dafür zahlen)

• Kunde: Wir machen es wie immer - mit PSD (Layouts)

•Nein, Nein und nochmals Nein. Kein PSD. Niemals. Oder - mache einen narrensicheren Vertrag und besorge Dir einen wirklich guten Anwalt! Alternative: Kredit!





FAQ

• Kunde: Wir können kaum Zeit aufwenden von unserer Seite

• Dann haben wir keine Chance vernünftiges RWD zu implementieren

• Kunden: Aber ich brauche wirklich einen Festpreis für RWD

• Verdoppele den Aufwand für das Frontend - damit sollte man auf der sicheren Seite sein

• Kunden: Was hat das RWD in ihrem letzten Projekt gekostet?

• Wieviel hat Ihr letztes Auto/Haus/Whirlpool gekostet?


Verträge




Killer Contract

• Kombination aus:

• Contract Killer 3 / Open Source Vertrag Original: Andy Clarke (Stuff & Nonsense)

• Der agile Festpreis: Leitfaden für wirklich erfolgreiche IT-Projekt-Verträge





Design• Wir erstellen "look-and-feel" Designs und flexible Layouts die

sich an die Möglichkeiten von vielen Endgeräten und Bildschirmgrößen anpassen.

• Wir erstellen Designs iterativ und benützen hierfür überwiegend HTML und CSS um so keine Zeit damit vergeuden, für jedes Template ein statisches Bild zu erstellen.

• Wenn wir statische Bilder verwenden, dann um die Richtung, in die das Look-and-feel geht, zu zeigen. Dies wird von uns als "Design Atmosphäre" bezeichnet. Diese ist nicht verbindlich.





Design• Sie werden zwei oder mehrmals wöchentlich die

Möglichkeit haben, unsere Arbeit durchzusehen und Feedback zu geben.

• Sollten Sie, in irgendeiner Phase des Projekts, nicht glücklich mit der Richtung sein, in die unsere Arbeit geht, werden Sie uns für die gesamten bis zu diesem Zeitpunkt erbrachten Leistungen bezahlen und diesen Vertrag auflösen.





Desktop Browser Tests• Wir testen unsere Arbeit in aktuellen Versionen der

wichtigsten Desktop Browsern, inklusive jenen von Apple (Safari), Google (Chrome), Microsoft (Internet Explorer), Mozilla Firefox und Opera.

• Außerdem testen wir um sicherzustellen, dass Benutzer des Microsoft Internet Explorer 8 für Windows ein angebrachtes, möglicherweise abweichendes Erlebnis, erhalten.





Desktop Browser Tests

• Wir werden ein einspaltiges Design für Internet Explorer 7 und darunter auf Windows implementieren und keine Tests in anderen, älteren Browsern durchführen außer Sie legen dies fest.

• Sollten Sie ein erweitertes, aufwendigeres Design für ältere Browser benötigen können wir hierfür ein gesondertes Angebot erstellen.





Mobile Browser Tests• Ein Design auf populären Endgeräten mit kleinen

Bildschirmgrößen zu testen ist wichtig um den Benutzern ein Erlebnis zu bieten, dass den Funkionen ihres Geräts entspricht.

• Wir testen unsere Arbeit in:

• iOS: Safari, Google Chrome and Opera Mini

• Android 4.4: Google Chrome, Firefox and Opera Mini

• Android 3.2: Browser, Firefox and Opera Mini





Mobile Browser Tests

• Aktuell testen wir nicht in

• Blackberry OS oder Blackberry QNX, Opera Mobile, Symbian oder anderen mobilen Browsern.

• Sollten von Ihnen ein Testing auch auf diesen oder anderen Geräten/Browsern erwünscht sein, können wir hierfür ein gesondertes Angebot erstellen.





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/dwx14-rwd

http://www.lobacher.de/dwx14-rwd




Kontakt

Klassisch:+Pluswerk GmbHPatrick LobacherSolmstr. 6A60486 Frankfurt am Main Fon: +49 89 130 145 20 Email: [email protected] Web: 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_LobacherLinkedInwww.linkedin.com/pub/patrick-lobacher/4/881/171Slideshare: www.slideshare.net/plobacherAmazon: www.amazon.de/Patrick-Lobacher/e/B0045AQVEA

Profil: Full Service Agentur für digitale Kommunikation Schwerpunkt: Open Source Technologie Kunden: Enterprise & KMU


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




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


Besten Dank für Eure Aufmerksamkeit!

Responsive Web Design verkaufen - Developer Week DWX 2014

Internet

Transcript of Responsive Web Design verkaufen - Developer Week DWX 2014