Responsive Accessibility in der Praxis

Responsive Accessibility in der Praxis Beispiel: Kunsthistorisches Museum Wien - Responsive

Köln, 25.10.2012

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

|

Responsive Accessibility in der Praxis

1. Beispiel: Kunsthistorisches Museum Wien

3 © p i x e l p a r k

| | 4 © p i x e l p a r k

zählt zu den größten und bedeutendsten Museen der Welt - Das Kunsthistorische Museum in Wien.

| | 5 © p i x e l p a r k

All diese Gemälde sind großartig, aber kein einziges ist vollkommen. Thomas Bernhard – Alte Meister.

| | 6 © p i x e l p a r k

Die Webseite und die App sind nicht vollkommen. Das ist wahr.

|


1.1 Khm – Die iOS App


| | 8

Kunsthistorisches Museum – iOS App

© p i x e l p a r k

iTunes App Store iTunes App Store Rezensionen

Khm iOS App Startseite

| |

•  2010 erstellt •  2011 einmaliges Update •  Nicht mehr funktionstüchtig •  Kaum Bewertungen, negative Meldung und trotzdem kein Update •  Nur für iOS

9

Kunsthistorisches Museum: iOS App


|


1.2 Kunsthistorisches Museum - Die Webseite


|

http://khm.at

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


| | 13

Startseite Khm – verschiedene Devices


iPod Touch Safari iOS 6

HP Veer webOS 2

Sony Ericsson Xperia Android 2.3.4

Nokia 500 Symbian Belle Refresh

| | 14

Startseite Khm – verschiedene Devices


Samsung Wave Bada

Google Nexus S Android 4.1.2.

iPad 1 iOS 5 / Chrome

| |

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

15

Kunsthistorisches Museum: Responsive


|


2. Was ist Responsive Web Design


| | 17 © p i x e l p a r k

Auf einmal geht es ums Ganze - Responsive Web Design.

| | 18 © p i x e l p a r k

Auf einmal geht es ums Ganze - Und noch viel mehr.

| | 19 © p i x e l p a r k

Auf einmal geht es wirklich um Inhalte - Content First & Mobile First.

| | 20 © p i x e l p a r k

Wer wirklich hip sein will, kann es - Fluides Layout.

| | 21

Fluides Layout


| | 22

Responsive Frameworks - Übersicht

© p i x e l p a r k sprungmarker.de - http://url.ie/g5oz

| |

23

6

2

0

5

10

15

20

25

Grid

Prozente Pixel EM

23

Responsive Frameworks - Grid

© p i x e l p a r k Quelle: 31 Responsive Frameworks und - Grids

| |

15

7

3

1 0

2

4

6

8

10

12

14

16

font-size

EM Pixel REM Prozente

24

Responsive Frameworks – font-size

© p i x e l p a r k Quelle: 31 Responsive Frameworks und - Grids

| | 25

Responsive Frameworks – Accessibility Probleme


Framework font-size grid width / max-width

Twitter Bootstrap px Default: px Fluid: %

Default: 940px Responsive: 1170px

Skeleton px px

960px

Foundation

px

%

940px

Less Framework px px 992px

Amazium px px 1200px

|

Oh je – jetzt wieder alles in em layouten? Nee – da gibt es Besseres. J

| | 27 © p i x e l p a r k

Wir können endlich so locker sein, wie unser Layout - Flex as flex can. J

| | 28

Die Neue Fluidität


Root-Em Flexbox Layout

REM FLEXBOX

| | 29

Die neuen Wilden – rem font-size


Framework font-size grid width / max-width

320 and up rem %

Gumby rem %

960px

Gravity

rem

%

1140px

| | 30 © p i x e l p a r k

Inhalte werden endlich fluid - ob Bilder oder Navigation - Fluide Inhalte.

| | 31

Fluide Inhalte skalieren mit oder passen sich neu an


1. Bilder

2. Videos

3. Datentabellen

