Responsive Webdesign für Grafiker & Entscheider

responsive webdesign  
für graﬁker und entscheider
typovision gmbh // 2015
©fotolia|goodluz

© 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

01 einführung.

agenda.
4
1.1 Deﬁnition
1.2 Geschichte
1.3 Abgrenzungen
1.4 Mobile First / Content First

agenda.
5
1.1 Deﬁnition
1.2 Geschichte
1.3 Abgrenzungen

deﬁnition.
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

deﬁnition.
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 ﬂexible 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/

agenda.
8
1.1 Deﬁnition
1.2 Geschichte
1.3 Abgrenzungen

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 ﬂexibles Grid
2. Flexible Bilder und Videos
3. Media Queries

„Responsive Architecture“
10

„Neue Denkweise“
11

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 ﬂexibel und
reaktionsfähig zu gestalten.
12

Neu?
13

Nein!
14

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

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

kein trend sondern notwendigkeit.
17
Quelle: http://opensignal.com/reports/
2014/android-fragmentation/

18

19

20

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

agenda.
22
1.1 Deﬁnition
1.2 Geschichte
1.3 Abgrenzungen

abgrenzungen.
• Responsive vs. Adaptive
• Mobile Apps
23
http://www.elezea.com/2013/11/rwd-content-modules/

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

agenda.
25
1.1 Deﬁnition
1.2 Geschichte
1.3 Abgrenzungen

* first
mobile first = content first
26

* ﬁrst.
• Mobil expandiert rasant
• Mobil hilft zu fokussieren
• Mobil bietet erweiterte Fähigkeiten
• Gilt für Planung und Entwicklung
27

* ﬁrst.
28
Quelle: http://
www.areamobile.de/news/
24862-android-extreme-
fragmentierung-aber-das-
muss-nicht-schlecht-sein

* ﬁrst
„The absence of support for @media queries is in fact the ﬁrst @media query“
29
Quelle: http://de.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
BRYAN RIEGER

02 der klassische workﬂow im überblick
©unsplash|CalebGeorge

responsive webdesign workﬂow
klassisch.
31
Konzept
Design
Technische Umsetzung
Deploy
Support

klassisch.
32
Quelle:http://projectcartoon.com/cartoon/434

klassisch.
33
Quelle:http://projectcartoon.com/cartoon/434

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 deﬁnierten Features und Funktionen umgesetzt
34

klassisch.
35

klassisch.
36
Konzept
Design
Deploy
Support

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 Pﬂichtenheft 1
Implementierung 4
Test 8
Produktivnutzung 16

probleme.
„Using photoshop / ﬁreworks for responsive webdesign ist
like bringing a knife to gunﬁght“
38
Andy Clarke
Quelle: https://twitter.com/lebedoka/status/312123620774264832

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.

probleme.
• frühe Projektphase = hohe Schätzunschärfe
• hohe Schätzunschärfe = hohes Projektrisiko
• Unstimmigkeiten im Pﬂichtenheft führen zu  
Fehlern, die oft erst beim Test auffallen, und  
somit zu höheren Kosten
40

03 der neue workﬂow.
©unsplash

agenda.
42
1.1 Planung
1.2 Content-Strategie
1.3 Iterativer Zylkus Design/Entwicklung

neuer workﬂow.
43
Sketch Wireframe
Visual 
Design
Prototype Test

neuer workﬂow.
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

agenda.
45
1.1 Planung

planung.
46
• Stakeholder Matrix (wer entscheidet was)
• Projektziel
• Breakpoints deﬁnieren (Deviceklassen, sehr wichtig!)
• Liste von Devices und Browser die betestet werden sollen (Top 5 / 3)
• bestehende Dokumente analysieren (CI-Manual, Guidelines, Verträge, …)
• Moodboard-Brieﬁng (Look & Feel)
• Vertrag
Rahmen-
bedingungen

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-
deﬁnition

