SlideShare ist ein Scribd-Unternehmen logo
1 von 68
Downloaden Sie, um offline zu lesen
Responsive Webdesign
verkaufen



Patrick Lobacher 

Management | Consulting | Training

19.03.2014

LOBACHER.
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
Patrick Lobacher

Management // Consulting // Training
• 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, Nerd
2010-2014
1996-2008
2008-2010
2014-…
?????
Veröffentlichungen:
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
Agenda
• Bullshit Bingo
• RWD is doch einfach!
• RWD Workflow
• RWD verkaufen
• Verträge
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Bullshit Bingo
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
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“
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
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
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
Um nun Daten für Eurer
eigenes Spiel zu finden,
googelt einfach nach: 

„web design trends 2014“
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
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
Infinite

Scrolling
Decoupled

CMS
Interactive

Infographics
Social Media

Badges
Black & White

Design
Simplified Design
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
http://www.designpromotivate.comhttp://katieunderhill.co.uk/
http://www.smashingmagazine.com
HOT TOPIC 2014!!
WEB DESIGN

TRENDS 2014
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
Responsive Web Design -
RWD
ist ein Trend!
Wirklich?
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
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.
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
„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
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
Aber das ist einfach zu erreichen:
iPad, iPhone, Nexus, Galaxy
#nicht
http://opensignal.com/reports/fragmentation.phphttp://www.timhordern.com/
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
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/
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
http://www.businessinsider.com/iwatch-concept-2013-8?op=1
Und was ist damit?
http://www.apple.com/ios/carplay/
http://www.winnipegfreepress.com/
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
RWD ist einfach!
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
Kunden

Wissen

(leider)
Zutaten
• Neu-Anordnen von Inhaltselemente
• Ein flexibles Grid-System
• Flexible Bilder
• Media queries
• Serverseitige Komponenten (RESS)
• „einige“ Prozesse
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Das ist alles!
Stimmt doch, oder?
http://www.slideshare.net/slideshow/embed_code/14528526
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Okay, okay - es ist nicht sooo
einfach...
Aber letzlich nur ein
technisches Problem!
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Sicher?
Responsive Design ist
eben KEIN Problem von
Design oder
Entwicklung!
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
RWD Workflow
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
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
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Was ist verkehrt mit
diesem Workflow?

Er hat doch seit Jahren
funktioniert?
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Web Design
benötigt ein radikales Umdenken!
Es ist eine allumfassende 

Denkweise!
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Und es betrifft *alle* Rollen:
CEO, Vertrieb, UX/UI, Designer,
Entwickler, Redakteure, Kunden, ...
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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?
GF / Freelancer / Entscheider
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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!
Designer
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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
Kunde
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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
Vertrieb
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
➀ 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
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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 Briefing (Look & Feel)
• Vertrag
Der RWD-Workflow - Schritt 1
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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
Der RWD-Workflow - Schritt 2
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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

