28.11.2013

Responsive Webdesign
verkaufen

Patrick Lobacher
CEO typovision GmbH
Responsive Webdesign verkaufen

•
•
•
•
•

Agenda
Bullshit Bingo
RWD is doch einfach!
RWD Workflow
RWD verkaufen
Verträge

...
Bullshit Bingo

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

Kennt Ihr das Spiel, mit dem man
langweilige Meetings überlebt?
Regel: Sobald einer der Be...
Responsive Webdesign verkaufen

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

Proakt...
Responsive Webdesign verkaufen

Um nun Daten für Eurer
eigenes Spiel zu finden,
googelt einfach nach:
„web design trends 20...
Responsive Webdesign verkaufen

2014 - Web Design - Bullshit Bingo
(Schrei: „BULLSHIT BINGO“ wenn eine Reihe oder Spalte k...
Responsive Webdesign verkaufen

HOT TOPIC 2014!!

http://katieunderhill.co.uk/

http://www.designpromotivate.com

WEB DESI...
Responsive Webdesign verkaufen

Responsive Web Design RWD
ist ein Trend?
Wirklich?
(c) 2013 - typovision GmbH | Responsive...
Responsive Webdesign verkaufen

Die Wikipedia sagt dazu:
Als Fad ([fæd], engl. für „Fimmel“, „Masche“, „Modetorheit“; auch...
Responsive Webdesign verkaufen

„RWD ist kein Trend, sondern die
fundamentale Basis von ernsthaften
Web Design und eine No...
Responsive Webdesign verkaufen

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

http://www.timhorde...
Responsive Webdesign verkaufen

Und was ist damit?

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

http://www.flickr.com/p...
RWD ist einfach!

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

Zutaten
•
•
•
•
•
•

Neu-Anordnen von Inhaltselemente
Ein flexibles Grid-System
Flexible Bi...
(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013

http://ww...
Okay, okay - es ist nicht sooo
einfach...
Aber letzlich nur ein technisches
Problem!
(c) 2013 - typovision GmbH | Responsi...
Sicher?
Responsive Design ist
eben KEIN Problem von
Design oder Entwicklung!
(c) 2013 - typovision GmbH | Responsive Webde...
RWD Workflow

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

Klassischer Workflow
•
•
•
•
•
•
•
•

Lastenheft
Pflichtenheft
Design-Prozess => PSD
PSD => ...
Was ist verkehrt mit diesem
Workflow?
Er hat doch seit Jahren
funktioniert?
(c) 2013 - typovision GmbH | Responsive Webdesi...
Responsive Web Design
benötigt ein radikales Umdenken!
Es ist eine allumfassende
Denkweise!
(c) 2013 - typovision GmbH | R...
Und es betrifft viele Rollen:
CEO,Vertrieb, UX/UI, Designer,
Entwickler, Redakteure, Kunden, ...
(c) 2013 - typovision Gmb...
Responsive Webdesign verkaufen

GF / Freelancer / Entscheider

•

Existiert die Vision, jedes Gerät jetzt und in der Zukun...
Responsive Webdesign verkaufen

Designer

•

Die Tools werden sich verändern!
(Photoshop ist nicht tot - aber der Designer...
Responsive Webdesign verkaufen

Kunde

•

Wir beide (Kunde und Agentur) erschaffen „Business
Value“ (geschäftlicher Wert) ...
Responsive Webdesign verkaufen

Vertrieb

•
•
•

Du brauchst neue Verträge
Verkaufe RWD Consulting - da es essentiell notw...
Responsive Webdesign verkaufen

Der RWD-Workflow
Geklärte Anforderungen (Stories/LH/FH)
➀ Entscheidungen

➅ Moodboard / Sty...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 1

•

Entscheidungen

•
•
•
•
•
•
•

Stakeholder Matrix (Wer ent...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 2

•

Content Strategy (Consulting)

•

Erster Schritt ist das S...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 3

•

Content Wireframes

•
•
•
•
•
•
•

Hauptnavigation
Logo

W...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 4

•

Content erstellen

•

Identifizierung der verschiedenen
Inh...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 5

•

Testen des Contents

•
•
•
•

Content Dummy Test
in allen ...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 6

•

Moodboard

Illustration des visuellen

•

Look & feel der ...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 7

•

Linear Design

•
•
•
•

Anreichern des Content Dummys mit
...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 8

•

Prototype (Design im Browser)

•

Produktion eines Clickdu...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 9

•

Device testing

•

Test muss auf realen Testgeräten
durchg...
Responsive Webdesign verkaufen

Der RWD-Workflow - Schritt 10

•

Produktion

•
•
•
•

Integration in ein CMS (falls vorhan...
RWD verkaufen

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

RWD verkaufen
•
•
•
•
•

Consulting
(Basis RWD Wissen für den Kunden)

Consulting

Worksho...
Responsive Webdesign verkaufen

Was sollte man nicht verkaufen
•
•
•
•
•

PSD
Statische Dokumente können NICHT verwendet
w...
Responsive Webdesign verkaufen

Wieviel kostet RWD?

•

•

(Sorry) Unsinnige Fragen:

•
•

Wieviel kostet RWD?
Wieviel kos...
Responsive Webdesign verkaufen

Wieviel kostet RWD?

•

Frage: Wieviel kostet RWD?

•
•

Antwort: $13.47
Nachtzulesen bei:...
Responsive Webdesign verkaufen

FAQ
•
•

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

•

NEIN - entweder vo...
Responsive Webdesign verkaufen

FAQ

•
•
•

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

•

Dann haben wir kei...
Verträge

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

Verträge - 1

•

Zusammenfassung / Erwartungen

•
•
•
•

Kunden-Daten
Agentur- / Freelance...
Responsive Webdesign verkaufen

Verträge - 2

•

Vereinbahrungen

•

Der Kunden muss die Arbeiten überprüfen, Feedback

•
...
Responsive Webdesign verkaufen

Verträge - 3
• Design
• Es wird ein „Look-and-Feel“ Design erstellt
• Es werden flexible La...
Responsive Webdesign verkaufen

Verträge - 4

•

Inhalt & Bilder

•

Die Agentur ist nicht verantwortlich, Inhalt zu

•

D...
Responsive Webdesign verkaufen

Verträge - 5

•

Browser Testing im Allgemeinen

•

Browser Testing bedeutet nicht mehr, d...
Responsive Webdesign verkaufen

Verträge - 6

•

Desktop Browser Testing

•
•

Wir testen mit den folgenden Browsern (und ...
Responsive Webdesign verkaufen

Verträge - 7

•

Mobile Browser Testing

•

•

Wir testen mit den folgenden Browsern (und ...
Responsive Webdesign verkaufen

Verträge - 8
•

Changes / Feature Requests

•
•
•

Da der vorliegende Vertrag ein Festprei...
Responsive Webdesign verkaufen

Verträge - 9
•

Copyright

•

Der Kunde garantiert, dass alle Assets (wie Texte, Bilder,

...
Responsive Webdesign verkaufen

Verträge - 10
• Zahlunsplan
• Wir vereinbaren den folgenden Zahlungsplan:
• 50% vor Start ...
Responsive Webdesign verkaufen

Verträge - 11
•

Rechtliches

•

Keine Programmier-Arbeit ist fehlerfrei. Wir versuchen Fe...
Links

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

Links

•

http://www.creativebloq.com/responsive-web-design/
top-responsive-web-design-pro...
Responsive Webdesign verkaufen

Links

•
•
•
•

http://responsivedesignworkflow.com/
http://de.slideshare.net/stephenhay/mo...
Responsive Webdesign verkaufen

Links

•

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

(c) 2013 - typovision G...
Zum Abschluß:
Responsive Web Design
benötigt ein Umdenken!
Danke!
(c) 2013 - typovision GmbH | Responsive Webdesign verkau...
Responsive Webdesign verkaufen

Patrick Lobacher

Geschäftsfüher typovision GmbH

•
•
•
•
•
•
•
•
•

43 Jahre, glücklich v...
Responsive Webdesign verkaufen

typovision GmbH
•
•
•
•
•
•
•
•

Münchner Fullservice-Agentur für digitale Kommunikation
>...
Responsive Webdesign verkaufen

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

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

+49 89 45 20...
Vielen Dank!
(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.20...
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign verkaufen

4.372 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
1 Kommentar
11 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
4.372
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
29
Aktionen
Geteilt
0
Downloads
80
Kommentare
1
Gefällt mir
11
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign verkaufen

  1. 1. 28.11.2013 Responsive Webdesign verkaufen Patrick Lobacher CEO typovision GmbH
  2. 2. Responsive Webdesign verkaufen • • • • • Agenda Bullshit Bingo RWD is doch einfach! RWD Workflow RWD verkaufen Verträge (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  3. 3. Bullshit Bingo (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  4. 4. Responsive Webdesign verkaufen 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) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  5. 5. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013 Die Wahrheit ist... Benchmark
  6. 6. Responsive Webdesign verkaufen Um nun Daten für Eurer eigenes Spiel zu finden, googelt einfach nach: „web design trends 2014“ (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  7. 7. Responsive Webdesign verkaufen 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 Infinite Decoupled Black & White Simplified Scrolling Design (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013 CMS Design
  8. 8. Responsive Webdesign verkaufen HOT TOPIC 2014!! http://katieunderhill.co.uk/ http://www.designpromotivate.com WEB DESIGN TRENDS 2014 http://www.smashingmagazine.com (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  9. 9. Responsive Webdesign verkaufen Responsive Web Design RWD ist ein Trend? Wirklich? (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  10. 10. Responsive Webdesign verkaufen 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) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  11. 11. Responsive Webdesign verkaufen „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) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  12. 12. Responsive Webdesign verkaufen Aber das ist einfach zu erreichen: iPad, iPhone, Nexus, Galaxy #nicht http://www.timhordern.com/ http://opensignal.com/reports/fragmentation.php (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  13. 13. Responsive Webdesign verkaufen 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/ (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  14. 14. RWD ist einfach! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  15. 15. Responsive Webdesign verkaufen Zutaten • • • • • • Neu-Anordnen von Inhaltselemente Ein flexibles Grid-System Flexible Bilder Media queries Serverseitige Komponetnte (RESS) „einige“ Prozesse (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013 Kunden Wissen (leider)
  16. 16. (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013 http://www.slideshare.net/slideshow/embed_code/14528526 Das ist alles! Stimmt doch, oder?
  17. 17. Okay, okay - es ist nicht sooo einfach... Aber letzlich nur ein technisches Problem! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  18. 18. Sicher? Responsive Design ist eben KEIN Problem von Design oder Entwicklung! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  19. 19. RWD Workflow (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  20. 20. Responsive Webdesign verkaufen 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 :-) (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  21. 21. Was ist verkehrt mit diesem Workflow? Er hat doch seit Jahren funktioniert? (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  22. 22. Responsive Web Design benötigt ein radikales Umdenken! Es ist eine allumfassende Denkweise! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  23. 23. Und es betrifft viele Rollen: CEO,Vertrieb, UX/UI, Designer, Entwickler, Redakteure, Kunden, ... (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  24. 24. Responsive Webdesign verkaufen 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? (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  25. 25. Responsive Webdesign verkaufen 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! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  26. 26. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  27. 27. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  28. 28. Responsive Webdesign verkaufen Der RWD-Workflow 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  29. 29. Responsive Webdesign verkaufen Der RWD-Workflow - 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 Briefing (Look & Feel) Vertrag (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  30. 30. Responsive Webdesign verkaufen Der RWD-Workflow - Schritt 2 • 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  31. 31. Responsive Webdesign verkaufen Der RWD-Workflow - Schritt 3 • Content Wireframes • • • • • • • Hauptnavigation Logo Welcher Inhalt ist wo Nur Rechtecke Suche & Links Irgendein Plugin Überschrift Kein Design! Mobile first! Inhalt Für jeden Major-Breakpoint Für jeden Seitentyp Für jeden Inhaltstyp (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013 Footer
  32. 32. Responsive Webdesign verkaufen Der RWD-Workflow - Schritt 4 • 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 TextDummy zu erhalten (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  33. 33. Responsive Webdesign verkaufen Der RWD-Workflow - Schritt 5 • 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! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  34. 34. Responsive Webdesign verkaufen Der RWD-Workflow - Schritt 6 • Moodboard Illustration des visuellen • Look & feel der Website Stils (und der Stilrichtung) inkl. der Elemente (wie Navigation, Überschrift, ...) • Freigabe durch den Kunden! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013 http://weblog.404creative.com/ •
  35. 35. Responsive Webdesign verkaufen Der RWD-Workflow - Schritt 7 • 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! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  36. 36. Responsive Webdesign verkaufen Der RWD-Workflow - Schritt 8 • Prototype (Design im Browser) • Produktion eines Clickdummys mit • Dies führt zum finalen Layout - daher muss • • HTML5/CSS3/JavaScript/... hier auf die Positionierung geachtet werden Interaktiver Prozess mit dem Kunden! Freigabe durch den Kunden! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  37. 37. Responsive Webdesign verkaufen Der RWD-Workflow - Schritt 9 • 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! Freigabe durch den Kunden! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  38. 38. Responsive Webdesign verkaufen Der RWD-Workflow - Schritt 10 • Produktion • • • • Integration in ein CMS (falls vorhanden Backend-Programmierung APIs ... (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  39. 39. RWD verkaufen (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  40. 40. Responsive Webdesign 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) (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013 Testing
  41. 41. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  42. 42. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  43. 43. Responsive Webdesign verkaufen Wieviel kostet RWD? • Frage: Wieviel kostet RWD? • • Antwort: $13.47 Nachtzulesen bei: http://bradfrostweb.com/blog/web/ how-much-does-a-responsive-webdesign-cost/ (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  44. 44. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  45. 45. Responsive Webdesign verkaufen 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? (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  46. 46. Verträge (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  47. 47. Responsive Webdesign verkaufen Verträge - 1 • Zusammenfassung / Erwartungen • • • • Kunden-Daten Agentur- / Freelancer-Daten Projekt Ziel Deadlines (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  48. 48. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  49. 49. Responsive Webdesign verkaufen Verträge - 3 • 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, ...) (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  50. 50. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  51. 51. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  52. 52. Responsive Webdesign verkaufen 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  53. 53. Responsive Webdesign verkaufen 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) (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  54. 54. Responsive Webdesign verkaufen 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. (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  55. 55. Responsive Webdesign verkaufen Verträge - 9 • 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. (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  56. 56. Responsive Webdesign verkaufen 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 definieren) 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  57. 57. Responsive Webdesign verkaufen Verträge - 11 • 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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  58. 58. Links (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  59. 59. Responsive Webdesign verkaufen 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/ (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  60. 60. Responsive Webdesign verkaufen Links • • • • http://responsivedesignworkflow.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/ (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  61. 61. Responsive Webdesign verkaufen Links • http://stuffandnonsense.co.uk/projects/contract-killer/ (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  62. 62. Zum Abschluß: Responsive Web Design benötigt ein Umdenken! Danke! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  63. 63. Responsive Webdesign verkaufen 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 Certified TYPO3 Integrator seit 2009 Mitglied bis 2012 in den TYPO3 Core-Teams: Certification, 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: (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  64. 64. Responsive Webdesign verkaufen 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. (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  65. 65. Responsive Webdesign verkaufen (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  66. 66. Responsive Webdesign verkaufen 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/profile/Patrick_Lobacher www.xing.com/profile/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 (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013 Amazon: www.amazon.de/Patrick-Lobacher/e/
  67. 67. Vielen Dank! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013

×