RWD

Übersicht

	Classic	Responsive
First	Layout Page-Design Design = Layout = Content	Semantic Content (* Mobile)
Internet	als Layoutmedium (analog Print: Coverdesign)	als Informationsmedium (analog Buchinhalt: Gliederung)
Sicherheit durch	Design Dokument	Schnelle Feedbacks & Teamwork
Content	= Design = Layout	unabhängig von Design & Layout
Design	Page Design & Graceful Degradation	Module Design: Atomic WebDesign mit StyleTiles Mobile First & Progressive Enhancement
Layout	Statisch	Dynamisch
Phase 1	Ziele & Strategie & Konzeption	Ziele & Strategie & Konzeption
Phase 2		Content Strategy PIM Strategy -> Implementierung
Phase 3	Design: Vom Wireframe zum Photoshop-Design	Design + Coding + Testing: Mobile
Phase 4	Coding	Design + Coding + Testing: 2. Screen
Phase 5	Testing	Design + Coding + Testing: 3. Screen
Phase 6	Retour	Design + Coding + Testing: 4. Screen
Prinzip	Do not fail!	Fail fast!

Content Choreography

• Inhalte unabhängig vom HTML-Markup anordnen
• Das Markup selbst bleibt unverändert
• Sehr mächtig in Kombination mit RESS etc.

Mobile First

• Mobile First erleichert die Priorisierung von Inhalten
• Wir können prüfen ob die HTML-Struktur semantisch sinnvoll ist
• Einziger Nachteil: unsere Sichtweise muss verändert werden

RESS

• RESS = Reponsive Design + Server Side Components
• Robustes Reponsive Design
• Optimierte, ausgetauschte Inhalte durch serverseitige Abfrage

Workflow

	Klassischer Workflow	RWD Workflow
Nachteile	Überflüssige Arbeit (z.B. viele Layouts) Falsche Erwartungshaltung beim Kunden durch statische Grafiken Flexible Layouts, Interaktionen, Animation lassen sich schlecht darstellen Eine fehlerhafte Planung führt zu aufwändigen Korrekturen Strukturelle oder funktionelle Änderungen haben oft Auswirkungen auf das Design, das führt zu doppelten Korrekturschleifen Die User Experience (z.B. die Benutzung per Touch-Screen) kann schlecht optimiert werden Der klassische Workflow ist langsam, unflexibel und somit teuer	Designer, Entwickler und Agenturen müssen umdenken Designer und Entwickler müssen sehr gut zusammenarbeiten oder sind im Idealfall ein und dieselbe Person Die Anforderungen an den Kunden steigen
Vorteile	Wir haben uns an diesen Ablauf gewöhnt Ein Projekt kann linear bearbeitet werden, einzelne Abteilungen oder Mitarbeiter arbeiten nacheinander an verschiedenen Bereichen der Website Der Workflow ist auch für Außenstehende leicht vorstellbar und anschaulich zu präsentieren	Das flexible Design, Animationen und Interaktionen lassen sich bereits in einer frühen Projektphase perfekt abbilden Das Design und die Struktur folgt den Anforderungen des Inhalts (Form follows Function) Fehler in der Konzeption werden frühzeitig (im Prototypen) erkannt und können behoben werden Design und Funktion werden Anfangs getrennt bearbeitet und können sich daher nicht gegenseitig negativ beeinflussen. Der responsive Workflow ist schnell – Design und Code können parallel bearbeitet werden.

Quellen

• http://media.kulturbanause.de/blog/2014/03/mtc2014-slides-content-choreography/index.html#/1
• http://blog.kulturbanause.de/2013/06/workflow-responsive-web-design-prototyping/