Responsive Webdesign verkaufen

28.11.2013

Responsive Webdesign
verkaufen

Patrick Lobacher
CEO typovision GmbH

Responsive Webdesign verkaufen

•
•
•
•
•

Agenda
Bullshit Bingo
RWD is doch einfach!
RWD Workﬂow
RWD verkaufen
Verträge

(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013

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

Prozess
Fokussieren

Am Ende des
Tages...

Kernkompetenz

24 / 7
Mehrwert


Die Wahrheit
ist...

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

Parallax

Scrolling
Fullscreen

Typography
Interactive

Infographics

Flat Design
Off-Canvas
QR Codes
Social Media
Badges

Single Page

Neon

Web Design
CSS3

Full-width

Animations

Background Images

Inﬁnite

Decoupled

Black & White

Simpliﬁed

Scrolling
Design


CMS

Design


HOT TOPIC 2014!!

http://katieunderhill.co.uk/

http://www.designpromotivate.com

WEB DESIGN
TRENDS 2014
http://www.smashingmagazine.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.



„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://www.timhordern.com/

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/raneko/3045816114/

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


RWD ist einfach!



Zutaten
•
•
•
•
•
•

Neu-Anordnen von Inhaltselemente
Ein ﬂexibles Grid-System
Flexible Bilder
Media queries
Serverseitige Komponetnte (RESS)
„einige“ Prozesse


Kunden
Wissen
(leider)


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

Das ist alles!
Stimmt doch, oder?

Okay, okay - es ist nicht sooo
einfach...
Aber letzlich nur ein technisches
Problem!

Sicher?
Responsive Design ist
eben KEIN Problem von
Design oder Entwicklung!

RWD Workﬂow



Klassischer Workflow
•
•
•
•
•
•
•
•

Lastenheft
Pflichtenheft
Design-Prozess => PSD
PSD => Design Freigabe
PSD => Implementierung
Verifizierung / Testing
PSD => Endabnahme

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

Fertig :-)


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 viele Rollen:
CEO,Vertrieb, UX/UI, Designer,
Entwickler, Redakteure, Kunden, ...


GF / Freelancer / Entscheider

•

Existiert die Vision, jedes Gerät jetzt und in der Zukunft

•

Besteht der Wille, in die Fortbildung des gesamten

•

Sind alle bereit, zu akzeptieren, dass sich festgefahrene

zu unterstützen?
Teams zu investieren?
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 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

•
•
•

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



Der RWD-Workﬂow
Geklärte Anforderungen (Stories/LH/FH)
➀ Entscheidungen

➅ Moodboard / Style Tile

➁ Content Strategy

➆ Linear Design

➂ Content Wireframes

➇ Prototyping

➃ Content Erstellen

➈ Geräte-Testing

➄ Content-Testing

➉ Produktion

Weitere Programmierung & Finalisierung



Der RWD-Workﬂow - Schritt 1

•

Entscheidungen

•
•
•
•
•
•
•

Stakeholder Matrix (Wer entscheidet was?)
Projekt Ziel
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

•

Dies führt zu einem „Content

Bewerten des Contents
Inventory“ (Hauptnavigation, Sekundärnavigation,
Logo, Links, Überschriften, Inhaltselemente, ...)

•

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




•

Content Wireframes

•
•
•
•
•
•
•

Hauptnavigation
Logo

Welcher Inhalt ist wo
Nur Rechtecke

Suche & Links

Irgendein Plugin
Überschrift

Kein Design!
Mobile ﬁrst!

Inhalt

Für jeden Major-Breakpoint
Für jeden Seitentyp
Für jeden Inhaltstyp


Footer



•

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 TextDummy 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!




•

Moodboard

Illustration des visuellen

•

Look & feel der Website

Stils (und der Stilrichtung)
inkl. der Elemente (wie
Navigation, Überschrift, ...)

•

Freigabe durch den
Kunden!


http://weblog.404creative.com/

•



•

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

•

Dies führt zum ﬁnalen Layout - daher muss

•
•

HTML5/CSS3/JavaScript/...
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 Teste gibt es Tools!




•

Produktion

•
•
•
•

