responsive webdesign für grafiker & entscheider

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.



4


1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen

1.4 Mobile First / Content First



5


1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen



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

http://de.wikipedia.org/wiki/Responsive_Webdesign


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/

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/



8


1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen



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

http://alistapart.com/article/responsive-web-design



„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 flexibel und reaktionsfähig zu gestalten.

12




responsive webdesign

Neu?

13


responsive webdesign

Nein!

14


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


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


responsive webdesign kein trend sondern notwendigkeit.

17

Quelle: http://opensignal.com/reports/2014/android-fragmentation/

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



22


1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen



responsive webdesign abgrenzungen.

• Responsive vs. Adaptive

• Mobile Apps

23

http://www.elezea.com/2013/11/rwd-content-modules/



responsive webdesign abgrenzungen.

• Responsive vs. Adaptive

• Mobile Apps

24


Quel

le: h

ttps:

//dr

ibbb

le.co

m/s

hots

/279

619-

Resp

onsiv

e-De

sign

Adaptive

Responsive


https://dribbble.com/shots/279619-Responsive-Design



25


1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen



responsive webdesign * first

mobile first = content first

26


responsive webdesign * first.

• Mobil expandiert rasant

• Mobil hilft zu fokussieren

• Mobil bietet erweiterte Fähigkeiten

• Gilt für Planung und Entwicklung

27


responsive webdesign * first.

28

Quelle: http://www.areamobile.de/news/

24862-android-extreme-fragmentierung-aber-das-muss-nicht-schlecht-sein

http://www.areamobile.de/news/24862-android-extreme-fragmentierung-aber-das-muss-nicht-schlecht-sein


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

http://de.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

responsive webdesign 02 der klassische workflow im überblick

© u

nspl

ash

| Cal

eb G

eorg

e


responsive webdesign workflow klassisch.

31

Konzept

Design

Technische Umsetzung

Deploy

Support



32

Quel

le: h

ttp://

proj

ectc

arto

on.co

m/c

arto

on/4

34

http://projectcartoon.com/cartoon/434



33

Quel

le: h

ttp://

proj

ectc

arto

on.co

m/c

arto

on/4

34

http://projectcartoon.com/cartoon/434



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



36

Konzept

Design


Deploy

Support


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



„Using photoshop / fireworks for responsive webdesign ist like bringing a knife to gunfight“

38

Andy Clarke

Quelle: https://twitter.com/lebedoka/status/312123620774264832

https://twitter.com/lebedoka/status/312123620774264832



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.




• 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



42


1.1 Planung

1.2 Content-Strategie

1.3 Iterativer Zylkus Design/Entwicklung


responsive webdesign neuer workflow.

43

Sketch WireframeVisualDesign

Prototype Test


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



45


1.1 Planung




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

• 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

Quel

le: h

ttp://

ww

w.b

entle

ymot

ors.

com

/en.

htm

l

Ziel-definition

http://www.bentleymotors.com/en.html



49

Quel

le: h

ttp://

ww

w.s

koda

-aut

o.de

/

Ziel-definition

http://www.skoda-auto.de/



50

• Gleiches Ziel • Unterschiedliche Strategie

—> Unterschiedliche Zielgruppen müssen unterschiedlich angesprochen werden

Ziel-definition


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


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


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

Facebook

Face-book

Facebook

Face-book

Display

Display

Display

Display

Retargeting

Retargeting

Retargeting

Retargeting

Trigger & Awareness

Research & Compare

Conversion

Loyalty & Retention

User Research

responsive webdesign workflow customer journey.



55


1.1 Planung




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

Content Management

Geschäfts-Strategie

SEO Content-Erstellung

Informations-Architektur

User ExperienceMarketing

Content Strategie

Content Strategy



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

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

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

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

http://allypalanzi.com/vox.html


Atomic Design • Zum Erstellen des Moodboards

die einzelnen Elemente

aus der Elementtabelle

nutzen, und so zu Molekülen

und Oragnismen

zusammenbauen…


62

Quel

le: h

ttp://

de.w

ikip

edia

.org

/wik

i/Per

iode

nsys

tem

Content Strategy

http://de.wikipedia.org/wiki/Periodensystem



63

Quel

le: h

ttp://

mad

ebym

ike.

com

.au/

htm

l5-p

erio

dic-

tabl

e/





und Oragnismen

zusammenbauen…

Content Strategy

http://madebymike.com.au/html5-periodic-table/



64

Quel

le: h

ttp://

de.s

lides

hare

.net

/bra

dfro

stw

eb/a

tom

ic-de

sign





und Oragnismen

zusammenbauen…

Content Strategy

http://de.slideshare.net/bradfrostweb/atomic-design



65


1.1 Planung




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



Prototyping • Klickdummyerstellung mit HTML5 / CSS3 / JS

• führt iterativ zum finalen Layout

• Designer UND Kunde müssen einbezogen

werden


67


Prototyping

67

Sketch

Wireframe

Visual Design

Prototype

Test


Device Testing • Echte Geräte nutzen, keine Simulatoren

• Open Device Labs


68


Prototyping

68

Sketch

Wireframe

Visual Design

Prototype

Test


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 verträge.

Zusammenfassung / Erwartungen

• Kundendaten

• Agentur / Freiberuflerdaten

• Projektziel

• Deadlines

72



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



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



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



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



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



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



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



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



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 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

http://bradfrost.github.com/this-is-responsive/patterns.html

http://www.axure.com

https://balsamiq.com

http://patternlab.io/

vielen dank bleiben sie mit uns in verbindung.


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

mailto:[email protected]

http://www.typovision.de

http://www.twitter.com/_typovision_

http://www.facebook.com/typovision

https://www.xing.com/companies/typovisiongmbh

http://www.slideshare.net/typovision

http://www.linkedin.com/company/2038844

http://google.com/+TypovisionDe

responsive webdesign für grafiker & entscheider

Internet