22. Juni 2016 – HAW Hamburg
Jonas Hellwig
kulturbanause.de
Webdesigner
Dozent, Autor & Video-Trainer
Schulungsanbieter
Philosophie & Entwicklung
RWD Basics
Flexible Raster
Mobile First & Content First
Rapid Prototyping
Design Systeme
Optimierung
Zukunftsaussichten
Flexibles Layout
Grafiken für alle Display-Qualitäten
Browserspezifische Funktionsweise
Performance-Optimierung
Touch-Screen-Design
etc.
Das Ziel des Users wird erreicht
Das Ziel des Seitenbetreibers wird erreicht
Design ist ein Service
Jeder User wird optimal angesprochen
Eine Website sieht nicht überall gleich aus
Dieses Ziel muss klar kommuniziert werden
Das Layout
Desktop First, moderner Browser etc.
Andere Disziplinen wurden untergeordnet
Platzprobleme auf kleinen Displays
Kompatibilitätsprobleme in alten Browsern
SEO und Performance wurden am Ende optimiert
Statische Layouts führen zu falscher Erwartungshaltung
Nicht responsive
Keine Animationen / Interaktionen
Keine Scrolling-Effekte
Keine realistische Darstellung
Viel Interpretationsspielraum
Zeitaufwändig
Zu detailliert
Kleine Demos und Prototypen
Oder: Zusätzliche Korrekturschleifen
Ästhetik
Code-Qualität
Responsiveness
SEO
Performance
Content
Wir arbeiten mit echten Inhalten
Statische Layouts verschwinden
Es wird früh in den Browser gewechselt
Es wird regelmäßig getestet
Die Denkweise in Geräteklassen und Unterseiten verschwindet
Der Workflow verändert sich
Verkauft euch nicht unter Wert!
Ethan Marcotte – Responsive Design
Flexible Grid + Fluid Images + Media Queries = RWD
Die Technologie »Media Query« definiert einen sog. Breakpoint
Inhalte auf kleinen Geräten entfernen
Mit Media Queries die Displaygrößen abfragen
Verschiedene Bereiche der Seite über zentrale Breakpoints steuern
Responsive Layout: microsoft.com
Adaptive Layout: tagesschau.de
Breakpoints setzen, wenn der Inhalt bzw. das Layout den Breakpoint benötigt!
Positiv-Beispiel: smashingmagazine.com
Negativ-Beispiel: tagesschau.de
Responsive Layouts sind zukunftssicherer (z.B. bei Übersetzungen)
Adaptive → Denkweise in Gerätetypen
Responsive → Denkweise in Modulen
Grobe Layoutansichten werden festgelegt
Spalten-Breiten werden berechnet
Elemente werden mit Zeilen und Spalten im Raster positioniert
Flexibel in der Horizontalen, nicht in der Vertikalen
CSS-Klassen werden angelegt
Media Queries begrenzen den Wirkungsbereich
Class-Attribute werden im HTML-Code zugewiesen
Gleicher Aufbau, ohne die Class-Attribute
Nur mit Präprozessoren sinnvoll umsetzbar
Beispiel Beispiel 2 Beispiel 3
Geeignet für lineare Strukturen
Geeignet für verschachtelte Strukturen
Technisch (Aufbau des CSS-Codes) Beispiel 1 Beispiel 2
Konzeptionell (Denkweise bei der Planung)
Gestalterisch (Weiterführung von mobilen Design-Pattern)
Texte müssen am Anfang vorhanden sein
Andernfalls sinkt entweder die Qualität, oder es steigt der Preis (oder man hat unverschämtes Glück)
Erzeuge möglichst schnell etwas Greifbares. Teste. Optimiere!
Überlege was du testen möchtest!
High-Fidelity/Low-Fidelity
Konzeptionelles Prototyping (Pen/Paper, Axure & Co. )
Technisches Prototyping (Custom, Design-Pattern, Frameworks)
Visuelles Prototyping (Design-Tools)
Weiterentwicklung zum fertigen Produkt
Analyse und Testing während der Entwicklung
wenn:
sie schnell bemerkt werden
sie leicht zu korrigieren sind
Beide Konzepte können zum gleichen Ergebnis führen
Progressive Enhancement vermeidet Fehler
Design in the browser
Style Tiles (Beispiel Beispiel 2)
Frontend Style Guides (Beispiel)
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, SVG etc.
Art Direction und Designer + Frontend-Teams
Fähige Redakteure
CSS Background-Positionierung
Responsive Images (Beispiel 1 Beispiel 2)
Tipp-Flächen und Abstände groß genug definieren
Gesten unterstützen
Navigationen »Touch First« entwickeln (Skizze)
Kompression, Minifiing, Caching, Reduzierung von Requests, Critical CSS etc.
Chrome Dev Tools
Neue Media Queries
Web Components
Slides & Kontakt unter:
https://goo.gl/UQkXiW
Steuerung über die Pfeiltasten.