Webinale 14: Responsive Webdesign verkaufen / Pluswerk

Responsive Webdesign
verkaufen 
 
Patrick Lobacher  
GF +Pluswerk GmbH
02.06.2014

Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014
Responsive Webdesign verkaufen ]
Patrick Lobacher 
Geschä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 
 
+[ 9 ] Standorte in Deutschland
+[ 110 ] Mitarbeiter
+[ 999 ] realisierte Projekte mit Magento und TYPO3

Agenda
• Hype oder Realität?
• RWD ist doch einfach!
• RWD Workﬂow
• RWD verkaufen
• Verträge

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
Prozess
Am Ende des
Tages...
24 / 7 Die Wahrheit ist...
Fokussieren Kernkompetenz Mehrwert Benchmark

Um nun Daten für Eurer
eigenes Spiel zu ﬁnden,
googelt einfach nach:  
„web design trends 2014“

2014 -Web Design - Bullshit Bingo
(Schrei: „BULLSHIT BINGO“ wenn eine Reihe oder Spalte komplett ist)
Responsive Web 
Design
Flat Design
Single Page 
Web Design
Neon
Parallax 
Scrolling
Off-Canvas
CSS3 
Animations
Full-width Background
Images
Fullscreen 
Typography
QR Codes
Inﬁnite 
Scrolling
Decoupled 
CMS
Interactive 
Infographics
Social Media 
Badges
Black & White 
Design
Simpliﬁed Design

http://www.designpromotivate.comhttp://katieunderhill.co.uk/
http://www.smashingmagazine.com
HOT TOPIC 2014!!
WEB DESIGN 
TRENDS 2014

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.

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

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

Kunden 
Wissen 
(leider)
Zutaten
• Neu-Anordnen von Inhaltselemente
• Ein ﬂexibles Grid-System
• Flexible Bilder
• Media queries
• Serverseitige Komponenten (RESS)
• „einige“ Prozesse

Das ist alles!
Stimmt doch, oder?
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!

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 Workﬂow? 
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-Workﬂow

Der RWD-Workﬂow - 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 Brieﬁng (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 ﬁrst!
• Für jeden Major-Breakpoint
• Für jeden Seitentyp
• Für jeden Inhaltstyp

• Content erstellen
• Identiﬁzierung 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!

http://weblog.404creative.com/
• Moodboard / Style Tile
• Illustration des visuellen
Stils (und der Stilrichtung)
• Look & feel der Website inkl.
der Elemente (wie
Navigation, Überschrift, …)
• Atomic Design!

• 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 ﬁnalen Layout - daher muss
hier auf die Positionierung geachtet werden
•Interaktiver Prozess mit dem Kunden!
•Freigabe durch den 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
• ...

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/

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 - 1
• Zusammenfassung / Erwartungen
• Kunden-Daten
• Agentur- / Freelancer-Daten
• Projekt Ziel
• Deadlines

Verträge - 2
• Vereinbarungen
• Der Kunden muss die Arbeiten überprüfen, Feedback
liefern und die Freigaben zügig durchführen
• Deadlines gelten für beide Seiten - Agentur/
Freelancer und Kunden sind beiderseit daran
gebunden
• Der Kunde muss sich an den Zahlungsplan halten

Verträge - 3
• Design
• Es wird ein „Look-and-Feel“ Design erstellt
• Es werden ﬂexible Layout erstellt, die die Möglichkeiten von vielen
Geräten und Bildschirmgrößen adaptieren
• Der Design-Prozess ist iterativ
• Es wird hauptsächlich HTML5 und CSS3 verwendet, anstatt jedes
Template als statisches Layout nachzubilden
• Statische Layouts werden nur als Moodboard/Style Tile erstellt und
enthalten die Richtung (Look and Feel) der Site, wie Typographie,
Farben, Texturen, Bildwelten, Elemente, ...)

Verträge - 4
• Inhalt & Bilder
• Die Agentur ist nicht verantwortlich, Inhalt zu erstellen
oder einzugeben (HTML, CMS, ...)
• Die Agentur ist nicht verantwortlich, Bilder
auszuwählen, aufzunehmen, zu editieren oder zu
konvertieren
• Dafür kann ein eignes Angebot erstellt werden

Verträge - 5
• Browser Testing im Allgemeinen
• Browser Testing bedeutet nicht mehr, dass man versucht
eine Website identisch in allen Browsern, Geräten oder
Bildschirmgrößen aussehen zu lassen
• Sondern es bedeutet, dass man sicherstellt, dass die
User-Experience und die Design-Experience adäquat
den Möglichkeiten des Geräts oder des Browsers erstellt
wird

