Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Do we need to write markup?

Nathan Ford
October 09, 2014

Do we need to write markup?

Exploring the history and efficacy of one of our most ubiquitous tasks: writing markup.

Nathan Ford

October 09, 2014
Tweet

More Decks by Nathan Ford

Other Decks in Design

Transcript

  1. <h1>Do we need to write <strong>markup</strong>?</h1>

  2. <blockquote>Learning thrives in an environment where you can be fearless

    with questions and generous with answers.</blockquote> <cite>&ndash; Kathy Sierra, two days ago</cite>
  3. <h2>Who do I think I am?</h2>

  4. http://home.web.cern.ch/

  5. http://info.cern.ch/hypertext/WWW/TheProject.html

  6. http://line-mode.cern.ch/

  7. http://home.web.cern.ch/topics/birth-web

  8. None
  9. http://a.tgcdn.net/images/products/additional/large/1107_unicorn_head_mask_inuse.jpg

  10. http://a.tgcdn.net/images/products/additional/large/1107_unicorn_head_mask_inuse.jpg

  11. <h2>Why are we here?</h2>

  12. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5:

    Optimized Capability Maturity Model
  13. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5:

    Optimized Capability Maturity Model
  14. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5:

    Optimized Capability Maturity Model
  15. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5:

    Optimized Capability Maturity Model
  16. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5:

    Optimized Capability Maturity Model
  17. 1: Initial (Chaotic) 2: Repeatable 3: Defined 4: Managed 5:

    Optimized Capability Maturity Model
  18. <h2>Can we optimize HTML?</h2>

  19. <blockquote>After all this research on humane markup languages, much to

    my chagrin, I've come full circle. I now no longer think humane markup languages make sense for most uses. … HTML is generally the better choice</blockquote> <cite>&ndash; Jeff Atwood, 2008</cite>
  20. <h3>HTML = PRETTY DAMN GOOD ALREADY.</h3>

  21. <h2>What is markup?</h2>

  22. http://www.amazon.com/Weaving-Web-Original-Ultimate-Destiny/dp/006251587X/

  23. None
  24. None
  25. Source of http://http://info.cern.ch/hypertext/WWW/TheProject.html/hypertext/WWW/MarkUp/Tags.html

  26. http://info.cern.ch/hypertext/WWW/MarkUp/Tags.html

  27. <blockquote>When designing the HTML document type, consideration was given to

    a certain simplicity in order to allow many browsers and hopefully editors to be developed on many platforms.</blockquote> <cite>&ndash; Sir Tim Berners Lee, 1993-ish</cite>
  28. <h3>According to Tim:</h3> <ul> <li>HTML was always intended to be

    generated by a 
 machine.</li> </ul>
  29. <h3>According to Tim:</h3> <ul> <li>HTML was always intended to be

    generated by a 
 machine.</li> <li>HTML was intended for content.</li> </ul>
  30. <h3>According to Tim:</h3> <ul> <li>HTML was always intended to be

    generated by a 
 machine</li> <li>HTML was intended for content</li> <li>HTML was intended for <strong>everyone</strong></li> </ul>
  31. <ul> <li>Markup is <strong>NOT CODE</strong></li> </ul>

  32. <ul> <li>Markup is <strong>NOT CODE</strong></li> <li>Markup is <strong>DESIGN</strong></li> </ul>

  33. <ul> <li>Markup is <strong>NOT CODE</strong></li> <li>Markup is <strong>DESIGN</strong></li> <li>Markup is

    <strong>EASY</strong></li> </ul>
  34. <ul> <li>Markup is <strong>NOT CODE</strong></li> <li>Markup is <strong>DESIGN</strong></li> <li>Markup is

    <strong>EASY</strong></li> <li>Markup is <strong>UNFORGIVING</strong></li> </ul>
  35. <h2>What are the cognitive costs of markup?</h2>

  36. <dl> <dt>Ego Depletion</dt> <dd>Self-control or willpower draw upon a limited

    pool of mental resources that can be used up.</dd> </dl>
  37. 7313489

  38. <img src="../img/fruit.jpg" alt="Fruit" /> ! <img src="../img/cake.jpg" alt="Cake" />

  39. <dl> <dt>Flow</dt> <dd>Mental state in which a person is fully

    immersed 
 in a feeling of energized focus, full involvement, and enjoyment in an activity.</dd> </dl>
  40. Mihály Csíkszentmihályi

  41. var MC = Mihály Csíkszentmihályi;

  42. <ol> <li>Intense and focused concentration on 
 the present moment</li>

    <li>Merging of action and awareness</li> <li>A loss of reflective self-consciousness</li> <li>A sense of control over the activity</li> <li>A distortion of temporal experience</li> <li>Experience of the activity as 
 intrinsically rewarding</li> </ul>
  43. <ol> <li>Intense and focused concentration on 
 the present moment</li>

    <li>Merging of action and awareness</li> <li>A loss of reflective self-consciousness</li> <li>A sense of control over the activity</li> <li>A distortion of temporal experience <li>Experience of the activity as 
 intrinsically rewarding</li> </ul>
  44. <ol> <li>Intense and focused concentration on 
 the present moment</li>

    <li>Merging of action and awareness</li> <li>A loss of reflective self-consciousness</li> <li>A sense of control over the activity</li> <li>A distortion of temporal experience <li>Experience of the activity as 
 intrinsically rewarding</li> </ul>
  45. <dl> <dt>Anti-Flow</dt> <dd>Mental state in which a person is fully

    immersed in a feeling of <strike>energized focus, full involvement, and enjoyment</strike> tedium in an activity.</dd> </dl>
  46. <dl> <dt>Siloing</dt> <dd>An insular org structure incapable of reciprocal operation

    with other, related teams or individuals.</dd> </dl>
  47. http://www.amazon.com/Where-Good-Ideas-Steven-Johnson/dp/1594485380/

  48. <blockquote>Good ideas may not want to be free, but they

    do want to connect, fuse, recombine. They want to reinvent themselves by crossing conceptual borders. They want to complete each other as much as they want to compete.</ blockquote> <cite>&ndash; Stephen Johnson, 2011</cite>
  49. http://uproxx.files.wordpress.com/2014/05/sad-batman-meme-batfleck-03.gif?w=650

  50. <ul> <li>Ego Depletion</li> <li>Anti-Flow</li> <li>Siloing</li> </ul>

  51. <h2>What can we do about it?</h2>

  52. None
  53. <ol> <li>Call the company</li> <li>Describe what you need</li> <li>Wait on

    the street</li> <li>Pay</li> <li>Receipt</li> </ul>
  54. <button type="submit">Pick me up</button>

  55. <h3>A clearer mental model = faster adoption.</h3>

  56. <h3>Current models</h3>

  57. <h3>Current models</h3> <ul> <li>Word processor</li> </ul>

  58. <h3>Current models</h3> <ul> <li>Word processor</li> <li>Drawing boxes</li> </ul>

  59. <h2>What about lists?</h2>

  60. None
  61. None
  62. None
  63. None
  64. None
  65. <h3>Efficiencies of the list model</h3> <ul> <li>Semantics, and validation built

    in</li> </ul>
  66. <h3>Efficiencies of the list model</h3> <ul> <li>Semantics, and validation built

    in</li> <li>An interface for learning</li> </ul>
  67. <h3>Efficiencies of the list model</h3> <ul> <li>Semantics, and validation built

    in</li> <li>An interface for learning</li> <li>Smart defaults</li> </ul>
  68. <h2>Styling, too?</h2>

  69. None
  70. None
  71. Pad in Pad out .box { padding: 1em; box-sizing: border-box;

    } .box { padding: 1em; box-sizing: content-box; }
  72. float: left; clear: none; float: left; clear: left; float: right;

    clear: none; float: right; clear: right; float: none; clear: both;
  73. <h2>What shall we do with our days?</h2>

  74. <h3>Get home faster</h3>

  75. None
  76. <h3>Less typing, more thinking</h3>

  77. <h3>Explore the &ldquo;Adjacent Possible&rdquo;</h3>

  78. <blockquote>The adjacent possible is a kind of shadow future, hovering

    on the edges of the present state of things, a map of all the ways in which the present can reinvent itself. … The strange and beautiful truth about the adjacent possible is that its boundaries grow as you explore them.</blockquote> <cite>&ndash; Stephen Johnson, 2011</cite>
  79. <h2>Thank you!</h2> ! ! ! <p class="twitter">@nathan_ford</p> <br> <p class="github">nathanford</p>

    <br> <p class="email">nathan@artequalswork.com</p>
  80. <h3>Further reading</h3> <ul> <li>Understanding the Dangers of Ego Depletion</li> <li>The

    End of Design As We Know It</li> <li>Is HTML a Humane Markup Language?</li> <li>The birth of the web</li> <li>The first website</li> <li>The Genius of the Tinkerer</li> </ul>