A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>The Web Is Read/Write (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.fullcreammilk.co.uk/speaking/readwrite/script.html">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. The Web Is Read/Write (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.fullcreammilk.co.uk/speaking/readwrite/script.html">Source originale du contenu</a></h3>
  445. <p>Except, of course, that it isn’t.</p>
  446. <p>I’m sure you’re well aware that Tim Berners-Lee’s original vision was of a web that would enable people not only to publish webpages, but also to modify the webpages they visited. He tried on numerous occasions to persuade the makers of the first browsers to include editing capabilities but ended up frustrated by the “near universal disdain for creating an editor”. In his book <a href="http://www.w3.org/People/Berners-Lee/Weaving/Overview.html"><cite>Weaving the Web</cite></a> he wrote that most developers “were more excited about putting fancy display features into the browsers – multimedia, different colours and fonts – which took much less work and created much more buzz among users.”</p>
  447. <p>’Twas ever thus.</p>
  448. <p>But this isn’t going to be a talk about web technology. I’m going to talk about writing; in particular, web design writing.</p>
  449. <p>I’m an editor and my work involves guiding authors through the difficulties of writing articles and books about web design and development. In the context of professional writing, the conduit between the writer and reader is the editor, so I find myself in the middle of the read/write formulation.</p>
  450. <hr/>
  451. <p>Now, I’m sure most people here have a Twitter account, right? So you’ll have a brief profile there, your Twitter bio, that describes who you are.</p>
  452. <ul>
  453. <li>How many of you say you’re a writer or author?</li>
  454. <li>Who here has written a book about web design or development? How many would <em>like</em> to write a book?</li>
  455. </ul>
  456. <p>I ask because we’re all writers, really. And most of the web is writing. If you could take away all the videos and photos and audio files and animated gifs, you’d still be left with most of the web. And it would load a lot faster, right?</p>
  457. <p>In October 2006, Oliver Reichenstein wrote an article called “<a href="http://ia.net/blog/the-web-is-all-about-typography-period/">Web Design is 95% Typography</a>” in which he argued that because the web is 95% written language, web designers should get good training in the main discipline of shaping written information: typography. And we’re all typographers now, of course.</p>
  458. <p>But I’m an editor, and so while I appreciate beautiful typography, I’m more concerned with what comes before all that: the writing itself. Because I was a web designer for a dozen years, I’m concerned mainly with writing about web design. The web development community thrives on writing and sharing knowledge and experience. Everyone can learn and contribute through reading and writing – it’s what we’ve always done.</p>
  459. <p>One more question before we get going: who here has started to write something, maybe about web development or design, and then encountered problems?</p>
  460. <p>Because writing is difficult, isn’t it? There’s so much to consider when you’re writing words to convey something to someone else. But writing is difficult like parenting is difficult, or like playing a musical instrument is difficult, or like web design is difficult: we can all learn how to do it, given enough time to practise, and there’s always room for improvement, and you’re going to get it wrong some of the time.</p>
  461. <hr/>
  462. <blockquote>
  463. <p>So the writer who breeds<br/>
  464. more words than he needs<br/>
  465. is making a chore<br/>
  466. for the reader who reads.</p>
  467. <p>That’s why my belief is<br/>
  468. the briefer the brief is,<br/>
  469. the greater the sigh<br/>
  470. of the reader’s relief is.<sup>1</sup></p>
  471. <footer><cite>Dr Seuss</cite></footer>
  472. </blockquote>
  473. <p>Back in December 2011, <a href="http://aworkinglibrary.com/writing/represent/">Mandy Brown wrote</a> that “to be a publisher today you must belong to a community.” Even as an editor, rather than a publisher, I’ve taken to heart what Mandy wrote, because in web development the connection between writers and readers is unusually close and immediate – working in the web medium precipitates a unity that’s rare elsewhere. In the same article, Mandy went on to encourage publishers to not merely belong, but to advocate. It’s one thing to participate, observe and tend to community, “[b]ut being an advocate requires stepping forward and helping to articulate that community’s needs, or advance their interests […] You need to both amplify and clarify the values of a community, not merely share them.”</p>
  474. <p>It’s in that spirit of advocacy that today I want to share with you some thoughts and reflections about web design writing. We’ve all read a lot of it, good, bad and ugly; but mostly, sad to say, indifferent. I hope to draw our attention to the way received ideas about online writing shape what and how we write about web design, and how that’s not always to our advantage; I’ll hint at a few qualities that are often missing from web design writing; and I’ll try to point towards some potential ways forward.</p>
  475. <p>There are no easy answers in this talk, however; no coherent theory or manifesto of web design writing. I should hope not. Editors tend to raise questions for their authors to answer, and that’s what I’ll do here.</p>
  476. <p>And I should say, that more even than most talks are, this is a talk made out of other people’s words and ideas.</p>
  477. <hr/>
  478. <blockquote>
  479. <p>To write: to try meticulously to retain something, to cause something to survive; to wrest a few precise scraps from the void as it grows, to leave somewhere a furrow, a trace, a mark or a few signs.<sup>2</sup></p>
  480. <footer><cite>Georges Perec</cite></footer>
  481. </blockquote>
  482. <p>The currency of written communication – words on the page, words on the screen – comprises many denominations. To further our ends in web design and development, we freely spend and receive several: tweets aphoristic and trenchant, banal and perfunctory; blog posts and articles that call us to action or reflection; anecdotes, asides, books, comments, essays, guides, how-tos, manuals, musings, notes, opinions, stories, thoughts, tricks, tips pro and not-so-pro. So many, many words.</p>
  483. <hr/>
  484. <p>In January this year, <a href="http://jasonsantamaria.com/articles/discourse-in-web-design">Jason Santa Maria published</a> an article in which he asked why we rarely discuss web design in terms of aesthetics, culture, time and place, instead concentrating on the latest techniques. Rather than referring back to past developments and achievements to provide history and context, on the web we commonly move on to the newest things that displace what came before. Jason wondered whether we lacked a shared language to critically discuss web design, asking: “where does a common language for discourse start? Not just one for us as web designers, but one that will give structure to others who don’t as deeply understand what we do?”</p>
  485. <p>At the end of the article, Jason states that he’s not a historian or a critic, he’s a practitioner, and that perhaps the key to this problem is that the seeds of a new discourse of web design might need to come from outside, “from people who can step back, see a larger picture of web design, and understand how it fits into everything else.”</p>
  486. <p>Jason’s article expresses great insight into the problems embodied in web design writing.</p>
  487. <p>Web design is a practical pursuit, a process, so we naturally emphasize tools, techniques and tactics. We’re so focused on today’s and tomorrow’s ways of working, that we condemn our past endeavours to digital oblivion; the relentless pace of change in web design and development not only facilitates this, but almost demands it. So we seldom stray into the wider and less familiar territories of the broader design landscape. The corollary of this situation is that we struggle to find a language and discourse for analysing our work in a way that doesn’t focus on what we need to work on the problem immediately in front of us; hence Jason’s appeal for an external perspective.</p>
  488. <p>How, then, did we end up writing like this about web design? Why has our frame of reference become so narrow?</p>
  489. <hr class="writer"/>
  490. <p>In December 1978, at the time his masterpiece <i>La Vie mode d’emploi</i> was published, the French author Georges Perec stated that what he tried to do as a writer was never to write two books of the same kind, never reuse a formula or a system or an approach already developed in an earlier work. He stated: “my ambition as a writer would be to run through the whole gamut of the literature of my age without ever feeling I was going back on myself or treading ground I had trod before, and to write every kind of thing that it is possible to write nowadays.”<sup>3</sup></p>
  491. <figure class="left">
  492. <img src="perec01.jpg" alt="Georges Perec"/>
  493. <figcaption>Georges Perec <span class="credit">[André Perlstein, 1969]</span></figcaption>
  494. </figure>
  495. <p>Two years earlier, Perec had pressed into the hands of the man who he hoped to be his publisher a four-page document. In it, Perec had set out a tentative schedule of work for the coming years, including the books he was in the process of writing, and also those he planned to write. Most of the works, Perec never completed: he died of lung cancer only six years later in 1982, aged forty-five.</p>
  496. <p>So the list now reads like the catalogue of a library that never was, on whose short shelves rested books that were never written, texts that existed only in the mind of their author: a novel composed of the two thousand most common sentences in French; a science fiction story in which alphabetic letters replace work and money in a world where life is an endless game of Scrabble; a tri-lingual novel to be written collectively by Perec, Harry Mathews and Italo Calvino in French, English and Italian; a family saga narrated in the form of a biographical dictionary and an exploded family tree; plus poems, palindromes, translations, essays and crosswords.</p>
  497. <p>Perec’s 1976 prospectus represents a collection and record of lost works by a writer constantly striving never to repeat himself, never to rely time after time on writing about the same things in the same way.</p>
  498. <p>
  499. </p>
  500. <hr class="writer"/>
  501. <blockquote>
  502. <p>When you write about your work, it makes all of us smarter for the effort.<sup>4</sup></p>
  503. <footer><cite>Sally Kerrigan</cite></footer>
  504. </blockquote>
  505. <p>Received wisdom has it that writing online should be brief and chunky and approachable: make it short and to the point; divide all the writing up into coherent blocks that each focus on a certain topic; subheadings and lists help users scan; avoid the passive voice; write with a conversational tone, like you’re talking; no one has time to read.</p>
  506. <p>One among several places where our best web design writing can be found is A List Apart. If you <a href="http://alistapart.com/about/style-guide#snappy">write for A List Apart</a> “[t]here is no room for meandering […] You need to get in, score, and get out. State your idea clearly and quickly. […] Strive for brisk pacing and precise explanation.”</p>
  507. <p><a href="http://www.smashingmagazine.com/write-for-us/">Smashing Magazine’s emphasis is on practical examples</a>: “After reading the article, our readers should not only have gained new insights and ideas, but also know how to actually implement these insights and ideas in practice. [...] The more practical your tips, techniques and ideas are, the better.”</p>
  508. <p>This is incredibly good advice for writing that serves the purpose of delivering content to a reader hungry for the latest information, the most current advice, the newest tools that can help solve the problem they’re facing right now, until the next one arises.</p>
  509. <p>Such writing matches the nature of the web, its limitations and essential characteristics. The web keeps up, and it seems to suit what we write about developing for it. It’s perfect for delivering our observations, queries and investigations into the various aspects of the work, professional and personal. As <a href="http://www.nngroup.com/articles/writing-style-for-print-vs-web/">Jakob Nielsen pointed out</a> in 2008, “we should accept that the Web is too fast-paced for big-picture learning.” The web, he wrote, is perfect for narrow, just-in-time consumption of information nuggets.</p>
  510. <p>Online writing about web design, like all web-based content, has become a user-driven narrative.</p>
  511. <hr/>
  512. <blockquote>
  513. <p>Write about obscure things, but don’t write obscurely.<sup>5</sup></p>
  514. <footer><cite>W G Sebald</cite></footer>
  515. </blockquote>
  516. <p>The straightforward and widely accepted principles for online writing have become increasingly important for all kinds of organizations as the web reaches further into more people’s everyday lives. The new GOV.UK website includes a section about <a href="https://www.gov.uk/design-principles/">the site’s design principles</a>, and there’s a page – aimed at the people who write content for the site – about <a href="https://www.gov.uk/design-principles/style-guide/writing-for-the-web">writing for the web</a>. Following the explanations and advice on what to do and what to avoid, there’s a list of “7 golden rules for writing for the web”.</p>
  517. <blockquote>
  518. <h3>7 golden rules for writing for the web</h3>
  519. <p>You should observe these rules:</p>
  520. <ul>
  521. <li>make it brief and to the point</li>
  522. <li>break up text into subheaded sections</li>
  523. <li>use bullet lists</li>
  524. <li>‘front-load’ subheadings, titles and bullet points to put the most important information first</li>
  525. <li>include links to external sites and relevant pages</li>
  526. <li>use words that are easy to understand</li>
  527. <li>use active, not passive, voice</li>
  528. </ul>
  529. <footer><cite class="article">“<a href="https://www.gov.uk/design-principles/style-guide/writing-for-the-web">Writing for the web</a>”, GOV.UK</cite></footer>
  530. </blockquote>
  531. <p>I’m sure there’s nothing there we’d disagree with. It all feels like common sense and it’s perfectly reasonable, indeed encouraging, that a government website should adopt such rules to meet its objectives, and make them public.</p>
  532. <p>What is more, governments and companies are taking this seriously and beginning to understand the form their online written content should take because they’re listening to talented people who work in our industry, people who are members of our community. Our understanding of how written content works online is hard won, and we’re keen to pass on our knowledge to others.</p>
  533. <figure>
  534. <img src="nicelysaid.jpg" alt="Nicely Said, by Nicole Fenton and Kate Kiefer Lee"/>
  535. <figcaption><cite class="article">Nicely Said</cite> by Nicole Fenton and Kate Kiefer Lee</figcaption>
  536. </figure>
  537. <p>In June this year, a fantastic book about writing for the web with style and purpose was published: <a href="http://www.nicelysaid.co/"><cite>Nicely Said</cite></a>, by Nicole Fenton and Kate Kiefer Lee. I highly recommend their book. It contains great advice and practical detail, along with case studies; it builds on existing research and distils its authors’ extensive experience, showing us how to write web copy that addresses readers’ needs and supports business or organizational goals.</p>
  538. <p>The book’s focus on organizations and business is quite deliberate.</p>
  539. <p>The common guidelines for online writing were forged in the crash and burn that followed the web’s great convulsion at the turn of the century, when the dot-com bubble burst. Organizations realized that if they wanted to succeed online, they needed to better engage their audiences. Part of that effort was to no longer just throw all their printed marketing material and information at the web, hoping some would stick. Companies began to learn that their customers used the web actively, not passively, to do things the companies hadn’t really catered for. They learned much of what online writing should be from people like us, as we fought for and with web standards.</p>
  540. <p>It was during those years after the dot-com crash that writing about web design, the writing we give to and publish for ourselves, began to take on the themes and forms that are still with us today.</p>
  541. <p>Most writing about web design was and remains focused on the practicalities of making websites. Articles concentrated on tools, techniques and tactics: how to achieve particular effects with the new standards; what software was available to help us. Our writing looked at how we could persuade our bosses and clients to adopt our new standards-based approach to web design; how to convince them that pixel-precision across all browsers wasn’t essential.</p>
  542. <p>As time went on, and new technologies and technical challenges emerged, the kinds of work we did broadened to include content, dealing with clients, the business of web design, building teams, user research and so on. The number of discrete topics to write about grew and continues to grow, but our noses are still only a few inches above our keyboards, our faces up against our screens. We still tend to write about web design as though examining it through a microscope.</p>
  543. <p>Of course, this is nothing new. We’ve known about this habit of ours for years. In November 2007, Khoi Vinh wrote about “the preponderance of instructional writing and discussion” in web design, and web designers’ “preoccupation with tactical execution”.</p>
  544. <p>A common response then and now is that the technologies we use to make the web change very quickly, so the open territory where people discuss what to do and how to do it never really settles down to afford us room for reflection. When tools, techniques and tactics have to adapt with every new project, web design writing necessarily concentrates on documenting and exploring them.</p>
  545. <p>Now, that’s OK, at least for straightforward communication between web designers. We’ll always need clear, useful and approachable writing that deals with making websites. But it’s a potential problem for the progress of web design as a discipline.</p>
  546. <p>Our determined focus on the minutiae, combined with our short, sharp accounting of them, means we are discouraged from seeing the opportunities and advantages to be gained from other influences and concerns. Our identities as professionals are bound too closely to the demands of the work and our preconceptions of the medium; and this constrictive self-definition thwarts the advance of web design exploration and inhibits more critical reflection.</p>
  547. <p>With this in mind, Jason Santa Maria’s question, where does a common language for a web design discourse start? becomes all the more urgent to answer. How can we begin to view and write about web design in a broader context of aesthetics, culture, time and place?</p>
  548. <hr class="writer"/>
  549. <blockquote>
  550. <p>Get off the main thoroughfares; you’ll see nothing there.<sup>6</sup></p>
  551. <footer><cite>W G Sebald</cite></footer>
  552. </blockquote>
  553. <p>George Perec’s 1976 prospectus of his unwritten books shares characteristics with a curious tract written by Sir Thomas Browne in the second half of the 17th century. Entitled <cite><a href="http://www.archive.org/stream/certainmiscellan00browrich#page/192/mode/2up">Musæum Clausum, or Bibliotheca Abscondita</a></cite> (the closed museum or hidden library), the document is a catalogue of “remarkable Books, Antiquities, Pictures and Rarities of several kinds, scarce or never seen by any man now living”<sup>7</sup>. Among the artefacts in this lost museum are elaborate sculptures in ice and snow, showing landscapes and huge battles fought on frozen rivers; as well as lost books by Aristotle and King Alfred the Great, and a treatise by King Solomon on the shadows cast by our thoughts.</p>
  554. <figure class="left">
  555. <img src="browne01.jpg" alt="Sir Thomas Browne"/>
  556. <figcaption>Sir Thomas Browne <span class="credit">[portrait by Joan Carlile, c. 1641–1650]</span></figcaption>
  557. </figure>
  558. <p>It’s essentially an elaborate joke, of course, that gently satirizes the cabinets of curiosities and antiquarian collections popular in Browne’s time, many of which contained items of dubious origin or downright fakery. But like Perec’s prospectus, the catalogue of Browne’s lost museum is the inventory of a treasure house that existed purely in the writer’s imagination and to which there was no access except through the letters on the page.</p>
  559. <p>Browne was a scholar, educated at the universities of Oxford, Padua, Montpellier and Leiden, with vast expertise in areas as diverse as medicine, anatomy, ornithology, botany, ancient history and literature, etymology, archaeology, religion and the esoteric.</p>
  560. <p>He brought all these interests together in <cite><a href="https://archive.org/stream/hydriotaphiaurne00browuoft#page/n115/mode/2up">The Garden of Cyrus</a></cite>, a work from 1658 which records the patterns that recur in the seemingly infinite diversity of natural and human-made things. Browne identifies the form of the quincunx and other patterns in a prodigious array of structures, from plants and the bodies of animals, to gardens, and architecture ancient and contemporary.</p>
  561. <p>Browne sought out connections and patterns in all available sources and wasn’t afraid to combine his seemingly disparate interests in new scientific developments and ancient learning as well as his Christian faith, to express his fascination with the world and everything in it. His prose style allows for hasty notes and brief observations, as well as the most intricate Baroque elegance and eloquence, sentences filled with fine flourishes and civilized convolutions. His writings are the products of an unusually active and enquiring mind, able to combine complex and diverse material in the crucible of his imagination, providing coruscating insights into the world around him.</p>
  562. <hr class="writer"/>
  563. <p>If we set out to place web design in a broader context, perhaps one possible future direction for web design writing lies in the past.</p>
  564. <p>2014 was the year the web turned twenty-five. In the build up to that, and after, has been a renewed interest in the early days of the web, an attempt to reassess where we’ve been and how far we’ve come.</p>
  565. <p>Since autumn 2012, Jen Simmons (initially with Eric Meyer) has presented special editions of <a href="http://5by5.tv/webahead">The Web Ahead podcast</a>, called The Web Behind. Through interviews with people including Molly Holzschlag, Dave Shea and John Allsop, who wrote <cite class="article">“<a href="http://alistapart.com/article/dao">A Dao of Web Design</a>”</cite>, the podcasts explore early web design, the nascent web design community, and how designers found their way in this new medium.</p>
  566. <p>At the start of October 2014, <a href="http://5by5.tv/webahead/85">Jen spoke to Dan Noyes</a> about relaunching the early web. Various projects at CERN are restoring <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">the world’s first website</a> and preserving some of <a href="http://first-website.web.cern.ch/">the digital assets associated with the birth of the web</a>. Part of that project involved a series of <a href="http://first-website.web.cern.ch/blog/line-mode-browser-dev-days-cern">hack days</a> in September 2013, in which the original line mode browser was re-created.</p>
  567. <p>In April this year, Greg Storey of Happy Cog <a href="http://www.airbagindustries.com/archives/airbag/vogel.php">suggested we need a web design museum</a> to preserve the history of web design, working like a science centre, curating exhibits on a timeline, guiding you through the working files, important emails, formative essays and forgotten blog posts.</p>
  568. <p>In August, Trent Walton and Dave Rupert of Paravel Inc. re-created the first Microsoft homepage from 1994, describing it as “sort of like an archaeological dig, digging through dinosaur bones, to find out how they did this then.”<sup>8</sup></p>
  569. <p>One of the promises of the web is to act as a record, a repository for everything we put there. Yet the web forgets constantly, despite that somewhat empty promise of digital preservation: articles and data are sacrificed to expediency, profit and apathy; online attention, acknowledgement and interest wax and wane in days, hours even. It’s well documented that after enough time in front of our screen, we learn to absorb information less effectively, skip the bottom half of paragraphs, shift focus constantly in a kind of restless idleness of endless distracted browsing: “the brighter the software, the dimmer the user.”<sup>9</sup></p>
  570. <p>Now, much of the web exists in an eternal present: update, update, update! Yet without an understanding of our history we’re condemned to constantly reorientate ourselves, to redefine what we’re doing, to starting again. Maybe this is one reason why methodologies like agile have taken such a hold on how we do web development.</p>
  571. <p>Web design writing doesn’t have to focus exclusively on what we’re doing right now. There are long views, and longer views than just twenty-five years. Year zero for web design doesn’t have to be 1989. The web is communication and connection and interaction through words and images. Words and images go back a long way. Web design is a unique field, certainly, but directly related disciplines have rich and varied histories and established discourses we can draw on to inspire and inform and interrogate web design.</p>
  572. <hr class="writer"/>
  573. <p>In <cite>The Rings of Saturn</cite>, a book by German writer W G Sebald, the narrator describes a walking tour along the eastern coast of England. Along the way, through an unsettling network of associations, tangents and apparent coincidences, the reader is led across the world, into different times and lives. The opening and closing chapters are meditations on the writing of Sir Thomas Browne, who lived and worked close to where the narrator’s journey takes him, and whose works Sebald uses as a frame and embarkation point for his explorations of memory, history, landscape, exile and loss.</p>
  574. <figure>
  575. <img src="sebald01.jpg" alt="W G Sebald"/>
  576. <figcaption>W G Sebald <span class="credit">[<a href="http://www.apieceofmonologue.com/2012/08/wg-sebald-interview-life-work.html">Source</a>]</span></figcaption>
  577. </figure>
  578. <p>Pervasive in Sebald’s writing are moods of permeability and flux. In The Rings of Saturn, the locations walked through by Sebald’s narrator in 1992 are repeatedly invaded by intimations of other places and times. The narrative digresses repeatedly, often and again shifting focus, and changing the context in which what is being discussed is understood.</p>
  579. <p>Sebald’s style is similarly a collage of influences and forms, mixing together several genres (novels, autobiography, travel writing, history), punctuated by occasional indistinct black and white photographs, which often don’t illustrate the narrative so much as comment obliquely on it. Through combining disparate literary modes, Sebald pioneered a new kind of literary form, which opens up the narrative possibilities for other writers.</p>
  580. <p>Sebald’s writing is further characterized by its reflexivity. While the writer and narrator aren’t exactly the same person, Sebald puts himself in his work, taking account of himself and the effect of his presence on what he’s writing about. The narrator often calls the reader’s attention to the book they’re reading and the process by which it came to be written: “It was then that I began in my thoughts to write these pages.”; “Now that I begin to assemble my notes…”; “Today, as I bring these notes to a conclusion…” Even when reaching the end, Sebald fashions the book in the reader’s hands as work in progress rather than the culmination of writing; a further point of departure rather than an arrival.</p>
  581. <hr class="writer"/>
  582. <blockquote>
  583. <p>Writing is about discovering things hitherto unseen. Otherwise there’s no point to the process.<sup>10</sup></p>
  584. <footer><cite>W G Sebald</cite></footer>
  585. </blockquote>
  586. <p>Underlying Jason Santa Maria’s article is not just a desire for a handshake with the past, but a demand to see web design as more than just a technical exercise, greater than the sum of its parts, deeper than tools, techniques and tactics. Web design should be a place worthy of the investment of our time, our energy, and ourselves.</p>
  587. <p>Some of the best web design writing of recent years wasn’t, at least initially, written down. It was spoken.</p>
  588. <p>Frank Chimero’s talk “<a href="http://frankchimero.com/talks/what-screens-want/transcript/">What Screens Want</a>”, given at the Build conference in Belfast last year, ostensibly looked at what it means to design for screens. Through a fascinating network of connections, digressions and personal reflections, Frank leads us past the ugly suburban web of commerce, transactions and the commodification of attention in which we’re currently trapped, to a hopeful vision of the web built on extensibility, openness and communication. All that, and it’s still about designing for screens.</p>
  589. <p>Two years earlier, Wilson Miner gave a talk called “<a href="http://vimeo.com/34017777">When We Build</a>”, also at the Build conference. Wilson’s talk was about the importance of products that change our environment and how designing mindfully for and within the now ubiquitous digital landscape means web designers can help influence how the world works now and in future. Like Frank, Wilson draws on his own experience and carefully interconnects a variety of sources in service of his argument. This talk was first given in 2011, but critical reflection in web design writing enables a writer to reframe and recast themes over time. In a new article just published, called <cite class="article">“<a href="http://www.alwaysreadthemanual.com/issues/4/wilson-miner/article">Perennial Design</a>”</cite>, Wilson builds on issues raised in “When We Build” from a new starting point and to a new purpose. Yet there’s a clear thread running through both pieces, about building digital products around sustainable systems that can survive and thrive.</p>
  590. <p>Above the roiling churn of more ordinary web design articles, percipient and acute web design writing like this delineates the contours of web design from new perspectives. By looking up and away from tools, techniques and tactics, by filtering ideas through personal experience, by shifting their vantage points and sidestepping received wisdom about how we’re supposed to write for an online audience, writers like Frank and Wilson transform our thinking about what we do.</p>
  591. <p>Critical reflection in web design writing is in short supply. Because such writing is so unfamiliar, it can be baffling and frustrating and uncomfortable trying to imagine the forms it might take. To practical people like web designers, it can feel too much like academic essay writing or solipsistic meandering to no useful end; it seems neither immediate nor immediately appealing or relevant.</p>
  592. <p>I’ve discussed two causes of which this is an effect: first, our expectation of what web design writing is; and second, the necessity and pressure of keeping up with developments, which can render us voiceless, believing it unnecessary or beyond our capabilities to analyse our work in relation to broader themes, sticking instead and always to tools, techniques and tactics.</p>
  593. <p>Reflective, analytical writing doesn’t fit the “get in, score, and get out” model. Its rewards and gratifications are far from instant. But they are long-lasting. And I believe web design needs such writing, alongside the more usual kind, to advance its purpose. Web design is a public practice. It can tell us about our culture and society. Web design writing must in part be concerned with insightful accounting of the social, cultural, aesthetic and even political forces reflected in the work itself. It can be an opportunity to intensify, alter and expand our discipline.</p>
  594. <hr/>
  595. <blockquote>
  596. <p>By all means be experimental, but let the reader be part of the experiment.<sup>11</sup></p>
  597. <footer><cite>W G Sebald</cite></footer>
  598. </blockquote>
  599. <p>Where can this kind of web design writing be published? Online, certainly, but we should remember to shrewdly recast the so-called rules of online writing. This is writing not to meet business objectives or to engage customers. It’s purpose is to foster and nurture web design in broader contexts. It seems obvious, then, to turn to digital publishing beyond the web.</p>
  600. <p>We need nimbler publishing, on paper and electronically. Although still not widely adopted, EPUB3 is the new standard in ebooks, bringing with it new possibilities for interaction and connection: readers with the text; readers with readers; and readers with authors. EPUB3 is built on HTML, CSS and JavaScript – sound familiar? In the past, we took what we could from the printed page to make the web; now books are rubbing up against what we’ve made.</p>
  601. <p>And have you noticed how some web design books are becoming smaller and shorter? Books that share many characteristics with older formats. Everything old is new again. A Book Apart and Five Simple Steps have both responded to the changing demands of readers and writers by publishing shorter technical books focused on narrow or single subjects. There’s no reason such formats shouldn’t contain the beginnings of a new web design discourse. And if publishers are uncertain of their feasibility, one option is subscription-based publishing, another return to an older model. In October 2014, Andy McMillan of The Manual <a href="https://www.kickstarter.com/projects/goodonpaper/the-manual-everywhere">successfully reached the Kickstarter target</a> to fund future issues.</p>
  602. <p>We can also take advantage of the digital publishing revolution to increase the readership and relevance of web design writing. As <a href="http://aworkinglibrary.com/writing/deploy/">Mandy Brown has pointed out</a>, publishing can become an iterative and continuous deployment. A single article can be advanced in a discussion thread, expanded into a talk, revised and updated, reframed in light of responses or new events. Instead of a single moment of publication, deploying a text becomes a sustained process seeing a text through from generation to revision and release, and onward to a long and varied life.</p>
  603. <hr/>
  604. <blockquote>
  605. <p>Words are innocent. By using them without imagination, it’s us who make them hateful.<sup>12</sup></p>
  606. <footer><cite>Umberto Eco</cite></footer>
  607. </blockquote>
  608. <p>I mentioned earlier that I’m an editor and my work involves guiding authors through the difficulties of writing articles and books about web design and development. Almost all of that writing, even at book-length has been the kind that looks at, describes and explains tools, techniques and tactics; the kind that shares what the writer knows with the wider web community; the kind that’s immediately useful and practical and gets the job done.</p>
  609. <p>One thing the writers I work with have in common is that they all started out writing about web design online: on their personal sites, for online magazines like Smashing, or other outlets like <a href="http://24ways.org/">24 ways</a>. I always tell them that even a short book should allow them to develop ideas more fully, explore the consequences to greater depth, and convey everything with more eloquence, more style. Why shouldn’t authors delay their conclusions if the intervening text is apposite, rich with value and helps to flesh out the skeleton of an argument? A writer is at greater liberty in a book to digress in tangential and interesting ways.</p>
  610. <p>It can be a struggle, even for experienced web design writers, to relinquish their ingrained writing habits and be more expansive, not exclusively in length, but necessarily in depth and breadth too. What <a href="https://medium.com/@betarish/continuous-partial-argument-793392596225">Rishi Dastidar recently called</a> “the seductiveness of the continuous partial argument” – our default for online writing – “its choppiness, its discreteness, its bite-sized attractiveness” are anathema to constructing full and fluid argument. But it’s my responsibility to tell authors to save brevity for Twitter and Facebook; to strive for complexity of thought and ways to express that thought clearly and honestly – not for ways to reduce it down to its basics: reduce expression and you gradually reduce thought.</p>
  611. <hr/>
  612. <blockquote>
  613. <p>Learn to recognize the approach of an ending, and when one appears, grab it.<sup>13</sup></p>
  614. <footer><cite>Paul Graham</cite></footer>
  615. </blockquote>
  616. <p>Perec reminds us to never stop searching for new ways to write, to never repeat ourselves or stay within narrow and familiar confines. There’s a certain discipline required to create critical written work that demands the author be receptive and focused on finding new sources of information, inspiration, and insight. Being a curator of good ideas (which tweets and blog posts tend to be perfect for capturing) encourages deeper thinking, research, and heading down the rabbit hole to find unique approaches.</p>
  617. <p>Browne shows us that through making connections between diverse and varied subject matter we can develop new perspectives and gain insight. Starting small is useful. Writing within and around a particular topic for some time can lead authors to build on earlier ideas. It’s been said many times that writing is thinking. Writing is a mode of exploration and evaluation – in many ways parallel to the design process: the practice of manipulating words and expression feeds a designer’s ability to communicate. Web designers should write not in order to become better writers, but to become better designers.</p>
  618. <p>Sebald created a new form by yoking disparate existing forms together and acknowledging and interrogating reflexively the influence of his presence on his themes. It’s from practitioners, then, that a common language for a discourse about web design could and should emerge. For web design writing (and from that, web design thinking) to mature, it must include the influences and interests of its practitioners, and the practitioners themselves.</p>
  619. <p>Writing doesn’t just communicate ideas; it generates and transforms them. A writer doesn’t necessarily work from an idea but towards one. Wilson Miner wrote that “If all we celebrate is what is visible on the surface—the fragile plant and not the durable root system—we limit the scope of our ambition to the shortest possible horizon.”<sup>14</sup> Beneath our fingers the keyboard rests. Let’s dig with it.<sup>15</sup></p>
  620. <hr/>
  621. <h2>References</h2>
  622. <ol>
  623. <li>Dr Seuss, <cite class="article">“A Short Condensed Poem in Praise of Reader’s Digest Condensed Books”</cite>, 1980</li>
  624. <li>Georges Perec, <cite>Species of Spaces</cite> in <cite>Species of Spaces and Other Pieces</cite> (edited and translated by John Sturrock, Penguin, 1997). First published as <cite lang="fr">Espèces d’espaces</cite>, 1974</li>
  625. <li>Georges Perec, <cite class="article">“Notes on What I’m Looking For”</cite> in <cite>Species of Spaces and Other Pieces</cite> (edited and translated by John Sturrock, Penguin, 1997). First published as <cite lang="fr">“Notes sur ce que je cherche”</cite> in <cite>Figaro</cite>, December 1978, subsequently in <cite>Penser/Classer</cite>, 1985</li>
  626. <li>Sally Kerrigan, <cite class="article">“<a href="http://alistapart.com/article/writing-is-thinking">Writing Is Thinking</a>”</cite>, A List Apart, 14 January 2014</li>
  627. <li>W G Sebald, quoted in <cite class="article">“<a href="http://richardskinner.weebly.com/blogposts/max-sebalds-writing-tips">Max Sebald’s Writing Tips</a>”</cite> by David Lambert and Robert McGill, 14 January 2013</li>
  628. <li>W G Sebald, quoted in <cite class="article">“<a href="http://richardskinner.weebly.com/blogposts/max-sebalds-writing-tips">Max Sebald’s Writing Tips</a>”</cite> by David Lambert and Robert McGill, 14 January 2013</li>
  629. <li>Sir Thomas Browne, <cite><a href="http://www.archive.org/stream/certainmiscellan00browrich#page/192/mode/2up">Musæum Clausum, or Bibliotheca Abscondita</a></cite>, 1684, link to scanned copy hosted at the Internet Archive</li>
  630. <li>Dave Rupert, quoted in <cite class="article">“<a href="http://blogs.microsoft.com/firehose/2014/08/07/throwback-thursday-microsoft-com-among-the-earliest-commercial-websites-has-been-on-the-web-for-20-years/">Throwback Thursday: Microsoft.com, among the earliest commercial websites, has been on the Web for 20 years</a>”</cite>, by Suzanne Choney, 7 August 2014</li>
  631. <li>Nicholas Carr, <a href="http://www.theshallowsbook.com/"><cite>The Shallows: How the Internet is Changing the Way We Think, Read and Remember</cite></a>, 2011</li>
  632. <li>W G Sebald, quoted in <cite class="article">“<a href="http://richardskinner.weebly.com/blogposts/max-sebalds-writing-tips">Max Sebald’s Writing Tips</a>”</cite> by David Lambert and Robert McGill, 14 January 2013</li>
  633. <li>W G Sebald, quoted in <cite class="article">“<a href="http://richardskinner.weebly.com/blogposts/max-sebalds-writing-tips">Max Sebald’s Writing Tips</a>”</cite> by David Lambert and Robert McGill, 14 January 2013</li>
  634. <li>Umberto Eco, <cite class="article">“<a href="http://books.google.co.uk/books?id=ww6Hnq0FYkgC&amp;pg=PT101&amp;lpg=PT101&amp;dq=Come+dire+brutte+parole+in+un+attimino&amp;source=bl&amp;ots=_iElhHsE1P&amp;sig=nWRcVUpT6NEyBFDeyFly210ASdY&amp;hl=en&amp;sa=X&amp;ei=Ht1fVOaRHqqO7AaipoCYCw&amp;ved=0CCsQ6AEwAQ#v=onepage&amp;q=Come%20dire%20brutte%20parole%20in%20un%20attimino&amp;f=false">Come dire brutte parole in un attimino</a>”</cite> [How to say ugly words in an instant], in his column “La bustina di minerva” for L’Espresso, 29 March 1992</li>
  635. <li>Paul Graham, <cite class="article">“<a href="http://www.paulgraham.com/writing44.html">Writing, Briefly</a>”</cite>, March 2005</li>
  636. <li>Wilson Miner, <cite class="article">“<a href="http://alwaysreadthemanual.com/issues/4/wilson-miner/article">Perennial Design</a>”</cite>, The Manual, issue 4</li>
  637. <li>Seamus Heaney, <cite class="article">“<a href="http://www.poetryfoundation.org/poem/177017">Digging</a>”</cite> from <cite>Death of a Naturalist</cite>, 1966</li>
  638. </ol>
  639. </article>
  640. </section>
  641. <nav id="jumpto">
  642. <p>
  643. <a href="/david/blog/">Accueil du blog</a> |
  644. <a href="http://www.fullcreammilk.co.uk/speaking/readwrite/script.html">Source originale</a> |
  645. <a href="/david/stream/2019/">Accueil du flux</a>
  646. </p>
  647. </nav>
  648. <footer>
  649. <div>
  650. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  651. <p>
  652. Bonjour/Hi!
  653. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  654. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  655. </p>
  656. <p>
  657. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  658. </p>
  659. <p>
  660. Voici quelques articles choisis :
  661. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  662. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  663. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  664. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  665. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  666. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  667. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  668. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  669. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  670. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  671. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  672. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  673. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  674. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  675. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  676. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  677. </p>
  678. <p>
  679. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  680. </p>
  681. <p>
  682. Je ne traque pas ta navigation mais mon
  683. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  684. conserve des logs d’accès.
  685. </p>
  686. </div>
  687. </footer>
  688. <script type="text/javascript">
  689. ;(_ => {
  690. const jumper = document.getElementById('jumper')
  691. jumper.addEventListener('click', e => {
  692. e.preventDefault()
  693. const anchor = e.target.getAttribute('href')
  694. const targetEl = document.getElementById(anchor.substring(1))
  695. targetEl.scrollIntoView({behavior: 'smooth'})
  696. })
  697. })()
  698. </script>