Suche senden
Hochladen
Responsive Accessibility in der Praxis
•
9 gefällt mir
•
5,520 views
Sylvia Egger
Folgen
Vortrag A-Tag 2012 in Wien
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 75
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Schriften & InDesign
Schriften & InDesign
KochDichTürkisch
Webfonts in der Praxis - Teil 1 -
Webfonts in der Praxis - Teil 1 -
Sylvia Egger
SlideShare Zeitgeist 2010
SlideShare Zeitgeist 2010
Rashmi Sinha
Social Media for Business
Social Media for Business
Presentation Advisors
Responsive Web Design
Responsive Web Design
Connected-Blog
Per Anhalter durch den Cloud Native Stack (Extended Edition) #oop2017
Per Anhalter durch den Cloud Native Stack (Extended Edition) #oop2017
Mario-Leander Reimer
Per Anhalter durch den Cloud Native Stack (extended edition)
Per Anhalter durch den Cloud Native Stack (extended edition)
QAware GmbH
Tipps zur Performanceoptimierung für Liferay Portal
Tipps zur Performanceoptimierung für Liferay Portal
Stefan Hilpp
Empfohlen
Schriften & InDesign
Schriften & InDesign
KochDichTürkisch
Webfonts in der Praxis - Teil 1 -
Webfonts in der Praxis - Teil 1 -
Sylvia Egger
SlideShare Zeitgeist 2010
SlideShare Zeitgeist 2010
Rashmi Sinha
Social Media for Business
Social Media for Business
Presentation Advisors
Responsive Web Design
Responsive Web Design
Connected-Blog
Per Anhalter durch den Cloud Native Stack (Extended Edition) #oop2017
Per Anhalter durch den Cloud Native Stack (Extended Edition) #oop2017
Mario-Leander Reimer
Per Anhalter durch den Cloud Native Stack (extended edition)
Per Anhalter durch den Cloud Native Stack (extended edition)
QAware GmbH
Tipps zur Performanceoptimierung für Liferay Portal
Tipps zur Performanceoptimierung für Liferay Portal
Stefan Hilpp
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Amazee Labs
Mobile Web Apps
Mobile Web Apps
holgerrueprich
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
GFU Cyrus AG
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
Koombea
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Mann beißt Hund Agentur für Kommunikation
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
DNUG e.V.
OpenLaszlo - Advanced RIAs for the OpenWeb
OpenLaszlo - Advanced RIAs for the OpenWeb
Raju Bitter
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
die.agilen GmbH
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
die.agilen GmbH
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
OPEN KNOWLEDGE GmbH
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
Dominik Helleberg
What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...
Sven Jenzer
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
Michael Oeser
Multiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche Post
vbuchenau
Software Archaeology - Raiders of the Lost Code (long)
Software Archaeology - Raiders of the Lost Code (long)
Lars Martin
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Christoph Reinartz
DWX Developer Week 2015 - Microservice architecture applied
DWX Developer Week 2015 - Microservice architecture applied
Ramon Anger
Vortrag HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
rene_peinl
Accessible Javascript - Example Accordion
Accessible Javascript - Example Accordion
Sylvia Egger
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Sylvia Egger
Weitere ähnliche Inhalte
Ähnlich wie Responsive Accessibility in der Praxis
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Amazee Labs
Mobile Web Apps
Mobile Web Apps
holgerrueprich
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
GFU Cyrus AG
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
Koombea
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Mann beißt Hund Agentur für Kommunikation
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
DNUG e.V.
OpenLaszlo - Advanced RIAs for the OpenWeb
OpenLaszlo - Advanced RIAs for the OpenWeb
Raju Bitter
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
die.agilen GmbH
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
die.agilen GmbH
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
OPEN KNOWLEDGE GmbH
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
Dominik Helleberg
What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...
Sven Jenzer
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
Michael Oeser
Multiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche Post
vbuchenau
Software Archaeology - Raiders of the Lost Code (long)
Software Archaeology - Raiders of the Lost Code (long)
Lars Martin
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Christoph Reinartz
DWX Developer Week 2015 - Microservice architecture applied
DWX Developer Week 2015 - Microservice architecture applied
Ramon Anger
Vortrag HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
rene_peinl
Ähnlich wie Responsive Accessibility in der Praxis
(20)
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Mobile Web Apps
Mobile Web Apps
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
OpenLaszlo - Advanced RIAs for the OpenWeb
OpenLaszlo - Advanced RIAs for the OpenWeb
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
Multiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche Post
Software Archaeology - Raiders of the Lost Code (long)
Software Archaeology - Raiders of the Lost Code (long)
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
DWX Developer Week 2015 - Microservice architecture applied
DWX Developer Week 2015 - Microservice architecture applied
Vortrag HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
Mehr von Sylvia Egger
Accessible Javascript - Example Accordion
Accessible Javascript - Example Accordion
Sylvia Egger
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Sylvia Egger
Was ist Barrierefreiheit?
Was ist Barrierefreiheit?
Sylvia Egger
Was ist Barrierefreiheit? Ein Kurztest
Was ist Barrierefreiheit? Ein Kurztest
Sylvia Egger
Wie? Mein WordPress-Theme geht auch barrierefrei!
Wie? Mein WordPress-Theme geht auch barrierefrei!
Sylvia Egger
WordCamp 2010: Twenty Ten barrierefrei?
WordCamp 2010: Twenty Ten barrierefrei?
Sylvia Egger
Was ist Barrierefreiheit? (18.05. 2010)
Was ist Barrierefreiheit? (18.05. 2010)
Sylvia Egger
Was ist Barrierefreiheit (12.05. 2010)
Was ist Barrierefreiheit (12.05. 2010)
Sylvia Egger
2009: eine Tastatur-Odyssee
2009: eine Tastatur-Odyssee
Sylvia Egger
Mehr von Sylvia Egger
(9)
Accessible Javascript - Example Accordion
Accessible Javascript - Example Accordion
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Was ist Barrierefreiheit?
Was ist Barrierefreiheit?
Was ist Barrierefreiheit? Ein Kurztest
Was ist Barrierefreiheit? Ein Kurztest
Wie? Mein WordPress-Theme geht auch barrierefrei!
Wie? Mein WordPress-Theme geht auch barrierefrei!
WordCamp 2010: Twenty Ten barrierefrei?
WordCamp 2010: Twenty Ten barrierefrei?
Was ist Barrierefreiheit? (18.05. 2010)
Was ist Barrierefreiheit? (18.05. 2010)
Was ist Barrierefreiheit (12.05. 2010)
Was ist Barrierefreiheit (12.05. 2010)
2009: eine Tastatur-Odyssee
2009: eine Tastatur-Odyssee
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
11.
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 © 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 sylvia.egger@pixelpark.com www.pixelpark.com © pixelpark | 75
Jetzt herunterladen