SlideShare ist ein Scribd-Unternehmen logo
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

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

(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
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
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
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
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
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
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
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
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
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
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
RWD ist einfach!

(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
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)
(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?
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
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
RWD Workflow

(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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/

•
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
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
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
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
RWD verkaufen

(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
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
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
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
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
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
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
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- / Freelancer-Daten
Projekt Ziel
Deadlines

(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
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
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
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
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
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
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
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
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
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
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
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-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
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
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
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
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
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
Responsive Webdesign verkaufen

(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
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/
Vielen Dank!
(c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013

Weitere ähnliche Inhalte

Andere mochten auch

Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
Peter Grosskopf
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
Andreas Simon
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Connected-Blog
 
Twitter für Medienunternehmen : Social Media Forum 2010
Twitter für Medienunternehmen : Social Media Forum 2010Twitter für Medienunternehmen : Social Media Forum 2010
Twitter für Medienunternehmen : Social Media Forum 2010
Ulrike Langer
 
achtung! website Groblayout V1
achtung! website Groblayout V1achtung! website Groblayout V1
achtung! website Groblayout V1
Björn Walter
 
Nutzerstrukturdaten und Inhaltskonzept von usabilityblog.de
Nutzerstrukturdaten und Inhaltskonzept von usabilityblog.deNutzerstrukturdaten und Inhaltskonzept von usabilityblog.de
Nutzerstrukturdaten und Inhaltskonzept von usabilityblog.de
SteffenHeim
 
achtung website 2spaltig
achtung website 2spaltigachtung website 2spaltig
achtung website 2spaltig
Björn Walter
 
achtung! website Bilderwelt V1
achtung! website Bilderwelt V1achtung! website Bilderwelt V1
achtung! website Bilderwelt V1
Björn Walter
 
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerkTYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Was ist Barrierefreiheit?
Was ist Barrierefreiheit?Was ist Barrierefreiheit?
Was ist Barrierefreiheit?
Sylvia Egger
 
Responsive Accessibility in der Praxis
Responsive Accessibility in der PraxisResponsive Accessibility in der Praxis
Responsive Accessibility in der Praxis
Sylvia Egger
 
SketchApp Meetup Frankfurt - #1st Round
SketchApp Meetup Frankfurt - #1st RoundSketchApp Meetup Frankfurt - #1st Round
SketchApp Meetup Frankfurt - #1st Round
Jens Hoffmann
 
Projektplan achtung v1
Projektplan achtung v1Projektplan achtung v1
Projektplan achtung v1
Björn Walter
 
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu DeutschlandThe Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
TWT
 
Transparency is the New Black
Transparency is the New BlackTransparency is the New Black
Transparency is the New Black
Dana Zezzo, CAS
 
Webdesign für Blogger
Webdesign für BloggerWebdesign für Blogger
Webdesign für Blogger
Webdesign Journal
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
die.agilen GmbH
 
Vortrag Social Media beim aperó
Vortrag Social Media beim aperóVortrag Social Media beim aperó
Vortrag Social Media beim aperó
Björn Walter
 
TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014
die.agilen GmbH
 
Usability Institutionalisierung
Usability InstitutionalisierungUsability Institutionalisierung
Usability Institutionalisierung
abublitz
 

Andere mochten auch (20)

Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Twitter für Medienunternehmen : Social Media Forum 2010
Twitter für Medienunternehmen : Social Media Forum 2010Twitter für Medienunternehmen : Social Media Forum 2010
Twitter für Medienunternehmen : Social Media Forum 2010
 
achtung! website Groblayout V1
achtung! website Groblayout V1achtung! website Groblayout V1
achtung! website Groblayout V1
 
Nutzerstrukturdaten und Inhaltskonzept von usabilityblog.de
Nutzerstrukturdaten und Inhaltskonzept von usabilityblog.deNutzerstrukturdaten und Inhaltskonzept von usabilityblog.de
Nutzerstrukturdaten und Inhaltskonzept von usabilityblog.de
 
achtung website 2spaltig
achtung website 2spaltigachtung website 2spaltig
achtung website 2spaltig
 
achtung! website Bilderwelt V1
achtung! website Bilderwelt V1achtung! website Bilderwelt V1
achtung! website Bilderwelt V1
 
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerkTYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
 
Was ist Barrierefreiheit?
Was ist Barrierefreiheit?Was ist Barrierefreiheit?
Was ist Barrierefreiheit?
 
Responsive Accessibility in der Praxis
Responsive Accessibility in der PraxisResponsive Accessibility in der Praxis
Responsive Accessibility in der Praxis
 
SketchApp Meetup Frankfurt - #1st Round
SketchApp Meetup Frankfurt - #1st RoundSketchApp Meetup Frankfurt - #1st Round
SketchApp Meetup Frankfurt - #1st Round
 
Projektplan achtung v1
Projektplan achtung v1Projektplan achtung v1
Projektplan achtung v1
 
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu DeutschlandThe Digital Statstics 2014: Zahlen und Fakten zu Deutschland
The Digital Statstics 2014: Zahlen und Fakten zu Deutschland
 
Transparency is the New Black
Transparency is the New BlackTransparency is the New Black
Transparency is the New Black
 
Webdesign für Blogger
Webdesign für BloggerWebdesign für Blogger
Webdesign für Blogger
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - WTC15
 
Vortrag Social Media beim aperó
Vortrag Social Media beim aperóVortrag Social Media beim aperó
Vortrag Social Media beim aperó
 
TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014TYPO3 Neos - Next Generation CMS - DWX 2014
TYPO3 Neos - Next Generation CMS - DWX 2014
 
Usability Institutionalisierung
Usability InstitutionalisierungUsability Institutionalisierung
Usability Institutionalisierung
 

Ähnlich wie Responsive Webdesign verkaufen

Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a NutshellDeveloper Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell
die.agilen GmbH
 
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschautTechnologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Ralf Schwoebel
 
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige KundenbindungFMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
Verein FM Konferenz
 
Agenturpräsentation typovision GmbH
Agenturpräsentation typovision GmbHAgenturpräsentation typovision GmbH
Agenturpräsentation typovision GmbH
typovision GmbH
 
Modulare Baukästen, Modularisierung und Produktplattformen:Vorstellung MB Col...
Modulare Baukästen, Modularisierung und Produktplattformen:Vorstellung MB Col...Modulare Baukästen, Modularisierung und Produktplattformen:Vorstellung MB Col...
Modulare Baukästen, Modularisierung und Produktplattformen:Vorstellung MB Col...
Daniel Mund
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
die.agilen GmbH
 
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
Christoph Kleine
 
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-AgenturenArtikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
xeit AG
 
XDi Presentation_Lean UX-Workshop@MCBW2017
XDi Presentation_Lean UX-Workshop@MCBW2017XDi Presentation_Lean UX-Workshop@MCBW2017
XDi Presentation_Lean UX-Workshop@MCBW2017
Stefan Schmitt
 
SEA Manager @projektwerk.com in Hamburg gesucht
SEA Manager @projektwerk.com in Hamburg gesuchtSEA Manager @projektwerk.com in Hamburg gesucht
SEA Manager @projektwerk.com in Hamburg gesucht
Projektwerk Projektbörse
 
Gregor Bossert_Management- & Business Consultant
Gregor Bossert_Management- & Business ConsultantGregor Bossert_Management- & Business Consultant
Gregor Bossert_Management- & Business ConsultantGregor Bossert
 
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne GoogleSEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
Ralf Schwoebel
 
SANMIGUEL - DIGITAL BRANDING
SANMIGUEL - DIGITAL BRANDINGSANMIGUEL - DIGITAL BRANDING
SANMIGUEL - DIGITAL BRANDING
Hans A. Sanmiguel
 
Domain-driven design - eine Einführung
Domain-driven design - eine EinführungDomain-driven design - eine Einführung
Domain-driven design - eine Einführung
die.agilen GmbH
 
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-UmfeldInfrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
Daniel Steiger
 
FMK2014: FileMaker Module by Holger Darjus
FMK2014: FileMaker Module by Holger DarjusFMK2014: FileMaker Module by Holger Darjus
FMK2014: FileMaker Module by Holger Darjus
Verein FM Konferenz
 
Content is King - Der ABB Conversations Showcase
Content is King  - Der ABB Conversations ShowcaseContent is King  - Der ABB Conversations Showcase
Content is King - Der ABB Conversations Showcase
Felix Widmaier
 
SEO und Projektmanagement, Vortrag SEOKomm 2014
SEO und Projektmanagement, Vortrag SEOKomm 2014SEO und Projektmanagement, Vortrag SEOKomm 2014
SEO und Projektmanagement, Vortrag SEOKomm 2014
gudulafeichtinger
 
Stars to road sbb svenkrause
Stars to road sbb svenkrauseStars to road sbb svenkrause
Stars to road sbb svenkrause
Sven Krause
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
SteffenHeim
 

Ähnlich wie Responsive Webdesign verkaufen (20)

Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a NutshellDeveloper Week / DWX 2015 - Responsice Webdesign in a Nutshell
Developer Week / DWX 2015 - Responsice Webdesign in a Nutshell
 
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschautTechnologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
 
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige KundenbindungFMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
FMK2016 - Volker Krambrich und Holger Darjus - Langfristige Kundenbindung
 
Agenturpräsentation typovision GmbH
Agenturpräsentation typovision GmbHAgenturpräsentation typovision GmbH
Agenturpräsentation typovision GmbH
 
Modulare Baukästen, Modularisierung und Produktplattformen:Vorstellung MB Col...
Modulare Baukästen, Modularisierung und Produktplattformen:Vorstellung MB Col...Modulare Baukästen, Modularisierung und Produktplattformen:Vorstellung MB Col...
Modulare Baukästen, Modularisierung und Produktplattformen:Vorstellung MB Col...
 
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhoneWebapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
 
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
15 Powerpoint Hacks für Design Noobs | Präsentation | internetzkidz.de
 
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-AgenturenArtikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
 
XDi Presentation_Lean UX-Workshop@MCBW2017
XDi Presentation_Lean UX-Workshop@MCBW2017XDi Presentation_Lean UX-Workshop@MCBW2017
XDi Presentation_Lean UX-Workshop@MCBW2017
 
SEA Manager @projektwerk.com in Hamburg gesucht
SEA Manager @projektwerk.com in Hamburg gesuchtSEA Manager @projektwerk.com in Hamburg gesucht
SEA Manager @projektwerk.com in Hamburg gesucht
 
Gregor Bossert_Management- & Business Consultant
Gregor Bossert_Management- & Business ConsultantGregor Bossert_Management- & Business Consultant
Gregor Bossert_Management- & Business Consultant
 
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne GoogleSEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
SEOkomm 2012: Beyond SEO in German - Mehr Traffic ohne Google
 
SANMIGUEL - DIGITAL BRANDING
SANMIGUEL - DIGITAL BRANDINGSANMIGUEL - DIGITAL BRANDING
SANMIGUEL - DIGITAL BRANDING
 
Domain-driven design - eine Einführung
Domain-driven design - eine EinführungDomain-driven design - eine Einführung
Domain-driven design - eine Einführung
 
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-UmfeldInfrastruktur agil bauen - der DBA im SAFe-Umfeld
Infrastruktur agil bauen - der DBA im SAFe-Umfeld
 
FMK2014: FileMaker Module by Holger Darjus
FMK2014: FileMaker Module by Holger DarjusFMK2014: FileMaker Module by Holger Darjus
FMK2014: FileMaker Module by Holger Darjus
 
Content is King - Der ABB Conversations Showcase
Content is King  - Der ABB Conversations ShowcaseContent is King  - Der ABB Conversations Showcase
Content is King - Der ABB Conversations Showcase
 
SEO und Projektmanagement, Vortrag SEOKomm 2014
SEO und Projektmanagement, Vortrag SEOKomm 2014SEO und Projektmanagement, Vortrag SEOKomm 2014
SEO und Projektmanagement, Vortrag SEOKomm 2014
 
Stars to road sbb svenkrause
Stars to road sbb svenkrauseStars to road sbb svenkrause
Stars to road sbb svenkrause
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
 

Mehr von die.agilen GmbH

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

Mehr von die.agilen GmbH (20)

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

Responsive Webdesign verkaufen

  • 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. Bullshit Bingo (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. RWD ist einfach! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  • 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. (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. 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. 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. RWD Workflow (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. RWD verkaufen (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  • 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. 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. 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. 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. 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. 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. Verträge (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Links (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013
  • 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. 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. 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. 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. Responsive Webdesign verkaufen (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 25.11.2013
  • 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. Vielen Dank! (c) 2013 - typovision GmbH | Responsive Webdesign verkaufen | Patrick Lobacher | www.typovision.de | 28.11.2013