Responsive Webdesign
verkaufen



Patrick Lobacher 

GF +Pluswerk GmbH
02.06.2014

Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Bullshit Bingo
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
RWD ist einfach!
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Okay, okay - es ist nicht sooo
einfach...
Aber letzlich nur ein 

technisches Problem!
Sicher?
NEIN: Responsive Design
ist eben KEIN Problem
von Design oder
Entwicklung!
RWD Workflow
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Was ist verkehrt mit 

diesem Workflow?

Er hat doch seit Jahren
funktioniert?
Responsive Web Design
benötigt ein 

radikales Umdenken!
Es ist eine allumfassende 

Denkweise!
Und es betrifft *alle* Rollen:
CEO, Vertrieb, UX/UI, 

Designer, Entwickler, 

Redakteure, Kunden,...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
RWD verkaufen
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Verträge
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Links
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Zum Abschluß:
Responsive Web Design

benötigt Euer Umdenken!
Danke!
Fragen?
Oder komplett verwirrt?
Slides: www.lobacher.de/webinale14
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.20...
Besten Dank für Eure
Aufmerksamkeit!
Nächste SlideShare
Wird geladen in …5
×

Webinale 14: Responsive Webdesign verkaufen / Pluswerk

2.449 Aufrufe

Veröffentlicht am

Responsive Webdesign ist in aller Munde, und auch die technischen Möglichkeiten scheinen nahezu komplett, um dies auch technisch hochwertig umzusetzen. Und trotzdem scheitern eklatant viele RWD-Projekte. Dies liegt vor allem am Workflow, der ein Umdenken in allen Positionen erfordert. Das klassische Modell, in dem erst das PSD erstellt wird und dann angefangen wird zu programmieren, scheint nicht mehr zu funktionieren. Und dies ist auch logisch, wenn man sich den RWD-Workflow einmal genauer ansieht.

