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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595
  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>Web design is dead (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://mashable.com/2015/07/06/why-web-design-dead/">
  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. Web design is dead (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://mashable.com/2015/07/06/why-web-design-dead/">Source originale du contenu</a></h3>
  445. <p>Web design is (finally!) dying of irrelevance. Web pages themselves are no longer the center of the Internet experience, which is why designers need to move on to the next challenges — products and ecosystems — if they want to stay relevant.</p>
  446. <p>Web design has no future — a risky statement I know, but this article explains why it has no future and what we, as designers, can do about it. As a discipline, web design has already exhausted its possibilities, an emerging combination of tech and cultural trends highlight the need for a broader approach.</p>
  447. <p>Let's start with the symptoms of this imminent death.</p>
  448. <h3>Symptom 1: Commoditization by templates</h3>
  449. <p>Most of the content that you see on the web today is run by some framework or service — WordPress, Blogger, Drupal, you name it. Frameworks provide you a foundation and shortcuts so you spend less time struggling with the creation of a web site, and more time creating content.</p>
  450. <p>As a consequence of the ubiquity of these frameworks, a whole world of free and paid templates lets you get started with a professional-looking design in minutes. Why hire a web designer if you can achieve a fairly acceptable design for a fraction of the cost using a template? Actually, many web designers (especially the ones on the cheaper side) just pick a pre-made template and make some minor branding customizations.</p>
  451. <p>Either way, if your web page is a standard, informational one, there's probably a template out there that can do the job for you.</p>
  452. <h3>Symptom 2: Web design patterns are mature</h3>
  453. <p>What is the latest web design innovation you can point a finger on? Responsive design? That's digital ages old. Parallax? Useless eye-candy. The web has had all the <a href="http://uxmag.com/topics/interface-and-navigation-design" target="_blank" class="topics-tag">user interface components</a> and patterns you might need for a while now (and no, parallax is not something we really ever needed). And that's why you don't see much innovation in web patterns as of late.</p>
  454. <p>This maturity is good for users: they will find consistency in their daily use of the web. Checkout forms, shopping carts, and login pages should all behave in a similar way. Trying to get creative at this point will probably be pointless or even harmful.</p>
  455. <h3>Symptom 3: Automation and artificial intelligence are already doing the job</h3>
  456. <p>There's a new trend of automated web design services, arguably started by <a href="https://thegrid.io/" target="_blank">The Grid</a>. It's a service to build basic websites which makes design decisions — semantic ones — based on artificial intelligence. It analyzes your content to detect the best layouts, colors, fonts, and extra imagery for your site. Using cleverly chosen design basics (made by humans) as the foundation, it's hard to go wrong with it, and the result will probably be better than what an average web designer can do.</p>
  457. <p>When something can be successfully automated, it means that its practices and standards are established enough as not to need much human input. And this is obviously the beginning. There will be a fierce competition about which service can deliver better designs, faster, and with less human intervention.</p>
  458. <h3>Symptom 4: Facebook pages as the new small-business homepage</h3>
  459. <p>In the late 1990's, future-minded businesses would buy their .com's, purchase expensive hosting plans, and hire a "web master" in order to have The Web Page, the one that would make them visible to the rest of the Internet. By 2005, creating a site in Blogger or WordPress.com was more than enough for your new wedding photo business (it was also quick and free).</p>
  460. <p>Today, this function has been completely overridden by <a href="http://uxmag.com/topics/facebook" target="_blank" class="topics-tag">Facebook</a> pages. They are free, made to be viral out of the box, offer powerful tools only available to big businesses a decade ago (like subscription for updates or media posting), and are as easy to set up as your own profile page. They are so efficient in making a business visible that they are rendering basic web pages useless.</p>
  461. <h3>Symptom 5: Mobile is killing the web</h3>
  462. <p>How often do you visit a web site from your <a href="http://uxmag.com/topics/mobile-technology" target="_blank" class="topics-tag">mobile device</a> by directly typing the address? Only when you don't have the app, right? People don't seem to think much in terms of web pages these days: they think of digital brands, which mostly translate to apps or subscriptions (likes, follows, etc). That's why most big websites, blogs, and portals are pushing their mobile apps to you — out of home screen, out of mind.</p>
  463. <p><span class="microcontent" data-fragment="mobile-web-has-always" data-description="Mobile web has always been slow and cumbersome." data-url="http://mashable.com/2015/07/06/why-web-design-dead/" data-micro="1">Mobile web has always been slow and cumbersome.</span> Typing addresses is weird. Navigating between tabs is weird. Our underpowered mobile devices and saturated data networks don't help create a smooth web experience like the one we have in our desktop machines.</p>
  464. <p>As vital as responsive web design is (not adopting it is commiting digital suicide), it only guarantees that your user can view your page in a mobile device, if she ever finds it in first place. And the limited space in her mind is already mostly occupied by apps.</p>
  465. <h3>The rise of web services and the content that finds you</h3>
  466. <p>The truth is, we need fewer web pages, not more of them. There are already too many competing for our attention and assuming selfishly that we have all the time in the world to close pop-up ads, explore navigational hierarchies, and be dazzled by transitions, intros, and effects.</p>
  467. <p>But what really matters is not how you arrange things on a page: it's the content, in terms of a specific user need. That's why Google is starting to display actual content in some search results, without you having to visit another page. Just an example: if you Google a nearby restaurant from your mobile device, the search results include a button to directly call the place. You don't even need to visit the page. The page designer's ego and the visits-counter may suffer a bit, but ultimately the user experience is improved.</p>
  468. <p>Things are moving in the direction of digital assistants like Siri, and especially Google Now with the new changes announced for Android M: they aim to provide you the exact bit of information you need, when you need it. This implies a shift from web pages to web services: self-sufficient bits of information that can be combined to other services to deliver value. So if you are looking for a restaurant, you get the reviews from Foursquare or Yelp, the directions from Google Maps and the traffic conditions from Waze.</p>
  469. <p>Even more: <span class="microcontent" data-fragment="we-are-transitioning-to" data-description="we are transitioning to a push-based model of content consumption" data-url="http://mashable.com/2015/07/06/why-web-design-dead/" data-micro="1">we are transitioning to a push-based model of content consumption</span>, where the right information arrives without you even requesting it. Google Now, for instance, warns you of how early you should depart in order to arrive on time to your meeting. All of this is already happening thanks to APIs — interfaces that let other services interact with your data. In this world, web pages are not required at all. </p>
  470. <p>This is not to say that web pages will die — they will be around for a long time, because they are — and will continue to be — useful for certain purposes. But there's nothing interesting there for designers anymore. They are a commodity and a medium, no longer the default state for digital products and businesses. </p>
  471. <p>Web pages are static content that need to be found and visited (pull-based). But in the emerging push-based paradigm, the content finds you. Through data obtained from your context, your activity, and even your biometrics, content and tools will smartly present themselves to you when you are most likely to need them.</p>
  472. <p>That's the big thing about the new breed of smartwatches: they obtain data from your body and show you proactively tiny bits of information for your brain to chew on. Computer technology is already making big steps in order to dissapear from your sight. </p>
  473. <p>Where does this leave us?</p>
  474. <h3>Web design is dead, long live UX design</h3>
  475. <p>Here's the good news: designers are really far from being obsolete. Quite to the contrary, you can see that the demand for UX designers is still on the rise, and everyone seems to be redesigning their digital products these days.</p>
  476. <p><span class="microcontent" data-fragment="this-switch-from-web" data-description="This switch from web design to experience design is directly caused by the shift from web pages to digital products, tools, and ecosystems." data-url="http://mashable.com/2015/07/06/why-web-design-dead/" data-micro="1">This switch from web design to experience design is directly caused by the shift from web pages to digital products, tools, and ecosystems.</span> Web pages are just part of something much bigger: mobile apps, API's, social media presence, search engine optimization, customer service channels, and physical locations all inform the experience a user has with a brand, product, or service. Pretending that you can run a business or deliver value just by taking care of the web channel is naïve at best and harmful at worst.</p>
  477. <p>And all these touch points need to be designed, planned, and managed. This is a job that will continue to exist, regardless of the channel. We will still need cohesive experiences and valuable content across smart climatizers, virtual reality devices, electronic contact lenses, and whatever we invent in the decades to come.</p>
  478. <p>In fact, as technology fades into the background, all we can see is the value transmitted by it. The designers who want to stay in business need to be experts in managing content and value across channels. </p>
  479. <p>It's time for us to grow up, because we have been part of the problem: We have helped to give birth to self-righteous web pages that assume they deserve to be watched and awarded just for the time we invested in crafting them. Now more than ever, in a world flooded with cognitive noise, the world needs simple, intelligent, integrated ecosystems of information. The sooner designers embrace this need, the better prepared we'll be for the future.</p>
  480. </article>
  481. </section>
  482. <nav id="jumpto">
  483. <p>
  484. <a href="/david/blog/">Accueil du blog</a> |
  485. <a href="http://mashable.com/2015/07/06/why-web-design-dead/">Source originale</a> |
  486. <a href="/david/stream/2019/">Accueil du flux</a>
  487. </p>
  488. </nav>
  489. <footer>
  490. <div>
  491. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  492. <p>
  493. Bonjour/Hi!
  494. 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>
  495. 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>).
  496. </p>
  497. <p>
  498. 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>.
  499. </p>
  500. <p>
  501. Voici quelques articles choisis :
  502. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  503. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  504. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  505. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  506. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  507. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  508. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  509. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  510. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  511. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  512. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  513. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  514. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  515. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  516. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  517. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  518. </p>
  519. <p>
  520. 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>.
  521. </p>
  522. <p>
  523. Je ne traque pas ta navigation mais mon
  524. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  525. conserve des logs d’accès.
  526. </p>
  527. </div>
  528. </footer>
  529. <script type="text/javascript">
  530. ;(_ => {
  531. const jumper = document.getElementById('jumper')
  532. jumper.addEventListener('click', e => {
  533. e.preventDefault()
  534. const anchor = e.target.getAttribute('href')
  535. const targetEl = document.getElementById(anchor.substring(1))
  536. targetEl.scrollIntoView({behavior: 'smooth'})
  537. })
  538. })()
  539. </script>