Responsive Web Design Graceful Degradation and Progressive Enhancement

Transkript

1 Graceful Degradation and Progressive Enhancement Seminar Web Engineering für Master-Studenten (WS 2013/2014) Betreuer: Michael Krug Datum:

2 Gliederung 1. Warum? 2. Konzepte zur Anpassung an versch. Viewports 3. Graceful Degradation 4. Progressive Enhancement 5. Grundstruktur der Website: Layout 6. Lokale Techníken für responsive Webdesign 7. Serverseitige Techniken für responsive Webdesign 2

3 Warum? Unterschiedlichste Geräte greifen auf Website zu Geräte unterscheiden sich: Display-Größe, Display- Auflösung, Netzwerkgeschwindigkeit, Technologie- und Standardunterstützung, Eingabemethode 3

4 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 4

5 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 5

6 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 6

7 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 7

8 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 8

9 Demo 9

10 Grundstruktur der Website: Layout Starres Layout Gestaltungsraster fest (Pixelwerte) feste Darstellung Flüssiges Layout Gestaltungsraster variabel (Prozente) Darstellung passt sich Viewport an Elastisches Layout 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) 10

11 Lokale Techniken: Viewport Viewport = sichtbarer Bereich im Browser Viewport-Meta-Tag <meta name="viewport" content="width=device-width" /> weit verbreitet, kein W3C-Standard! Viewport {width:device-width; orientation: landscape;} W3C-Working-Draft-Status kaum Browserunterstützung, nur IE10+ und Opera 11+ mit Browser-Prefix 12

12 Lokale Techniken: Media Queries CSS-Befehle zum Testen auf [not only] typ [and] expr { CSS-Befehle screen and (min-width: 320px) { h1 { color: red; } } 13

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 14

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 15

15 Serverseitige Techniken: RESS + Server Side Components Kombination aus Responsive Design und serverseitiger Optimierung Grunddesign in mit Responsive Design entwickelt Spezielle Elemente durch Server optimiert 16

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,

17 Vielen Dank für ihre Aufmerksamkeit! 18