Integration in ein CMS (falls vorhanden
Backend-Programmierung
APIs
...


RWD verkaufen



RWD verkaufen
•
•
•
•
•

Consulting
(Basis RWD Wissen für den Kunden)

Consulting

Workshops
(Anforderungen, Entscheidungen, Inhalte,
Wireframes, Clickdummy, Prozesse, ...)
Design
(Moodboard, Style Tile, Linear Design,
Element Design, Atomic Design, ...)

Workshop
Design
Programmierung

Produktion / Programmierung
(Content Dummy, Clickdummy, ...)
Testing
(Content testing, device testing)


Testing


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 RWDKenntnisse besitzt

PSD
Full Layouts
RWD AddOn
RWD for Non-RWD Design
History Museum

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
Nachtzulesen bei:
http://bradfrostweb.com/blog/web/
how-much-does-a-responsive-webdesign-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



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



Verträge - 1

•

Zusammenfassung / Erwartungen

•
•
•
•

Kunden-Daten
Agentur- / Freelancer-Daten
Projekt Ziel
Deadlines



Verträge - 2

•

Vereinbahrungen

•

Der Kunden muss die Arbeiten überprüfen, Feedback

•

Deadlines gelten für beide Seiten - Agentur/

liefern und die Freigaben zügig durchführen
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

•

Die Agentur ist nicht verantwortlich, Bilder

erstellen oder einzugeben (HTML, CMS, ...)
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

•
•
•

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

•

10% bei Abnahme

deﬁnieren)

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



Links

•

http://www.creativebloq.com/responsive-web-design/
top-responsive-web-design-problems-and-how-avoidthem-8122790

•

http://weblog.404creative.com/2007/02/14/websitemood-boards-a-successful-precursor-to-visualprototyping/

•
•

http://styletil.es/
http://samanthatoy.com/washington-examiner/



Links

•
•
•
•

http://responsivedesignworkﬂow.com/
http://de.slideshare.net/stephenhay/mobilism2012
http://www.smashingmagazine.com/2012/09/28/betterclient-participation-in-responsive-design-projects/
http://dmduplessis.com/responsive-design-and-the-artof-being-busy/



Links

•

http://stuffandnonsense.co.uk/projects/contract-killer/


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


Patrick Lobacher

Geschäftsfüher typovision GmbH

•
•
•
•
•
•
•
•
•

43 Jahre, glücklich verheiratet, wohnhaft in München
Autor von 9 Fachbüchern und > 40 Fachartikeln zum Thema TYPO3 und
Webentwicklung
Selbständig im Bereich Webentwicklung seit 1994
Certiﬁed TYPO3 Integrator seit 2009
Mitglied bis 2012 in den TYPO3 Core-Teams:
Certiﬁcation, Extbase und Content Editorial
Mitglied bis 2012 im Expert Advisory Board der TYPO3 Association
(EAB)
Organisator des TYPO3camp Munich 2008-2013 und der T3DD12
Speaker auf nationalen und internationalen Kongressen
Dozent für führende Schulungsinstitute und die MVHS

Veröffentlichungen:



typovision GmbH
•
•
•
•
•
•
•
•

Münchner Fullservice-Agentur für digitale Kommunikation
>40 feste Mitarbeiter vor Ort (+ 15 aus festem Freelancer Pool)
Geschäftsführer: Sebastian Böttger, Patrick Lobacher
Hochspezialisiert auf TYPO3 seit 10 Jahren (Extbase/Fluid seit 2009)
Platinum TYPO3 Association Member seit 3 Jahren
Spezialisiert auf Enterprise Search (Solr, Elastic Search) seit 3 Jahren
Fokus: Premium Webtechnologie und CMS im Open Source Bereich
2. Platz im Deloitte. Fast 50 „Rising Star“ Award 2013

•

Agenturpräsentation unter: www.typovision.de/dieagentur

•

Über 600 Projekte jeglicher Größenordnung

•

Vision:
Wir sind der Partner des Kunden in allen Bereichen seiner digitalen
Kommunikation - von der ersten Vision bis hin zur erfolgreichen Umsetzung
und darüber hinaus.



Kontakt
Klassisch:
typovision GmbH
Elsenheimerstr. 7
80687 München
Fon:
Fax:

+49 89 45 20 59 3 - 0
+49 89 45 20 59 3 - 29

Email:
Web:

info@typovision.de
http://www.typovision.de

Twitter:
www.twitter.com/typovision
www.twitter.com/PatrickLobacher
www.twitter.com/crosscontent

XING:
www.xing.com/companies/typovisiongmbh
www.xing.com/proﬁle/Patrick_Lobacher
www.xing.com/proﬁle/Sebastian_Boettger2

Facebook:
www.facebook.com/typovision

LinkedIn
www.linkedin.com/company/2038844

Blog:
typoblog.de

Slideshare:
www.slideshare.net/plobacher
www.slideshare.net/typovision

Schulungen:
academy.typovision.de


Amazon:
www.amazon.de/Patrick-Lobacher/e/

Vielen Dank!

Responsive Webdesign verkaufen

Weitere ähnliche Inhalte

Andere mochten auch

Mehr von die.agilen GmbH

Kürzlich hochgeladen

Responsive Webdesign verkaufen