Veröffentlicht in: Technologie
0 Kommentare
6 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.449
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
41
Aktionen
Geteilt
0
Downloads
29
Kommentare
0
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Webinale 14: Responsive Webdesign verkaufen / Pluswerk

  1. 1. Responsive Webdesign verkaufen
 
 Patrick Lobacher 
 GF +Pluswerk GmbH 02.06.2014

  2. 2. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Patrick Lobacher
 Geschäftsführer +Pluswerk GmbH • 43 Jahre, glücklich verheiratet, wohnhaft in München • Selbständig im Bereich Webentwicklung seit 1994 • Autor von 10 Fachbüchern und > 50 Fachartikeln zum Thema TYPO3 und Webentwicklung • Speaker, Trainer, Consultant, Coach, Nerd Veröffentlichungen:
  3. 3. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Agentur für digitale Kommunikation
 
 +[ 9 ] Standorte in Deutschland +[ 110 ] Mitarbeiter +[ 999 ] realisierte Projekte mit Magento und TYPO3
  4. 4. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Agenda • Hype oder Realität? • RWD ist doch einfach! • RWD Workflow • RWD verkaufen • Verträge Responsive Webdesign verkaufen ]
  5. 5. Bullshit Bingo
  6. 6. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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“
  7. 7. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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 Am Ende des Tages... 24 / 7 Die Wahrheit ist... Fokussieren Kernkompetenz Mehrwert Benchmark
  8. 8. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Um nun Daten für Eurer eigenes Spiel zu finden, googelt einfach nach: 
 „web design trends 2014“
  9. 9. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] 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
  10. 10. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] http://www.designpromotivate.comhttp://katieunderhill.co.uk/ http://www.smashingmagazine.com HOT TOPIC 2014!! WEB DESIGN
 TRENDS 2014
  11. 11. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Responsive Web Design - RWD ist ein Trend! Wirklich?
  12. 12. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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.
  13. 13. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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
  14. 14. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Aber das ist einfach zu erreichen: iPad, iPhone, Nexus, Galaxy #nicht http://opensignal.com/reports/fragmentation.phphttp://www.timhordern.com/
  15. 15. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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/samsungtomorrow/8335500219/http://www.flickr.com/photos/raneko/3045816114/
  16. 16. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] http://www.businessinsider.com/iwatch-concept-2013-8?op=1 Und was ist damit? http://www.hotelmanagement-network.com/ http://www.apple.com/ios/carplay/ http://www.winnipegfreepress.com/
  17. 17. RWD ist einfach!
  18. 18. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Kunden
 Wissen
 (leider) Zutaten • Neu-Anordnen von Inhaltselemente • Ein flexibles Grid-System • Flexible Bilder • Media queries • Serverseitige Komponenten (RESS) • „einige“ Prozesse
  19. 19. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Das ist alles! Stimmt doch, oder? http://www.slideshare.net/slideshow/embed_code/14528526
  20. 20. Okay, okay - es ist nicht sooo einfach... Aber letzlich nur ein 
 technisches Problem!
  21. 21. Sicher? NEIN: Responsive Design ist eben KEIN Problem von Design oder Entwicklung!
  22. 22. RWD Workflow
  23. 23. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] 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
  24. 24. Was ist verkehrt mit 
 diesem Workflow?
 Er hat doch seit Jahren funktioniert?
  25. 25. Responsive Web Design benötigt ein 
 radikales Umdenken! Es ist eine allumfassende 
 Denkweise!
  26. 26. Und es betrifft *alle* Rollen: CEO, Vertrieb, UX/UI, 
 Designer, Entwickler, 
 Redakteure, Kunden,...
  27. 27. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] GF / Freelancer / Entscheider • Existiert die Vision, jedes Gerät jetzt und in der Zukunft zu unterstützen? • Besteht der Wille, in die Fortbildung des gesamten Teams zu investieren? • Sind alle bereit, zu akzeptieren, dass sich festgefahrene Prozesse radikal ändern werden? Für eine grundlegende Veränderung?
  28. 28. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Designer • Die Tools werden sich verändern! 
 (Photoshop ist nicht tot - aber der Designer muss sich mit deutlich mehr bzw. anderen Tools beschäftigen) • Erforsche das Medium ausführlich! • Rein visuell arbeitende Designer müssen am meisten lernen! • Bleibe offen für neues!
  29. 29. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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
  30. 30. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Vertrieb • RWD ist KEIN Produkt!!! • Du brauchst neue Verträge • Verkaufe RWD Consulting - da es essentiell notwendig ist, dass Dein Kunde sich damit beschäftigt • RWD Projekte sind teuerer - dafür aber für den Kunden jeden € wert
  31. 31. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] ➀ 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
  32. 32. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Der RWD-Workflow - Schritt 1 • Entscheidungen • Stakeholder Matrix (Wer entscheidet was?) • Projekt Ziel / Vision • Breakpoint Entscheidungen (aufgrund des Inhalts) (Wichtig!) • Liste der zu unterstützenden Geräte und Browser (Top 5/3) • Dokument Bestandsaufnahme (CI-Manual, Richtlinien, Bestimmungen, Rechtliches, ...) • Moodboard Briefing (Look & Feel) • Vertrag
  33. 33. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Der RWD-Workflow - Schritt 2 • 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
  34. 34. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Hauptnavigation Logo Suche & Links Überschrift Inhalt Footer Irgendein Plugin Der RWD-Workflow - Schritt 3 • 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

  35. 35. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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 Text- Dummy zu erhalten
  36. 36. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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!
  37. 37. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] http://weblog.404creative.com/ Der RWD-Workflow - Schritt 6 • Moodboard / Style Tile • Illustration des visuellen Stils (und der Stilrichtung) • Look & feel der Website inkl. der Elemente (wie Navigation, Überschrift, …) • Atomic Design! • Freigabe durch den Kunden!
  38. 38. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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!
  39. 39. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Der RWD-Workflow - Schritt 8 • 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!
  40. 40. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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 Testen gibt es Tools! • Freigabe durch den Kunden!
  41. 41. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Der RWD-Workflow - Schritt 10 • Produktion • Integration in ein CMS (falls vorhanden • Backend-Programmierung • APIs • ...
  42. 42. RWD verkaufen
  43. 43. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Consulting Workshop Design Programmierung Testing RWD verkaufen • Consulting 
 (Basis RWD Wissen für den Kunden) • Workshops 
 (Anforderungen, Entscheidungen, Inhalte, Wireframes, Clickdummy, Prozesse, ...) • Design 
 (Moodboard, Style Tile, Linear Design, Element Design, Atomic Design, ...) • Produktion / Programmierung 
 (Content Dummy, Clickdummy, ...) • Testing 
 (Content testing, device testing)
  44. 44. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] PSD Full Layouts RWD for Non-RWD Design RWD AddOn History Museum Was sollte man nicht verkaufen • PSD 
 Statische Dokumente können NICHT verwendet werden! • Full Layouts 
 Design von Elementen und NICHT von Layouts • RWD AddOn 
 Es ist NICHT möglich, auf eine bestehende Website RWD „drüberzustülpen“. RWD ist KEIN Feature! • RWD for Non-RWD Design 
 Stelle sicher, das der Designer umfangreiche RWD- Kenntnisse besitzt • History Museum 
 Das Web existiert in der Gegenwart - halte daher nicht an alten Browsern fest
  45. 45. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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
  46. 46. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Wieviel kostet RWD? • Frage: Wieviel kostet RWD? • Antwort: $13.47 • Nachzulesen bei:
 
 http://bradfrostweb.com/blog/web/how- much-does-a-responsive-web-design-cost/
  47. 47. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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! Alternative: Kredit!
  48. 48. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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?
  49. 49. Verträge
  50. 50. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Verträge - 1 • Zusammenfassung / Erwartungen • Kunden-Daten • Agentur- / Freelancer-Daten • Projekt Ziel • Deadlines
  51. 51. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Verträge - 2 • Vereinbarungen • Der Kunden muss die Arbeiten überprüfen, Feedback liefern und die Freigaben zügig durchführen • Deadlines gelten für beide Seiten - Agentur/ Freelancer und Kunden sind beiderseit daran gebunden • Der Kunde muss sich an den Zahlungsplan halten
  52. 52. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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, ...)
  53. 53. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Verträge - 4 • Inhalt & Bilder • Die Agentur ist nicht verantwortlich, Inhalt zu erstellen oder einzugeben (HTML, CMS, ...) • Die Agentur ist nicht verantwortlich, Bilder auszuwählen, aufzunehmen, zu editieren oder zu konvertieren • Dafür kann ein eignes Angebot erstellt werden
  54. 54. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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
  55. 55. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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
  56. 56. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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)
  57. 57. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Verträge - 8 • Changes / Feature Requests (sofern Wasserfall) • Da der vorliegende Vertrag ein Festpreis-Vertrag ist, haben wir am Anfang ein Pflichtenheft erstellt, welches alle Anforderungen enthält • Auf dieser Basis kalkulieren wir unsere Arbeit • Wir wollen aber flexibel sein. Wenn Sie etwas geändert haben wollen (welches ein Delta zum Pflichtenheft darstellt), bieten wir Ihnen dies als separates Angebot an • Im Pflichtenheft fehlende Aspekte, stellen eine Konzeptionslücke dar und werden ebenfalls separat angeboten, falls diese gewünscht sind.
  58. 58. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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.
  59. 59. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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 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
  60. 60. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 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
  61. 61. Links
  62. 62. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Links • http://www.creativebloq.com/responsive-web- design/top-responsive-web-design-problems-and- how-avoid-them-8122790
 • http://weblog.404creative.com/2007/02/14/ website-mood-boards-a-successful-precursor-to- visual-prototyping/
 • http://styletil.es/
 • http://samanthatoy.com/washington-examiner/
  63. 63. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Links • http://responsivedesignworkflow.com/
 • http://de.slideshare.net/stephenhay/ mobilism2012
 • http://www.smashingmagazine.com/2012/09/28/ better-client-participation-in-responsive- design-projects/
 • http://dmduplessis.com/responsive-design-and- the-art-of-being-busy/
  64. 64. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Links • http://bradfrostweb.com/blog/post/atomic-web- design/
 • http://maddesigns.de/responsive-workflow/#1
 • http://stuffandnonsense.co.uk/projects/ contract-killer/
  65. 65. Zum Abschluß: Responsive Web Design
 benötigt Euer Umdenken! Danke!
  66. 66. Fragen? Oder komplett verwirrt? Slides: www.lobacher.de/webinale14
  67. 67. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Kontakt Klassisch:
 
 +Pluswerk GmbH
 Patrick Lobacher
 Solmstr. 6A
 60486 Frankfurt am Main
 
 Fon: +49 89 130 145 20
 
 Email: lobacher@plus-werk.com
 Web: www.plus-werk.com ! 
 
 
 Twitter: 
 www.twitter.com/PatrickLobacher
 
 Facebook: 
 www.facebook.com/patrick.lobacher
 
 Blog: blog.lobacher.de 
 Schulungen: www.lobacher.de
 
 Google+:
 plus.google.com/105500420878314068694
 
 
 
 XING: 
 www.xing.com/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
 Schwerpunkt: Open Source / Kunden: Enterprise & KMU
  68. 68. Responsive Webdesign verkaufen (c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 02.06.2014 Responsive Webdesign verkaufen ] Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision)
  69. 69. Besten Dank für Eure Aufmerksamkeit!

×