Neue Kleider, alter Ärger

Auf dem Webmontag in Frankfurt habe ich darüber gesprochen, dass man für Responsive Webdesign und Barrierefreiheit richtig denken muss. Ich habe auch Beispiele gezeigt, wie heute noch falsch gedacht wird und wie Basics noch immer nicht angewendet werden.

Transcript

1. Neue Kleider,
   alter Ärger
   Responsive Webdesign vs. Barrierefreiheit
   

   View Slide

2. Jeder Seitenbetreiber sollte als Ziel
   haben, dass möglichst viele Menschen
   sein Angebot konsumieren und darüber
   vielleicht sogar in Kontakt treten.
   http://templeofmut.files.wordpress.com/2012/12/captain-obvious.jpg%3Fw%3D500%26h%3D391
   

   View Slide

3. 4 Grundprinzipien der
   WCAG 2.0 (POUR)
   ‣ Inhalte müssen wahrnehmbar sein
   (Perceivable)
   ‣ Benutzerschnittstellen im Inhalt müssen
   bedienbar sein (Operable)
   ‣ Inhalte und Bedienelemente müssen verständlich
   sein (Understandable)
   ‣Inhalte sollten robust genug sein, um mit aktuellen
   und zukünftigen Benutzeragenten zu arbeiten
   (inklusive assistiver Hilfsmittel) (Robust)
   

   View Slide

4. Wahrnehmbar
   

   View Slide

5. Wahrnehmbar
   

   View Slide

6. Wahrnehmbar
   Zum Bestellen drücken Sie bitte
   auf den grünen Button
   10% aller Männer sind farbfehlsichtig
   

   View Slide

7. unnötige Hürden/Barrieren
   aus dem Weg räumen!
   

   View Slide

8. Immer aus der Sicht eines
   Normalsichtigen
   Desktopnutzers mit Maus!
   

   View Slide

9. http://www.flickr.com/photos/webseeings/239301576
   

   View Slide

10. ★ Kleiner Bildschirm
    ★ Keine Maus
    ★ Keine Popups
    

    View Slide

11. Nicht jedes Device
    hat eine Maus.
    Google Chromebook Pixel
    

    View Slide

12. Wofür optimieren?
    Falsche Frage!
    https://twitter.com/brad_frost/status/392429547188408321
    

    View Slide

13. Design ohne Gedanken
    an Devices!
    http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
    

    View Slide

14. View Slide

15. Es gibt viele Behinderungen
    - nicht nur Blindheit
    

    View Slide

16. http://icant.co.uk/talks/h5/pictures/jqueryeu/hypnophone.jpg
    

    View Slide

17. http://www.flickr.com/photos/johnmcbride1109/2875819859/
    Barrierefreiheit als integrales Element
    

    View Slide

18. Ignoranz hilft nicht weiter
    

    View Slide

19. http://wtfmobileweb.com/post/47228937895/but-i-am-on-a-desktop-browser
    

    View Slide

20. http://wtfmobileweb.com/post/45342143412/you-can-save-our-contact-informations-by-scanning
    

    View Slide

21. http://oneillclothing.com/ http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/
    

    View Slide

22. Die meisten mobilen
    Endgeräte bekommen kein
    Update.
    

    View Slide

23. Simple, alte Techniken
    werden heute noch
    immer nicht beherrscht!
    

    View Slide

24. Süddeutsche, 09.03.2014
    

    View Slide

25. FAZ, 09.03.2014
    

    View Slide

26. View Slide

27. Wie geht es dann erst mit
    komplizierten Sachen?
    

    View Slide

28. http://codepen.io/jensgro/pen/gbqxp
    

    View Slide

29. http://gergeo.se/RWD-Table-Patterns/ https://github.com/nadangergeo/RWD-Table-Patterns
    

    View Slide

30. https://twitter.com/freiherz/status/269037333012160512/photo/1
    Bringt eine neue Lösung
    evtl. neue Barrieren?
    

    View Slide

31. Macht Eure Hausaufgaben!
    

    View Slide

32. https://lh3.googleusercontent.com/-vUGhsqEXm0M/UcRKWA79ESI/AAAAAAAAA0E/fSis1FouLHA/w491-h567-no/
    a98eb6002a3d9cc532270ba2cdedef7a.jpg
    

    View Slide

33. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    https://github.com/jensgro
    http://webkrauts.de
    http://slideshare.net/Flocke669
    https://speakerdeck.com/flocke
    

    View Slide