Más contenido relacionado Similar a Responsive Webdesign für Grafiker & Entscheider (20) Responsive Webdesign für Grafiker & Entscheider2. © 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
4. © 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
5. © 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
6. © 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
7. © 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/
8. © 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
9. © 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, 2010
http://alistapart.com/article/responsive-web-design
1. Ein flexibles Grid
2. Flexible Bilder und Videos
3. Media Queries
10. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
am anfang war ethan.
„Responsive Architecture“
10
ETHAN MARCOTTE May 25, 2010
http://alistapart.com/article/responsive-web-design
11. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
am anfang war ethan.
„Neue Denkweise“
11
ETHAN MARCOTTE May 25, 2010
http://alistapart.com/article/responsive-web-design
12. © 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, 2010
http://alistapart.com/article/responsive-web-design
13. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
Neu?
13
14. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
Nein!
14
15. © 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
16. © 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
17. © 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/
18. © 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/
19. © 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/
20. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
kein trend sondern notwendigkeit.
20
21. © 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
22. © 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
23. © 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/
24. © 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/
Quelle:https://dribbble.com/shots/279619-Responsive-Design
Adaptive
Responsive
25. © 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
26. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
* first
mobile first = content first
26
27. © 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
28. © 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
29. © 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
31. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
31
Konzept
Design
Technische Umsetzung
Deploy
Support
32. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
32
Quelle:http://projectcartoon.com/cartoon/434
33. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
33
Quelle:http://projectcartoon.com/cartoon/434
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
35. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
35
36. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
klassisch.
36
Konzept
Design
Technische Umsetzung
Deploy
Support
37. © 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
38. © 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
39. © 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.
40. © 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
42. © 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
43. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
neuer workflow.
43
Sketch Wireframe
Visual
Design
Prototype Test
44. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
neuer workflow.
44
Sketch
Wireframe
Visual
Design
Prototype
Test
Iteratives Design & Entwicklung
UX, Visual, Dev
Content
Strategy
Content
Planner, UX, Visual, Tech
User
Research
User
Planner, UX
RWD Prototype
Prototype handover to client
UX, Visual, Tech
45. © 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
46. © 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
47. © 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
48. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
planung.
48
Quelle:http://www.bentleymotors.com/en.html
Ziel-
definition
49. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
planung.
49
Quelle:http://www.skoda-auto.de/
Ziel-
definition
50. © 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
51. © 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
52. © 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.“
Bildquelle:iStock
User
Research
53. © 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
54. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider 54
Search
Search
Search
Search
Affiliate
Affiliate
Affiliate
Affiliate
Facebook
Face-
book
Facebook
Face-
book
Display
Display
Display
Display
Retarge
ting
Retarge
ting
Retarget
ing
Retarget
ing
Trigger &
Awareness
Research &
Compare
Conversion
Loyalty &
Retention
User
Research
responsive webdesign workflow
customer journey.
55. © 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
56. © 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
57. © 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 Experience
Marketing
Content
Strategie
Content
Strategy
58. © 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
59. © 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
60. © 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
61. © 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!
Quelle:http://allypalanzi.com/vox.html
Content
Strategy
62. © 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
Quelle:http://de.wikipedia.org/wiki/Periodensystem
Content
Strategy
63. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie.
63
Quelle:http://madebymike.com.au/html5-periodic-table/
Atomic Design
• Zum Erstellen des Moodboards
die einzelnen Elemente
aus der Elementtabelle
nutzen, und so zu Molekülen
und Oragnismen
zusammenbauen…
Content
Strategy
64. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign workflow
content-strategie.
64
Quelle:http://de.slideshare.net/bradfrostweb/atomic-design
Atomic Design
• Zum Erstellen des Moodboards
die einzelnen Elemente
aus der Elementtabelle
nutzen, und so zu Molekülen
und Oragnismen
zusammenbauen…
Content
Strategy
65. © 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
66. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
Proto
typing
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 & Entwicklung
UX, Visual, Dev
67. © 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 & Entwicklung
UX, Visual, Dev
Proto
typing
67
Sketch
Wireframe
Visual
Design
Prototype
Test
68. © 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 & Entwicklung
UX, Visual, Dev
Proto
typing
68
Sketch
Wireframe
Visual
Design
Prototype
Test
70. © 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
72. © 2015 typovision gmbh // responsive webdesign für grafiker und entscheider
responsive webdesign
verträge.
Zusammenfassung / Erwartungen
• Kundendaten
• Agentur / Freiberuflerdaten
• Projektziel
• Deadlines
72
73. © 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
74. © 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
75. © 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
76. © 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
77. © 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
78. © 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
79. © 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
80. © 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
81. © 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
83. © 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
85. © 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 GmbH
Lindwurmstr. 109
80337 München
Telefon +49 89 4520 593-0
Fax +49 89 4520 593-29
E-Mail info@typovision.de
www.typovision.de
Social Media
Twitter www.twitter.com/typovision
Facebook www.facebook.com/typovision
Blog typoblog.de
XING www.xing.com/companies/typovisiongmbh
Slideshare www.slideshare.net/typovision
LinkedIn www.linkedin.com/company/2038844
Google+ www.google.com/+TypovisionDe