Responsive Webdesign
Vortrag vom 27.11.2012 in Bremen.
Dozent: Jonas Hellwig | kulturbanause®
Jonas Hellwig
Webdesigner
Autor / Video-Trainer
Dozent
Inhalte
Mobile Lösungen
Die Technik
Design-Pattern
Die Konzeption
Der neue Workflow
Design & Typografie
Schwierige Inhalte
Retina Optimierung
Ergänzende Links
Fixed-, Fluid- & Elastic- Layouts
Adaptive- & Responsive Layouts
Grundlagen: Responsive Webdesign
Tutorial: Media Queries einsetzen
Mobile Evolution
Das Web bisher
Das Web bisher
Lokale Nutzung
Wenige Monitorgrößen
Ähnliche Art der Bedienung
Das Web heute
Das Web heute
Lokale Nutzung
Mobile Nutzung
Duale Nutzung (Second Screen)
Über 3,5 Milliarden Displays mit Web-Content
Mouse-Bedienung
Touch-Bedienung
Spracherkennung
Das Web in Zukunft
2013: Mehr mobile als lokale User
Neue Hardware kommt auf den Markt
User ohne Desktop-Computer
Veränderte Gewohnheiten
Veränderte Erwartungshaltung
Was bedeutet das für Designer/Entwickler?
Lokale User berücksichtigen
Mobile User berücksichtigen
Die Technik kennen
Entwicklungen verfolgen
Zukunftsorientiert & flexibel arbeiten
Alte Denkweisen ablegen
Mobile Lösungen
Sie haben die Wahl
Unabhängige mobile Websites
Native Apps
Web-Apps
Responsive & Adaptive Websites
Unabhängige mobile Websites
Nur online nutzbar
Werden über den Browser aufgerufen
Sind gut vernetzt
Müssen separat gepflegt werden
Basieren auf HTML & CSS
Optimiert für eine bestimmte Displaygröße
Können problemlos aktualisiert werden
Bieten wenig Funktionen
Beispiele
Native Apps
Offline nutzbar
Werden aus App-Stores geladen
Sind schlecht vernetzt
Müssen installiert werden
Optimiert für eine bestimmte Displaygröße
Können monetarisiert werden
Stellen häufig eine bestimmte Funktion bereit
Native Apps
Unabhängiger Content für jede einzelne Plattform
Müssen separat für jede Plattform gepflegt werden
Können nicht problemlos aktualisiert werden
Werden aktiver und länger genutzt
Haben Hardware-Zugriff (Kamera, GPS, Touch-Funktionen, etc.)
Komplexe Programmierung
Beispiele
Web-Apps
Nur online nutzbar
Werden über den Browser genutzt
Sind schlecht vernetzt
Basieren auf HTML & CSS
Unabhängiger Content
Imitieren häufig echte Apps
Müssen separat gepflegt werden
Web-Apps
Optimiert für eine/wenige Displaygrößen
Können nicht monetarisiert werden
Können problemlos aktualisiert werden
Werden bewusster und länger genutzt
Können eingeschränkt auf die Hardware zurückgreifen
Überschneidungen mit mobilen Websites
Beispiele
Adaptive- oder Responsive-Websites
Nur online nutzbar
Werden über den Browser genutzt
Sind sehr gut vernetzt
Basieren auf HTML & CSS
Bieten identischen Inhalt
Müssen nicht separat gepflegt werden
Adaptive- oder Responsive-Websites
Optimiert für jede/mehrere Displaygrößen
Können nicht monetarisiert werden
Können problemlos aktualisiert werden
Können auf wenige Hardware-Funktionen zugreifen
Zukunftssicher
≠ mobile Design
Beispiele
Zusammenfassung
Unabhängige mobile Website
Native App
Web-App
Responsive / Adaptive Website
Die Technik
Was ist überhaupt Responsive Webdesign?
Begriff von Ethan Marcotte erstmals erwähnt
Artikel bei A List Apart, Buch bei A Book Apart
Seine Definition: Flexibles Raster, Flexible Grafiken, Media Queries
Viewport
Sichtbarer Bereich im Browser
Wird begrenzt durch den Falz (Fold)
Wird eingeschränkt durch Browser und Hilfsmittel
Konnte früher zielgruppenspezifisch bestimmt werden
Landscape & Portrait
Viewport wird immer unüberschaubarer
Falz verliert an Bedeutung
Die Layouttypen
Fixed
Fluid
Elastic
Adaptive
Responsive
Fixed Layout
Sehr verbreitet (noch)
Optimiert für bestimmten Viewport
Website hat eine feste Breite
Website verändert sich nicht
Spalten basieren auf Pixelwerten
Vorteile
Unkomplizierte Planung des Rasters
Unkomplizierte Gestaltung
Unkomplizierte Programmierung
Unkomplizierte Inhaltspflege
Nachvollziehbar für den Kunden
Nachteile
Platz wird verschenkt
Fehldarstellung möglich
Kein „echtes“ Responsive Layout möglich
Fluid Layout
Verbreitet in Shops, Magazinen
Optimiert für mehrere Viewports
Flexible Breite
Spalten basieren auf Prozentwerten
Layout hat eine Mindestbreite
Layout hat eine Maximalbreite
Vorteile
Optimale Platznutzung
Es können mehr Inhalte abgebildet werden
"Echtes" Responsive Layout möglich
Nachteile
Komplexe Planung des Rasters
Komplexe Designphase, da nicht abbildbar
Komplexere Programmierung
Flexible Inhalte benötigt
Elastic Layout
Sehr selten
Optimiert für verschiedene Viewports
Website skaliert sich proportional
Spalten und Zeilen basieren auf Prozentwerten
Minimale Skalierung festgelegt
Vorteile
Sehr gute Platznutzung
Inhalte werden so groß wie möglich abgebildet
Responsive Layout möglich
Nachteile
Komplexe Planung des Rasters
Komplexe Designphase, da nicht abbildbar
Komplexere Programmierung
Flexible Inhalte benötigt
Adaptive Layout
Mehrere starre Raster
Mehrere Layoutvarianten
Optimiert für bestimmte Viewports / Geräte
Vorteile
Unkomplizierte Planung
Unkompliziertes Design
Recht unkomplizierte Programmierung
Recht unkomplizierte Pflege der Inhalte
Nachteile
Platzverschwendung in abweichenden Viewports
Mögliche Fehldarstellung
Komplexe Zielgruppenanalyse
Nicht zukunftssicher
Responsive Layout
Mehrere flexible Raster
Mehrere Layoutvarianten
Optimiert für jeden Viewport / alle Geräte
Vorteile
Zukunftssicher
Design & Information steht im Mittelpunkt
Optimale Platznutzung
Nachteile
Komplex in der Planung
Komplex in der Gestaltung
Komplex in der Programmierung
Komplex in der Pflege der Inhalte
Breakpoint
Punkt, an dem das Design umbricht
Design ändert den Aufbau spürbar
Adaptive: Breakpoints orientieren sich am Viewport
Responsive: Breakpoints orientieren sich am Layout
Beispiel | Beispiel | Beispiel | Beispiel
Technisch realisiert über CSS Media Queries
Medientypen & Media Queries
Media Query = Weiterentwicklung des Medientypen
Medientypen fragen Medien ab
Medientypen & Media Queries
Klassische Medientypen in CSS:
<link type="text/css" href="styles.css" media="screen" rel="stylesheet" />
<link type="text/css" href="print.css" media="print" rel="stylesheet" />
Medientypen & Media Queries
Media Queries fragen Medieneigenschaften ab
z.B. Viewport, Display-Breite, Ausrichtung, Farbtiefe, Auflösung etc.
Medientypen & Media Queries
Aufbau von Media Queries:
@media only screen and (max-width: 1050px) {
/* Hier steht der Code */
}
@media only screen and (max-device-width: 480px) {
/* Hier steht der Code */
}
@media only screen and (orientation: landscape) {
/* Hier steht der Code */
}
Medientypen & Media Queries
Zusammenfassung
Die flexibelste Lösung ist ein responsive Layout:
Mehrere Layouts mit flüssigem Raster
Media Queries
Flexible Inhalte
Design-Pattern
Design für Touch-Screens
Größere Elemente
Abstände einhalten
Interaktionen kennzeichnen
Konventionen beachten
Touch-Bedienung einplanen
Layout-Muster
Mostly Fluid
Column Drop
Layout-Shifter
Off-Canvas
Navigations-Muster
Die Navigation umstrukturieren
Beispiel | Beispiel | Beispiel
Technisch unkompliziert
Optisch ansprechend
Benutzerfreundlich
Bietet sich nur für wenige Links an
Kein JavaScript benötigt
Verschwendet Platz
Umwandlung in Selectliste
Bietet sich für viele Links an
Spart Platz
Benutzerfreundlich
JavaScript wird benötigt
Optisch nicht ansprechend
Technisch eher anspruchsvoll
Navigation im Footer
Bietet sich für viele Links an
Kein JavaScript benötigt
Technisch unkompliziert
Optisch ansprechend
Spart Platz im Header
Nicht benutzerfreundlich
Off-Canvas
Beispiel Google Mobile
Bietet sich für viele Links an
Optisch ansprechend
Spart Platz
Benutzerfreundlich
JavaScript / CSS3 wird benötigt
Technisch anspruchsvoll
Multi-Level-Navigationen
Inhalte
Bilder austauschen
Die Konzeption
Die Zielgruppe kennen
Zwei Ansätze die Website zu optimieren
Graceful Degradation
Progressive Enhancement / „Mobile First“
Es muss oft mit Kompromissen gelebt werden
Kompromisse müssen minimiert werden
Graceful Degradation
Graceful Degradation
Optimiert für die Desktop-Nutzung
Viele Grafiken
Eher aufwändiges Design
Komplexe Navigationen
Scripte, Slideshows, Videos etc.
Viel Bandbreite / Performance notwendig
Graceful Degradation
Die Website wird "abgespeckt".
Umbau des Layouts für kleine Displays
Häufig Platzprobleme
Nicht optimierte Navigationen
Nicht optimierte Inhalte
Kompromisse notwendig
Evtl. Probleme mit Performance
Mobile First
Mobile First
Optimiert für kleine Displays
Wenig Grafiken
Flache, simple Navigationen
Inhalte stehen im Mittelpunkt
Wenig Scripte, Videos etc.
Für schwaches Internet optimiert
„Back to the roots“
Mobile First
Die Website wird "aufgeblasen".
Vergrößerung der Seitenelemente
Viel White Space
Häufig minimalistische Layouts
Viel Typografie
Performance-Optimiert
Benutzerfreundliche, relevante Inhalte
Zusammenfassung
Relevante Inhalte
Benutzerfreundliche Strukturen
Performance-Optimierung
Maximale Flexibilität
→ Mobile First Responsive Design
→ Für jedes Projekt prüfen!
Der neue Workflow
Der klassische Webdesign-Workflow
Konzeption
Design
Programmierung
Optimierung
Adaptive Layout
Starres Gestaltungsraster (Konzeption)
Mehrere Layouts (Design)
Media Queries (Programmierung)
Annähernd klassischer Workflow
Verständlicher Einstieg ins mobile Webdesign
Adaptive Layout
Hilfsmittel bei der Konzeption
Designer + Entwickler
Beispiel-Workflow mit Gridpak
Responsive Layout
Flüssiges Gestaltungsraster
Mehrere Layouts
Media Queries
Veränderter Workflow
Schwieriger Einstieg ins mobile Webdesign
Responsive Layout
Deutlich veränderter Workflow:
Evtl. Skizzen
Evtl. Grid-Generatoren (Gridpak)
Prototypen („Rapid Prototyping“) (Beispiel | Beispiel)
Frameworks
Designer = Entwickler
Frameworks & Boilerplates
Achtung! Falsche Begriffe!
Adaptive Frameworks (Beispiel | Beispiel)
Responsive Frameworks (Beispiel | Beispiel | Beispiel)
Prominente Vertreter (Beispiel | Beispiel)
Adobe Dreamweaver
Bad Practise: Mobile Themes
Zusammenfassung
Adaptive Layout:
Klassischer Workflow
Responsive Layout:
Veränderter Workflow
Quizfrage
Welche Größe hat das Photoshop-Layout?
Test & Debug
Design in the Browser
Flexibilität und Interaktionen werden sichtbar
Minimale Code-Basis
Debug-Console des Browsers wird genutzt
Wechsel zwischen Ps, Ai, Fw und Code-Editor
Tools
Design & Typo
Layoutprogramme stoßen an Grenzen
Betrifft Photoshop
Betrifft Fireworks
Betrifft Illustrator
Layouts sind nicht flexibel
Designer muss CSS verstehen
Flexibel gestalten
Skalierbare Grafiken: Vektoren & SVG
CSS3-Grafiken
Endlosmuster
Webfonts
Webfont-Icons
Typografie
Betrachtungsabstände berücksichtigen (Neg.-Beispiel)
Schriften in em / rem angeben
Verhältnisse zwischen Schriften herstellen
Spaltenbreiten / Zeilenlängen beachten
Schriften skalierbar halten
Kontraste optimieren
Schwierige Inhalte
Bilder im Inhaltsbereich
Stehen im HTML-Code
Lassen sich nicht austauschen
Werden skaliert
Führen zu Performanceproblemen
Es existiert keine perfekte Lösung
HTML-Element in der Diskussion
JavaScript-Lösungen vorhanden (Beispiel)
Tabellen im Inhaltsbereich
Sehr unflexibles Element
Verschiedene Lösungen
Tabellen mit CSS umsetzen
Formulare
Formulare so simpel wie möglich aufbauen
HTML5-Formularelemente verwenden
Mobile Endgeräte nutzen die Feldtypen für unterschiedliche Tastaturlayouts
Retina & Hi-dpi
Das Retina-Problem
Gleiche Displaygröße
Mehr Pixel auf gleicher Fläche
Pixelgrafik würde verkleinert dargestellt
Geräte rechnen daher automatisch um
Grafik wird unscharf
Lösungen
SVG-Grafiken (Vektoren)
CSS3
Webfonts / Webfont-Icons
Lösung für Pixelgrafiken
Grafiken in hoher Qualität erstellen
Media Query fragt Auflösung ab
Grafik wird optimal angezeigt
Hoher Aufwand
Große Dateien, auch auf Smartphones
Media Query für Retina-Displays
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#logo {
background-image:url(img/logo-retina.png);
background-size: 150px 50px;
}
}
DANKE
Das war's für heute.
(Wenn du Fragen hast, wäre jetzt der optimale Zeitpunkt …)
jonas@kulturbanause.de
Links zu Responsive Webdesign
Fixed-, Fluid- & Elastic- Layouts
Adaptive- & Responsive Layouts
Grundlagen: Responsive Webdesign
Tutorial: Media Queries einsetzen
Die Präsentation wurde mit reveal.js erstellt, und lediglich gestalterisch leicht modifiziert.