Save 37% off PRO during our Black Friday Sale! »

Kann denn das so schwer sein?

312973f005f4438c53f2c37f43328b72?s=47 Webrocker
March 08, 2016

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?

312973f005f4438c53f2c37f43328b72?s=128

Webrocker

March 08, 2016
Tweet

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.

  26. None
  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

  41. None
  42. None
  43. None
  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/
  46. None
  47. None
  48. oops.

  49. None
  50. Alles richtig gemacht.

  51. None
  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/

  57. None
  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

  62. None
  63. picture und source

  64. img mit srcset / sizes

  65. http://responsiveimages.org/

  66. https://jakearchibald.com/2015/anatomy-of-responsive-images/

  67. None
  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
  71. None
  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