SlideShare ist ein Scribd-Unternehmen logo
1 von 75
Downloaden Sie, um offline zu lesen
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




                                         © pixelpark   |   3
zählt zu den größten und bedeutendsten
Museen der Welt -

Das Kunsthistorische Museum in Wien.




                                   © pixelpark   |   4
All diese Gemälde sind großartig, aber
kein einziges ist vollkommen.

Thomas Bernhard – Alte Meister.




                                    © pixelpark   |   5
Die Webseite und die App sind nicht
vollkommen.

Das ist wahr.




                                      © pixelpark   |   6
Responsive Accessibility in der Praxis

1.1 Khm – Die iOS App




                                         © pixelpark   |   7
Kunsthistorisches Museum – iOS App




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

1.2 Kunsthistorisches Museum - Die
Webseite




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




iPod Touch   HP Veer       Sony Ericsson Xperia   Nokia 500
Safari       webOS 2       Android 2.3.4          Symbian Belle Refresh
iOS 6



                                                            © pixelpark   |   13
Startseite Khm – verschiedene Devices




Samsung Wave   Google Nexus S   iPad 1
Bada           Android 4.1.2.   iOS 5 / Chrome




                                                 © pixelpark   |   14
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
Responsive Accessibility in der Praxis

2. Was ist Responsive Web Design




                                         © pixelpark   |   16
Auf einmal geht es
ums Ganze -

Responsive Web Design.




                         © pixelpark   |   17
Auf einmal geht es
ums Ganze -

Und noch viel mehr.




                      © pixelpark   |   18
Auf einmal geht es wirklich
um Inhalte -

Content First & Mobile First.




                                © pixelpark   |   19
Wer wirklich hip sein will,
kann es -

Fluides Layout.




                              © pixelpark   |   20
Fluides Layout




                 © pixelpark   |   21
Responsive Frameworks - Übersicht




sprungmarker.de - http://url.ie/g5oz   © pixelpark   |   22
Responsive Frameworks - Grid

 25                                   23


 20


 15


 10
                                                       6
  5
                                                           2

  0
                                                   Grid


                   Prozente                    Pixel           EM




Quelle: 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 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
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ät



REM           FLEXBOX
Root-Em       Flexbox Layout




                               © pixelpark   |   28
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
Inhalte werden endlich fluid -
ob Bilder oder Navigation -

Fluide Inhalte.




                                 © pixelpark   |   30
Fluide Inhalte skalieren mit
oder passen sich neu an
1.   Bilder

2.   Videos

3.   Datentabellen

4.   Navigationsmechanismen

5.   Slider, Lightboxen etc.




                               © pixelpark   |   31
Fluide Bilder




                © pixelpark   |   32
Und was können wir mit Media Queries
endlich machen -

Fluide Übergänge.




                                  © pixelpark   |   33
Fluide Übergänge




                   © pixelpark   |   34
Kommt uns das alles nicht bekannt vor?




                                         |
Wir sagen mal danke an Responsive Web
Design!




                                        |
Responsive Accessibility

3. Praxis: Kunsthistorische Museum Wien




                                  © pixelpark   |   37
Responsive Accessibility

2.1 Content First




                           © pixelpark   |   38
Startseite Khm – Content First & Mobile First




iPod Touch
Safari
iOS 6



                                                © pixelpark   |   39
Responsive Accessibility

2.2 Der Viewport




                           © pixelpark   |   40
Und wenn schon fluid,
dann aber auch richtig -

width=device-width.




                           © pixelpark   |   41
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
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
Startseite Khm – Viewport - Optionen




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




Quelle: 39 CSS-Frameworks und -grids                                                      © pixelpark   |   45
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
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
Responsive Accessibility

2.2 Fluides Layout




                           © pixelpark   |   48
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
Video: REM-Layout – Kunsthistorisches Museum – mit Zooming

                                                             |
Fluides Layout: rem Browser Support




http://caniuse.com/#search=rem        © pixelpark   |   51
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
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
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
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
Video: Flexbox-Layout – Kunsthistorisches Museum

                                                   |
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
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
Video: Flexbox-Layout – 6x-facher Zoom – Kunsthistorisches Museum

                                                                    |
Fluides Layout: Flexbox Browser Support




http://caniuse.com/#search=flex           © pixelpark   |   60
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
Responsive Accessibility

2.3 Fluide Bilder




                           © pixelpark   |   62
Fluide Bilder – Standard-Methode
Die 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-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
Adaptive images are the next unsolved
mystery of Responsive Web Design.




Bruce Lawson

                                        |
Responsive Accessibility

2.4 Fluide Übergänge – Media Queries




                                  © pixelpark   |   67
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
Video: Fluide Übergänge – Khm Responsive

                                           |
Responsive Accessibility

2.5 Ergebnis: Khm Responsive




                               © pixelpark   |   70
Kunsthistorisches Museum – Startseite Responsive

                                                   |
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
Kunsthistorisches Museum – Startseite Responsive




Samsung Wave   Google Nexus S   iPad 1
Bada           Android 4.1.2.   iOS 5 / Chrome




                                                 © pixelpark   |   73
Wir freuen uns auf Ihr Feedback.
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

Weitere ähnliche Inhalte

Ähnlich wie Responsive Accessibility in der Praxis

Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
Dominik Helleberg
 

Ähnlich wie Responsive Accessibility in der Praxis (20)

Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.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)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
OpenLaszlo - Advanced RIAs for the OpenWeb
OpenLaszlo - Advanced RIAs for the OpenWebOpenLaszlo - 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 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 SeitenjQuery 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!“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 2011Android 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...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 There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
Multiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche PostMultiscreen Markenerlebnis Deutsche Post
Multiscreen Markenerlebnis Deutsche Post
 
Software Archaeology - Raiders of the Lost Code (long)
Software Archaeology - Raiders of the Lost Code (long)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 EditionWas 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 appliedDWX Developer Week 2015 - Microservice architecture applied
DWX Developer Week 2015 - Microservice architecture applied
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
 

Mehr von Sylvia Egger

Mehr von Sylvia Egger (9)

Accessible Javascript - Example Accordion
Accessible Javascript - Example AccordionAccessible Javascript - Example Accordion
Accessible Javascript - Example Accordion
 
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont LobsterWebfonts in der Praxis - Teil 2 - Beispielfont Lobster
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
 
Was ist Barrierefreiheit?
Was ist Barrierefreiheit?Was ist Barrierefreiheit?
Was ist Barrierefreiheit?
 
Was ist Barrierefreiheit? Ein Kurztest
Was ist Barrierefreiheit? Ein KurztestWas ist Barrierefreiheit? Ein Kurztest
Was ist Barrierefreiheit? Ein Kurztest
 
Wie? Mein WordPress-Theme geht auch barrierefrei!
Wie? Mein WordPress-Theme geht auch barrierefrei!Wie? Mein WordPress-Theme geht auch barrierefrei!
Wie? Mein WordPress-Theme geht auch barrierefrei!
 
WordCamp 2010: Twenty Ten barrierefrei?
WordCamp 2010: Twenty Ten 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? (18.05. 2010)
Was ist Barrierefreiheit? (18.05. 2010)
 
Was ist Barrierefreiheit (12.05. 2010)
Was ist Barrierefreiheit (12.05. 2010)Was ist Barrierefreiheit (12.05. 2010)
Was ist Barrierefreiheit (12.05. 2010)
 
2009: eine Tastatur-Odyssee
2009: eine Tastatur-Odyssee2009: 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
  • 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