davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>World Wide Web, Not Wealthy Western Web (Part 2) (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  World Wide Web, Not Wealthy Western Web (Part 2) (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/">Source originale du contenu</a></h3>
    <p>In <a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/">part 1</a><sup class="po" id="note-1"><a href="#1">1</a></sup> of this article, we looked at where in the world the new entrants to the World Wide Web are, and some of the new technologies the standards community has worked on to address some of the challenges that the next 4 billion people are facing when accessing the web. In short, we’ve tried to make some supply-side improvements to web standards so that <strong>websites can be made to better serve the whole world</strong>, not just the wealthy West.</p>

<p>But there are other challenges to surmount, such as ways to get over creaky infrastructure in developing markets (which can be done with stopgap technological solutions, such as proxy browsers), and we’ll also look at some of the reasons why some of the offline billions remain offline, and what can be done to address this.</p>

<h3 id="proxybrowers">Proxy Browsers</h3>

<p>A common problem people encounter in emerging economies relates to networks. Networks are getting better, but they’re not there yet. In 2016, <a href="https://www.ericsson.com/thinkingahead/consumerlab/consumer-insights/experience-shapes-mobile-customer-loyalty">Ericsson reported</a><sup class="po" id="note-2"><a href="#2">2</a></sup>:</p>

<blockquote><p>While cellular networks have improved… smartphone users are still facing issues as frequently as they did in 2013. Globally, 26 percent of smartphone users say they face video streaming issues daily, increasing to over one third in markets like Brazil, India and Indonesia.</p></blockquote>

<p>This is an excellent statement of the problem. Infrastructure is expensive to upgrade, especially in countries like Indonesia, which is made up of thousands of islands, and India, which is huge and has vast mountain ranges. And as soon as infrastructure is upgraded, more people come online and want to consume video rather than boring old text, and so much more bandwidth is required, and the newly upgraded network crawls again.</p>

<p>In places where bandwidth is seriously constrained (in congested Asian megacities, not just rural areas; I’m in the heart of an Indian city with an international airport, and power cuts and Internet outages occur daily), a lot of people opt to use proxy browsers. Proxy browsers do a lot of the heavy lifting of rendering web pages on their servers and sending compressed versions down to the user, resulting in often significant reductions in data consumption. This is obviously a very appealing proposition for consumers in territories where bandwidth is expensive. Because the data transferred is smaller, websites render faster, too.</p>

<p><a href="http://data.wurfl.io/MOVR/pdf/2016_q1/MOVR_2016_q1.pdf">Scientia Mobile reported</a><sup class="po" id="note-3"><a href="#3">3</a></sup> in 2016 that, for global market share of proxy browsers, Opera Mini is at 42%, Opera Turbo is at 9%, Chrome is at 39% and UCWeb is at 6%, and there is also Puffin, Silk and others. Opera reports more than 250 million active monthly users of Opera Mini.</p>

<p>Websites compressed by proxy browsers and sent as binary blobs also have a better chance of getting through congested networks. In 2013, Avendus reported (in “India’s Mobile Internet: The Revolution Has Begun,” no longer online):</p>

<blockquote><p>In India, only 96k of the 736k cell towers are 3G enabled… only 35k of those towers have a fiber-optic connection to the backbone.</p></blockquote>

<p>(If you’re a real networking anorak, you’ll find the report <a href="https://docs.google.com/presentation/d/1fZ7ftsJJ4adiPov4y_8AtV_zjqAmEASaSxRBHBwkiOw/edit#slide=id.g73cf3c208_0_158">2G Network Issues Observed While in India</a><sup class="po" id="note-4"><a href="#4">4</a></sup> to be even more fun than a game of Werewolf at a Star Wars convention.)</p>

<h4 id="limitationsofproxybrowsers">Limitations of Proxy Browsers</h4>

<p>So, if proxy browsers are so great, why doesn’t everyone use them? The answer is that such compression comes at a cost; websites can look very different in a proxy browser, and JavaScript can often behave unexpectedly.</p>

<p>In a proxy browser, everything happens on the server, everything needs user interaction, and everything needs a round-trip to the server. Opera Mini on Android and iOS has two modes; one uses proprietary compression techniques and the device’s standard web view, and thus JavaScript isn’t affected. In Opera Mini’s extreme mode, all of the rendering is done on Opera’s server farms, on which JavaScript is allowed to run for 5 seconds and then is throttled. (Disclosure: I was Deputy CTO of Opera until November 2016 and can talk authoritatively about its technology. However, I have no relationship with the company now.)</p>

<p>Therefore, to make websites work in Opera Mini’s extreme mode, treat JavaScript as an enhancement, and ensure that your core functionality works without it. Of course, it will probably be clunkier without scripts, but if your website works and your competitors’ don’t work for Opera Mini’s quarter of a billion users, you’ll get the business.</p>

<p>Mini’s extreme mode has design constraints, too: it doesn’t do CSS rounded corners or gradients, because it can’t rely upon every client device to draw those things successfully; so, to render it on the server, it would need to convert them into bitmaps, which would bloat the page. But that’s OK; CSS is for design, and people in highly bandwidth-constrained situations are happy to get the words.</p>

<p>Similarly, Mini’s extreme mode doesn’t do CSS or SVG animations, only showing the first frame. The reason for this is that animations consume CPU cycles, and CPU cycles consume battery. Yes, your animations are lovely, but if you are sitting on a bus in Lagos in a traffic jam and need to phone your sister to ask her to pick up your children from school, you need that battery life more than you need pretty animations.</p>

<p>Neither does Mini’s extreme mode download web fonts, which can be huge files that are primarily for aesthetics. On many very small monochrome screens, the system fonts tend to be designed for those screens and work better. If you want icons, use SVG rather than icon fonts because, well, that’s what SVG is for.</p>

<h3 id="revolutionarynewdevelopmenttechnique">Revolutionary New Development Technique</h3>

<p>The best way to ensure that your website or web app (is there a real difference?) will work for people on proxy browsers, conventional browsers with very slow connections and everyone else is to adopt a revolutionary new development methodology.</p>

<p>Airbnb tried it with its new app and <a href="http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/">wrote excitedly</a><sup class="po" id="note-5"><a href="#5">5</a></sup>:</p>

<blockquote><p>… we’ve launched our first Holy Grail app… It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker…</p></blockquote>

<p>What voodoo magic did they employ?</p>

<blockquote><p>… we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines.… It feels 5x faster.</p></blockquote>

<p>Who knew? The best way to ensure that everyone gets your content is to write real, semantic HTML, to style it with CSS and ensure sensible fallbacks for CSS gradients, to use SVG for icons, and to treat JavaScript as an enhancement, ensuring that core functionality works without scripts. Package up your website with a manifest file and associated icons, add a service worker, and you’ll have a progressive web app in conforming browsers and a normal website everywhere else.</p>

<p>I call this amazing new technique “progressive enhancement.”</p>

<p>You heard it here first, folks!</p>

<section>
<p class="oa_zone--ad icad" id="cad-middle" data-ad-name="Content Ad Middle" data-ad-zone="110" data-ad-media="all"/>
</section>

<h3 id="whatifwegaveapartyandnobodycame">What If We Threw A Party And Nobody Came?</h3>

<p>We have supply-side improvements such as HTML responsive images, progressive web apps, renewed CSS work on vertical text. We have the methodology of progressive enhancement. We have proxy browsers that compress websites for people in low-bandwidth and expensive data plans. We have an explosion of ever-cheaper smartphones (and I’m not talking about the Galaxy Note 7 here). So, why aren’t the next 4 billion already on the web?</p>

<p>There are demand-side problems in emerging markets.</p>

<p>One of those is that the market for smartphones is either <a href="http://www.mobileworldlive.com">flat</a><sup class="po" id="note-6"><a href="#6">6</a></sup> or <a href="https://www.strategyanalytics.com/strategy-analytics/blogs/devices/smartphones/smart-phones/2016/04/28/global-smartphone-shipments-decline-3-percent-in-q1-2016#.VyIu60GNL-Q">declining</a><sup class="po" id="note-7"><a href="#7">7</a></sup>, depending on which statistics you read. There are many potential reasons for this: the slowdown in the Chinese economy (China, India and the US are the <a href="http://businesskorea.co.kr/article/10453/poor-performance-samsung-phones-struggling-india-china">largest consumers of smartphones</a><sup class="po" id="note-8"><a href="#8">8</a></sup>); it could be a classic case of market saturation — everyone who wants a smartphone and can afford one already has one.</p>

<p>It could also have to do with devices like the one shown below, which was given to me at the Mobile World Congress SynergyFest.</p>

<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img2-lawson-large-opt.png"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img2-lawson-800w-opt.png" alt="$2.36 feature phone"/></a><sup class="po" id="note-9"><a href="#9">9</a></sup><br/>
<figcaption>$2.36 feature phone (photo by the author) (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img2-lawson-large-opt.png">View large version</a><sup class="po" id="note-10"><a href="#10">10</a></sup>)</figcaption>
</figure>

<p>It’s a feature phone, made in China; it doesn’t have Wi-Fi but is dual-SIM (very important in places like Africa and Asia); it has an FM radio; and it can connect to the web with a WAP-like browser. Its retail price in Africa and Latin America is $2.36 USD.</p>

<p>In a country like Cambodia, where a garment worker’s <a href="https://business-humanrights.org/en/cambodia-2015-minimum-wage-negotiations">minimum wage is $140</a><sup class="po" id="note-11"><a href="#11">11</a></sup> a month, or Liberia, where an unskilled worker’s <a href="http://www.liberianobserver.com/politics/passed-minimum-wage-set-us6day">minimum wage is $4</a><sup class="po" id="note-12"><a href="#12">12</a></sup> a day, even a $60 to $70 entry-level smartphone is practically unaffordable. But $2.36? That’s affordable.</p>

<p>But it is not just affordability that stops people from coming to the web. As <a href="https://www.gsmaintelligence.com/research/2016/07/consumer-barriers-to-mobile-internet-adoption-in-africa/568/">GSMA Intelligence wrote</a><sup class="po" id="note-13"><a href="#13">13</a></sup> in July 2016:</p>

<blockquote><p>Despite the fact that Africa has the lowest income per capita of any region, affordability was only identified as the most important barrier in one out of 13 markets in our survey.</p></blockquote>

<p>And it’s not just about networks either, as <a href="https://www.gsmaintelligence.com/research/2016/07/consumer-barriers-to-mobile-internet-adoption-in-africa/568/">GSMA Intelligence reports</a><sup class="po" id="note-14"><a href="#14">14</a></sup>:</p>

<blockquote><p>Network coverage was not perceived as an issue in most countries, reflecting the increasing availability of mobile networks. However, mobile broadband (3G or 4G) coverage remains low in most parts of Africa.</p></blockquote>

<p>The problem is much more profound, and doesn’t have a technological solution. From the same report:</p>

<blockquote><p>A lack of awareness and locally relevant content was considered the most important barrier to internet adoption in North Africa and the second biggest barrier in Sub-Saharan Africa.</p></blockquote>

<p>There’s also a worrying lack of digital skills that prevents people from using the web in Africa:</p>

<blockquote><p>A lack of digital skills was identified as the biggest barrier to internet adoption in Sub-saharan Africa and the second biggest in North Africa.</p></blockquote>

<p>The <a href="http://www.worldbank.org/en/publication/wdr2016">World Bank reports</a><sup class="po" id="note-15"><a href="#15">15</a></sup>:</p>

<blockquote><p>In Africa, seven in ten people who do not use the internet say they just don’t know how to use it, and almost four in ten say they do not know what the internet is.</p></blockquote>

<p>This is true not only of developing economies, by the way. The World Bank continues:</p>

<blockquote><p>In high-income Poland and the Slovak Republic, one-fifth of adults cannot use a computer.</p></blockquote>

<p>And in 2014, <a href="http://www.pewinternet.org/2014/04/03/older-adults-and-technology-use/">Pew Research Centre reported</a><sup class="po" id="note-16"><a href="#16">16</a></sup>:</p>

<blockquote><p>41% [of American seniors] do not use the internet at all, 53% do not have broadband access at home, and 23% do not use cell phones.</p></blockquote>

<p>The lack of digital skills is felt acutely by Asia, too. In its January 2016 <a href="https://www.gsmaintelligence.com/research/2016/06/consumer-barriers-to-mobile-internet-adoption-in-asia/559/">Asia survey</a><sup class="po" id="note-17"><a href="#17">17</a></sup>, GSMA Intelligence wrote:</p>

<blockquote><p>A lack of awareness and locally relevant content was the most commonly cited barrier to internet adoption: 72% of non-internet users across the six survey markets felt this was a barrier.… 50% of websites worldwide are in English, a language spoken by only 10% of speakers in the survey countries. By way of contrast, only 2% of websites worldwide are in Mandarin and less than 0.1% are in Hindi.</p></blockquote>

<p>Below is a video made in a user-testing lab in rural Pakistan, featuring a man in his 20s. He has used a feature phone but never a smartphone. He’s given a simple-sounding task: Go to Google and search for the the name of your favourite actress. Watch the video. Watch it all.</p>

<p/>
<p>Presumably, he’s stuck because he’s been accustomed to a feature phone with physical keys, and he simply doesn’t know how to call up the virtual keyboard. Anytime you believe that doing something in your web app is “obvious” or “intuitive”, watch this video again.</p>
<h4 id="digitaldivide">Digital Divide</h4>
<p>Just as there is a digital divide between “the West” and developing economies, there is a digital divide in income, age, rural and urban, and women and men across the developing world. The World Bank illustrates a divide in income, gender, age and location (rural and urban).</p>
<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img3-lawson-large-opt.png"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img3-lawson-800w-opt.png" alt="Digital divide in Africa"/></a><sup class="po" id="note-18"><a href="#18">18</a></sup><br/>
<figcaption>Digital divide in Africa (World Bank figures) (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img3-lawson-large-opt.png">View large version</a><sup class="po" id="note-19"><a href="#19">19</a></sup>)</figcaption>
</figure>
<p>In February 2016, <a href="http://www.gadgetsnow.com/tech-news/Only-9-of-rural-India-has-access-to-mobile-internet-Report/articleshow/50840296.cms">53% of urban areas</a><sup class="po" id="note-20"><a href="#20">20</a></sup> had mobile Internet connectivity, a growth of 71% in one year. In the same period, Internet usage in rural India increased by 93%, but that means that only 9% of people in rural India has access. As I write this, there is a copy of The Hindu newspaper next to my laptop, which <a href="http://www.thehindu.com/business/Wi-fi-hotspots-coming-soon-to-a-store-near-you/article17264038.ece">today reports</a><sup class="po" id="note-21"><a href="#21">21</a></sup> that the Indian government is recommending a community model of Wi-Fi hotspots, such as in neighborhood grocery stores, in rural areas where connectivity is poor and laying cables is not feasible.</p>
<p>The World Bank reports that in many countries (Cuba, Cambodia, Brazil and others), computers are taxed as luxury goods.</p>
<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img4-lawson-large-opt.png"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img4-lawson-800w-opt.png" alt="Computers and laptops: import tariffs"/></a><sup class="po" id="note-22"><a href="#22">22</a></sup><br/>
<figcaption>Computers and laptops: import tariffs (World Bank figures) (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img4-lawson-large-opt.png">View large version</a><sup class="po" id="note-23"><a href="#23">23</a></sup>)</figcaption>
</figure>
<p>Many countries, such as Fiji, Bangladesh and Pakistan, tax mobile phones as luxuries, too.</p>
<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img5-lawson-large-opt.png"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img5-lawson-800w-opt.png" alt="Mobile phones: import tariffs"/></a><sup class="po" id="note-24"><a href="#24">24</a></sup><br/>
<figcaption>Mobile phones: import tariffs (World Bank figures) (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img5-lawson-large-opt.png">View large version</a><sup class="po" id="note-25"><a href="#25">25</a></sup>)</figcaption>
</figure>
<h3 id="pressureforchange">Pressure For Change</h3>
<p>The World Bank recommends that:</p>
<blockquote><p>Making the internet universally accessible and affordable should be a global priority.</p></blockquote>
<p>There are moves afoot to make this happen, such as an initiative called <a href="https://webwewant.org/fast-africa/">FASTAfrica</a><sup class="po" id="note-26"><a href="#26">26</a></sup>. FAST stands for fast, affordable, secure and transparent. In a series of grassroots events across Africa in 2016, the organization has demanded:</p>
<ul>
<li>fair and transparent taxes on information and communications technology (ICT),</li>
<li>greater effort from governments and donors,</li>
<li>agreement on affordability (1 GB for 2% of disposable income),</li>
<li>prioritization of getting women online.</li>
</ul>
<h4 id="worldwidewebwomen">World Wide Web Women</h4>
<p>The World Bank writes:</p>
<blockquote><p>Online work can prove particularly beneficial for women, youth, older workers, and the disabled, who may prefer the flexibility of working from home or working flexible hours.</p></blockquote>
<p><a href="https://www.gsmaintelligence.com/research/2016/07/consumer-barriers-to-mobile-internet-adoption-in-africa/568/">GSMA Intelligence writes</a><sup class="po" id="note-27"><a href="#27">27</a></sup>:</p>
<blockquote><p>In India… women are 62% less likely to use the internet than men. Many of the underlying reasons for this — affordability, skills and content — are the same as for men; they are simply felt more acutely by women.</p></blockquote>
<p>In rural India, only <a href="https://www.bcgperspectives.com/content/articles/globalization-customer-insight-rising-connected-consumer-rural-india/">2% of web users are women</a><sup class="po" id="note-28"><a href="#28">28</a></sup>.</p>
<p>Yet we know that the web empowers women. Across the world in non-agricultural employment, women make up 25% of the work force, but in online work, women make up 44% of the work force.</p>
<p>When asked why online work is advantageous, women overwhelmingly cited the ability to work flexible hours from home as the primary advantage. (32% of women, compared with 23% of men, said that the primary disadvantage to online work is that payment is not high enough, which suggests that Africa, too, has an unjustifiable difference between what women and men get paid.</p>
<p>One successful government initiative is the <a href="http://www.kudumbashree.org/">Kudumbashree project</a><sup class="po" id="note-29"><a href="#29">29</a></sup>, here in Kerala, India, where I’m writing this. “Kudumbashree” means “prosperity of the family” in the local Malayalm language. The World Bank reports:</p>
<blockquote><p>The government of Kerala, India, outsources information technology services to cooperatives of women from poor families … Average earnings were US$45 a month, with close to 80 per-cent of women earning at least US$1 a day. Nine in ten of the women had previously not worked outside the home. Samasource, RuralShores, and Digital Divide Data are three private service providers. Samasource splits jobs into microwork for almost 6,400 workers, mostly in Ghana, Haiti, India, Kenya, and Uganda, on average more than doubling their previous income.</p></blockquote>
<p>A similar story is happening in China:</p>
<blockquote><p>Online shop owners using Alibaba in China, on average, employ 2.6 additional workers. Four in ten shop owners are women, 19 percent were previously unemployed, 7 percent were farmers, and about 1 percent are persons with disabilities.</p></blockquote>
<h3 id="whatcanbedoneandhowcanyouhelp">What Can Be Done, And How Can You Help?</h3>
<p>The World Bank says that:</p>
<blockquote><p>Access to the internet is critical, but not sufficient. The full benefits of the information and communication transformation will not be realized unless countries continue to improve their business climate, invest in people’s education and health and promote good governance</p></blockquote>
<p>Should you happen to be a politician in Africa, Asia or Latin America, please take note of the above. But, because you’re reading this, I expect you’re a web professional — but you can play your part! Make sure your websites are ready for the next 4 billion people, with their (potentially) slow networks and browsers and devices you may never have heard of.</p>
<ul>
<li>Progressively enhance to make sure your core functionality works without JavaScript.</li>
<li>Use feature detection, rather than browser sniffing. You will never, ever be able to maintain a list of all devices in the world and their UA strings.</li>
<li>Compress images properly and remove unnecessary meta data with a tool such as <a href="https://imageoptim.com/">ImageOptim</a><sup class="po" id="note-30"><a href="#30">30</a></sup>.</li>
<li>Use HTML responsive images (and generate <a href="https://www.smashingmagazine.com/2015/10/webp-images-and-performance/">WebP</a><sup class="po" id="note-31"><a href="#31">31</a></sup> versions of all of your assets), and send them to supporting browsers with the <code>picture</code> element.</li>
<li>Focus relentlessly on performance.</li>
<li>Write a progressive web app, rather than a native app.</li>
<li>Test in a proxy browser, such as Opera Mini.</li>
</ul>
<p>Developing countries are home to 94% of the global offline population. These people may be your next potential customers. But if they can’t buy from you because your website is a Wealthy Western Website rather than a World Wide Website, you can bet that your competitors will be happy to take their money.</p>
<p><a href="http://www.mckinsey.com/industries/high-tech/our-insights/internet-matters">McKinsey Global Institute writes</a><sup class="po" id="note-32"><a href="#32">32</a></sup>:</p>
<blockquote><p>An increase in internet maturity similar to the one experienced in mature countries over the past 5 years creates an increase in real GDP per capita of $500 on average during this period. It took the industrial revolution of the 19th century 50 years to produce same result.</p></blockquote>
<p>But it’s not just about money. It’s about doing the right thing and keeping the web open, democratic and global.</p>
<p>Millions of people in Bangladesh, Nepal and India have miles to walk to visit a doctor, so a feature phone and the free online book <a href="http://hesperian.org/books-and-resources/"><em>Where There Is No Doctor</em></a><sup class="po" id="note-33"><a href="#33">33</a></sup> (often translated to their local language) becomes first-line medical care.</p>
<p>Millions of people in Subsaharan Africa can’t afford school textbooks, but <a href="https://www.worldreader.org/what-we-do/our-books/">Worldreader</a><sup class="po" id="note-34"><a href="#34">34</a></sup> has tens of thousands of books available for free online, and the books work fine even on old feature phones.</p>
<p>And millions of people in despotic regimes have the web as their only way to contact the outside world.</p>
<p>Please, do your part to ensure the health of the web that has provided you with so much, and pay it forward so the next people can benefit.</p>
<hr/>
<p><em>Thanks to <a href="https://mrunmaiy.com/">Mrunmaiy Abroal</a><sup class="po" id="note-35"><a href="#35">35</a></sup>, until recently Opera’s Head of Comms in India, and <a href="https://twitter.com/peko0413">Peko Wan</a><sup class="po" id="note-36"><a href="#36">36</a></sup>, Head of PR &amp; Communications for Opera in Asia, for their help collecting some of the information in this article. Thanks to <a href="https://twitter.com/kgisdahl">Karin Greve-Isdahl</a><sup class="po" id="note-37"><a href="#37">37</a></sup>, VP Communications at Opera for allowing me to use charts and illustrations made while I was at Opera. Big thanks to Clara at <a href="http://www.damcho.com">Damcho Studio</a><sup class="po" id="note-38"><a href="#38">38</a></sup> for helping to prepare this article.</em></p>
<p><em property="editor">(vf, al, il)</em></p>
<ol class="po"><li id="#1"><a href="#note-1">1 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/</a></li><li id="#2"><a href="#note-2">2 https://www.ericsson.com/thinkingahead/consumerlab/consumer-insights/experience-shapes-mobile-customer-loyalty</a></li><li id="#3"><a href="#note-3">3 http://data.wurfl.io/MOVR/pdf/2016_q1/MOVR_2016_q1.pdf</a></li><li id="#4"><a href="#note-4">4 https://docs.google.com/presentation/d/1fZ7ftsJJ4adiPov4y_8AtV_zjqAmEASaSxRBHBwkiOw/edit#slide=id.g73cf3c208_0_158</a></li><li id="#5"><a href="#note-5">5 http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/</a></li><li id="#6"><a href="#note-6">6 http://www.mobileworldlive.com</a></li><li id="#7"><a href="#note-7">7 https://www.strategyanalytics.com/strategy-analytics/blogs/devices/smartphones/smart-phones/2016/04/28/global-smartphone-shipments-decline-3-percent-in-q1-2016#.VyIu60GNL-Q</a></li><li id="#8"><a href="#note-8">8 http://businesskorea.co.kr/article/10453/poor-performance-samsung-phones-struggling-india-china</a></li><li id="#9"><a href="#note-9">9 https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img2-lawson-large-opt.png</a></li><li id="#10"><a href="#note-10">10 https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img2-lawson-large-opt.png</a></li><li id="#11"><a href="#note-11">11 https://business-humanrights.org/en/cambodia-2015-minimum-wage-negotiations</a></li><li id="#12"><a href="#note-12">12 http://www.liberianobserver.com/politics/passed-minimum-wage-set-us6day</a></li><li id="#13"><a href="#note-13">13 https://www.gsmaintelligence.com/research/2016/07/consumer-barriers-to-mobile-internet-adoption-in-africa/568/</a></li><li id="#14"><a href="#note-14">14 https://www.gsmaintelligence.com/research/2016/07/consumer-barriers-to-mobile-internet-adoption-in-africa/568/</a></li><li id="#15"><a href="#note-15">15 http://www.worldbank.org/en/publication/wdr2016</a></li><li id="#16"><a href="#note-16">16 http://www.pewinternet.org/2014/04/03/older-adults-and-technology-use/</a></li><li id="#17"><a href="#note-17">17 https://www.gsmaintelligence.com/research/2016/06/consumer-barriers-to-mobile-internet-adoption-in-asia/559/</a></li><li id="#18"><a href="#note-18">18 https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img3-lawson-large-opt.png</a></li><li id="#19"><a href="#note-19">19 https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img3-lawson-large-opt.png</a></li><li id="#20"><a href="#note-20">20 http://www.gadgetsnow.com/tech-news/Only-9-of-rural-India-has-access-to-mobile-internet-Report/articleshow/50840296.cms</a></li><li id="#21"><a href="#note-21">21 http://www.thehindu.com/business/Wi-fi-hotspots-coming-soon-to-a-store-near-you/article17264038.ece</a></li><li id="#22"><a href="#note-22">22 https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img4-lawson-large-opt.png</a></li><li id="#23"><a href="#note-23">23 https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img4-lawson-large-opt.png</a></li><li id="#24"><a href="#note-24">24 https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img5-lawson-large-opt.png</a></li><li id="#25"><a href="#note-25">25 https://www.smashingmagazine.com/wp-content/uploads/2017/02/pt2-www-img5-lawson-large-opt.png</a></li><li id="#26"><a href="#note-26">26 https://webwewant.org/fast-africa/</a></li><li id="#27"><a href="#note-27">27 https://www.gsmaintelligence.com/research/2016/07/consumer-barriers-to-mobile-internet-adoption-in-africa/568/</a></li><li id="#28"><a href="#note-28">28 https://www.bcgperspectives.com/content/articles/globalization-customer-insight-rising-connected-consumer-rural-india/</a></li><li id="#29"><a href="#note-29">29 http://www.kudumbashree.org/</a></li><li id="#30"><a href="#note-30">30 https://imageoptim.com/</a></li><li id="#31"><a href="#note-31">31 https://www.smashingmagazine.com/2015/10/webp-images-and-performance/</a></li><li id="#32"><a href="#note-32">32 http://www.mckinsey.com/industries/high-tech/our-insights/internet-matters</a></li><li id="#33"><a href="#note-33">33 http://hesperian.org/books-and-resources/</a></li><li id="#34"><a href="#note-34">34 https://www.worldreader.org/what-we-do/our-books/</a></li><li id="#35"><a href="#note-35">35 https://mrunmaiy.com/</a></li><li id="#36"><a href="#note-36">36 https://twitter.com/peko0413</a></li><li id="#37"><a href="#note-37">37 https://twitter.com/kgisdahl</a></li><li id="#38"><a href="#note-38">38 http://www.damcho.com</a></li></ol>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>