Hauptnavigation
Logo Suche & Links
Überschrift
Inhalt
Footer
Irgendein Plugin
Der RWD-Workflow - Schritt 3
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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
Der RWD-Workflow - Schritt 4
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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!
Der RWD-Workflow - Schritt 5
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• Moodboard
• Illustration des visuellen
Stils (und der Stilrichtung)
• Look & feel der Website
inkl. der Elemente (wie
Navigation, Überschrift, ...)
• Freigabe durch den
Kunden!
http://weblog.404creative.com/
Der RWD-Workflow - Schritt 6
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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
• Freigabe durch den Kunden!
Der RWD-Workflow - Schritt 7
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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!
• Freigabe durch den Kunden!
Der RWD-Workflow - Schritt 8
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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!
• Freigabe durch den Kunden!
Der RWD-Workflow - Schritt 9
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• Produktion
• Integration in ein CMS (falls vorhanden
• Backend-Programmierung
• APIs
• ...
Der RWD-Workflow - Schritt 10
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
RWD verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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)
Consulting
Workshop
Design
Programmierung
Testing
RWD verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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
PSD
Full Layouts
RWD for Non-RWD Design
RWD AddOn
History Museum
Was sollte man nicht verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• (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?
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• Frage: Wieviel kostet RWD?
• Antwort: $13.47
• Nachtzulesen bei: 

http://bradfrostweb.com/blog/web/
how-much-does-a-responsive-web-
design-cost/
Wieviel kostet RWD?
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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?
FAQ
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Verträge
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• Zusammenfassung / Erwartungen
• Kunden-Daten
• Agentur- / Freelancer-Daten
• Projekt Ziel
• Deadlines
Verträge - 1
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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 - 2
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• Design
• Es wird ein „Look-and-Feel“ Design erstellt
• Es werden flexible 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 - 3
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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 - 4
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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 - 5
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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 - 6
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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 - 7
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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 - 8
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• Copyright
• Der Kunde garantiert, dass alle Assets (wie Texte, Bilder,
Grafiken,...) 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 - 9
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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 definieren)
• 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 - 10
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• Rechtliches
• Keine Programmier-Arbeit ist fehlerfrei. Wir versuchen Fehler (dies sind
Funktionen, die im Pflichtenheft 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
Verträge - 11
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Links
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• 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
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
• http://stuffandnonsense.co.uk/projects/contract-killer/
Links
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Zum Abschluß:
Responsive Web Design

benötigt Euer Umdenken!
Danke!
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Fragen?
Oder komplett verwirrt?
www.lobacher.de/mtc14
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
Kontakt
Klassisch:



Patrick Lobacher



Maxhofstr. 24

81475 München



Fon: +49 89 51 66 16 30



Email: patrick@lobacher.de

Web: www.lobacher.de
!


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

Projektanfragen ab einem Budget von ca. 25.000 EUR möglich
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Responsive Webdesign verkaufen LOBACHER.
Referenzen (net-o-graphic/typofaktum/typovision)
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014
Besten Dank für Eure
Aufmerksamkeit!
LOBACHER.

Weitere ähnliche Inhalte

Andere mochten auch

Catlike Catalogue 2016
Catlike Catalogue 2016Catlike Catalogue 2016
Catlike Catalogue 2016Catlike
 
Getting a blog up and running
Getting a blog up and runningGetting a blog up and running
Getting a blog up and runningCorrin Foster
 
CURSO DE TRAZABILIDAD ANIMAL APLICADA EN DURAZNO
CURSO DE TRAZABILIDAD ANIMAL APLICADA EN DURAZNOCURSO DE TRAZABILIDAD ANIMAL APLICADA EN DURAZNO
CURSO DE TRAZABILIDAD ANIMAL APLICADA EN DURAZNOHugo Estavillo
 
El Máster en Dirección de Operaciones y Logística Integral (MDOLI) 15/16 UPC ...
El Máster en Dirección de Operaciones y Logística Integral (MDOLI) 15/16 UPC ...El Máster en Dirección de Operaciones y Logística Integral (MDOLI) 15/16 UPC ...
El Máster en Dirección de Operaciones y Logística Integral (MDOLI) 15/16 UPC ...Euncet Business School
 
Fascioterapia_Carmelo González
Fascioterapia_Carmelo GonzálezFascioterapia_Carmelo González
Fascioterapia_Carmelo GonzálezOsteopatiaymas
 
Guías Google para periodistas - Herramientas geo para la comunicación - Maps ...
Guías Google para periodistas - Herramientas geo para la comunicación - Maps ...Guías Google para periodistas - Herramientas geo para la comunicación - Maps ...
Guías Google para periodistas - Herramientas geo para la comunicación - Maps ...►Mauricio Jaramillo Marín ►
 
Condiciones y cuenta inscripción
Condiciones y cuenta inscripciónCondiciones y cuenta inscripción
Condiciones y cuenta inscripciónAvacos Asociación
 
Fox Focus - Career Spotlight
Fox Focus - Career SpotlightFox Focus - Career Spotlight
Fox Focus - Career SpotlightTodd Camp
 
Presenting research trends for Psychology on ITA @ UTSA
Presenting research trends for Psychology on ITA @ UTSAPresenting research trends for Psychology on ITA @ UTSA
Presenting research trends for Psychology on ITA @ UTSAUT, San Antonio
 
Userfarm, Video Crowdsourcing
Userfarm, Video Crowdsourcing Userfarm, Video Crowdsourcing
Userfarm, Video Crowdsourcing Userfarm
 
[CCC-28c3] Post Memory Corruption Memory Analysis
[CCC-28c3] Post Memory Corruption Memory Analysis[CCC-28c3] Post Memory Corruption Memory Analysis
[CCC-28c3] Post Memory Corruption Memory AnalysisMoabi.com
 
Basic presentation skills
Basic presentation skillsBasic presentation skills
Basic presentation skillsNimra Gull
 
Animals Amb Perill D´Extincio
Animals Amb Perill D´ExtincioAnimals Amb Perill D´Extincio
Animals Amb Perill D´Extinciogemslila
 
Hoja de Vida ADP 2011
Hoja de Vida ADP 2011Hoja de Vida ADP 2011
Hoja de Vida ADP 2011MynorCuOxom
 

Andere mochten auch (20)

Catlike Catalogue 2016
Catlike Catalogue 2016Catlike Catalogue 2016
Catlike Catalogue 2016
 
Resume
Resume Resume
Resume
 
Getting a blog up and running
Getting a blog up and runningGetting a blog up and running
Getting a blog up and running
 
CURSO DE TRAZABILIDAD ANIMAL APLICADA EN DURAZNO
CURSO DE TRAZABILIDAD ANIMAL APLICADA EN DURAZNOCURSO DE TRAZABILIDAD ANIMAL APLICADA EN DURAZNO
CURSO DE TRAZABILIDAD ANIMAL APLICADA EN DURAZNO
 
El Máster en Dirección de Operaciones y Logística Integral (MDOLI) 15/16 UPC ...
El Máster en Dirección de Operaciones y Logística Integral (MDOLI) 15/16 UPC ...El Máster en Dirección de Operaciones y Logística Integral (MDOLI) 15/16 UPC ...
El Máster en Dirección de Operaciones y Logística Integral (MDOLI) 15/16 UPC ...
 
Fascioterapia_Carmelo González
Fascioterapia_Carmelo GonzálezFascioterapia_Carmelo González
Fascioterapia_Carmelo González
 
Guías Google para periodistas - Herramientas geo para la comunicación - Maps ...
Guías Google para periodistas - Herramientas geo para la comunicación - Maps ...Guías Google para periodistas - Herramientas geo para la comunicación - Maps ...
Guías Google para periodistas - Herramientas geo para la comunicación - Maps ...
 
Global Alliance Newsletter February 2010
Global Alliance Newsletter February 2010Global Alliance Newsletter February 2010
Global Alliance Newsletter February 2010
 
Retiring in israel
Retiring in israelRetiring in israel
Retiring in israel
 
Condiciones y cuenta inscripción
Condiciones y cuenta inscripciónCondiciones y cuenta inscripción
Condiciones y cuenta inscripción
 
Fox Focus - Career Spotlight
Fox Focus - Career SpotlightFox Focus - Career Spotlight
Fox Focus - Career Spotlight
 
Presenting research trends for Psychology on ITA @ UTSA
Presenting research trends for Psychology on ITA @ UTSAPresenting research trends for Psychology on ITA @ UTSA
Presenting research trends for Psychology on ITA @ UTSA
 
Userfarm, Video Crowdsourcing
Userfarm, Video Crowdsourcing Userfarm, Video Crowdsourcing
Userfarm, Video Crowdsourcing
 
Djembe
DjembeDjembe
Djembe
 
El Legado de Steve Jobs
El Legado de Steve JobsEl Legado de Steve Jobs
El Legado de Steve Jobs
 
[CCC-28c3] Post Memory Corruption Memory Analysis
[CCC-28c3] Post Memory Corruption Memory Analysis[CCC-28c3] Post Memory Corruption Memory Analysis
[CCC-28c3] Post Memory Corruption Memory Analysis
 
Basic presentation skills
Basic presentation skillsBasic presentation skills
Basic presentation skills
 
Animals Amb Perill D´Extincio
Animals Amb Perill D´ExtincioAnimals Amb Perill D´Extincio
Animals Amb Perill D´Extincio
 
Hoja de Vida ADP 2011
Hoja de Vida ADP 2011Hoja de Vida ADP 2011
Hoja de Vida ADP 2011
 
El teatro argentino
El teatro argentinoEl teatro argentino
El teatro argentino
 

Ähnlich wie Responsive Webdesign verkaufen - MobileTech Conference 2014

Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a NutshellDeveloper Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a Nutshelldie.agilen GmbH
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhonedie.agilen GmbH
 
revision6 GmbH Internetagentur
revision6 GmbH Internetagenturrevision6 GmbH Internetagentur
revision6 GmbH Internetagenturrevision6 GmbH
 
TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014die.agilen GmbH
 
Domain-driven design - eine Einführung
Domain-driven design - eine EinführungDomain-driven design - eine Einführung
Domain-driven design - eine Einführungdie.agilen GmbH
 
Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015die.agilen GmbH
 
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016André Scharf
 
Makeing of Schwabenbauer - virtuelles Hotel
Makeing of Schwabenbauer - virtuelles HotelMakeing of Schwabenbauer - virtuelles Hotel
Makeing of Schwabenbauer - virtuelles HotelAngelika Röck
 
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige KundenbindungFMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige KundenbindungVerein FM Konferenz
 
UX Congress 2016: Agile als Agentur – Ideen, Fails und Learnings
UX Congress 2016: Agile als Agentur – Ideen, Fails und LearningsUX Congress 2016: Agile als Agentur – Ideen, Fails und Learnings
UX Congress 2016: Agile als Agentur – Ideen, Fails und LearningsMartin Snajdr
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016André Scharf
 
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers OPITZ CONSULTING Deutschland
 
Modern HTML5 for JSF Developers: BootsFaces and AngularFaces
Modern HTML5 for JSF Developers: BootsFaces and AngularFacesModern HTML5 for JSF Developers: BootsFaces and AngularFaces
Modern HTML5 for JSF Developers: BootsFaces and AngularFacesRiccardo Massera
 
DDD - Domain Driven Design - TYPO3camp Stuttgart 2011
DDD - Domain Driven Design - TYPO3camp Stuttgart 2011DDD - Domain Driven Design - TYPO3camp Stuttgart 2011
DDD - Domain Driven Design - TYPO3camp Stuttgart 2011die.agilen GmbH
 
SEA Manager @projektwerk.com in Hamburg gesucht
SEA Manager @projektwerk.com in Hamburg gesuchtSEA Manager @projektwerk.com in Hamburg gesucht
SEA Manager @projektwerk.com in Hamburg gesuchtProjektwerk Projektbörse
 
SEO und Linkbuilding im Jahr 2014
SEO und Linkbuilding im Jahr 2014SEO und Linkbuilding im Jahr 2014
SEO und Linkbuilding im Jahr 2014Seokratie
 
Mobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen WebMobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen WebMarkus Greve
 
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschautTechnologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschautRalf Schwoebel
 

Ähnlich wie Responsive Webdesign verkaufen - MobileTech Conference 2014 (20)

Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a NutshellDeveloper Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
 
revision6 GmbH Internetagentur
revision6 GmbH Internetagenturrevision6 GmbH Internetagentur
revision6 GmbH Internetagentur
 
TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014
 
Domain-driven design - eine Einführung
Domain-driven design - eine EinführungDomain-driven design - eine Einführung
Domain-driven design - eine Einführung
 
Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015Neos CMS - Das CMS der nächsten Generation - IPC 2015
Neos CMS - Das CMS der nächsten Generation - IPC 2015
 
Tools im Web 2.0 - Ein kleiner Wekzeugführer für den Mittelstand
Tools im Web 2.0 - Ein kleiner Wekzeugführer für den MittelstandTools im Web 2.0 - Ein kleiner Wekzeugführer für den Mittelstand
Tools im Web 2.0 - Ein kleiner Wekzeugführer für den Mittelstand
 
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
Warum SEO (auch) Deine Aufgabe ist - WebTechCon 2016
 
Makeing of Schwabenbauer - virtuelles Hotel
Makeing of Schwabenbauer - virtuelles HotelMakeing of Schwabenbauer - virtuelles Hotel
Makeing of Schwabenbauer - virtuelles Hotel
 
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige KundenbindungFMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
 
UX Congress 2016: Agile als Agentur – Ideen, Fails und Learnings
UX Congress 2016: Agile als Agentur – Ideen, Fails und LearningsUX Congress 2016: Agile als Agentur – Ideen, Fails und Learnings
UX Congress 2016: Agile als Agentur – Ideen, Fails und Learnings
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers BootsFaces and AngularFaces - Modern HTML5 for JSF developers
BootsFaces and AngularFaces - Modern HTML5 for JSF developers
 
Modern HTML5 for JSF Developers: BootsFaces and AngularFaces
Modern HTML5 for JSF Developers: BootsFaces and AngularFacesModern HTML5 for JSF Developers: BootsFaces and AngularFaces
Modern HTML5 for JSF Developers: BootsFaces and AngularFaces
 
Startup Marketing fürs kleine Budget
Startup Marketing fürs kleine Budget Startup Marketing fürs kleine Budget
Startup Marketing fürs kleine Budget
 
DDD - Domain Driven Design - TYPO3camp Stuttgart 2011
DDD - Domain Driven Design - TYPO3camp Stuttgart 2011DDD - Domain Driven Design - TYPO3camp Stuttgart 2011
DDD - Domain Driven Design - TYPO3camp Stuttgart 2011
 
SEA Manager @projektwerk.com in Hamburg gesucht
SEA Manager @projektwerk.com in Hamburg gesuchtSEA Manager @projektwerk.com in Hamburg gesucht
SEA Manager @projektwerk.com in Hamburg gesucht
 
SEO und Linkbuilding im Jahr 2014
SEO und Linkbuilding im Jahr 2014SEO und Linkbuilding im Jahr 2014
SEO und Linkbuilding im Jahr 2014
 
Mobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen WebMobility – Do's und Don't im mobilen Web
Mobility – Do's und Don't im mobilen Web
 
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschautTechnologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
 

Mehr von die.agilen GmbH

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...die.agilen GmbH
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017die.agilen GmbH
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...die.agilen GmbH
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...die.agilen GmbH
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRdie.agilen GmbH
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...die.agilen GmbH
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlindie.agilen GmbH
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationdie.agilen GmbH
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...die.agilen GmbH
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...die.agilen GmbH
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerkdie.agilen GmbH
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerkdie.agilen GmbH
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...die.agilen GmbH
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...die.agilen GmbH
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkdie.agilen GmbH
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...die.agilen GmbH
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkdie.agilen GmbH
 

Mehr von die.agilen GmbH (20)

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 

Responsive Webdesign verkaufen - MobileTech Conference 2014

  • 1. Responsive Webdesign verkaufen
 
 Patrick Lobacher 
 Management | Consulting | Training
 19.03.2014
 LOBACHER.
  • 2. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. Patrick Lobacher
 Management // Consulting // Training • 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, Nerd 2010-2014 1996-2008 2008-2010 2014-… ????? Veröffentlichungen:
  • 3. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. Agenda • Bullshit Bingo • RWD is doch einfach! • RWD Workflow • RWD verkaufen • Verträge
  • 4. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Bullshit Bingo
  • 5. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. 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“
  • 6. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. 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
  • 7. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. Um nun Daten für Eurer eigenes Spiel zu finden, googelt einfach nach: 
 „web design trends 2014“
  • 8. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. 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 Infinite
 Scrolling Decoupled
 CMS Interactive
 Infographics Social Media
 Badges Black & White
 Design Simplified Design
  • 9. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. http://www.designpromotivate.comhttp://katieunderhill.co.uk/ http://www.smashingmagazine.com HOT TOPIC 2014!! WEB DESIGN
 TRENDS 2014
  • 10. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. Responsive Web Design - RWD ist ein Trend! Wirklich?
  • 11. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. 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.
  • 12. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. „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
  • 13. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. Aber das ist einfach zu erreichen: iPad, iPhone, Nexus, Galaxy #nicht http://opensignal.com/reports/fragmentation.phphttp://www.timhordern.com/
  • 14. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. 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/
  • 15. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. http://www.businessinsider.com/iwatch-concept-2013-8?op=1 Und was ist damit? http://www.apple.com/ios/carplay/ http://www.winnipegfreepress.com/
  • 16. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 RWD ist einfach!
  • 17. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. Kunden
 Wissen
 (leider) Zutaten • Neu-Anordnen von Inhaltselemente • Ein flexibles Grid-System • Flexible Bilder • Media queries • Serverseitige Komponenten (RESS) • „einige“ Prozesse
  • 18. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Das ist alles! Stimmt doch, oder? http://www.slideshare.net/slideshow/embed_code/14528526
  • 19. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Okay, okay - es ist nicht sooo einfach... Aber letzlich nur ein technisches Problem!
  • 20. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Sicher? Responsive Design ist eben KEIN Problem von Design oder Entwicklung!
  • 21. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 RWD Workflow
  • 22. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. 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
  • 23. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Was ist verkehrt mit diesem Workflow?
 Er hat doch seit Jahren funktioniert?
  • 24. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Web Design benötigt ein radikales Umdenken! Es ist eine allumfassende 
 Denkweise!
  • 25. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Und es betrifft *alle* Rollen: CEO, Vertrieb, UX/UI, Designer, Entwickler, Redakteure, Kunden, ...
  • 26. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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? GF / Freelancer / Entscheider
  • 27. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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! Designer
  • 28. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 Kunde
  • 29. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 Vertrieb
  • 30. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. ➀ 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
  • 31. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 Briefing (Look & Feel) • Vertrag Der RWD-Workflow - Schritt 1
  • 32. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 Der RWD-Workflow - Schritt 2
  • 33. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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
 Hauptnavigation Logo Suche & Links Überschrift Inhalt Footer Irgendein Plugin Der RWD-Workflow - Schritt 3
  • 34. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 Der RWD-Workflow - Schritt 4
  • 35. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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! Der RWD-Workflow - Schritt 5
  • 36. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • Moodboard • Illustration des visuellen Stils (und der Stilrichtung) • Look & feel der Website inkl. der Elemente (wie Navigation, Überschrift, ...) • Freigabe durch den Kunden! http://weblog.404creative.com/ Der RWD-Workflow - Schritt 6
  • 37. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 • Freigabe durch den Kunden! Der RWD-Workflow - Schritt 7
  • 38. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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! • Freigabe durch den Kunden! Der RWD-Workflow - Schritt 8
  • 39. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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! • Freigabe durch den Kunden! Der RWD-Workflow - Schritt 9
  • 40. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • Produktion • Integration in ein CMS (falls vorhanden • Backend-Programmierung • APIs • ... Der RWD-Workflow - Schritt 10
  • 41. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 RWD verkaufen
  • 42. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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) Consulting Workshop Design Programmierung Testing RWD verkaufen
  • 43. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 PSD Full Layouts RWD for Non-RWD Design RWD AddOn History Museum Was sollte man nicht verkaufen
  • 44. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • (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?
  • 45. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • Frage: Wieviel kostet RWD? • Antwort: $13.47 • Nachtzulesen bei: 
 http://bradfrostweb.com/blog/web/ how-much-does-a-responsive-web- design-cost/ Wieviel kostet RWD?
  • 46. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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
  • 47. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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? FAQ
  • 48. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Verträge
  • 49. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • Zusammenfassung / Erwartungen • Kunden-Daten • Agentur- / Freelancer-Daten • Projekt Ziel • Deadlines Verträge - 1
  • 50. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 - 2
  • 51. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • Design • Es wird ein „Look-and-Feel“ Design erstellt • Es werden flexible 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 - 3
  • 52. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 - 4
  • 53. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 - 5
  • 54. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 - 6
  • 55. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 - 7
  • 56. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 - 8
  • 57. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • Copyright • Der Kunde garantiert, dass alle Assets (wie Texte, Bilder, Grafiken,...) 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 - 9
  • 58. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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 definieren) • 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 - 10
  • 59. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • Rechtliches • Keine Programmier-Arbeit ist fehlerfrei. Wir versuchen Fehler (dies sind Funktionen, die im Pflichtenheft 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 Verträge - 11
  • 60. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Links
  • 61. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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
  • 62. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • 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
  • 63. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. • http://stuffandnonsense.co.uk/projects/contract-killer/ Links
  • 64. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Zum Abschluß: Responsive Web Design
 benötigt Euer Umdenken! Danke!
  • 65. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Fragen? Oder komplett verwirrt? www.lobacher.de/mtc14
  • 66. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. Kontakt Klassisch:
 
 Patrick Lobacher
 
 Maxhofstr. 24
 81475 München
 
 Fon: +49 89 51 66 16 30
 
 Email: patrick@lobacher.de
 Web: www.lobacher.de ! 
 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/profile/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
 Projektanfragen ab einem Budget von ca. 25.000 EUR möglich
  • 67. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Responsive Webdesign verkaufen LOBACHER. Referenzen (net-o-graphic/typofaktum/typovision)
  • 68. (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.lobacher.de | 19.03.2014 Besten Dank für Eure Aufmerksamkeit! LOBACHER.