$30 off During Our Annual Pro Sale. View Details »

Kann denn das so schwer sein?

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?

Webrocker

March 08, 2016
Tweet

Other Decks in Design

Transcript

  1. Kann denn das so schwer sein?
    8.3.2016 | #wke2016 | Tom Arnold | @webrocker

    View Slide

  2. Hallo, kurz was zu mir

    View Slide

  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

    View Slide

  4. This is the Internet
    http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the

    View Slide

  5. This is the Web
    http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the

    View Slide

  6. This is Print?
    http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the

    View Slide

  7. This is Multimedia?
    http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the

    View Slide

  8. This is Software?
    http://marvelousmatt.tumblr.com/post/2972009115/for-mattberryhairporn-this-jen-is-the

    View Slide

  9. This is for everyone.

    View Slide

  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,


    View Slide

  11. Die Ur-Bausteine des Webs
    HTML

    View Slide

  12. HTML
    Gibt Text semantische Bedeutung und Struktur durch Auszeichnung
    Schafft Verlinkung zwischen Inhalten und Dokumenten
    Ist fehlertolerant

    View Slide

  13. Fehlertolerant?
    Hier toller Inhalt

    View Slide

  14. Fehlertolerant?

    Hier toller Inhalt

    View Slide

  15. Zukunftsicher!

    Blah blah blah

    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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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?

    View Slide

  21. Unsere Bausteine des Webs
    HTML, CSS, JavaScript

    View Slide

  22. Unsere Bausteine des Webs
    Inhalt, Aussehen, Verhalten

    View Slide

  23. CSS,
    Ebenfalls fehlertolerant wie HTML
    Nicht zwingend überall verfügbar
    Kann ggf. vom User überschrieben werden
    .selector {
    property: value;
    }
    Zukunftsicher

    View Slide

  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

    View Slide

  25. oops.

    View Slide

  26. View Slide

  27. 2003!

    View Slide

  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

    View Slide

  29. Rolltreppen bauen

    View Slide

  30. Rolltreppen bauen

    View Slide

  31. Bessere Rolltreppen bauen

    View Slide

  32. Bessere Rolltreppen bauen

    View Slide

  33. Bessere Rolltreppen bauen

    View Slide

  34. Progressive Enhancement Ansatz
    http://alistapart.com/article/understandingprogressiveenhancement

    View Slide

  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)

    View Slide

  36. Die Sache mit dem JavaScript
    JavaScript Frameworks
    Jeder hat doch JavaScript

    View Slide

  37. JavaScript Frameworks
    http://www.feinripp.net/topthemen/matt-emmett-forgotten-heritage/

    View Slide

  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/

    View Slide

  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

    View Slide

  40. http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. oops.

    View Slide

  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/

    View Slide

  46. View Slide

  47. View Slide

  48. oops.

    View Slide

  49. View Slide

  50. Alles richtig gemacht.

    View Slide

  51. View Slide

  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/

    View Slide

  53. HTML5 Tags
    mit eingebautem Progressive Enhancement …
    z. B.



    View Slide

  54. http://caniuse.com

    View Slide

  55. Firefox/OSX
    Chrome/OSX
    type="date"
    http://456bereastreet.com/lab/html5-input-types/

    View Slide

  56. Safari/OSX
    Safari/iOS
    type="date"
    http://456bereastreet.com/lab/html5-input-types/

    View Slide

  57. View Slide

  58. Firefox/OSX Chrome/OSX
    type="color"

    View Slide

  59. Safari/OSX
    Safari/iOS
    type="color"

    View Slide

  60. Safari/iOS, type="text" Safari/iOS, type="email"
    Eingabevarianten auf iOS

    View Slide

  61. Safari/iOS, type="search" Safari/iOS, type="tel"
    Eingabevarianten auf iOS

    View Slide

  62. View Slide

  63. picture und source

    View Slide

  64. img mit srcset / sizes

    View Slide

  65. http://responsiveimages.org/

    View Slide

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

    View Slide

  67. View Slide

  68. detail / summary
    Hey, Accordeon direkt mit HTML!
    Danke Sven + Robert :-)

    View Slide

  69. detail / summary
    Fallback eingebaut: Alles sichtbar.
    Danke Sven + Robert :-)

    View Slide

  70. The journey begins by letting go of control, and becoming flexible.
    – John Allsopp, The Dao of Webdesign, 2000


    http://alistapart.com/article/dao

    View Slide

  71. View Slide

  72. Do users want to finish their task in
    every browser?
    http://douserswanttofinishtheirtaskineverybrowser.com

    View Slide

  73. http://douserswanttofinishtheirtaskineverybrowser.com

    View Slide

  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/

    View Slide

  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

    View Slide

  76. This is for everyone.

    View Slide

  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/

    View Slide

  78. Machen wir es ihnen und auch uns doch
    einfacher.

    View Slide

  79. Vielen Dank.

    View Slide

  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

    View Slide