davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
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.
11 Commits
1 Branch
Tree: ca13d848f6
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ca13d848f6'
${ noResults }
larlet-fr-david-cache/cache/ef5fc207792c19197bd40e26a7a.../index.html

index.html 29KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527 
  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 rise of “homeless” media (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://medium.com/thoughts-on-media/the-rise-of-homeless-media-97e031c8b319">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   The rise of “homeless” media (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://medium.com/thoughts-on-media/the-rise-of-homeless-media-97e031c8b319">Source originale du contenu</a></h3>

  463.     <div class="section-inner layoutSingleColumn"><p name="47a2" id="47a2" class="graf--p graf--hasDropCapModel graf--hasDropCap graf-after--figure"><span class="graf-dropCap">S</span>ince the advent of the Internet, publishers have been trying to leverage distribution channels — such as social media networks — to drive traffic to their own websites. Now, though, content can be hosted and monetized on these third-party platforms through services including Facebook’s Instant Articles or Snapchat’s Discover. As such, we can see the emergence of a new wave of “homeless” media companies that don’t require a home page; their sole purpose is to syndicate content.</p><h4 name="c587" id="c587" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">The evolution of digital media distribution</strong></h4><p name="d0ec" id="d0ec" class="graf--p graf-after--h4">Digital media companies have, to this point, generated revenue primarily through advertising displayed on their own websites. The amount of money earned corresponds at least indirectly with the size of the audience visiting their pages, so publishers turn to external platforms to build their brands. The Huffington Post and Drudge Report utilized search engine optimization to grow, while BuzzFeed, Vice and Vox are prime examples of sites utilizing social media channels to create “viral” content.</p><p name="0e98" id="0e98" class="graf--p graf-after--p">In fact, BuzzFeed founder and CEO Jonah Peretti said his company was “<a href="http://www.buzzfeed.com/jonah/2015memo#.bplwDG8b8" data-href="http://www.buzzfeed.com/jonah/2015memo#.bplwDG8b8" class="markup--anchor markup--p-anchor" rel="nofollow">a global, cross-platform network for news and entertainment.</a>” According to social <a href="http://blog.newswhip.com/index.php/2015/11/the-biggest-facebook-publishers-of-october-2015#I0DbMz2xAW7AORsO.97" data-href="http://blog.newswhip.com/index.php/2015/11/the-biggest-facebook-publishers-of-october-2015#I0DbMz2xAW7AORsO.97" class="markup--anchor markup--p-anchor" rel="nofollow">analytics company NewsWhi</a>p, BuzzFeed earned more than 35 million combined Facebook likes, shares and comments in October alone.</p><h4 name="472d" id="472d" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">From traffic acquisition to syndication</strong></h4><p name="88e2" id="88e2" class="graf--p graf-after--h4">The goal of acquiring traffic via search and social is coming to an end for some, though. A few publishers are aiming to syndicate their content through various channels, not including a home page or website they own. They instead rely solely on the distribution and monetization from being on third-party platforms such as Facebook et al. A good example of someone using this model is NowThis, which has built a successful content business model despite having a website <a href="https://nowthisnews.com/" data-href="https://nowthisnews.com/" class="markup--anchor markup--p-anchor" rel="nofollow">that currently reads</a>, “Homepage. Even the word sounds old. Today the news lives where you live.”</p><h4 name="9049" id="9049" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Why could “homeless” media become a trend?</strong></h4><ol class="postList"><li name="add8" id="add8" class="graf--li graf-after--h4"><strong class="markup--strong markup--li-strong">Mobile and app consumption is </strong><a href="http://www.businessinsider.com/the-mobile-distribution-report-social-platforms-and-mobile-apps-2015-11" data-href="http://www.businessinsider.com/the-mobile-distribution-report-social-platforms-and-mobile-apps-2015-11" class="markup--anchor markup--li-anchor" rel="nofollow"><strong class="markup--strong markup--li-strong">on the rise</strong></a><strong class="markup--strong markup--li-strong">.</strong></li></ol><figure name="74f7" id="74f7" class="graf--figure graf-after--li"><figcaption class="imageCaption">(Photo courtesy of The Associated Press)</figcaption></figure><p name="e2e1" id="e2e1" class="graf--p graf-after--figure">In June, mobile accounted for two out of every three minutes spent consuming digital media in the U.S., according to comScore. In 2014, mobile apps surpassed desktop as the leading digital media usage platform.</p><p name="402d" id="402d" class="graf--p graf-after--p">Also in June, according to comScore, total time spent consuming digital media via mobile apps reached close to 779 billion minutes, versus nearly 551 billion minutes on desktops. eMarketer highlights that users in the US spent 170 billion minutes on Facebook’s mobile app. It’s becoming clear, if it hasn’t already, where audiences are spending their time — social networks.</p><p name="1f0f" id="1f0f" class="graf--p graf-after--p"><strong class="markup--strong markup--p-strong">2.</strong> <strong class="markup--strong markup--p-strong">Third parties are creating platforms for publishers to easily distribute and monetize content.</strong></p><figure name="4a9f" id="4a9f" class="graf--figure graf-after--p"><figcaption class="imageCaption">(CNN on Snapchat’s Discover channel. Photo courtesy of CNN)</figcaption></figure><p name="8c77" id="8c77" class="graf--p graf-after--figure">Facebook’s Instant Articles and Snapchat’s Discover allow partnering publishers to directly reach growing audience bases with native content. For example, The Washington Post recently announced it <a href="https://www.washingtonpost.com/pr/wp/2015/09/22/the-washington-post-launches-instant-articles-on-facebook/" data-href="https://www.washingtonpost.com/pr/wp/2015/09/22/the-washington-post-launches-instant-articles-on-facebook/" class="markup--anchor markup--p-anchor" rel="nofollow">would send 100 percent of its stories to Facebook</a> so all content could be immediately accessible to users of the social network, with no loading time or paywalls to sift through. CNN has a dedicated team of one designer and two edit staffers specifically focused on <a href="http://digiday.com/publishers/snapchat-ninjas-in-the-newsroom/" data-href="http://digiday.com/publishers/snapchat-ninjas-in-the-newsroom/" class="markup--anchor markup--p-anchor" rel="nofollow">creating content for Snapchat</a>.</p><p name="9451" id="9451" class="graf--p graf-after--p">Additionally, Google recently announced its <a href="https://www.ampproject.org/" data-href="https://www.ampproject.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Accelerated Mobile Pages </a>(AMP) Program to help publishers create mobile-optimized content and have it load instantly everywhere. Twitter has an opportunity to work with partners on its <a href="https://about.twitter.com/moments" data-href="https://about.twitter.com/moments" class="markup--anchor markup--p-anchor" rel="nofollow">Moments</a> feature, which presents a curated section of tweets related to the same topic.</p><p name="beaf" id="beaf" class="graf--p graf-after--p">Media companies can benefit by teaming up with these technology firms to create platform-specific content for the distribution channels with the largest audiences, potentially creating more engagement and revenue opportunities.</p><h4 name="1872" id="1872" class="graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">What does this mean for you?</strong></h4><p name="ed81" id="ed81" class="graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">If you are a journalist or executive at a traditional media company …</strong></p><figure name="2325" id="2325" class="graf--figure graf-after--p"><figcaption class="imageCaption">(Photo courtesy of The Associated Press)</figcaption></figure><p name="fbf3" id="fbf3" class="graf--p graf-after--figure">The rise of “homeless” media suggests a tipping point is at hand and that media companies will need to figure out how to approach it from both business and editorial perspectives. How much (and what) content should be sent to these channels? What’s the revenue potential in either case?</p><ul class="postList"><li name="d5d1" id="d5d1" class="graf--li graf-after--p">Even if you already have a big following, engagement remains the key. You will need to develop content verticals and unique programming that can attract new audiences.</li><li name="a356" id="a356" class="graf--li graf-after--li">Acquire or partner with smaller niche publications with distinctive voices that can augment your reach and inject innovation into your content.</li><li name="61f3" id="61f3" class="graf--li graf-after--li">Hire strategic partner managers to develop relationships with the platforms and get you on one of their publishing programs.</li></ul><p name="fbed" id="fbed" class="graf--p graf-after--li"><strong class="markup--strong markup--p-strong">If you are an entrepreneur building the next big media brand …</strong></p><figure name="0851" id="0851" class="graf--figure graf-after--p"><figcaption class="imageCaption">(Photo courtesy of Matter.vc)</figcaption></figure><ul class="postList"><li name="fbc0" id="fbc0" class="graf--li graf-after--figure">Create distinctive content — build a niche audience that enables you to build a following.</li><li name="d680" id="d680" class="graf--li graf-after--li">Because you are not tied to any editorial guidelines, you have the opportunity to innovate on the format and build a following of people who are looking for new content.</li><li name="5de7" id="5de7" class="graf--li graf-after--li">Create a low-overhead business with minimal product development. Focus your resources on content creation and social distribution.</li><li name="a130" id="a130" class="graf--li graf-after--li">Hire people that have experience with platforms or that have worked at companies like Facebook, Twitter or Snapchat.</li></ul><p name="90ee" id="90ee" class="graf--p graf-after--li"><strong class="markup--strong markup--p-strong">If you work at one of the big platforms …</strong></p><figure name="88ec" id="88ec" class="graf--figure graf-after--p"><figcaption class="imageCaption">(Photo courtesy of The Associated Press )</figcaption></figure><ul class="postList"><li name="4d65" id="4d65" class="graf--li graf-after--figure">Open up the native program to more publishers and provide support on best practices. Collaborate with publishers because the future of your business relies on great content.</li><li name="be8c" id="be8c" class="graf--li graf-after--li">Create a seamless experience for consumers to watch, read and experience content. You are the new “cable” so it will be important to create an uncluttered experience that centralizes the best content.</li><li name="81ef" id="81ef" class="graf--li graf-after--li">Share consumption data and help publishers (both new and legacy media) understand what content works so your users’ experience and content consumption can be refined over time.</li><li name="8717" id="8717" class="graf--li graf-after--li">Create opportunities for revenue sharing within the platform and build a safe environment for advertisers to invest their money.</li></ul><p name="5a67" id="5a67" class="graf--p graf-after--li"><strong class="markup--strong markup--p-strong">If you are a venture capitalist looking for media businesses with growth potential …</strong></p><figure name="7bac" id="7bac" class="graf--figure graf-after--p"><figcaption class="imageCaption">(Photo courtesy of The Associated Press)</figcaption></figure><ul class="postList"><li name="94cf" id="94cf" class="graf--li graf-after--figure">Look for new media companies that have a distinctive voice and content that attracts a niche audience of engaged consumers.</li><li name="4d1a" id="4d1a" class="graf--li graf-after--li">Identify “content-first” companies with lean businesses and low overhead in product development, websites and mobile apps.</li><li name="b8a0" id="b8a0" class="graf--li graf-after--li">Help media startups in your portfolio develop strategic partnerships with larger media brands that are looking for niche content and new programming to grow their social following.</li></ul><h4 name="aae8" id="aae8" class="graf--h4 graf-after--li graf--last"><strong class="markup--strong markup--h4-strong">With native content consumption on third-party platforms growing, will it still be relevant for media companies to invest significant resources on running and maintaining their websites and mobile apps?</strong></h4></div>

  464.   </article>

  465. </section>

  466. 

  467. 

  468. <nav id="jumpto">

  469.   <p>

  470.     <a href="/david/blog/">Accueil du blog</a> |

  471.     <a href="https://medium.com/thoughts-on-media/the-rise-of-homeless-media-97e031c8b319">Source originale</a> |

  472.     <a href="/david/stream/2019/">Accueil du flux</a>

  473.   </p>

  474. </nav>

  475. 

  476. <footer>

  477.   <div>

  478.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  479.     <p>

  480.       Bonjour/Hi!

  481.       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>

  482.       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>).

  483.     </p>

  484.     <p>

  485.       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>.

  486.     </p>

  487.     

  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>