4. Navigationsmechanismen

5. Slider, Lightboxen etc.

| | 32

Fluide Bilder


| | 33 © p i x e l p a r k

Und was können wir mit Media Queries endlich machen - Fluide Übergänge.

| | 34

Fluide Übergänge


|

Kommt uns das alles nicht bekannt vor?

|

Wir sagen mal danke an Responsive Web Design!

|

Responsive Accessibility

3. Praxis: Kunsthistorische Museum Wien


|


2.1 Content First


| | 39

Startseite Khm – Content First & Mobile First



|


2.2 Der Viewport


| | 41 © p i x e l p a r k

Und wenn schon fluid, dann aber auch richtig - width=device-width.

| |

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

42

Der 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; }

43

Der Viewport via CSS: @viewport


| | 44

Startseite Khm – Viewport - Optionen


ohne width=device-width oder / und initial-scale=1

initial-scale=3 minimum-scale=2

| |

34

28

3 5

11

0

5

10

15

20

25

30

35

40

Viewport

device-width initial-scale user-scalable minimum-scale maximum-scale

45

CSS-Frameworks: Viewport-Nutzung

© p i x e l p a r k Quelle: 39 CSS-Frameworks und -grids

| |

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

46

Der Viewport: min/max


| | 47

Viewport & System Zoom


System Zoom user-scalable=no

minimum-scale=1, 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

|


2.2 Fluides Layout


| |

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;

}

49

Fluides Layout mit rem


|

Video: REM-Layout – Kunsthistorisches Museum – mit Zooming

| | 51

Fluides Layout: rem Browser Support

© p i x e l p a r k http://caniuse.com/#search=rem

| |

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;

}

52

Fluides Layout mit Flexbox: Boxen


| |

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;

}

53

Fluides Layout mit Flexbox: Boxen-Platz


| |

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;

}

54

Fluides Layout mit Flexbox: Umbrüche


| |

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

55

Fluides Layout mit Flexbox: responsive


|

Video: Flexbox-Layout – Kunsthistorisches Museum

| |

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;

}

57

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.

58

Fluides Layout mit Flexbox: Zoom


|

Video: Flexbox-Layout – 6x-facher Zoom – Kunsthistorisches Museum

| | 60

Fluides Layout: Flexbox Browser Support

© p i x e l p a r k http://caniuse.com/#search=flex

| |

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

61

Fluides Layout : Zooming-Vergleich


|


2.3 Fluide Bilder


| |

Die Standard-Methode, um inhaltliche Bilder fluid und skalierbar zu machen:

img { max-width: 100%; height: auto;

}

63

Fluide Bilder – Standard-Methode


|

Video: Responsive Images – Kunsthistorisches Museum

| |

Vorteile •  Einfache, schnelle Lösung •  Nur ein Bild

Nachteile •  Performance •  Qualität •  Bemaßung

Mögliche Lösungen

Verschieden große und / oder hochauflösende Bilder für unterschiedliche Auflösungen: •  picture Element •  img Element mit srcset Derzeit ist noch nicht klar, welche Lösung Standard werden oder ob es mehrere geben wird. Derzeit nur mit Polyfill einsetzbar.

65

Responsive Images: max-width


|

Adaptive images are the next unsolved mystery of Responsive Web Design. Bruce Lawson

|


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

}

68

Fluide Übergänge: Media Queries


|

Video: Fluide Übergänge – Khm Responsive

|


2.5 Ergebnis: Khm Responsive


|

Kunsthistorisches Museum – Startseite Responsive

| | 72




HP Veer webOS 2

Sony Ericsson Xperia Android 2.3.4

Nokia 500 Symbian Belle Refresh

| | 73



Samsung Wave Bada

Google Nexus S Android 4.1.2.

iPad 1 iOS 5 / Chrome

Wir freuen uns auf Ihr Feedback.

| |

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

75

Impressum


Technology

Responsive Accessibility in der Praxis