Warum Responsive Web Design?

Responsive Web Design
Graceful Degradation and Progressive Enhancement
Thomas Körner
Seminar Web Engineering für Master-Studenten
(WS 2013/2014)
Betreuer: Michael Krug
Datum: 13.12.2013
Thomas Körner
Responsive Web Design
1
Gliederung
1.
2.
3.
4.
5.
6.
7.
Warum Responsive Web Design?
Konzepte zur Anpassung an versch. Viewports
Graceful Degradation
Progressive Enhancement
Grundstruktur der Website: Layout
Lokale Techníken für responsive Webdesign
Serverseitige Techniken für responsive Webdesign
Thomas Körner
Responsive Web Design
2
Warum Responsive Web Design?
• Unterschiedlichste Geräte greifen auf Website zu
• Geräte unterscheiden sich: Display-Größe, DisplayAuflösung, Netzwerkgeschwindigkeit, Technologie- und
Standardunterstützung, Eingabemethode
Thomas Körner
Responsive Web Design
3
Konzepte zur Anpassung an versch. Viewports
• Mobile Seiten
– eigenständige Seite für mobile Geräte
– meist auf die speziellen Anwendungsfälle
von mobilen Nutzern ausgelegt
• Adaptives Webdesign
– Website für verschiedene Viewports optimiert
– Wechsel an bestimmten Breakpoints
• Responsive Webdesign
– Anpassung durch Skalierung,
Verschiebung, Ausblendung und
Veränderung bestimmter Elemente
an Viewport
Thomas Körner
Responsive Web Design
4
Graceful Degradation - Konzept
• Klassisches Konzept, auch aus anderen Bereichen bekannt
• Vorgehen
1. Entwickeln der Seite nach dem neusten Stand der
Technik → Features, Technologien, Standards
2. Rückfalloptionen für Browser, welche weniger Features
unterstützen → auf ältere/verbreitetere Technologien
zurückgreifen, Funktionsumfang einschränken oder
Funktionen komplett abschalten
Thomas Körner
Responsive Web Design
5
Graceful Degradation – Bewertung und Beispiele
• Vorteile
– schnelle und kostengünstige Entwicklung
– besser als keine Fallback-Mechanismen
– Ideal bei bestehenden Websites
• Nachteile
– Fallback-Methode nicht immer leicht zu finden und zu
implementieren
– hoher Wartungsaufwand
• Beispiele
– alt-Attribut bei Bildern, Tabellen-Layouts, <noscript>Element
Thomas Körner
Responsive Web Design
6
Progressive Enhancement - Konzept
• Vorgehen
1. Inhalt: strukturiertes Markup schreiben (Inhalte
strukturieren und HTML-Grundgerüst bauen)
2. Darstellung: Aussehen durch CSS gestalten
3. Verhalten: Erweiterung/Verbesserung der Funktionen
durch JavaScript
• Achtung: Browser haben unterschiedliche CSS- und
JavaScript-Unterstützung!
• Mobile-First: Inhalte werden zuerst für kleine Bildschirm
konzipiert → Reduzierung auf wesentliche Inhalte und
komplexen Navigationen
Thomas Körner
Responsive Web Design
7
Progressive Enhancement – Bewertung und Beispiele
• Vorteile
– Website von nahezu jedem Gerät benutzbar
– einfachere Integration neuer Technologien/Standards
– Ideal bei Neuentwicklung von Websites
• Nachteile
– höhere Kosten- und Zeitfaktor
• Beispiele
– externe CSS- und JavaScript-Dateien, unobtrusive
JavaScript
Thomas Körner
Responsive Web Design
8
Demo
Thomas Körner
Responsive Web Design
9
Grundstruktur der Website: Layout
Starres Layout
Flüssiges Layout
Elastisches Layout
• Gestaltungsraster
fest (Pixelwerte)
• feste Darstellung
• Gestaltungsraster
variabel (Prozente)
• Darstellung passt
sich Viewport an
• Gestaltungsraster
variabel (em)
• Darstellung passt
sich Schriftgröße
an
• Flüssige und elastische Layouts Grundlage für Responsive Webdesign
• Üblich: Mischformen (Bspw.: variable Spalten, fester Header)
Thomas Körner
Responsive Web Design
10
Lokale Techniken: Viewport
• Viewport = sichtbarer Bereich im Browser
• Viewport-Meta-Tag
– <meta name="viewport" content="width=device-width" />
– weit verbreitet, kein W3C-Standard!
• Viewport CSS-Syntax
– @viewport {width:device-width; orientation: landscape;}
– W3C-Working-Draft-Status
– kaum Browserunterstützung, nur IE10+ und Opera 11+
mit Browser-Prefix
Thomas Körner
Responsive Web Design
12
Lokale Techniken: Media Queries
• CSS-Befehle zum Testen auf Browser-Eigenschaften
• @media [not|only] typ [and] expr { CSS-Befehle }
• @media screen and (min-width: 320px)
{
h1 { color: red; }
}
Thomas Körner
Responsive Web Design
13
Serverseitige Techniken: User-Agent-Auswertung
• Auswertung mittels Script oder mithilfe von Datenbanken
(bspw. WURFL)
• Auslieferung der passend optimierten Website
– Minimierung von Datentransfer
• UA-String kann leicht manipuliert werden
Thomas Körner
Responsive Web Design
14
Serverseitige Techniken: Feature-Erkennung
• Clientseitig
– Browser per JavaScript auf Features testen
– bekannte JS-Bibliothek: Modernizr
• Test auf HTML5 und CSS3-Unterstützung
• Serverseitig
– Resultate per Cookie an Server übermitteln
– Bibliotheken für Modernizr
• Bspw.: Modernizr-Server
Thomas Körner
Responsive Web Design
15
Serverseitige Techniken: RESS
• Responsive Web Design + Server Side Components
→ Kombination aus Responsive Design und serverseitiger
Optimierung
– Grunddesign in mit Responsive Design entwickelt
– Spezielle Elemente durch Server optimiert
Thomas Körner
Responsive Web Design
16
Quellen
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Designing with Progressive Enhancement: Building the Web that Works for Everyone.
By: Todd Parker; Patty Toland; Scott Jehl; Maggie Costello Wachs. New Riders, 2010
Implementing Responsive Design: Building sites for an anywhere, everywhere web.
By: Tim Kadlec. New Riders, 2012
Mobiles Web von Kopf bis Fuß. By: Lyza Danger Gardner; Jason Grigsby. O'Reilly Verlag,
2012
http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/
http://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/
http://blog.kulturbanause.de/2013/08/mobile-first-progressive-enhancement/
http://blog.mosaiq-media.de/online-marketing/2013/03/25/richtig-mobil-adaptive-vs-responsivewebdesign/
http://docs.webplatform.org/wiki/css/atrules/@viewport
http://www.webdesignerdepot.com/2013/08/how-to-build-standards-compliant-responsivedesign-using-viewport/
http://maddesigns.de/RESS
http://ress.io/get-started/
http://modernizr.com/docs/
https://github.com/jamesgpearce/modernizr-server
Thomas Körner
Responsive Web Design
17
Vielen Dank für ihre Aufmerksamkeit!
Thomas Körner
Responsive Web Design
18