responsive webdesign für grafiker & entscheider
TRANSCRIPT
responsive webdesign für grafiker und entscheider
typovision gmbh // 2015
© fo
tolia
| go
odlu
z
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
2
01 Einführung Responsive Webdesign
02 Der klassische Workflow im Überblick
03 Der neue Workflow
04 Schätzmethoden im RWD-Workflow
05 Verträge im RWD-Workflow
06 RWD-Tools für alle Prozess-Schritte
responsive webdesign 01 einführung.
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
4
01 Einführung Responsive Webdesign
1.1 Definition
1.2 Geschichte
1.3 Abgrenzungen
1.4 Mobile First / Content First
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
5
01 Einführung Responsive Webdesign
1.1 Definition
1.2 Geschichte
1.3 Abgrenzungen
1.4 Mobile First / Content First
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign definition.
Beim Responsive Webdesign (im Deutschen auch responsives Webdesign genannt oder kurz RWD) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten
Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können.
6
http://de.wikipedia.org/wiki/Responsive_Webdesign
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign definition.
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and
an intelligent use of CSS media queries.
7
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
8
01 Einführung Responsive Webdesign
1.1 Definition
1.2 Geschichte
1.3 Abgrenzungen
1.4 Mobile First / Content First
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign am anfang war ethan.
Prägung von Ethan Marcotte 2010 auf A List Apart
9
ETHAN MARCOTTE May 25, 2010http://alistapart.com/article/responsive-web-design
1. Ein flexibles Grid
2. Flexible Bilder und Videos
3. Media Queries
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign am anfang war ethan.
„Responsive Architecture“
10
ETHAN MARCOTTE May 25, 2010http://alistapart.com/article/responsive-web-design
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign am anfang war ethan.
„Neue Denkweise“
11
ETHAN MARCOTTE May 25, 2010http://alistapart.com/article/responsive-web-design
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign am anfang war ethan.
Die bisher statischen Websites sind nicht in der Lage auf die steigende Anzahl von
Displaygrössen angemessen zu reagieren. Es ist also Zeit, sich von alten Denkmustern
zu lösen, und Websites flexibel und reaktionsfähig zu gestalten.
12
ETHAN MARCOTTE May 25, 2010http://alistapart.com/article/responsive-web-design
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
Neu?
13
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
Nein!
14
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign rückbesinnung auf alte werte.
• HTML Dokumente sind von Natur aus reaktionsfähig
• Gestaltungsprozesse aus der Printwelt rauben Flexibilität und machen Webseiten zu starren Seiten
• falsche Tools wie Photoshop
• bevor wir anfangen treffen wir Annahmen über die Dimension
15
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign kein trend.
Responsive Webdesign ist kein Trend. Es ist ein evolutionärer Schritt.
16
Quelle: Christoph Zillgens, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, München, 2013, S.8-10
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign kein trend sondern notwendigkeit.
17
Quelle: http://opensignal.com/reports/2014/android-fragmentation/
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign kein trend sondern notwendigkeit.
18
Quelle: http://opensignal.com/reports/2014/android-fragmentation/
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign kein trend sondern notwendigkeit.
19
Quelle: http://opensignal.com/reports/2014/android-fragmentation/
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign kein trend sondern notwendigkeit.
20
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign kein trend sondern notwendigkeit.
Statt wie die Bekleidungsindustrie die sich ständig wandelnden Körpermaße in neue Konfektionsgrößen zu pressen, sollten wir uns einer smarteren Methode zuwenden.
21
Quelle: Christoph Zillgens, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, München, 2013, S. 12
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
22
01 Einführung Responsive Webdesign
1.1 Definition
1.2 Geschichte
1.3 Abgrenzungen
1.4 Mobile First / Content First
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign abgrenzungen.
• Responsive vs. Adaptive
• Mobile Apps
23
http://www.elezea.com/2013/11/rwd-content-modules/
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign abgrenzungen.
• Responsive vs. Adaptive
• Mobile Apps
24
http://www.elezea.com/2013/11/rwd-content-modules/
Quel
le: h
ttps:
//dr
ibbb
le.co
m/s
hots
/279
619-
Resp
onsiv
e-De
sign
Adaptive
Responsive
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
25
01 Einführung Responsive Webdesign
1.1 Definition
1.2 Geschichte
1.3 Abgrenzungen
1.4 Mobile First / Content First
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign * first
mobile first = content first
26
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign * first.
• Mobil expandiert rasant
• Mobil hilft zu fokussieren
• Mobil bietet erweiterte Fähigkeiten
• Gilt für Planung und Entwicklung
27
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign * first.
28
Quelle: http://www.areamobile.de/news/
24862-android-extreme-fragmentierung-aber-das-muss-nicht-schlecht-sein
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign * first
„The absence of support for @media queries is in fact the first @media query“
29
Quelle: http://de.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
BRYAN RIEGER
responsive webdesign 02 der klassische workflow im überblick
© u
nspl
ash
| Cal
eb G
eorg
e
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow klassisch.
31
Konzept
Design
Technische Umsetzung
Deploy
Support
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow klassisch.
32
Quel
le: h
ttp://
proj
ectc
arto
on.co
m/c
arto
on/4
34
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow klassisch.
33
Quel
le: h
ttp://
proj
ectc
arto
on.co
m/c
arto
on/4
34
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow klassisch.
Der Standish Group Report „Chaos“ 2014
• Eine kleine Firma gibt im Jahr ca. 384.646 € für IT Projekte aus
• > 30% der IT Projekte werden vor der Fertigstellung gecancelt
• < 20% werden in time & budget fertig gestellt
• 45% der Projekte haben Mehrkosten bis 50%, 30% zwischen 50 - 100%
• > 35% dauern mehr als doppelt so lange wie geplant
• > 25% wurden mit nur 25-49% der ursprünglich definierten Features und Funktionen umgesetzt
34
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow klassisch.
35
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow klassisch.
36
Konzept
Design
Technische Umsetzung
Deploy
Support
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow probleme.
Konzeption
• Konzeption soll Kosten minimieren
• Tabelle geht von normalem Prozess aus
• Lorem Ipsum != echter Content
• Kunden ändern Anforderungen, das ist normal
37
Entdeckung in Projektphase Aufwand in Stunden
Konzeption 0,25
Technisches Pflichtenheft 1
Implementierung 4
Test 8
Produktivnutzung 16
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow probleme.
„Using photoshop / fireworks for responsive webdesign ist like bringing a knife to gunfight“
38
Andy Clarke
Quelle: https://twitter.com/lebedoka/status/312123620774264832
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow probleme.
Ein unglaublich echtes Beispiel aus der Praxis
• 3 Designvorschläge
• 30 Seitentypen
• 3 Breakpoints (4 Darstellungen)
• 3 * 30 * 4 = 360 PSD Layouts
=> ca. 100.000 €
39
Erlebt im Agenturalltag der typovision bei Gesprächen mit einem potentiellen Partner.
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow probleme.
Technische Umsetzung
• frühe Projektphase = hohe Schätzunschärfe
• hohe Schätzunschärfe = hohes Projektrisiko
• Unstimmigkeiten im Pflichtenheft führen zu Fehlern, die oft erst beim Test auffallen, und somit zu höheren Kosten
40
responsive webdesign 03 der neue workflow.
© u
nspl
ash
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
42
01 Der neue Workflow
1.1 Planung
1.2 Content-Strategie
1.3 Iterativer Zylkus Design/Entwicklung
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign neuer workflow.
43
Sketch WireframeVisualDesign
Prototype Test
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign neuer workflow.
44
Sketch
Wireframe
Visual Design
Prototype
Test
Iteratives Design & EntwicklungUX, Visual, Dev
Content Strategy
ContentPlanner, UX, Visual, Tech
User Research
UserPlanner, UX
RWD Prototype
Prototype handover to clientUX, Visual, Tech
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
45
01 Der neue Workflow
1.1 Planung
1.2 Content-Strategie
1.3 Iterativer Zylkus Design/Entwicklung
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow planung.
46
• Stakeholder Matrix (wer entscheidet was)
• Projektziel
• Breakpoints definieren (Deviceklassen, sehr wichtig!)
• Liste von Devices und Browser die betestet werden sollen (Top 5 / 3)
• bestehende Dokumente analysieren (CI-Manual, Guidelines, Verträge, …)
• Moodboard-Briefing (Look & Feel)
• Vertrag
Rahmen-bedingungen
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow planung.
47
• Was an der bisherigen Website war schlecht? Top3 (alle Stakeholder)
• Was an der bisherigen Webseite war gut? Top3 (alle Stakeholder)
• Was ist das exakte Ziel der geplanten Website?
• Was sind die nachgelagerten Ziele der geplanten Website?
• Welche Probleme soll die Website lösen und welche Sehnsüchte soll sie erfüllen?
• Auf welche Kunden soll die Website fokussieren? (Fokusgruppen, Zielgruppen)
• Welche Werte werden vermittelt?
• Welches Produkt / Thema steht im Mittelpunkt?
Ziel-definition
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow planung.
48
Quel
le: h
ttp://
ww
w.b
entle
ymot
ors.
com
/en.
htm
l
Ziel-definition
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow planung.
49
Quel
le: h
ttp://
ww
w.s
koda
-aut
o.de
/
Ziel-definition
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow planung.
50
• Gleiches Ziel • Unterschiedliche Strategie
—> Unterschiedliche Zielgruppen müssen unterschiedlich angesprochen werden
Ziel-definition
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow personas.
51
Realistischer Name die Persona soll nicht zur Comicfigur werden
Foto der Person ebenfalls ein realistisches
Demographische Information Alter, Geschlecht, Ausbildung, Familienstand
Beruf und Hauptaufgaben
Ziele, Wünsche, Erwartungen, Bedürfnisse z.B. „benötigt Infos zur schnellen Entscheidungsfindung“
Vorlieben, Abneigungen, Hobbies
evtl. ein Zitat, das einen wichtigen Aspekt der Persona zum Ausdruck bringt.
User Research
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow personas beispiel.
52
• Elmar, 43 Jahre, Männlich • „Technischer Leiter“ • Firma: Börsennotiertes Unternehmen (z.B. MTU, FIT, ...) • Slogan: „Ich will einen kompetenten Dienstleister der mir wenig Probleme bereitet“ • Ziele: „Fachwissen muss vorhanden sein. Die müssen was von Security verstehen und dürfen
keine Sicherheitslöcher reißen.“ • Bedürfnisse: „Die verwendete Technologie muss im Firmenwissen vorhanden sein.“ • Wünsche: „Ich will einen Ansprechpartner auf meinem Niveau.“ • Einstellungen: „Um 17 Uhr will ich zu Hause bei Frau und Kind sein und in der Nacht ruhig
schlafen können - mit dem Wissen: Da brennt nix an.“ • Verhalten: „Konzentriert sich auf Kompetenz-Beweise und will schnell zum Ziel kommen.“ • Erwartungen: „Keine nervige Werbung. Mal sehen, was die so drauf haben. Die Technologie
kann ich bestimmt auf der Site ausprobieren.“
Bild
quel
le: i
Stoc
k
User Research
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow customer journey.
53
Phase 1 Awareness Das Bewusstsein für das Produkt wird geweckt (lnspiration)
Phase 2 Favorability Das lnteresse für das Produkt wird verstärkt (Favorisierung)
Phase 3 Consideration Der Kunde erwägt den Kauf des Produktes (Wunsch)
Phase 4 Intent to purchase
Die Kaufabsicht wird konkret (Anstoß)
Phase 5 Conversion Das Produkt wird gekauft (Umsetzung)
User Research
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider 54
Search
Search
Search
Search
Affiliate
Affiliate
Affiliate
Affiliate
Face-book
Face-book
Display
Display
Display
Display
Retargeting
Retargeting
Retargeting
Retargeting
Trigger & Awareness
Research & Compare
Conversion
Loyalty & Retention
User Research
responsive webdesign workflow customer journey.
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
55
01 Der neue Workflow
1.1 Planung
1.2 Content-Strategie
1.3 Iterativer Zylkus Design/Entwicklung
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow content-strategie.
56
• Eine Website existiert ausschließlich aufgrund ihres Contents
• Daher muss dem Content die erste und ungeteilte Aufmerksamkeit zugeteilt werden
• Design hat in dieser Phase überhaupt nichts zu suchen!
• Es geht darum, den Content zielgruppengerecht aufzubereiten
• Man braucht eine umfassende Content-Strategie
• Es geht darum die richtigen Inhalte dem User auszuliefern
Content Strategy
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow content-strategie.
57
Content Management
Geschäfts-Strategie
SEO Content-Erstellung
Informations-Architektur
User ExperienceMarketing
Content Strategie
Content Strategy
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow content-strategie.
58
Content-Strategie • Ziele & Zielgruppen
• Content-Inventar erstellen; Content-Lücken
erkennen
• Migrations-Plan erstellen
• Kernbotschaften definieren
• Themen festschreiben (was interessiert die
Zielgruppe?)
• Metadaten-Strukur aufstellen
• Styleguide, Vorlagen erstellen
• Editorial Workflow festlegen
• Verantwortlichkeiten bestimmen (wer
erstellt, nimmt ab, pflegt den Content?)
• Veröffentlichungs-Kalender schreiben
• Vorgehen für Qualitätskontrolle, Umgang mit
Nutzerfeedback definieren
• Analyse der Zugriffe und der
Bewegungspfade auf der Site planen
Content Strategy
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow content-strategie.
59
Content Reference Wireframe • Wireframe für jeden Breakpoint anlegen
• Jeden Contenttyp aus dem Inventory im
Wireframe referenzieren
• Jeden Seitentyp anlegen
• Lediglich Rechtecke, kein Design!
• Mobile First!
• Jeder Contenttyp aus dem Inventory muss
seinen Platz im Wireframe finden
Main nav
Logo Search & Links
Headline
Content
Footer
Slider
Content Strategy
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow content-strategie.
60
Content erstellen • Plain Text
• Markup mit markdown oder ähnlichem
erstellen
• Unterschiedliche Contenttypen identifizieren
• Das Ergebnis dann in HTML konvertieren,
ergibt den Content Dummy
• Beim Erstellen Personas / Customer Journeys
etc. berücksichtigen
Content Strategy
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow content-strategie.
61
Moodboard • Auf dem Moodboard werden die visuellen
Stile und Elemente entwickelt
• Es finden sich Icons, Farbwelten, Styles von
Formularfelder oder Schriftarten und Stile
• Das Moodboard wird mit HTML/CSS entwickelt
• Layouts werden keine gestaltet / entwickelt.
Nur Design!
Quel
le: h
ttp://
ally
pala
nzi.c
om/v
ox.h
tml
Content Strategy
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
Atomic Design • Zum Erstellen des Moodboards
die einzelnen Elemente
aus der Elementtabelle
nutzen, und so zu Molekülen
und Oragnismen
zusammenbauen…
responsive webdesign workflow content-strategie.
62
Quel
le: h
ttp://
de.w
ikip
edia
.org
/wik
i/Per
iode
nsys
tem
Content Strategy
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow content-strategie.
63
Quel
le: h
ttp://
mad
ebym
ike.
com
.au/
htm
l5-p
erio
dic-
tabl
e/
Atomic Design • Zum Erstellen des Moodboards
die einzelnen Elemente
aus der Elementtabelle
nutzen, und so zu Molekülen
und Oragnismen
zusammenbauen…
Content Strategy
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow content-strategie.
64
Quel
le: h
ttp://
de.s
lides
hare
.net
/bra
dfro
stw
eb/a
tom
ic-de
sign
Atomic Design • Zum Erstellen des Moodboards
die einzelnen Elemente
aus der Elementtabelle
nutzen, und so zu Molekülen
und Oragnismen
zusammenbauen…
Content Strategy
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign agenda.
65
01 Der neue Workflow
1.1 Planung
1.2 Content-Strategie
1.3 Iterativer Zylkus Design/Entwicklung
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
Prototyping
Linear Design • Content Dummy mit Styles aus Moodboard
anreichern
• keinerlei Positionierungen, rein linear
• Im Ergebnis sieht man nun, wie der Content
Dummy mit echtem Content und Styles
ausschaut
responsive webdesign workflow iterativer zyklus.
66
Sketch
Wireframe
Visual Design
Prototype
Test
Iteratives Design & EntwicklungUX, Visual, Dev
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
Prototyping • Klickdummyerstellung mit HTML5 / CSS3 / JS
• führt iterativ zum finalen Layout
• Designer UND Kunde müssen einbezogen
werden
responsive webdesign workflow iterativer zyklus.
67
Iteratives Design & EntwicklungUX, Visual, Dev
Prototyping
67
Sketch
Wireframe
Visual Design
Prototype
Test
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
Device Testing • Echte Geräte nutzen, keine Simulatoren
• Open Device Labs
responsive webdesign workflow iterativer zyklus.
68
Iteratives Design & EntwicklungUX, Visual, Dev
Prototyping
68
Sketch
Wireframe
Visual Design
Prototype
Test
responsive webdesign 04 schätzmethoden.
© u
nspl
ash
| Cra
ig G
arne
r
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign schätzen.
Schätzmethoden im RWD-Workflow • RWD ist in der Entwicklung nicht teurer wie der alte Prozess • Man schätzt FE Entwicklung * 2 • Allerdings hat RWD einen stark erhöhten Consultingaufwand, da der Kunde in der Regel mit dem Prozess
überhaupt nicht vertraut ist
70
responsive webdesign 05 verträge.
© u
nspl
ash
| Bre
athe
rd
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Zusammenfassung / Erwartungen
• Kundendaten
• Agentur / Freiberuflerdaten
• Projektziel
• Deadlines
72
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Vereinbarungen
• Kunde muss die Arbeit überprüfen und Feedback nach einem kurzen Zeitraum geben
• Deadlines gibt es für beide Vertragsparteien, Auftraggeber und Auftragnehmer. Und beide müssen auch
daran gebunden werden.
• Kunde willigt in die Zahlungsbedingungen ein
73
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Design • Erzeugung von „Look-and-feel Designs“ • Erzeugung von flexiblen Layouts welche sich an viele unterschiedliche Geräte und Screen-Grössen
anpassen • Der Design Prozess ist iterativ • Vorwiegender Gebrauch von HTML5 und CSS3, anstatt Mockups von jedem Template • Statische Visuals (Styletiles) werden nur benutzt um das Look-and-Feel anzudeuten
74
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Inhalte und Bilder • Der Kunde ist verantwortlich für die Zulieferung von jeglichen Inhalten • Die Agentur ist nicht für die Auswahl, das Aufbereiten, Konvertieren oder Aufnehmen von • Falls notwendig, kann ein eigenes Angebot dafür erstellt werden
75
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Browsertests • Browsertesting bedeutet nicht, das die Webseite in jedem Browser identisch aussehen muss • Browsertesting bedeutet, sicherzustellen das die User Experience eines Designs muss erlebbar sein auf
einem Device mit bestimmten Möglichkeiten.
76
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Desktop Browsertests • Getestet wird mit folgenden Browsern
• Apple, Safari 6.1.0 • Apple, Chrome 10.0 • …..
• Folgende Browser werden NICHT getestet • Windows, IE, 8.1
77
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Mobile Browsertests • Getestet wird mit folgenden Browsern
• Android 4.1 / Chrome / 6.0.5 • iOS 7.0.x / Safari • xxx / yyy / zzz
• Folgende Browser werden NICHT getestet • Blackberry OS /QNX, Symbian, ... (any Browser)
78
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Change / Feature Requests • Wir können grundsätzlich nicht empfehlen das Projekt auf Basis eines Festpreises abzurechnen.
Der Prozess ist sehr agiler, und Anpassungen vom Kunden sind während des Prozesses gewünscht. Bei einem Festpreis muss für jede Anpassung ein extra Angebot erstellt werden. Die ca. 4-6h Aufwand für jedes Angebot (inkl. Buchhaltung etc.) müssen jeweils mit einkalkuliert werden.
• Im anderen Fall gibt es ein Konzept und ein Pflichtenheft, auf dessen Basis geschätzt und ein Festpreis abgegeben wurde
• Somit wird bei jedem Anpassungswunsch ein neues Angebot erstellt.
79
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Copyright • Der Kunde garantiert das er die Erlaubnis für alle Assets hat, welche er einem für die Integration
zukommen lässt. • Der Kunde hat das alleinige Recht an den erzeugten Elementen, aber die Agentur hat das Recht an der
einzigartigen Kombination daraus • Die Agentur gibt dem Kunden für die Kombination eine Lizenz
80
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign verträge.
Gesetzliches • Keine Programmierleistung ist fehlerfrei. Wir versuchen annähernd fehlerfrei zu arbeiten, aber wir
können nicht haftbar gemacht werden gegenüber dem Kunden oder Dritten, für Schäden, inkl. Umsatzverlusten, Einsparungen oder andere indirekte, sich ergebende oder spezielle Schäden. Auch wenn der Kunde die Agentur darauf aufmerksam gemacht hat.
• Die Agentur behält sich das Recht vor das Projekt zu referenzieren. • Die Agentur kann nicht für Open Source Bugs haftbar gemacht werden.
81
responsive webdesign 06 tools im rwd-workflow.
© u
nspl
ash
| Ale
jand
ro E
scam
illa
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign tools.
RWD-Tools für alle Prozess-Schritte • Adobe Edge Reflow • ThinkinTags • Foundation 4 • Bootstrap • Responsive Patterns (http://
bradfrost.github.com/this-is-responsive/patterns.html)
• Axure (www.axure.com)
• Balsamiq (https://balsamiq.com) • Get Wirefy (http://getwirefy.com (Atomic
Design)) • Typostrap • Markdown • Pandoc • Patternlab (http://patternlab.io/)
83
vielen dank bleiben sie mit uns in verbindung.
© 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
kontakt typovision gmbh.
85
Referent
Sebastian Böttger
Geschäftsführer
typovision GmbH
Kontakt
typovision GmbHLindwurmstr. 10980337 MünchenTelefon +49 89 4520 593-0 Fax +49 89 4520 593-29 E-Mail [email protected] www.typovision.de
Social Media
Twitter www.twitter.com/typovision
Facebook www.facebook.com/typovisionBlog typoblog.de
XING www.xing.com/companies/typovisiongmbhSlideshare www.slideshare.net/typovision
LinkedIn www.linkedin.com/company/2038844
Google+ www.google.com/+TypovisionDe