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, indem erst das PSD erstellt wird und dann angefangen wird zu programmieren, scheint nicht mehr zu funktioneren. Und dies ist auch logisch, wenn man sich den RWD-Workflow einmal genauer ansieht. Der Talk geht genau auf diesen Prozess ein, beleuchtet diesen intensiv und zeigt Möglichkeiten für Entscheider, Grafiker aber auch Web-Worker auf, wie man RWD überhaupt vernünftig und ohne Risiko verkauft bekommt, wie man dem Workflow optimal folgt, wie Verträge im RWD-Universum aussehen und wie man seine Abnahme am Ende des Projekts trotzdem optimal hinbekommt.
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:
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!
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!
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
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
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?
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
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