Culturally Responsive Praxis Personal Philosophy + Everyday Practice in the Classroom.
Responsive Accessibility in der Praxis
-
Upload
sylvia-egger -
Category
Technology
-
view
5.429 -
download
4
description
Transcript of Responsive Accessibility in der Praxis
![Page 1: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/1.jpg)
Responsive Accessibility in der Praxis Beispiel: Kunsthistorisches Museum Wien - Responsive
Köln, 25.10.2012
![Page 2: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/2.jpg)
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
![Page 3: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/3.jpg)
|
Responsive Accessibility in der Praxis
1. Beispiel: Kunsthistorisches Museum Wien
3 © p i x e l p a r k
![Page 4: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/4.jpg)
| | 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.
![Page 5: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/5.jpg)
| | 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.
![Page 6: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/6.jpg)
| | 6 © p i x e l p a r k
Die Webseite und die App sind nicht vollkommen. Das ist wahr.
![Page 7: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/7.jpg)
|
Responsive Accessibility in der Praxis
1.1 Khm – Die iOS App
7 © p i x e l p a r k
![Page 8: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/8.jpg)
| | 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
![Page 9: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/9.jpg)
| |
• 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
© p i x e l p a r k
![Page 10: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/10.jpg)
|
Responsive Accessibility in der Praxis
1.2 Kunsthistorisches Museum - Die Webseite
10 © p i x e l p a r k
![Page 11: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/11.jpg)
|
http://khm.at
![Page 12: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/12.jpg)
| | 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
© p i x e l p a r k
![Page 13: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/13.jpg)
| | 13
Startseite Khm – verschiedene Devices
© p i x e l p a r k
iPod Touch Safari iOS 6
HP Veer webOS 2
Sony Ericsson Xperia Android 2.3.4
Nokia 500 Symbian Belle Refresh
![Page 14: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/14.jpg)
| | 14
Startseite Khm – verschiedene Devices
© p i x e l p a r k
Samsung Wave Bada
Google Nexus S Android 4.1.2.
iPad 1 iOS 5 / Chrome
![Page 15: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/15.jpg)
| |
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
© p i x e l p a r k
![Page 16: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/16.jpg)
|
Responsive Accessibility in der Praxis
2. Was ist Responsive Web Design
16 © p i x e l p a r k
![Page 17: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/17.jpg)
| | 17 © p i x e l p a r k
Auf einmal geht es ums Ganze - Responsive Web Design.
![Page 18: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/18.jpg)
| | 18 © p i x e l p a r k
Auf einmal geht es ums Ganze - Und noch viel mehr.
![Page 19: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/19.jpg)
| | 19 © p i x e l p a r k
Auf einmal geht es wirklich um Inhalte - Content First & Mobile First.
![Page 20: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/20.jpg)
| | 20 © p i x e l p a r k
Wer wirklich hip sein will, kann es - Fluides Layout.
![Page 21: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/21.jpg)
| | 21
Fluides Layout
© p i x e l p a r k
![Page 22: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/22.jpg)
| | 22
Responsive Frameworks - Übersicht
© p i x e l p a r k sprungmarker.de - http://url.ie/g5oz
![Page 23: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/23.jpg)
| |
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
![Page 24: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/24.jpg)
| |
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
![Page 25: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/25.jpg)
| | 25
Responsive Frameworks – Accessibility Probleme
© p i x e l p a r k
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
![Page 26: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/26.jpg)
|
Oh je – jetzt wieder alles in em layouten? Nee – da gibt es Besseres. J
![Page 27: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/27.jpg)
| | 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
![Page 28: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/28.jpg)
| | 28
Die Neue Fluidität
© p i x e l p a r k
Root-Em Flexbox Layout
REM FLEXBOX
![Page 29: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/29.jpg)
| | 29
Die neuen Wilden – rem font-size
© p i x e l p a r k
Framework font-size grid width / max-width
320 and up rem %
Gumby rem %
960px
Gravity
rem
%
1140px
![Page 30: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/30.jpg)
| | 30 © p i x e l p a r k
Inhalte werden endlich fluid - ob Bilder oder Navigation - Fluide Inhalte.
![Page 31: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/31.jpg)
| | 31
Fluide Inhalte skalieren mit oder passen sich neu an
© p i x e l p a r k
1. Bilder
2. Videos
3. Datentabellen
4. Navigationsmechanismen
5. Slider, Lightboxen etc.
![Page 32: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/32.jpg)
| | 32
Fluide Bilder
© p i x e l p a r k
![Page 33: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/33.jpg)
| | 33 © p i x e l p a r k
Und was können wir mit Media Queries endlich machen - Fluide Übergänge.
![Page 34: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/34.jpg)
| | 34
Fluide Übergänge
© p i x e l p a r k
![Page 35: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/35.jpg)
|
Kommt uns das alles nicht bekannt vor?
![Page 36: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/36.jpg)
|
Wir sagen mal danke an Responsive Web Design!
![Page 37: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/37.jpg)
|
Responsive Accessibility
3. Praxis: Kunsthistorische Museum Wien
37 © p i x e l p a r k
![Page 38: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/38.jpg)
|
Responsive Accessibility
2.1 Content First
38 © p i x e l p a r k
![Page 39: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/39.jpg)
| | 39
Startseite Khm – Content First & Mobile First
© p i x e l p a r k
iPod Touch Safari iOS 6
![Page 40: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/40.jpg)
|
Responsive Accessibility
2.2 Der Viewport
40 © p i x e l p a r k
![Page 41: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/41.jpg)
| | 41 © p i x e l p a r k
Und wenn schon fluid, dann aber auch richtig - width=device-width.
![Page 42: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/42.jpg)
| |
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
© p i x e l p a r k
![Page 43: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/43.jpg)
| |
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
© p i x e l p a r k
![Page 44: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/44.jpg)
| | 44
Startseite Khm – Viewport - Optionen
© p i x e l p a r k
ohne width=device-width oder / und initial-scale=1
initial-scale=3 minimum-scale=2
![Page 45: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/45.jpg)
| |
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
![Page 46: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/46.jpg)
| |
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
© p i x e l p a r k
![Page 47: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/47.jpg)
| | 47
Viewport & System Zoom
© p i x e l p a r k
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
![Page 48: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/48.jpg)
|
Responsive Accessibility
2.2 Fluides Layout
48 © p i x e l p a r k
![Page 49: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/49.jpg)
| |
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
© p i x e l p a r k
![Page 50: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/50.jpg)
|
Video: REM-Layout – Kunsthistorisches Museum – mit Zooming
![Page 51: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/51.jpg)
| | 51
Fluides Layout: rem Browser Support
© p i x e l p a r k http://caniuse.com/#search=rem
![Page 52: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/52.jpg)
| |
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
© p i x e l p a r k
![Page 53: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/53.jpg)
| |
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
© p i x e l p a r k
![Page 54: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/54.jpg)
| |
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
© p i x e l p a r k
![Page 55: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/55.jpg)
| |
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
© p i x e l p a r k
![Page 56: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/56.jpg)
|
Video: Flexbox-Layout – Kunsthistorisches Museum
![Page 57: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/57.jpg)
| |
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
© p i x e l p a r k
![Page 58: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/58.jpg)
| |
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
© p i x e l p a r k
![Page 59: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/59.jpg)
|
Video: Flexbox-Layout – 6x-facher Zoom – Kunsthistorisches Museum
![Page 60: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/60.jpg)
| | 60
Fluides Layout: Flexbox Browser Support
© p i x e l p a r k http://caniuse.com/#search=flex
![Page 61: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/61.jpg)
| |
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
© p i x e l p a r k
![Page 62: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/62.jpg)
|
Responsive Accessibility
2.3 Fluide Bilder
62 © p i x e l p a r k
![Page 63: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/63.jpg)
| |
Die Standard-Methode, um inhaltliche Bilder fluid und skalierbar zu machen:
img { max-width: 100%; height: auto;
}
63
Fluide Bilder – Standard-Methode
© p i x e l p a r k
![Page 64: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/64.jpg)
|
Video: Responsive Images – Kunsthistorisches Museum
![Page 65: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/65.jpg)
| |
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
© p i x e l p a r k
![Page 66: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/66.jpg)
|
Adaptive images are the next unsolved mystery of Responsive Web Design. Bruce Lawson
![Page 67: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/67.jpg)
|
Responsive Accessibility
2.4 Fluide Übergänge – Media Queries
67 © p i x e l p a r k
![Page 68: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/68.jpg)
| |
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
© p i x e l p a r k
![Page 69: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/69.jpg)
|
Video: Fluide Übergänge – Khm Responsive
![Page 70: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/70.jpg)
|
Responsive Accessibility
2.5 Ergebnis: Khm Responsive
70 © p i x e l p a r k
![Page 71: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/71.jpg)
|
Kunsthistorisches Museum – Startseite Responsive
![Page 72: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/72.jpg)
| | 72
Kunsthistorisches Museum – Startseite Responsive
© p i x e l p a r k
iPod Touch Safari iOS 6
HP Veer webOS 2
Sony Ericsson Xperia Android 2.3.4
Nokia 500 Symbian Belle Refresh
![Page 73: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/73.jpg)
| | 73
Kunsthistorisches Museum – Startseite Responsive
© p i x e l p a r k
Samsung Wave Bada
Google Nexus S Android 4.1.2.
iPad 1 iOS 5 / Chrome
![Page 74: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/74.jpg)
Wir freuen uns auf Ihr Feedback.
![Page 75: Responsive Accessibility in der Praxis](https://reader036.fdocuments.net/reader036/viewer/2022062419/558cb2ddd8b42a4a7a8b45f5/html5/thumbnails/75.jpg)
| |
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
www.pixelpark.com
75
Impressum
© p i x e l p a r k