Responsive Web Design 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. Der Vortrag geht auf alle "kaufmännischen" Aspekte von RWD ein, von der Planung über den Prozess bis hin zu Vertragsdetails.
7. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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“
8. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
9. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Um nun Daten für Eurer
eigenes Spiel zu finden,
googelt einfach nach:
„web design trends 2014“
10. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
11. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
http://www.designpromotivate.comhttp://katieunderhill.co.uk/
http://www.smashingmagazine.com
HOT TOPIC 2014!!
WEB DESIGN
TRENDS 2014
12. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Responsive Web Design -
RWD
ist ein Trend!
Wirklich?
13. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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.
14. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
15. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Aber das ist einfach zu erreichen:
iPad, iPhone, Nexus, Galaxy
#nicht
http://opensignal.com/reports/fragmentation.phphttp://www.timhordern.com/
16. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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/
17. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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/
27. Und es betrifft *alle* Rollen:
CEO, Vertrieb, UX/UI,
Designer, Entwickler,
Redakteure, Kunden,...
28. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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?
29. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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!
30. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
31. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
33. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
34. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
35. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
36. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
37. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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!
38. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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 (Pattern Lab)
• Freigabe durch den Kunden!
39. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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!
40. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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!
41. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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!
45. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
46. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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
48. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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!
49. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.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?
51. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Killer Contract
• Kombination aus:
• Contract Killer 3 / Open Source Vertrag
Original: Andy Clarke (Stuff & Nonsense)
• Der agile Festpreis: Leitfaden für wirklich
erfolgreiche IT-Projekt-Verträge
52. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Design
• Wir erstellen "look-and-feel" Designs und flexible Layouts die
sich an die Möglichkeiten von vielen Endgeräten und
Bildschirmgrößen anpassen.
• Wir erstellen Designs iterativ und benützen hierfür
überwiegend HTML und CSS um so keine Zeit damit
vergeuden, für jedes Template ein statisches Bild zu erstellen.
• Wenn wir statische Bilder verwenden, dann um die Richtung,
in die das Look-and-feel geht, zu zeigen. Dies wird von uns als
"Design Atmosphäre" bezeichnet. Diese ist nicht verbindlich.
53. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Design
• Sie werden zwei oder mehrmals wöchentlich die
Möglichkeit haben, unsere Arbeit durchzusehen und
Feedback zu geben.
• Sollten Sie, in irgendeiner Phase des Projekts, nicht
glücklich mit der Richtung sein, in die unsere Arbeit
geht, werden Sie uns für die gesamten bis zu
diesem Zeitpunkt erbrachten Leistungen bezahlen
und diesen Vertrag auflösen.
54. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Desktop Browser Tests
• Wir testen unsere Arbeit in aktuellen Versionen der
wichtigsten Desktop Browsern, inklusive jenen von
Apple (Safari), Google (Chrome), Microsoft (Internet
Explorer), Mozilla Firefox und Opera.
• Außerdem testen wir um sicherzustellen, dass
Benutzer des Microsoft Internet Explorer 8 für
Windows ein angebrachtes, möglicherweise
abweichendes Erlebnis, erhalten.
55. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Desktop Browser Tests
• Wir werden ein einspaltiges Design für Internet
Explorer 7 und darunter auf Windows
implementieren und keine Tests in anderen, älteren
Browsern durchführen außer Sie legen dies fest.
• Sollten Sie ein erweitertes, aufwendigeres Design
für ältere Browser benötigen können wir hierfür ein
gesondertes Angebot erstellen.
56. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Mobile Browser Tests
• Ein Design auf populären Endgeräten mit kleinen
Bildschirmgrößen zu testen ist wichtig um den Benutzern ein
Erlebnis zu bieten, dass den Funkionen ihres Geräts
entspricht.
• Wir testen unsere Arbeit in:
• iOS: Safari, Google Chrome and Opera Mini
• Android 4.4: Google Chrome, Firefox and Opera Mini
• Android 3.2: Browser, Firefox and Opera Mini
57. Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | Responsive Webdesign verkaufen | www.plus-werk.com | 15.07.2014
Responsive Webdesign verkaufen ]
Mobile Browser Tests
• Aktuell testen wir nicht in
• Blackberry OS oder Blackberry QNX, Opera
Mobile, Symbian oder anderen mobilen
Browsern.
• Sollten von Ihnen ein Testing auch auf diesen oder
anderen Geräten/Browsern erwünscht sein, können
wir hierfür ein gesondertes Angebot erstellen.