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.

index.html 25KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570
  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>Destination: Everywhere (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://whoo.ps/2015/04/24/destination-everywhere">
  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. Destination: Everywhere (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://whoo.ps/2015/04/24/destination-everywhere">Source originale du contenu</a></h3>
  445. <p>Usually the first thing you do when you have an idea for a product or company is to register the domain. Because the web came before social networks and mobile, the conventional wisdom is that you need a website to serve as the canonical destination for whatever you’re peddling. The website is head of the beast, so to speak.</p>
  446. <p>This is still true in spite of <a href="http://www.eugenewei.com/blog/2015/4/6/tech-miscellany">the decline of the web</a>, <a href="http://whoo.ps/2014/04/10/double-u-double-u-double-u">the poor aesthetics of URL’s</a>, the existence of App Store pages that are more important for conversion purposes than your website, <a href="https://blog.shareaholic.com/social-media-traffic-trends-01-2015/">the primacy of social</a>, <a href="http://techcrunch.com/2015/04/22/facebook-voip-not-facebook-phone/#.1ezxla:24fH">the astronomical rise of messaging</a>, and <a href="http://www.theatlantic.com/business/archive/2014/05/what-the-death-the-homepage-means-for-news/370997/">the death of the homepage</a>. </p>
  447. <p>The <em>homepage</em>. It sounds so quaint now, doesn’t it? If you’re a media outlet launching today, is your "homepage" even a top priority? If a majority of traffic is coming from referrals on social networks, such that the majority of your visitors are arriving and then departing from singular <em>links</em>, in what sense is your homepage really your <em>home</em>?</p>
  448. <p>On today’s internet, there is no home. You probably have a website, but you might also have two to four apps (iOS, Android, and then phone and tablet), and accounts on Facebook (and Messenger), Twitter, Snapchat, Pinterest and Instagram). And the Internet is now so big and so fragmented that you could easily build a business on one platform while ignoring the rest. <a href="https://web.archive.org/web/20120103092009/http://instagram.com/">Instagram initially proved</a> that by going mobile app only and ignoring the web for years. </p>
  449. <p>More recently, one new media venture has opted to forgo both the web <em>and</em> native mobile apps, instead publishing on <a href="http://www.nytimes.com/2015/04/19/magazine/instagrams-tmz.html?_r=0">Instagram only</a>. The most profitable outfit in entertainment these days is a woman who <a href="http://www.buzzfeed.com/hillaryreinsberg/youtubes-biggest-star-is-an-unknown-toy-reviewing-toddler-wh#.uaDM6kD7Z">only publishes YouTube videos</a>. One new retail outfit is ignoring virtually all of the above and going <a href="http://www.businessinsider.com/what-is-stefans-head-2015-4?op=1">SMS only</a>. What might be <a href="http://www.techvibes.com/blog/madwhips-leverages-social-media-to-become-global-brand-2015-02-05">the fastest-growing automotive social network in the world</a> has 200K Facebook fans and 500K Instagram followers, yet their website traffic <a href="https://siteanalytics.compete.com/madwhips.com/#.VTkMtq1VhBc">barely registers</a> and have <a href="https://www.appannie.com/apps/ios/app/828490902/rank-history/#vtype=day&amp;countries=US&amp;start=2014-03-17&amp;end=2015-04-23&amp;device=iphone&amp;view=rank&amp;lm=1">no App Store rankings to speak of</a>. Buzzfeed has dedicated staff who create content that <a href="http://www.niemanlab.org/2015/03/a-wave-of-distributed-content-is-coming-will-publishers-sink-or-swim/"><em>will never appear on any Buzzfeed owned property</em></a>.</p>
  450. <p>These companies are relatively new outfits, and all but Buzzfeed are still small. But what about big, established brands today? If you’re a media outlet like the New York Times, and attention is being sucked up by Facebook, Twitter, Instagram, Pinterest, and Snapchat while your homepage has lost 50% of its traffic in two years, what do you do? </p>
  451. <p><span class="img-border"><img src="http://cdn.theatlantic.com/assets/media/img/posts/nythomepage.png" alt="New York Times Homepage Decline"/></span>
  452. <span class="caption">The New York Times lost half of its homepage visitors between 2011 and 2013. <a href="http://www.theatlantic.com/business/archive/2014/05/what-the-death-the-homepage-means-for-news/370997/">Source</a>.</span></p>
  453. <p>Do you sail into the wind and develop a bevy of web experiences and <a href="https://itunes.apple.com/us/artist/the-new-york-times-company/id284862086">eight apps for iOS alone</a>? How do you even compete as a Canonical Destination publisher when <a href="http://www.eugenewei.com/blog/2015/3/27/facebook-doesnt-change-things-the-world-already-changed">all the best tech minds</a> are working for Facebook's of the world? </p>
  454. <p>Or do you sail with the wind and start publishing directly to the social networks? This means that you’ve lost control of your destiny as a publisher, but is that such a bad thing? Consider that news organizations have historically been publishers because, pre-internet, how else were people going to read your stuff if you didn’t print and distribute it yourself? Meanwhile, the upshot of forgoing your role as publisher is that you’ve hopefully solidified your role as a content creator and curator. Maybe you exist and hopefully thrive as <a href="http://tomcritchlow.com/2015/04/15/decentralized-brands/">a decentralized brand</a> which, when displayed as an avatar alongside your content, conveys a level of trust and gravitas that no other avatar can convey?</p>
  455. <p><a href="https://s3.amazonaws.com/whoops-images/images/destinationeverywhere/nytimes.png" target="_blank"><span class="img-border"><img alt="The New York Times Homepage" src="https://s3.amazonaws.com/whoops-images/images/destinationeverywhere/nytimes.png"/></span></a></p>
  456. <p><span class="caption">The evolution of media?</span></p>
  457. <p>And what if you’re a retail brand like Banana Republic that doesn’t want to lose all internet shoppers to retailers that are <a href="https://neededition.com/">internet natives</a>? Do you stay the course with <a href="https://itunes.apple.com/us/app/br/id342797197?mt=8">your poorly rated app</a>, crusty email newsletters, <a href="http://www.amazon.com/s/ref=bl_sr_apparel?ie=UTF8&amp;field-brandtextbin=Banana+Republic&amp;node=7141123011">your store on Amazon</a>, and the hope that people will always be willing to type banana republic dot com into their mobile browser? </p>
  458. <p>Or do you make make the same move as the New York Times and accept the <a href="http://whoo.ps/2015/03/31/a-case-of-mistaken-incumbency">networks’ bargain</a>? That is, "You do what you do best—be it media or retail design and manufacturing—and we’ll do what we do best—publishing, distribution, and soon merchandising and retail." </p>
  459. <p><span class="img-border"><img src="http://2yj23r14cytosbxol4cavq337g.wpengine.netdna-cdn.com/wp-content/uploads/2014/10/photo-5-600x444.jpg" alt="The Publishers Smiling Curve"/></span></p>
  460. <p><span class="caption">Ben Thompson’s Smiling Curve of Publishing. <a href="http://stratechery.com/2014/publishers-smiling-curve/">Source</a>.</span></p>
  461. <p>That sounds like an odd deal for retailers but it’s identical to Amazon’s proposition. Think about it: If you wanted to buy a Banana Republic shirt, doesn’t the convenience of Amazon, or <a href="https://messenger.com/business">maybe soon Facebook Messenger</a>, often trump navigating an unfamiliar BananaRepublic.com or Banana Republic app and then entering your credit card details anew?</p>
  462. <p>While all of this <a href="http://fusion.net/story/108799/how-facebook-could-kill-the-news-brand/">seems dire</a> if you’re a brand trying to maintain its independence, consider that "aitch tee tee pee colon backslash backslash double u double u double u dot banana republic dot com" probably didn’t seem so great for branding in the early days of the web, yet it soon came to represent as canonical a destination for the brand as the brick-and-mortar store. In the next few years, maybe the homepage diminishes in importance, and maybe it’s unfortunate that instead of having some canonical destination — be it a website, an app, or whatever—you’re now being foisted onto closed, proprietary silos like Facebook et al. </p>
  463. <p>But maybe if you’ve got a strong brand, like The New York Times, The New Yorker, The Economist, Victoria Secret, American Apparel, or Lululemon, you’re well suited to thrive in an environment that the social networks foster so well: Identity, curation, and tastemaking. After all, that’s exactly what a brand is: A collection of ideas and feelings that travel with you even when the brand is not in sight, and come rushing to the fore as soon as the trademark comes into view. </p>
  464. <p>You could look at it as a mere reorganization of namespacing. Whereas the homepage once conferred some sense of reaching your canonical destination, it’s now your name on Facebook, Instagram, Twitter, Amazon etc. that consumers are searching for. And so long as we have trademark law, owning your name and trademark might just be all you need to be everywhere and anywhere.</p>
  465. <hr/>
  466. <h3><span>Additional Reading</span></h3>
  467. <p><em>The ideas in this post were rattling around my head until I read Tom Critchlow’s <a href="http://tomcritchlow.com/2015/04/15/decentralized-brands/">Decentralized Brands &amp; The Future of Content Marketing</a>. This post was largely inspired by his; so much so that I lifted all of his examples and sources.</em></p>
  468. </article>
  469. </section>
  470. <nav id="jumpto">
  471. <p>
  472. <a href="/david/blog/">Accueil du blog</a> |
  473. <a href="http://whoo.ps/2015/04/24/destination-everywhere">Source originale</a> |
  474. <a href="/david/stream/2019/">Accueil du flux</a>
  475. </p>
  476. </nav>
  477. <footer>
  478. <div>
  479. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  480. <p>
  481. Bonjour/Hi!
  482. 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>
  483. 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>).
  484. </p>
  485. <p>
  486. 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>.
  487. </p>
  488. <p>
  489. Voici quelques articles choisis :
  490. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  491. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  492. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  493. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  494. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  495. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  496. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  497. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  498. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  499. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  500. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  501. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  502. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  503. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  504. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  505. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  506. </p>
  507. <p>
  508. 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>.
  509. </p>
  510. <p>
  511. Je ne traque pas ta navigation mais mon
  512. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  513. conserve des logs d’accès.
  514. </p>
  515. </div>
  516. </footer>
  517. <script type="text/javascript">
  518. ;(_ => {
  519. const jumper = document.getElementById('jumper')
  520. jumper.addEventListener('click', e => {
  521. e.preventDefault()
  522. const anchor = e.target.getAttribute('href')
  523. const targetEl = document.getElementById(anchor.substring(1))
  524. targetEl.scrollIntoView({behavior: 'smooth'})
  525. })
  526. })()
  527. </script>