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 27KB

4 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604
  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>It’s not the end of apps (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://blog.intercom.io/its-not-the-end-of-apps/">
  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. It’s not the end of apps (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://blog.intercom.io/its-not-the-end-of-apps/">Source originale du contenu</a></h3>
  445. <p class="opening_paragraph">No one was saying that apps are dying.</p>
  446. <p>A few weeks ago we published an article entitled &#8220;<a href="http://blog.intercom.io/the-end-of-apps-as-we-know-them/">The End of Apps As We Know Them</a>&#8220;. The article hit a nerve, over 150,000 people read it, with many comments and a few follow up posts, <a href="https://medium.com/soda-hall/why-the-the-end-of-apps-theory-is-wrong-6e92e2d2af3d">some of which</a> offered counter points. This is a great thing, it’s how we collectively start to push the boundaries of our work and collectively move us forward at a faster pace.</p>
  447. <p>All that said there were some misunderstandings of the original points made, and for others there are counter points to the counter points. So let’s dive in to the top six and keep things moving.</p>
  448. <h3>1. I disagree with your premise. Apps aren’t dying!</h3>
  449. <p>The title of the post isn’t &#8220;The End of Apps&#8221;, it’s &#8220;The End of Apps <em>As We Know Them</em>&#8220;. Apps aren’t dying, that was never said, but unfortunately it was interpreted that way by some people. Apps are simply changing.</p>
  450. <p>People interacting with notifications <i>are </i>interacting with the app. This is critical to understand. And that’s the point: it’s the end of apps as we know them, as siloed independent destinations. The proportion of engagement with apps via notification systems will continue to increase.</p>
  451. <p>The primary thing to take away from this is designers and builders of products will need to think about their app as a publishing system as well as a destination. And in some cases much more so. It is not that apps are dying. That was never the point.</p>
  452. <p>It’s also not apps versus cards. Cards are increasingly interactive representations of small parts of an app. If it helps, think of the cards as mini versions of the app.</p>
  453. <p>Lastly, it’s not apps versus the web. It’s not an argument for or against apps or the web. Both could equally play a part. It’s also very unclear to me whether native apps will continue to dominate as the web on mobile devices improves. I honestly don’t know. In fact, I’d be sceptical about anyone saying they do know the answer to whether apps or the web will be dominant in five years.</p>
  454. <p>But for now: apps are certainly changing, moving towards publishing and service layers, and we need to start designing systems that represent that change.</p>
  455. <h3>2. People will need to open apps to create content!</h3>
  456. <p>This observation falls victim to what Marshall McLuhan famously described as our <a href="http://web.cs.ucdavis.edu/~rogaway/classes/188/spring07/mcluhan.pdf">‘march backwards into the future</a>’: that we apply the ways we work with existing media to a new medium. In this specific case it extends a little further, with people predicting how one technology will evolve whilst assuming that other technologies will stay the same. But content creation will evolve also. <i>People won’t need to open apps to create content from those apps.</i> This isn’t even new, it is already baked into iOS and Android for sharing images and taking photos. How many people take photos from their lock screen? And then share those photos without opening the app?</p>
  457. <div class="post_image_wrapper"><img src="http://43y3qy2bx0ks2g9x564339n2.wpengine.netdna-cdn.com/wp-content/uploads/2014/11/lock-screen-600.png" alt="" /></div>
  458. <p>Another example of how this is changing is <a href="http://techcrunch.com/2014/06/03/apple-delivers-location-based-app-suggestions-on-your-lock-screen-in-ios-8/">iOS 8 Suggested Apps</a>. In this case showing Starbucks on the phone lock screen, triggered by current context. Straight into ordering a coffee, no need to navigate to the app. Quip <a href="https://quip.com/blog/ios-8">do something similar</a>, straight into document editing from the lock screen.</p>
  459. <div class="post_image_wrapper"><img src="http://43y3qy2bx0ks2g9x564339n2.wpengine.netdna-cdn.com/wp-content/uploads/2014/11/starbucks-600.png" alt="" /></div>
  460. <p>It’s not hard to imagine that cards from apps will house core actions that are tangential to that specific card. That a Facebook card might have a (progressively disclosed) menu that allows one to create a new post or share a photo.</p>
  461. <p>Now think about emerging technologies. Voice input is a huge one. I encourage anyone who hasn’t used Google Voice Search to try it, and extrapolate that technology into many other areas. I believe it’s going to be a big thing:</p>
  462. <p>“Take a picture”<br />
  463. “Directions to x”<br />
  464. “Add a task: x”<br />
  465. “Order a taxi”</p>
  466. <p>The latest version of Google Now has an “always listening” mode. iOS has an “always listening” mode when connected to a power source e.g. in a car. With voice recognition you don’t even need to unlock your phone to create new content.</p>
  467. <h3>3. Businesses need to show ads to monetise their app!</h3>
  468. <p>There are multiple ways to monetise apps beyond ads. In fact, I’d argue that most people building consumer apps are making a mistake if they are relying on unrelated ads as their primary revenue stream. We all know that this is a crappy experience. Even today, there are so many other options here. In-app payments, upfront payments, SaaS, freemium, content licensing, integrations with other apps and revenue sharing, the list goes on.</p>
  469. <p>There will also be multiple new revenue models invented over the next few years. Not to mention that even for those replying on ads as a revenue stream, <i>mobile ads themselves</i> are still nascent and will dramatically change in the next few years. They will possibly even become part of the notification/content/action system itself.</p>
  470. <p>Once again, let’s not fall victim to marching backwards into the future.</p>
  471. <h3>4. This has all been done/talked about before!</h3>
  472. <div class="post_image_wrapper"><img src="http://43y3qy2bx0ks2g9x564339n2.wpengine.netdna-cdn.com/wp-content/uploads/2014/11/HyperCard.png" alt="" /></div>
  473. <p>Timing is an important factor in product success. It is often the case that otherwise great products can be too early. They need a market or technology to reach some point of maturation or saturation. The market doesn’t and shouldn’t distinguish between being early and being wrong. For example, between 2007 and 2009 I worked with others on many ideas at Google that couldn’t take off because smartphone penetration wasn’t high enough. Ideas are cheap, so yes many of the ideas around card-based UI have been around for a long time in different forms, but this isn’t really important as the ideas are different each time, and the society and industry into which they fall are always different. We all know about Hypercard and Web OS. But they failed to gain mass adoption, whereas card based products and systems are <a href="http://blog.intercom.io/why-cards-are-the-future-of-the-web/">clearly taking off now</a>. Even Windows Phone is struggling to gain momentum, so let’s stay focused on products with much greater adoption, which are more likely to influence designers, developers, and end consumers.</p>
  474. <p>There were some examples I didn’t know of previously e.g. <a href="https://play.google.com/store/apps/details?id=com.htc.launcher&amp;hl=en">Blinkfeed</a>. And it’s awesome that we all learn together to figure out what is next. There are still so many other examples we can draw from to see this emerging future. As a next step, check out <a href="http://www.pinterest.com/khoi/card-user-interfaces/">Khoi Vinh’s Pinterest board</a> collecting card examples.</p>
  475. <h3>5. Our primary phone screen won’t be an activity stream!</h3>
  476. <p>I agree, it is unlikely to be a linear stream like we experience today. The sketched out concept <a href="http://blog.intercom.io/the-end-of-apps-as-we-know-them/">in the original article</a> is one very loose direction where this may go. I’m not arguing that the future is some kind of “one activity stream to rule them all”. In fact as others have also said, it’s probably unlikely because the incumbent companies have too much to lose going that route. I outlined three big challenges towards the end of the post.</p>
  477. <p>Don’t forget that card interfaces need not be lists. Think of the flexibility in a deck of cards. They can be stacked, grouped, listed, etc. So this may not play out as a stream similar to what we see in most social products today. In fact, it’s much more likely that it won’t be a one dimensional list. Again, don’t assume that other technologies and design patterns will stay the same. All will evolve.</p>
  478. <p>It’s easy to be a naysayer. But what I’d love to see from people is other proposals for how this may play out. Other sketches, other concepts.</p>
  479. <h3>6. People need to open apps when in the mode of productivity!</h3>
  480. <p>Absolutely. The original article has a paragraph stating that we will still open apps for focused tasks.</p>
  481. <blockquote><p>“Opening apps is still necessary and great for many contexts, especially composition of new content and dedicated deep workflows, and maybe changing preferences.&#8221;</p></blockquote>
  482. <p>The bank of app icons is still there, but it’s being relegated. It’s also entirely possible that the apps we use the most (based on tracked usage) will bubble up into the notification layer in a predictable way. These are solvable design problems.</p>
  483. <p>It’s also important to understand what activities people do with different size screens. There is a correlation between people using larger screens for deeper more focused tasks and smaller screens for more ephemeral content and faster tasks. Not to mention people using more than one large screen at once. This is based on <a href="http://www.corecommunication.ca/4-studies-which-show-that-using-a-second-monitor-can-boost-productivity/">empirical evidence</a> going back decades. Large screens aren’t going away, for focusing on deep analysis, creation and consumption, we will always have large high resolution screens. The future isn’t just screens in our pockets, it’s many screens of all shapes and sizes.</p>
  484. <h2>Assume everything around you is changing simultaneously</h2>
  485. <p>Binary statements such as &#8220;The web is dead&#8221; or &#8220;Apps are dead&#8221; are never accurate. The truth is always something in the middle. An evolution of something, things consolidating, etc. What is true is that in the technology industry, everything is changing all the time, all the way from exponential improvements to incremental improvements. When evaluating one pattern such as how apps might evolve, or how notification layers might evolve, and trying to understand what is next, always keep in mind that everything else evolves at the same time.</p>
  486. </article>
  487. </section>
  488. <nav id="jumpto">
  489. <p>
  490. <a href="/david/blog/">Accueil du blog</a> |
  491. <a href="http://blog.intercom.io/its-not-the-end-of-apps/">Source originale</a> |
  492. <a href="/david/stream/2019/">Accueil du flux</a>
  493. </p>
  494. </nav>
  495. <footer>
  496. <div>
  497. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  498. <p>
  499. Bonjour/Hi!
  500. 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>
  501. 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>).
  502. </p>
  503. <p>
  504. 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>.
  505. </p>
  506. <p>
  507. Voici quelques articles choisis :
  508. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  509. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  510. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  511. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  512. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  513. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  514. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  515. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  516. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  517. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  518. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  519. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  520. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  521. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  522. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  523. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  524. </p>
  525. <p>
  526. 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>.
  527. </p>
  528. <p>
  529. Je ne traque pas ta navigation mais mon
  530. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  531. conserve des logs d’accès.
  532. </p>
  533. </div>
  534. </footer>
  535. <script type="text/javascript">
  536. ;(_ => {
  537. const jumper = document.getElementById('jumper')
  538. jumper.addEventListener('click', e => {
  539. e.preventDefault()
  540. const anchor = e.target.getAttribute('href')
  541. const targetEl = document.getElementById(anchor.substring(1))
  542. targetEl.scrollIntoView({behavior: 'smooth'})
  543. })
  544. })()
  545. </script>