Pro Yearly is on sale from $80 to $50! »

Neue Kleider, alter Ärger

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

March 10, 2014
Tweet

Transcript

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

  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
  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)
  4. Wahrnehmbar

  5. Wahrnehmbar

  6. Wahrnehmbar Zum Bestellen drücken Sie bitte auf den grünen Button

    10% aller Männer sind farbfehlsichtig
  7. unnötige Hürden/Barrieren aus dem Weg räumen!

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

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

  10. ★ Kleiner Bildschirm ★ Keine Maus ★ Keine Popups

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

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

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

  14. None
  15. Es gibt viele Behinderungen - nicht nur Blindheit

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

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

  18. Ignoranz hilft nicht weiter

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

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

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

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

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

  24. Süddeutsche, 09.03.2014

  25. FAZ, 09.03.2014

  26. None
  27. Wie geht es dann erst mit komplizierten Sachen?

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

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

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

  31. Macht Eure Hausaufgaben!

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

  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