davidbgk
/
larlet-fr-david-cache
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
76 提交
1 分支
目录树: 1960169471
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '1960169471'
${ noResults }
larlet-fr-david-cache/cache/493740e238723f55bddc9416ad8.../index.html

index.html 28KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585 
  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>Mobile First (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="http://stratechery.com/2015/mobile-first/">

  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.   Mobile First (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="http://stratechery.com/2015/mobile-first/">Source originale du contenu</a></h3>

  463.     <p>Last Friday was the eight-year anniversary of the announcement of the iPhone, the event that began <a href="http://stratechery.com/2014/state-consumer-technology-end-2014/">the mobile epoch</a>. It was, though, an Apple rumor that to my mind illustrated just how much the world has changed.</p>

  464. 

  465. <p>Mark Gurman is reporting <a href="http://9to5mac.com/2015/01/06/macbook-air-12-inch-redesign/">at 9to5Mac</a> that the next MacBook Air will have a radical redesign. The biggest surprise was about the ports, or lack thereof:</p>

  466. 

  467. <blockquote>

  468.   <p>The upcoming 12-inch Air has the fewest amount of ports ever on an Apple computer…On the right side is a standard headphone jack and dual-microphones for input and noise-canceling. On the left side is solely the new USB Type-C port. Yes, Apple is currently planning to ditch standard USB ports, the SD Card slot, and even its Thunderbolt and MagSafe charging standards on this new notebook…As we’ve reported on multiple occasions, the new USB Type-C connector is smaller, faster, and more capable than the standard USB 2.0 and 3.0 ports on existing computers. The connector is able to replace the Thunderbolt Display port on the current Apple laptops as USB Type-C actually has the technology to drive displays. Additionally, the latest specifications from the USB foundation indicate that USB Type-C can actually be used to power computers, which makes the standard MagSafe plugs unnecessary on this new device.</p>

  469. </blockquote>

  470. 

  471. <p>The obvious caveat here is that this is a rumor; Gurman may have a great track record, but he could be wrong and the next MacBook Air could have more than one port. But I rather suspect he&#8217;s right, because the MacBook Air he describes is the first Apple PC<sup id="fnref:0:1370"><a href="#fn:0:1370" id="fnref:0:1370" class="footnote-link footnote-identifier-link" rel="footnote" title="Chromebooks were first">1</a></sup> that is Mobile First.</p>

  472. 

  473. <h4>The Origin of Mobile First</h4>

  474. 

  475. <p>As best I can tell, &#8220;Mobile First&#8221; was first used by <a href="http://en.wikipedia.org/wiki/Marc_Davis_(academic)">Marc Davis</a>, then Yahoo&#8217;s Chief Scientist and VP of Early Stage Products of Yahoo! Mobile.<sup id="fnref:1:1370"><a href="#fn:1:1370" id="fnref:1:1370" class="footnote-link footnote-identifier-link" rel="footnote" title="Seriously, that&rsquo;s the title, according to this TechCrunch article reporting Davis&rsquo; exit a mere three months after coining the term &ldquo;Mobile First&rdquo;. I suspect there is a lot about Yahoo&rsquo;s fate that can be gleaned from this footnote">2</a></sup> <a href="http://readwrite.com/2009/04/06/putting_mobile-first_to_work">From ReadWriteWeb</a>, reporting on the Web 2.0 Expo in April 2009:</p>

  476. 

  477. <blockquote>

  478.   <p>Yahoo&#8217;s Marc Davis spoke about the mobile internet and the future of the mobile industry. As the mobile web evolves, he said, it&#8217;s no longer good enough to simply port the PC experience to the phone&#8217;s small screen &#8211; it&#8217;s time to start building &#8220;mobile-first&#8221; products instead. What are &#8220;mobile-first&#8221; products? They&#8217;re services designed to take advantage of the strengths and abilities of the mobile devices themselves, leading to entirely unique creations that can only be found on the mobile web.</p>

  479. </blockquote>

  480. 

  481. <p>Though it&#8217;s taken a few years, Mobile First is now gospel for most consumer tech companies in particular. Perhaps the most famous example is Facebook; in a shift akin to Microsoft&#8217;s 1995 embrace of the Internet, Facebook went from having <a href="http://mashable.com/2013/09/20/facebook-mobile-strategy/">a mere 20 people</a> on its mobile team in 2012 to <a href="http://www.quora.com/Approximately-how-many-software-engineers-work-at-all-the-teams-responsible-for-all-of-the-Facebook-mobile-apps">several hundred</a> mobile-focused developers embedded in every team in the company. The results &#8211; both in product and to the top and bottom lines &#8211; have been stunning.</p>

  482. 

  483. <p>A better example is Instagram: the photo-sharing social network launched as an iPhone app only, and for a long time its only web presence was direct photo links. Today there is a website, but it&#8217;s little more than a scaled up version of the app, and there is no tablet app at all. This should not be a surprise: while tablets mostly run mobile operating systems, they are not mobile devices; they do not go with you everywhere.</p>

  484. 

  485. <p>This distinction is critical: what is essential to understand about Mobile First is that everything flows from, well, mobility. The relative importance of implementation details and even the underlying OS fade relative to the significance of nearly every person on earth having an Internet communicator with them at every single moment. Every single product and service must start with this fundamental assumption.</p>

  486. 

  487. <h4>The Implications of Mobile First</h4>

  488. 

  489. <p>In this reading of Mobile First &#8211; that it&#8217;s about presupposing that every potential consumer of your product or service has a smartphone &#8211; the implications apply far more broadly than social networks or app makers.</p>

  490. 

  491. <p>Consider CES: over the last several years the show has seemed to fade as smartphones have subsumed all types of gadgets from cameras to music players to video recorders. This year, though, was all about the &#8220;Internet of Things,&#8221; and as annoying as that catchphrase may be, it&#8217;s something that only makes sense in a Mobile First world: now, instead of those old gadgets that make PC functions mobile, &#8220;Internet of Things&#8221; products assume the presence of a mobile smartphone. Thus the most interesting innovation is in things that don&#8217;t move: locks, light bulbs, garage door openers, and more, because they are designed with the assumption that the smartphone &#8211; and associated individual &#8211; comes to them.</p>

  492. 

  493. <p>Even more interesting was <a href="http://www.theverge.com/2015/1/5/7491071/dish-sling-tv-ott-internet-tv-announced-ces-2015">Sling TV</a>, the first service that, with its focus on sports, has the potential to actually make cord-cutting palatable for far more people than any service before it.<sup id="fnref:2:1370"><a href="#fn:2:1370" id="fnref:2:1370" class="footnote-link footnote-identifier-link" rel="footnote" title="I wrote about this extensively in the Daily Update here and here) (members-only links) ">3</a></sup> Just as interesting, though, is that while the service is provided by Dish Network &#8211; a company that has invested millions in launching satellites &#8211; the service is provided through an <em>app.</em> In other words, while the old Dish Service &#8211; and every other pay-TV service &#8211; was delivered to an <em>address</em>, Sling TV is delivered to a <em>person.</em> It is Mobile First.</p>

  494. 

  495. <p>As I noted in <a href="http://stratechery.com/2014/state-consumer-technology-end-2014/">The State of Consumer Technology at the End of 2014</a>, individual as service endpoint is an essential characteristic of one of the most important categories of emerging services, the so-called &#8220;sharing economy&#8221;. Uber is the easy example &#8211; the service quite literally goes to an individual&#8217;s exact location and picks them up &#8211; but it also applies to services like Instacart: without a smartphone coordinating shopping trips would be a logistical nightmare. The service is absolutely Mobile First.</p>

  496. 

  497. <p>Mobile First is also upsetting lots of assumptions around the transition to digital: consider the surprising news that the prospects for bookstores are looking up. From the <a href="http://www.ft.com/intl/cms/s/0/8dcddc64-97f4-11e4-b4be-00144feabdc0.html?siteedition=intl#axzz3OZWZbfQU">Financial Times</a>:</p>

  498. 

  499. <blockquote>

  500.   <p>The plot has now twisted sharply, with publishers and book chains in the US, UK and Australia celebrating sales figures showing the resilience of physical editions and of bricks-and-mortar stores.</p>

  501. 

  502.   <p>Waterstones said its sales had risen 5 per cent in December compared to the previous year…The optimism was echoed in the US. Barnes &amp; Noble appears to have ended a run of declining sales, and expects sales to be flat in 2014 and 2015. Its shares rose 5 per cent on the news.</p>

  503. 

  504.   <p>Fundamental shifts in consumer behaviour may also be helping the high street bookstore. “People are moving back to more frequent local shops. That’s when you can start popping in and buying books,” said Paul Lee, an analyst at Deloitte.</p>

  505. </blockquote>

  506. 

  507. <p>That fundamental shift in behavior is mobile: the most interesting place to be is no longer in front of a computer, it&#8217;s to go out into the world with a computer in your hand. And in that view, it&#8217;s no surprise that &#8220;3rd-places&#8221; like bookstores are experiencing a renaissance &#8211; or that physical goods, a welcome break from that ever-present screen, are more desirable than ever.</p>

  508. 

  509. <p>The impact will likely be felt far more broadly than bookstores: a decade ago, every small business thought they needed a website. Now many more businesses are simply focusing on their Facebook page, which is easier to find and use on mobile. Here China is light-years ahead: nearly every business has a WeChat account (you follow by scanning a QR code &#8211; they are ubiquitous) that includes not only the basics like addresses and hours but even ordering with delivery to wherever you&#8217;re sitting when you press the &#8216;Order&#8217; button.</p>

  510. 

  511. <div id="attachment_1373" style="width: 610px" class="wp-caption aligncenter"><a href="http://2yj23r14cytosbxol4cavq337g.wpengine.netdna-cdn.com/wp-content/uploads/2015/01/wechat2.png"><img src="http://2yj23r14cytosbxol4cavq337g.wpengine.netdna-cdn.com/wp-content/uploads/2015/01/wechat2-600x355.png" alt="Ordering dumplings in WeChat" width="600" height="355" class="size-large wp-image-1373" /></a><p class="wp-caption-text">Ordering dumplings in WeChat</p></div>

  512. 

  513. <p>Even dumplings are Mobile First.</p>

  514. 

  515. <h4>Why the Rumored MacBook Air is Mobile First</h4>

  516. 

  517. <p>And so, the story of the (rumored) MacBook Air starts not with the Mac, but rather with the iPhone. By virtue of its omnipresence it is the most important device in most consumers&#8217; lives. It is the first choice for getting information, for communicating, for taking pictures. It is a device that a huge majority of people could live on exclusively, and it very much stands alone: all of its essential functions have cloud counterparts, but none assume a PC.<sup id="fnref:3:1370"><a href="#fn:3:1370" id="fnref:3:1370" class="footnote-link footnote-identifier-link" rel="footnote" title="Microsoft&rsquo;s &ldquo;Mobile First Cloud First&rdquo; strategy makes much more sense now, no?">4</a></sup></p>

  518. 

  519. <p>True, it would be nice to have a keyboard to type longer emails, reports or papers, or a larger screen to watch movies, but those capabilities &#8211; again, for most people, not all &#8211; are nice to have, not essential.<sup id="fnref:4:1370"><a href="#fn:4:1370" id="fnref:4:1370" class="footnote-link footnote-identifier-link" rel="footnote" title="To put it another way, a MacBook Air is in the same class as an iPad">5</a></sup> Moreover, all of those capabilities depend on the same cloud services as the phone: email, social networking, photos, all of it comes over the (wireless) network, not a cable.</p>

  520. 

  521. <p>In this world, a Mobile First world, what exactly is the point of a port?<sup id="fnref:5:1370"><a href="#fn:5:1370" id="fnref:5:1370" class="footnote-link footnote-identifier-link" rel="footnote" title="If you need ports, buy a MacBook Pro. But if you care about rumors of unreleased products, you&rsquo;re probably not a normal consumer!">6</a></sup></p>

  522.   </article>

  523. </section>

  524. 

  525. 

  526. <nav id="jumpto">

  527.   <p>

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

  529.     <a href="http://stratechery.com/2015/mobile-first/">Source originale</a> |

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

  531.   </p>

  532. </nav>

  533. 

  534. <footer>

  535.   <div>

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

  537.     <p>

  538.       Bonjour/Hi!

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

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

  541.     </p>

  542.     <p>

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

  544.     </p>

  545.     

  546.     <p>

  547.       Voici quelques articles choisis :

  548.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  549.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  550.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  551.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  552.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  553.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  554.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  555.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  556.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  557.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  558.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  559.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  560.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  561.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  562.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  563.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  564.     </p>

  565.     <p>

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

  567.     </p>

  568.     <p>

  569.       Je ne traque pas ta navigation mais mon

  570.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  571.       conserve des logs d’accès.

  572.     </p>

  573.   </div>

  574. </footer>

  575. <script type="text/javascript">

  576.   ;(_ => {

  577.     const jumper = document.getElementById('jumper')

  578.     jumper.addEventListener('click', e => {

  579.       e.preventDefault()

  580.       const anchor = e.target.getAttribute('href')

  581.       const targetEl = document.getElementById(anchor.substring(1))

  582.       targetEl.scrollIntoView({behavior: 'smooth'})

  583.     })

  584.   })()

  585. </script>