Responsive Accessibility in der Praxis
Upcoming SlideShare
Loading in...5
×
 

Responsive Accessibility in der Praxis

on

  • 5,189 views

Vortrag A-Tag 2012 in Wien

Vortrag A-Tag 2012 in Wien

Statistics

Views

Total Views
5,189
Views on SlideShare
3,928
Embed Views
1,261

Actions

Likes
9
Downloads
35
Comments
0

4 Embeds 1,261

http://www.pixelpark.com 1247
https://twitter.com 8
http://campusphere.de 5
http://accessibility_checker.siteimprove.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Accessibility in der Praxis Responsive Accessibility in der Praxis Presentation Transcript

    • Responsive Accessibility in der PraxisBeispiel: Kunsthistorisches Museum Wien - ResponsiveKöln, 25.10.2012
    • 1 Das Kunsthistorische Museum Wien2 Was ist Responsive Web Design3 Kunsthistorisches Museum: Responsive4 Der Viewport5 Fluides Layout6 Fluide Bilder7 Fluide Übergänge - Media Queries
    • Responsive Accessibility in der Praxis1. Beispiel: Kunsthistorisches MuseumWien © pixelpark | 3
    • zählt zu den größten und bedeutendstenMuseen der Welt -Das Kunsthistorische Museum in Wien. © pixelpark | 4
    • All diese Gemälde sind großartig, aberkein einziges ist vollkommen.Thomas Bernhard – Alte Meister. © pixelpark | 5
    • Die Webseite und die App sind nichtvollkommen.Das ist wahr. © pixelpark | 6
    • Responsive Accessibility in der Praxis1.1 Khm – Die iOS App © pixelpark | 7
    • Kunsthistorisches Museum – iOS AppiTunes App Store iTunes App Store Khm iOS App Rezensionen Startseite © pixelpark | 8
    • 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
    • Responsive Accessibility in der Praxis1.2 Kunsthistorisches Museum - DieWebseite © pixelpark | 10
    • http://khm.at |
    • 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
    • Startseite Khm – verschiedene DevicesiPod Touch HP Veer Sony Ericsson Xperia Nokia 500Safari webOS 2 Android 2.3.4 Symbian Belle RefreshiOS 6 © pixelpark | 13
    • Startseite Khm – verschiedene DevicesSamsung Wave Google Nexus S iPad 1Bada Android 4.1.2. iOS 5 / Chrome © pixelpark | 14
    • Kunsthistorisches Museum: ResponsiveWie 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
    • Responsive Accessibility in der Praxis2. Was ist Responsive Web Design © pixelpark | 16
    • Auf einmal geht esums Ganze -Responsive Web Design. © pixelpark | 17
    • Auf einmal geht esums Ganze -Und noch viel mehr. © pixelpark | 18
    • Auf einmal geht es wirklichum Inhalte -Content First & Mobile First. © pixelpark | 19
    • Wer wirklich hip sein will,kann es -Fluides Layout. © pixelpark | 20
    • Fluides Layout © pixelpark | 21
    • Responsive Frameworks - Übersichtsprungmarker.de - http://url.ie/g5oz © pixelpark | 22
    • Responsive Frameworks - Grid 25 23 20 15 10 6 5 2 0 Grid Prozente Pixel EMQuelle: 31 Responsive Frameworks und - Grids © pixelpark | 23
    • 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
    • Responsive Frameworks – Accessibility ProblemeFramework font-size grid width / max-widthTwitter Bootstrap px Default: px Default: 940px Fluid: % Responsive: 1170pxSkeleton px px 960pxFoundation px % 940pxLess Framework px px 992pxAmazium px px 1200px © pixelpark | 25
    • Oh je – jetzt wieder alles in em layouten?Nee – da gibt es Besseres. J |
    • Wir können endlich so locker sein,wie unser Layout -Flex as flex can. J © pixelpark | 27
    • Die Neue FluiditätREM FLEXBOXRoot-Em Flexbox Layout © pixelpark | 28
    • Die neuen Wilden – rem font-sizeFramework font-size grid width / max-width320 and up rem %Gumby rem % 960pxGravity rem % 1140px © pixelpark | 29
    • Inhalte werden endlich fluid -ob Bilder oder Navigation -Fluide Inhalte. © pixelpark | 30
    • Fluide Inhalte skalieren mitoder passen sich neu an1. Bilder2. Videos3. Datentabellen4. Navigationsmechanismen5. Slider, Lightboxen etc. © pixelpark | 31
    • Fluide Bilder © pixelpark | 32
    • Und was können wir mit Media Queriesendlich machen -Fluide Übergänge. © pixelpark | 33
    • Fluide Übergänge © pixelpark | 34
    • Kommt uns das alles nicht bekannt vor? |
    • Wir sagen mal danke an Responsive WebDesign! |
    • Responsive Accessibility3. Praxis: Kunsthistorische Museum Wien © pixelpark | 37
    • Responsive Accessibility2.1 Content First © pixelpark | 38
    • Startseite Khm – Content First & Mobile FirstiPod TouchSafariiOS 6 © pixelpark | 39
    • Responsive Accessibility2.2 Der Viewport © pixelpark | 40
    • Und wenn schon fluid,dann aber auch richtig -width=device-width. © pixelpark | 41
    • Der ViewportDefiniert 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
    • Der Viewport via CSS: @viewportBis 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
    • Startseite Khm – Viewport - Optionenohne width=device-width initial-scale=3 minimum-scale=2 oder / und initial-scale=1 © pixelpark | 44
    • 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-scaleQuelle: 39 CSS-Frameworks und -grids © pixelpark | 45
    • Der Viewport: min/maxWird minimum- und maximum-scale kombiniert auf 1 gesetzt, kann der Nutzer nicht mehrzoomen.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
    • Viewport & System ZoomSystem Zoom user- minimum-scale=1, scalable=no maximum-scale=1iOS (6) System yes yesAndroid (4) Browser yes yesAndroid (2.3) - no noAndroid (2.3.6) Viewport options have no effect (only device-width)Windows Phone (7.5) - no noWebOS (2) Viewport options have no effect (only device-width)Symbian (Belle Refresh) Viewport options have no effect (only device-width)Bada (2) - no noBlackberry OS (5) Browser yes yes © pixelpark | 47
    • Responsive Accessibility2.2 Fluides Layout © pixelpark | 48
    • Fluides Layout mit remMit 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
    • Video: REM-Layout – Kunsthistorisches Museum – mit Zooming |
    • Fluides Layout: rem Browser Supporthttp://caniuse.com/#search=rem © pixelpark | 51
    • Fluides Layout mit Flexbox: BoxenErzeugt 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
    • Fluides Layout mit Flexbox: Boxen-PlatzDann definiert man, welche Boxen mehr Platz brauchen als die anderen in der Reihe oderSpalte – 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
    • Fluides Layout mit Flexbox: UmbrücheSollen 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
    • Fluides Layout mit Flexbox: responsiveObwohl Flexbox-Layout gut skaliert, gibt es Punkte im Layout (Breakpoints), an denen manentweder 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
    • Video: Flexbox-Layout – Kunsthistorisches Museum |
    • Fluides Layout mit Flexbox: ZoomDamit 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
    • Fluides Layout mit Flexbox: Zoomflex-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
    • Video: Flexbox-Layout – 6x-facher Zoom – Kunsthistorisches Museum |
    • Fluides Layout: Flexbox Browser Supporthttp://caniuse.com/#search=flex © pixelpark | 60
    • Fluides Layout : Zooming-VergleichVergleicht 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
    • Responsive Accessibility2.3 Fluide Bilder © pixelpark | 62
    • Fluide Bilder – Standard-MethodeDie Standard-Methode, um inhaltliche Bilder fluid und skalierbar zu machen:img { max-width: 100%; height: auto;} © pixelpark | 63
    • Video: Responsive Images – Kunsthistorisches Museum |
    • Responsive Images: max-widthVorteile 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 srcsetNachteile•  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
    • Adaptive images are the next unsolvedmystery of Responsive Web Design.Bruce Lawson |
    • Responsive Accessibility2.4 Fluide Übergänge – Media Queries © pixelpark | 67
    • Fluide Übergänge: Media QueriesFolgende fluiden Übergänge wurden genutzt und getestet – derzeit kann man rem-Werte nochnicht 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 Einsatzpadding: 0.50rem;@media screen and (min-width: $break-tab) { padding: 0.25rem;} © pixelpark | 68
    • Video: Fluide Übergänge – Khm Responsive |
    • Responsive Accessibility2.5 Ergebnis: Khm Responsive © pixelpark | 70
    • Kunsthistorisches Museum – Startseite Responsive |
    • Kunsthistorisches Museum – Startseite ResponsiveiPod Touch HP Veer Sony Ericsson Xperia Nokia 500Safari webOS 2 Android 2.3.4 Symbian Belle RefreshiOS 6 © pixelpark | 72
    • Kunsthistorisches Museum – Startseite ResponsiveSamsung Wave Google Nexus S iPad 1Bada Android 4.1.2. iOS 5 / Chrome © pixelpark | 73
    • Wir freuen uns auf Ihr Feedback.
    • ImpressumDie in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum derPixelpark AG und unterliegen dem geltenden Urheberrecht. Die ganze oder teilweiseVervielfältigung sowie jede Weitergabe an Dritte ist ohne schriftliche Genehmigung derPixelpark AG nicht gestattet.Sylvia EggerSenior Online DeveloperPixelpark AGCäcilienkloster 2D-50676 Kölnsylvia.egger@pixelpark.comwww.pixelpark.com © pixelpark | 75