planung.
48
Quelle:http://www.bentleymotors.com/en.html
Ziel-
deﬁnition

planung.
49
Quelle:http://www.skoda-auto.de/
Ziel-
deﬁnition

planung.
50
• Gleiches Ziel
• Unterschiedliche Strategie 
—> Unterschiedliche Zielgruppen müssen  
unterschiedlich angesprochen werden
Ziel-
deﬁnition

personas.
51
Realistischer Name die Persona soll nicht zur Comicﬁgur 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 Entscheidungsﬁndung“
Vorlieben, Abneigungen, Hobbies
evtl. ein Zitat, das einen wichtigen Aspekt der
Persona zum Ausdruck bringt.
User
Research

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

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
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
customer journey.

agenda.
55
1.1 Planung

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

content-strategie.
57
Content
Management
Geschäfts-
Strategie
SEO Content-Erstellung
Informations-
Architektur
User Experience
Marketing
Content
Strategie
Content
Strategy

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

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 ﬁnden
Main nav
Logo Search & Links
Headline
Content
Footer
Slider
Content
Strategy

content-strategie.
60
Content erstellen
• Plain Text
• Markup mit markdown oder ähnlichem
erstellen
• Unterschiedliche Contenttypen identiﬁzieren
• Das Ergebnis dann in HTML konvertieren,
ergibt den Content Dummy
• Beim Erstellen Personas / Customer Journeys
etc. berücksichtigen
Content
Strategy

content-strategie.
61
Moodboard
• Auf dem Moodboard werden die visuellen
Stile und Elemente entwickelt
• Es ﬁnden 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

Atomic Design
• Zum Erstellen des Moodboards 
die einzelnen Elemente  
aus der Elementtabelle  
nutzen, und so zu Molekülen  
und Oragnismen  
zusammenbauen…
content-strategie.
62
Quelle:http://de.wikipedia.org/wiki/Periodensystem
Content
Strategy

content-strategie.
63
Quelle:http://madebymike.com.au/html5-periodic-table/
Atomic Design
und Oragnismen  
zusammenbauen…
Content
Strategy

content-strategie.
64
Quelle:http://de.slideshare.net/bradfrostweb/atomic-design
Atomic Design
und Oragnismen  
zusammenbauen…
Content
Strategy

agenda.
65
1.1 Planung

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
iterativer zyklus.
66
Sketch
Wireframe
Visual 
Design
Prototype
Test
UX, Visual, Dev

Prototyping
• Klickdummyerstellung mit HTML5 / CSS3 / JS
• führt iterativ zum ﬁnalen Layout
• Designer UND Kunde müssen einbezogen
werden
iterativer zyklus.
67
UX, Visual, Dev
Proto
typing
67
Sketch
Wireframe
Visual 
Design
Prototype
Test

Device Testing
• Echte Geräte nutzen, keine Simulatoren
• Open Device Labs
iterativer zyklus.
68
UX, Visual, Dev
Proto
typing
68
Sketch
Wireframe
Visual 
Design
Prototype
Test

schätzen.
Schätzmethoden im RWD-Workﬂow
• 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

verträge.
Zusammenfassung / Erwartungen
• Kundendaten
• Agentur / Freiberuﬂerdaten
• Projektziel
• Deadlines
72

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

verträge.
Design
• Erzeugung von „Look-and-feel Designs“
• Erzeugung von ﬂexiblen 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

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

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

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

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

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 Pﬂichtenheft, auf dessen Basis geschätzt und ein Festpreis
abgegeben wurde
• Somit wird bei jedem Anpassungswunsch ein neues Angebot erstellt.
79

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

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

tools.
RWD-Tools für alle Prozess-Schritte
• Adobe Edge Reﬂow
• 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.

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

Responsive Webdesign für Grafiker & Entscheider

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie Responsive Webdesign für Grafiker & Entscheider

Responsive Webdesign für Grafiker & Entscheider