Responsive Accessibility in der Praxis
9 gefällt mir5,526 aufrufe
Das Dokument beschreibt die Herausforderungen und Ansätze zur Umsetzung von Responsive Web Design am Beispiel des Kunsthistorischen Museums in Wien. Es werden sowohl die Probleme der aktuellen Website als auch der App angesprochen, die beispielsweise nicht mobil optimiert und nicht barrierefrei sind. Der Text bietet zudem Techniken wie fluides Layout, fluide Bilder und Media Queries zur Verbesserung der Benutzererfahrung auf verschiedenen Geräten.
Responsive Accessibility in der Praxis
- 1. Responsive Accessibility in der Praxis Beispiel: Kunsthistorisches Museum Wien - Responsive Köln, 25.10.2012
- 2. 1 Das Kunsthistorische Museum Wien 2 Was ist Responsive Web Design 3 Kunsthistorisches Museum: Responsive 4 Der Viewport 5 Fluides Layout 6 Fluide Bilder 7 Fluide Übergänge - Media Queries
- 3. Responsive Accessibility in der Praxis 1. Beispiel: Kunsthistorisches Museum Wien © pixelpark | 3
- 4. zählt zu den größten und bedeutendsten Museen der Welt - Das Kunsthistorische Museum in Wien. © pixelpark | 4
- 5. All diese Gemälde sind großartig, aber kein einziges ist vollkommen. Thomas Bernhard – Alte Meister. © pixelpark | 5
- 6. Die Webseite und die App sind nicht vollkommen. Das ist wahr. © pixelpark | 6
- 7. Responsive Accessibility in der Praxis 1.1 Khm – Die iOS App © pixelpark | 7
- 8. Kunsthistorisches Museum – iOS App iTunes App Store iTunes App Store Khm iOS App Rezensionen Startseite © pixelpark | 8
- 9. Kunsthistorisches Museum: iOS App • 2010 erstellt • 2011 einmaliges Update • Nicht mehr funktionstüchtig • Kaum Bewertungen, negative Meldung und trotzdem kein Update • Nur für iOS © pixelpark | 9
- 10. Responsive Accessibility in der Praxis 1.2 Kunsthistorisches Museum - Die Webseite © pixelpark | 10
- 12. Kunsthistorisches Museum Wien • Pixelbasiertes Layout auf 940 Pixel • Keine mobile Optimierung • Schlechte Performance • Sehr bildlastig • Arbeitet mit Grid, aber mit „Divitis“ • Und: nicht barrierefrei © pixelpark | 12
- 13. Startseite Khm – verschiedene Devices iPod Touch HP Veer Sony Ericsson Xperia Nokia 500 Safari webOS 2 Android 2.3.4 Symbian Belle Refresh iOS 6 © pixelpark | 13
- 14. Startseite Khm – verschiedene Devices Samsung Wave Google Nexus S iPad 1 Bada Android 4.1.2. iOS 5 / Chrome © pixelpark | 14
- 15. Kunsthistorisches Museum: Responsive Wie geht das? • Content First & Mobile First • Fluides Layout • Fluide Bilder • Fluide Übergänge (Media Queries) • Mobile Optimierungen z.B.: - Performance verbessern (z.B. Bilder) - Andere Navigationslösung © pixelpark | 15
- 16. Responsive Accessibility in der Praxis 2. Was ist Responsive Web Design © pixelpark | 16
- 17. Auf einmal geht es ums Ganze - Responsive Web Design. © pixelpark | 17
- 18. Auf einmal geht es ums Ganze - Und noch viel mehr. © pixelpark | 18
- 19. Auf einmal geht es wirklich um Inhalte - Content First & Mobile First. © pixelpark | 19
- 20. Wer wirklich hip sein will, kann es - Fluides Layout. © pixelpark | 20
- 21. Fluides Layout © pixelpark | 21
- 22. Responsive Frameworks - Übersicht sprungmarker.de - http://url.ie/g5oz © pixelpark | 22
- 23. Responsive Frameworks - Grid 25 23 20 15 10 6 5 2 0 Grid Prozente Pixel EM Quelle: 31 Responsive Frameworks und - Grids © pixelpark | 23
- 24. Responsive Frameworks – font-size 16 15 14 12 10 8 7 6 4 3 2 1 0 font-size EM Pixel REM Prozente Quelle: 31 Responsive Frameworks und - Grids © pixelpark | 24
- 25. Responsive Frameworks – Accessibility Probleme Framework font-size grid width / max-width Twitter Bootstrap px Default: px Default: 940px Fluid: % Responsive: 1170px Skeleton px px 960px Foundation px % 940px Less Framework px px 992px Amazium px px 1200px © pixelpark | 25
- 26. Oh je – jetzt wieder alles in em layouten? Nee – da gibt es Besseres. J |
- 27. Wir können endlich so locker sein, wie unser Layout - Flex as flex can. J © pixelpark | 27
- 28. Die Neue Fluidität REM FLEXBOX Root-Em Flexbox Layout © pixelpark | 28
- 29. Die neuen Wilden – rem font-size Framework font-size grid width / max-width 320 and up rem % Gumby rem % 960px Gravity rem % 1140px © pixelpark | 29
- 30. Inhalte werden endlich fluid - ob Bilder oder Navigation - Fluide Inhalte. © pixelpark | 30
- 31. Fluide Inhalte skalieren mit oder passen sich neu an 1. Bilder 2. Videos 3. Datentabellen 4. Navigationsmechanismen 5. Slider, Lightboxen etc. © pixelpark | 31
- 32. Fluide Bilder © pixelpark | 32
- 33. Und was können wir mit Media Queries endlich machen - Fluide Übergänge. © pixelpark | 33
- 34. Fluide Übergänge © pixelpark | 34
- 35. Kommt uns das alles nicht bekannt vor? |
- 36. Wir sagen mal danke an Responsive Web Design! |
- 37. Responsive Accessibility 3. Praxis: Kunsthistorische Museum Wien © pixelpark | 37
- 38. Responsive Accessibility 2.1 Content First © pixelpark | 38
- 39. Startseite Khm – Content First & Mobile First iPod Touch Safari iOS 6 © pixelpark | 39
- 40. Responsive Accessibility 2.2 Der Viewport © pixelpark | 40
- 41. Und wenn schon fluid, dann aber auch richtig - width=device-width. © pixelpark | 41
- 42. Der Viewport Definiert wie der Nutzer die Webseite auf Mobile benutzen kann. Man kann den Nutzer dabei leider sukzessiv einschränken: • width=device-width • initial-scale=1 • minimum-scale • maximum-scale • user-scalable=no © pixelpark | 42
- 43. Der Viewport via CSS: @viewport Bis dato nur in Opera Mobile und IE10. // viewport @-o-viewport { width: device-width; //zoom: 1; //min-zoom: 1; //max-zoom: 1; //user-zoom: fixed; @-ms-viewport { width: device-width; } @viewport { width: device-width; } © pixelpark | 43
- 44. Startseite Khm – Viewport - Optionen ohne width=device-width initial-scale=3 minimum-scale=2 oder / und initial-scale=1 © pixelpark | 44
- 45. CSS-Frameworks: Viewport-Nutzung 40 34 35 30 28 25 20 15 11 10 5 5 3 0 Viewport device-width initial-scale user-scalable minimum-scale maximum-scale Quelle: 39 CSS-Frameworks und -grids © pixelpark | 45
- 46. Der Viewport: min/max Wird minimum- und maximum-scale kombiniert auf 1 gesetzt, kann der Nutzer nicht mehr zoomen. Ist sich ein Framework ganz unsicher, findet man gerne das ganze Paket: <meta name="viewport" content=“ width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1“> © pixelpark | 46
- 47. Viewport & System Zoom System Zoom user- minimum-scale=1, scalable=no maximum-scale=1 iOS (6) System yes yes Android (4) Browser yes yes Android (2.3) - no no Android (2.3.6) Viewport options have no effect (only device-width) Windows Phone (7.5) - no no WebOS (2) Viewport options have no effect (only device-width) Symbian (Belle Refresh) Viewport options have no effect (only device-width) Bada (2) - no no Blackberry OS (5) Browser yes yes © pixelpark | 47
- 48. Responsive Accessibility 2.2 Fluides Layout © pixelpark | 48
- 49. Fluides Layout mit rem Mit der Root-Einheit rem kann man wie mit Pixel layouten und das Layout skaliert wie mit em- Werten. Als Fallback setzt man derzeit noch Pixel. html { font-size: 100%; } body { font-size: 16px; font-size: 1rem; } © pixelpark | 49
- 50. Video: REM-Layout – Kunsthistorisches Museum – mit Zooming |
- 51. Fluides Layout: rem Browser Support http://caniuse.com/#search=rem © pixelpark | 51
- 52. Fluides Layout mit Flexbox: Boxen Erzeugt ein Layout ohne Floats – flexbile Boxen. J Zuerst definiert man, welche Elemente Boxen erzeugen sollen - display: flex: Beispiel: Teaserboxen, Suchfeld – Metanavigation – Sprachwahl. // horizontal items .header-content-2, #searchform, .dur-content-box { display: -webkit-flex; display: -moz-flex; display: -o-flex; display: flex; } © pixelpark | 52
- 53. Fluides Layout mit Flexbox: Boxen-Platz Dann definiert man, welche Boxen mehr Platz brauchen als die anderen in der Reihe oder Spalte – flex: 1: Beispiel: Hauptnavigation (mainnav) braucht mehr Platz als Logo rechts. .metanav-box, .mainnav, #search, .slides h3, .slides .details, .footer-nav, footer p { -webkit-flex: 1; -moz-flex: 1; -o-flex: 1; flex: 1; } © pixelpark | 53
- 54. Fluides Layout mit Flexbox: Umbrüche Sollen die Boxen über mehrere Zeilen laufen – flex-wrap: wrap. Beispiel: Teaserboxen .main-teaser, .sub-teaser, aside, .footer-nav { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } © pixelpark | 54
- 55. Fluides Layout mit Flexbox: responsive Obwohl Flexbox-Layout gut skaliert, gibt es Punkte im Layout (Breakpoints), an denen man entweder eine andere Boxen-Anordnung oder keine Boxen haben möchte: Beispiel: Smartphone keine Teaserboxen nebeneinander $break-small: 362px; @media screen and (min-width: $break-small) { .main-teaser, .sub-teaser { display: -webkit-flex; display: -moz-flex; display: -o-flex; display: flex; }} © pixelpark | 55
- 56. Video: Flexbox-Layout – Kunsthistorisches Museum |
- 57. Fluides Layout mit Flexbox: Zoom Damit der Browser-Zoom (z.B. 6-fach Zoom) auch mit Flexbox-Layout gut funktioniert, ist flex-wrap: wrap wichtig: .main-teaser, .sub-teaser, aside, .footer-nav { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } © pixelpark | 57
- 58. Fluides Layout mit Flexbox: Zoom flex-wrap: wrap ist dafür zuständig, dass: • Lange Zeilen bei Bedarf umgebrochen werden (multi-line) • Beim Zoomen des Nutzers Inhalte sich neu anordnen und nichts abgeschnitten wird. © pixelpark | 58
- 59. Video: Flexbox-Layout – 6x-facher Zoom – Kunsthistorisches Museum |
- 60. Fluides Layout: Flexbox Browser Support http://caniuse.com/#search=flex © pixelpark | 60
- 61. Fluides Layout : Zooming-Vergleich Vergleicht man REM-Layout und Flexbox-Layout beim Zoomen: • REM-Layout hat die typischen Effekte, Inhalte beim Zoomen, nach unten zu reihen (wie im EM-Layout) • Flexbox-Layout entscheidet aufgrund der Konfiguration genau, wo Inhalte nach unten gereiht werden. Gewinner: Flexbox-Layout © pixelpark | 61
- 62. Responsive Accessibility 2.3 Fluide Bilder © pixelpark | 62
- 63. Fluide Bilder – Standard-Methode Die Standard-Methode, um inhaltliche Bilder fluid und skalierbar zu machen: img { max-width: 100%; height: auto; } © pixelpark | 63
- 64. Video: Responsive Images – Kunsthistorisches Museum |
- 65. Responsive Images: max-width Vorteile Mögliche Lösungen • Einfache, schnelle Lösung Verschieden große und / oder • Nur ein Bild hochauflösende Bilder für unterschiedliche Auflösungen: • picture Element • img Element mit srcset Nachteile • Performance Derzeit ist noch nicht klar, welche Lösung • Qualität Standard werden oder ob es mehrere geben wird. • Bemaßung Derzeit nur mit Polyfill einsetzbar. © pixelpark | 65
- 66. Adaptive images are the next unsolved mystery of Responsive Web Design. Bruce Lawson |
- 67. Responsive Accessibility 2.4 Fluide Übergänge – Media Queries © pixelpark | 67
- 68. Fluide Übergänge: Media Queries Folgende fluiden Übergänge wurden genutzt und getestet – derzeit kann man rem-Werte noch nicht in Media Queries einsetzen: // Media Queries $break-small: 362px; // Fluide Größe (u.a. iPhone) $break-tab: 768px; // Tablet (u.a. iPad) $break-desk: 900px; // Fluide Größe // Media Queries im Einsatz padding: 0.50rem; @media screen and (min-width: $break-tab) { padding: 0.25rem; } © pixelpark | 68
- 69. Video: Fluide Übergänge – Khm Responsive |
- 70. Responsive Accessibility 2.5 Ergebnis: Khm Responsive © pixelpark | 70
- 71. Kunsthistorisches Museum – Startseite Responsive |
- 72. Kunsthistorisches Museum – Startseite Responsive iPod Touch HP Veer Sony Ericsson Xperia Nokia 500 Safari webOS 2 Android 2.3.4 Symbian Belle Refresh iOS 6 © pixelpark | 72
- 73. Kunsthistorisches Museum – Startseite Responsive Samsung Wave Google Nexus S iPad 1 Bada Android 4.1.2. iOS 5 / Chrome © pixelpark | 73
- 74. Wir freuen uns auf Ihr Feedback.
- 75. Impressum Die in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum der Pixelpark AG und unterliegen dem geltenden Urheberrecht. Die ganze oder teilweise Vervielfältigung sowie jede Weitergabe an Dritte ist ohne schriftliche Genehmigung der Pixelpark AG nicht gestattet. Sylvia Egger Senior Online Developer Pixelpark AG Cäcilienkloster 2 D-50676 Köln [email protected] www.pixelpark.com © pixelpark | 75