Verträge - 6
• Desktop Browser Testing
• Wir testen mit den folgenden Browsern (und Versionen):
• Apple / Safari / 6.0.5
• xxx / yyy / zzz
• Wir testen NICHT in den folgenden Browsern (und
Versionen:
• Microsoft IE 8

Verträge - 7
• Mobile Browser Testing
• Wir testen mit den folgenden Browsern (und Versionen):
• Android 4.1 / Chrome / 6.0.5
• iOS 7.0.x / Safari
• xxx / yyy / zzz
• Wir testen NICHT mit den folgenden Browsern (und
Versionen):
• Blackberry OS /QNX, Symbian, ... (any Browser)

Verträge - 8
• Changes / Feature Requests (sofern Wasserfall)
• Da der vorliegende Vertrag ein Festpreis-Vertrag ist, haben wir am
Anfang ein Pflichtenheft erstellt, welches alle Anforderungen enthält
• Auf dieser Basis kalkulieren wir unsere Arbeit
• Wir wollen aber flexibel sein. Wenn Sie etwas geändert haben wollen
(welches ein Delta zum Pflichtenheft darstellt), bieten wir Ihnen dies
als separates Angebot an
• Im Pflichtenheft fehlende Aspekte, stellen eine Konzeptionslücke dar
und werden ebenfalls separat angeboten, falls diese gewünscht sind.

Verträge - 9
• Copyright
• Der Kunde garantiert, dass alle Assets (wie Texte, Bilder,
Graﬁken,...) die er liefert, mit Rechten für den Kunden ausgestattet
sind. Der Auftragnehmer haftet hierfür in keiner Weise!
• Dem Kunden gehören die Elemente, der Agentur/Freelancer
allerdings die einmalige Anordung der Elemente (wie Design,
Layout, ...)
• Die Agentur vergibt eine exklusive Lizenz an den Kunden, diese
einmalige Kombination zu nutzen. Diese Lizenz gilt ausschließlich
für das erstellte Projekt.

Verträge - 10
• Zahlunsplan
• Wir vereinbaren den folgenden Zahlungsplan:
• 50% vor Start des Projekts - die Arbeiten der Agentur/des Freelancers
beginnen ab Eingang auf dem Konto
• 40% bei Lieferung (hier kann man kleinere Milestones deﬁnieren)
• 10% bei Abnahme
• Sobald der Kunde das Projekt produktiv nutzt, hat er eine implizite
Abnahme durchgeführt und die restlichen 10% werden sofort fällig
• Zahlungsziel 10 Tage

Verträge - 11
• Rechtliches
• Keine Programmier-Arbeit ist fehlerfrei. Wir versuchen Fehler (dies sind
Funktionen, die im Pﬂichtenheft beschrieben wurden, aber nicht wie
beschrieben funktionieren) so schnell wie möglich zu beheben aber wir
sind nicht verantwortlich für eventuell daraus entstehende Schäden
egal welcher Art, selbst wenn wir explizit darauf hingewiesen wurden.
• Die Agentur zeigt die Arbeiten anderen Leuten (z.B. über die Website),
daher räumt der Kunden das Recht ein, das Projekt vorzustellen und zu
verlinken
• Wir sind nicht verantwortlich für irgendwelche Fehler in 3rd Party
Software, insbesondere in verwendeter Open Source Software

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/

Links
• http://bradfrostweb.com/blog/post/atomic-web-
design/ 
• http://maddesigns.de/responsive-workflow/#1 
• http://stuffandnonsense.co.uk/projects/
contract-killer/

Zum Abschluß:
Responsive Web Design 
benötigt Euer Umdenken!
Danke!

Fragen?
Oder komplett verwirrt?
Slides: www.lobacher.de/webinale14

Kontakt
Klassisch: 
 
+Pluswerk GmbH 
Patrick Lobacher 
Solmstr. 6A 
60486 Frankfurt am Main 
 
Fon: +49 89 130 145 20 
 
Email: lobacher@plus-werk.com 
Web: www.plus-werk.com
!
 
 
 
Twitter:  
www.twitter.com/PatrickLobacher 
 
Facebook:  
www.facebook.com/patrick.lobacher 
 
Blog:
blog.lobacher.de
 
Schulungen:
www.lobacher.de 
 
Google+: 
plus.google.com/105500420878314068694 
 
 
 
XING:  
www.xing.com/proﬁle/Patrick_Lobacher 
 
LinkedIn 
www.linkedin.com/pub/patrick-lobacher/
4/881/171 
 
Slideshare:  
www.slideshare.net/plobacher 
 
Amazon:  
www.amazon.de/Patrick-Lobacher/e/
B0045AQVEA
Leistungen: Consulting, Audit, Entwicklung, PM, Schulung 
Schwerpunkt: Open Source / Kunden: Enterprise & KMU

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

Besten Dank für Eure
Aufmerksamkeit!

Webinale 14: Responsive Webdesign verkaufen / Pluswerk

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie Webinale 14: Responsive Webdesign verkaufen / Pluswerk

Mehr von die.agilen GmbH

Webinale 14: Responsive Webdesign verkaufen / Pluswerk