Kann denn das so schwer sein?

8.3.2016, Webkongress Erlangen #wke2016

HTML wurde eigentlich fehlertolerant implementiert, doch heute führen kleinste Fehler zur Nichtbenutzbarkeit. Warum machen wir es uns, unseren Besuchern und letztlich auch "dem Web" so schwer?

Transcript

1. Kann denn das so schwer sein? 8.3.2016 | #wke2016 | Tom Arnold | @webrocker
2. Hallo, kurz was zu mir
3. Hallo, kurz was zu mir seit 1995 "was mit Web" seit 1996 Diplom Kommunikations Designer (FH) seit 2005 Geschäftsführer und Inhaber einer Digital Agentur in Frankfurt am Main seit 2012 Co-Founder und Betreiber des Open Device Lab Frankfurt heute hier, um ein paar Gedanken zum Web loszuwerden www.odl-ffm.de | www.bnt.de
4. This is the Internet http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the
5. This is the Web http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the
6. This is Print? http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the
7. This is Multimedia? http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the
8. This is Software? http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the
9. This is for everyone.
10. This is for everyone. My vision was that anyone, anywhere in the world could share knowledge and ideas without needing to buy a license or ask permission from myself or any CEO, government department or committee. This openness unleashed a tidal wave of innovation, and it is still powering new breakthroughs in science, commerce, culture and much more besides. – Sir Tim Berners-Lee, “ ”
11. Die Ur-Bausteine des Webs HTML
12. HTML Gibt Text semantische Bedeutung und Struktur durch Auszeichnung Schafft Verlinkung zwischen Inhalten und Dokumenten Ist fehlertolerant
13. Fehlertolerant? <p>Hier toller Inhalt</p>
14. Fehlertolerant? <bazinga bizarro="ohyes"> <p>Hier toller Inhalt</p> </bazinga>
15. Zukunftsicher! <article itemscope itemtype="http://schema.org/Recipe"> <h2 itemprop="name">Blah blah blah</h2> </article> Zeigt den Inhalt auch in einem Browser an, der das Licht der Welt erblickte, bevor ein "article" Tag abzusehen war, und ignoriert die schema.org attribute.
16. ...what this allows for, this fault tolerant nature, is that we can grow HTML and, therefore, achieve a kind of structural honesty by using the right element for the job. [...] Other than having a façade of something, you’re actually using the right element to mark something up. – Jeremy Keith 2015 “ ” https://adactio.com/articles/9465
17. Das Web: Stellt Inhalte für Menschen und Maschinen bereit Ist fehlertolerant angelegt Setzt den Fokus auf Inhalte Versucht irgendwie, diese Inhalte vom Sender zum Empfänger zu bringen
18. Das Web: Nicht vorhersehbar, was im Browser letztlich vorhanden und nutzbar ist Entwickelt sich beständig weiter, Ist keine definierte Plattform Von der Grundidee her schon "Cross-Platform", eben Plattform-unabhängig
19. The web IS a network of hyperlinked documents. It's not its origins. It's its present, and its future. – Andy Hume “ ” http://blog.andyhume.net/why-are-you-fighting-me/
20. Fast Forward Erfahrung aus 3 Jahren Open Device Lab Frankfurt: Viele ältere Geräte (z. B. iPad 1 aus 2010) haben Probleme mit "modernen" Webseiten Eine Webseite von 1999 funktioniert noch immer überall. dafuq?
21. Unsere Bausteine des Webs HTML, CSS, JavaScript
22. Unsere Bausteine des Webs Inhalt, Aussehen, Verhalten
23. CSS, Ebenfalls fehlertolerant wie HTML Nicht zwingend überall verfügbar Kann ggf. vom User überschrieben werden .selector { property: value; } Zukunftsicher
24. JavaScript keineswegs fehlertolerant, bei Fehlern wird die Ausführung abgebrochen nicht zwangsläufig überall verfügbar wenn trotzdem vitale Elemente der Webseite von JavaScript abhängig gemacht werden, kann es gut sein, dass es im Browser nicht klappt
25. oops.
27. 2003!
28. Progressive Enhancement Bereits vor 13 Jahren vorgestellt Strategie, wie man mit diesen Eigenheiten der Webtechnologien arbeiten kann und dabei den Nutzer in den Vordergrund stellt, nicht die Technik, mit der man gerne spielen möchte
29. Rolltreppen bauen
30. Rolltreppen bauen
31. Bessere Rolltreppen bauen
32. Bessere Rolltreppen bauen
33. Bessere Rolltreppen bauen
34. Progressive Enhancement Ansatz http://alistapart.com/article/understandingprogressiveenhancement
35. Progressive Enhancement Berücksichtigt, dass CSS und JavaScript nach wie vor optionale Features im Browser sind Passt zu Mobile First und Responsive Web Design Setzt den Fokus auf Nutzer (Inhalt und Struktur ist sowieso Fundament jeglichen Designs –– alles andere ist nur Dekoration)
36. Die Sache mit dem JavaScript JavaScript Frameworks Jeder hat doch JavaScript
37. JavaScript Frameworks http://www.feinripp.net/topthemen/matt-emmett-forgotten-heritage/
38. JavaScript Frameworks Sind total toll. Ernsthaft. Aber: Fragt Euch, wie sinnvoll es ist, die komplette vitale Funktionalität einer Webseite auf die fehlerintoleranteste und zuletzt zur Verfügung stehende Schicht im Stack zu legen. http://www.feinripp.net/topthemen/matt-emmett-forgotten-heritage/
39. Jeder hat JavaScript Haternicht. YOUR USER REQUESTS YOUR WEB APP HAS THE PAGE LOADED YET? DID THE HTTP REQUEST FOR THE JAVASCRIPT SUCCEED? “All your users are non-JS while they're downloading your JS” — Jake Archibald http://kryogenix.org/code/browser/everyonehasjs.html
40. http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
44. oops.
45. The “no JavaScript” case was simpler to deal with in 2005 than the “some JavaScript available” case today. – Mathias Schäfer (@molily), 2016 “ ” http://molily.de/javascript-failure/
48. oops.
50. Alles richtig gemacht.
52. The more you take over from the browser, the more complex yet expected browser behaviour you have to reimplement in JavaScript. And if different browsers do different thing, you pick one behaviour & it feels odd to users who aren't used to it. – Jake Archibald, 2013 “ ” https://jakearchibald.com/2013/progressive-enhancement-still-important/
53. HTML5 Tags mit eingebautem Progressive Enhancement … z. B. <input type="email" /> <input type="date" /> <input type="color" />
54. http://caniuse.com
55. Firefox/OSX Chrome/OSX type="date" http://456bereastreet.com/lab/html5-input-types/
56. Safari/OSX Safari/iOS type="date" http://456bereastreet.com/lab/html5-input-types/
58. Firefox/OSX Chrome/OSX type="color"
59. Safari/OSX Safari/iOS type="color"
60. Safari/iOS, type="text" Safari/iOS, type="email" Eingabevarianten auf iOS
61. Safari/iOS, type="search" Safari/iOS, type="tel" Eingabevarianten auf iOS
63. picture und source
64. img mit srcset / sizes
65. http://responsiveimages.org/
66. https://jakearchibald.com/2015/anatomy-of-responsive-images/
68. detail / summary Hey, Accordeon direkt mit HTML! Danke Sven + Robert :-)
69. detail / summary Fallback eingebaut: Alles sichtbar. Danke Sven + Robert :-)
70. The journey begins by letting go of control, and becoming flexible. – John Allsopp, The Dao of Webdesign, 2000 “ ” http://alistapart.com/article/dao
72. Do users want to finish their task in every browser? http://douserswanttofinishtheirtaskineverybrowser.com
73. http://douserswanttofinishtheirtaskineverybrowser.com
74. Wir sind Lieferdienst Egal, was wir anstellen, es ist immer nur eine Empfehlung an den Browser des Nutzers. https://www.christianheilmann.com/2016/03/04/german-basta-2016-keynote-fahrvergnugen-ohne-handbremse-ie-ist-tot-lang-lebe-das-web/
75. Wir sind Lieferdienst Egal, was wir anstellen, es ist immer nur eine Empfehlung an den Browser des Nutzers. Auch wenn es manchmal mühsam erscheint Quelle: Internet
76. This is for everyone.
77. Die Nutzer sind schon da. http://singularityhub.com/2013/03/14/beforeafter-comparison-of-pope-announcement-shows-incredible-proliferation-of-mobile-in-just-8-years/
78. Machen wir es ihnen und auch uns doch einfacher.
79. Vielen Dank.
80. Im Vortrag http://blog.andyhume.net/why-are-you-fighting-me/ http://odl-ffm.de http://hesketh.com/publications/inclusive_web_design_for_the_future/ http://alistapart.com/article/understandingprogressiveenhancement http://kryogenix.org/code/browser/everyonehasjs.html http://responsivenews.co.uk/post/18948466399/cutting-the-mustard http://molily.de/javascript-failure/ http://456bereastreet.com/lab/html5-input-types/ http://responsiveimages.org/ http://alistapart.com/article/dao http://douserswanttofinishtheirtaskineverybrowser.com https://www.christianheilmann.com/2016/03/04/german-basta-2016-keynote-fahrvergnugen- ohne-handbremse-ie-ist-tot-lang-lebe-das-web/ Weiterführend https://adactio.com/journal/9016 http://thatemil.com/blog/2013/07/02/progressive-enhancement-still-not-dead/ http://www.slideshare.net/nzakas/enough-withthejavascriptalready https://de.onpage.org/wiki/Progressive_Enhancement http://progressiveenhancement.org Verwendete Bilder http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the http://www.feinripp.net/topthemen/matt-emmett-forgotten-heritage/ http://singularityhub.com/2013/03/14/beforeafter-comparison-of-pope-announcement- shows-incredible-proliferation-of-mobile-in-just-8-years/ Slides made with Markdown, <3 and https://github.com/technopagan/slides-in-markdown Links