Responsive Workflow
Jonas Hellwig|kulturbanause®
24. März 2014, Bremen
Jonas Hellwig
Webdesigner (Illustration, Design, Front-End)
Dozent, Autor & Video-Trainer
Blogger @ blog.kulturbanause.de
Inhalte
Veränderungen erkennen
Planung
Prototyping
Design
Testing
Workflow-Optimierung
Veränderungen erkennen
Was ist responsive Design?
Bild: elezea.com
Responsive Design
Flexibles Layout
Grafiken für alle Display-Qualitäten
Browserspezifische Funktionsweise
Performance-Optimierung
Touch-Screen-Design
etc.
Unser Anspruch
Das Ziel des Users wird erreicht
Das Ziel des Seitenbetreibers wird erreicht
Jeder User wird optimal angesprochen
Design ist ein Service
Die Konsequenz
Websites sehen nicht überall gleich aus (1)
Dieses Ziel muss klar kommuniziert werden
RWD ist kein Zusatz-Feature!
Das Web war immer schon flexibel
Beispiel: HTML-Markup ohne CSS
Dann kamen die Designer
Designer wollen Kontrolle
Das flexible Medium wurde statisch
Beispiel: Planet Sports
Früher war alles besser anders
Bildschirme waren ähnlich groß
Es gab nur wenige Browser
Websites waren simpel
Der traditionelle Workflow
Traditionelle Aufgaben des Designers
Traditionelle Korrekturphase
Designer findet einen Fehler → Designer meldet den Fehler → Entwickler hat Rückfragen → Entwickler korrigiert den Fehler → Designer überprüft die Korrektur → Fehler ist behoben.
Status Quo
Unzählige Displaygrößen
Sehr viele Browser/Apps
Websites sind viel interaktiver
Technische Lösungen
[Mobile Website]
Responsive Design
Adaptive Design
RESS
Der tradionelle Workflow ist ineffektiv
Die Planung ist fehleranfällig
Layouts sind nicht flexibel
Der Aufbau ist zu linear
Entscheidungen müssen zum falschen Zeitpunkt getroffen werden
Probleme in der Konzeption
Mockups sind statisch
Mockups sind zeitaufwändig
Diskussionen erzeugen Missverständnisse
Mitarbeiter arbeiten nacheinander
Fehler sind nicht vorgesehen
Probleme mit Photoshop
Photoshop ist begrenzt
Photoshop ist zeitintensiv
Viele einzelne Layouts kosten Zeit
Korrekturen müssen mehrfach umgesetzt werden
Verkauft euch nicht unter Wert!
Statische Layouts zeigen
einen fiktiven Browser,
keine Interaktionen,
keine Flexibilität
und keine Animation.
Der moderne Workflow
Moderne Aufgaben des Designers
Moderne Korrekturphase
Der Designer findet einen Fehler und korrigiert ihn.
Design und Code wachsen zusammen
Bestehende Tools haben sich verändert (CSS-Export etc.)
Wir gestalten mit dem Code
Neue Tools sind entstanden (z. B. Reflow, Wirefy, Frameworks)
Wir nutzen diverse Tools in Kombination
Planung
RWD-Definition von Ethan Marcotte
Flüssiges Gestaltungsraster
Flexible Medieninhalte
Media Queries
Layout-Typen
Es gibt drei klassische Layout-Typen
Fixed Layout
Beispiel Planet Sports
Fluid Layout
Beispiel W3C
Elastic Layout
Beispiel 2012 Deconstruct
In der Praxis: Kombinationen
Beispiel: Smashing Magazine
Breakpoints & Media Queries
Die Technologie Media Query definiert einen sog. Breakpoint.
Mobile First Code
Der CSS-Code wird umgedreht
Media Queries werden mit (min-width)-Angaben geschrieben
Effizienterer Code
Multi-Screen Layout-Typen
Es gibt zwei verschiedene
Adaptive Layout
Beispiel Tagesschau
Responsive Layout
Beispiel Microsoft
Best Practise?
Responsive Layout verwenden
Kern-Zielgruppe besonders berücksichtigen
Gestaltungsraster
Traditionelle Websites nutzen 1 Raster
Siehe: 960.gs
Responsive Websites nutzen mehrere Raster
Breakpoints markieren den Umbruch
Siehe: Gridpak, Reflow
Raster im CSS-Code
Das Raster wird geplant
Mögliche Element-Breiten werden berechnet
Globale CSS-Klassen werden definiert
Elemente werden im Raster positioniert
Vergleiche zu Frameworks
Rapid Prototyping
Erzeuge möglichst schnell etwas Greifbares
Teste
Optimiere
Prototyping mit Reflow
Frameworks
Frameworks helfen uns bei der Erstellung von Prototypen
Wenn wir sauber arbeiten können wir den Prototypen zur
fertigen Website weiterentwickeln
Vorteile von Frameworks
Sie beschleunigen den Workflow
Sie vereinfachen die Teamarbeit
Sie wurden bereits getestet
Nachteile von Frameworks
Oft überdimensioniert
Oft nicht perfekt
Anspruchsvoll
Frameworks auswählen
Übrigens: Fehler sind gewünscht
Aber:
sie müssen schnell bemerkt werden
sie müssen leicht zu korrigieren sein
Content First, Mobile First
Mobile First Code
Mobile First Content / Konzept (1, 2)
Mobile First Workflow
Feature Detection
Graceful Degradation
vs.
Progressive Enhancement
Beide Konzepte können zum gleichen Ergebnis führen
Progressive Enhancement vermeidet Fehler
Mobile First + Progressive Enhancement
Wir planen den Inhalt
Wir starten mit wenig Platz und wenig Funktionen
Wir erweitern das Layout
Wir fügen Funktionen hinzu
Design
Layout-Driven oder Usability-Driven?
Häufiger Fehler: Typo
Häufiger Fehler: Aufbau
Modulares Design
Ein Interface ist die Summe diverser Einzelteile
» We’re not designing pages. We’re designing systems of components. «
– Stephan Hay
Elemente
Kombinationen
Module
Templates
Seiten
» Tiny Bootstraps, for Every Client «
– Dave Rupert
Content Inventory
Sehr hilfreich bei einem Redesign
Inhalte werden in Module aufgeteilt
Inhalte werden bewertet
Wiederkehrende Muster werden leicht erkannt
Style Tiles / Style Boards
Hilfsmittel in der Kreativ-Phase
Hilft beim Erzeugen des Looks
Design-Module werden ausgewählt
Verschiedene Stilrichtungen werden verglichen
Style Guides
Dokumentation der Designs
Muss interaktiv sein!
Der Look von RWD
Ähnlicher Look
Ähnlicher Aufbau
Woran liegt das?
Frontend-Teams bearbeiten das Projekt
Klassische Designer haben einen geringen Anteil
Der Design-Ansatz ist wenig künstlerisch
Frontend-Teams arbeiten Technologie getrieben
Beispiel: Frameworks, Webfont-Icons, Flat Design etc.
Testing
Browser
Responsive Inspector
Nachteile bei Tests am Computer
Abweichende Auflösung
Falsche Font-Family/Font-Rendering
Kein meta-viewport
Falscher Betrachtungsabstand
Kein Touch-Screen
Fehlerhafte Ergebnisse bei Feature-Detection
Real Device Testing
Edge Inspect
Ghost Lab
ODL
Workflow-Optimierung
Der Photoshop Generator
Sass & Co.
Keine Panik!
Inhalte & Usability in den Mittelpunkt rücken
Alle Displaygrößen im Blick behalten
Das ganze Team einbinden
Schnell in den Browser wechseln
Frühestmöglich testen und optimieren
Fehler zulassen
Den Workflow an das Projekt anpassen
Danke Bremen!
blog.kulturbanause.de