davidbgk
/
larlet-fr-david-cache

title: World Wide Web, Not Wealthy Western Web (Part 1)
url: https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1/
hash_url: 568bad728250c11de1b89f52296b0035

<p>“There are more things in heaven and earth, Horatio, than are dreamt of in your philosophy,” said Shakespeare’s Hamlet, in the famous scene in which Hamlet teaches Horatio to be a web designer.</p>
<p>Horatio, as every schoolchild knows, is a designer from Berlin (or sometimes London or Silicon Valley) who has a top-of-the-line MacBook, the latest iPhone and an unlimited data plan over the fastest, most reliable network. But, as Hamlet points out to him, this is not the experience of most of the world’s web visitors.</p>
<p>The <a href="http://www.worldbank.org/en/publication/wdr2016">World Bank reports</a><sup class="po" id="note-1"><a href="#1">1</a></sup> that 1.1 billion people across the world have access to high-speed Internet; 3.2 billion people have some kind of access to the web; 5.2 billion own a mobile phone; and 7 billion live within coverage of a mobile network.</p>
<p>Unsurprisingly, many of those currently unconnected are in India, China, Indonesia — these being the biggest countries in the world. But being unconnected (for whatever reason) isn’t only a reality in developing economies; 51 million people in the US are not connected.</p>
<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img1-lawson-opt.png"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img1-lawson-opt.png" alt=""/></a><sup class="po" id="note-2"><a href="#2">2</a></sup>
<figcaption>Where are the world’s unconnected? (Figures from World Bank) (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img1-lawson-opt.png">View large version</a><sup class="po" id="note-3"><a href="#3">3</a></sup>)</figcaption>
</figure>
<p>When I speak at conferences in rich Western countries, I often ask people, “Where will your next customers come from?” You don’t know. In our truly worldwide web, you <em>can’t</em> know.</p>
<p>Take Ignighter, a dating website set up by three Jewish guys in the US, with a culturally targeted model: Instead of a boy and girl going out on a date, 10 guys and 10 girls would go out together on organized group dates.</p>
<p><a href="http://www.nytimes.com/2011/02/20/business/20ignite.html">Ignighter got 50,000 registrations</a><sup class="po" id="note-4"><a href="#4">4</a></sup>, but it wasn’t enough to reach critical mass, and the founders considered abandoning their business. Then, they noticed they were getting as many sign-ups  <em>a week</em> from India as they did in a year in the USA.</p>
<p>Perhaps the group-dating model that they anticipated for Jewish families really resonated with conservative Muslim, Hindu and Sikh families in India, Singapore and Malaysia, so they rebranded as Stepout, relocated to Mumbai and became India’s biggest dating website.</p>
<p>I’d bet that if you had asked them when they set up Ignighter, “What’s your India strategy?,” they would have said something like, “We don’t have one. We don’t care. We are focusing on middle-class New York Jewish people.” It’s also worth noting that if Ignighter had been an iOS app, they would not have been able to pivot their business, because iOS use in subcontinental Asia is very low. The product was discovered by their new customers precisely because they were on the web, accessible to everybody, regardless of device, operating system or network conditions.</p>
<p>You can’t predict the unpredictable, but, like, <em>whatever</em>, now I’m making a prediction: Many of your next customers will come from the area circled below, if only because there are <a href="https://www.washingtonpost.com/news/worldviews/wp/2013/05/07/map-more-than-half-of-humanity-lives-within-this-circle/">more human beings alive in this circle</a><sup class="po" id="note-5"><a href="#5">5</a></sup> than in the world outside the circle.</p>
<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img2-lawson-large-opt.png"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img2-lawson-800w-opt.png" alt=""/></a><sup class="po" id="note-6"><a href="#6">6</a></sup>
<figcaption>There are more human beings alive in this circle than in the world outside it. (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img2-lawson-large-opt.png">View large version</a><sup class="po" id="note-7"><a href="#7">7</a></sup>)</figcaption>
</figure>
<p>Asia has 4 billion people right now (out of 7.2 billion globally). The <a href="https://www.gapminder.org/videos/dont-panic-the-facts-about-population/">United Nations predicts</a><sup class="po" id="note-8"><a href="#8">8</a></sup> that, by 2050, the population of Asia will reach 5 billion. By 2050, the population of Africa is set to double to 2 billion, and by 2100 (which is a bit late for me and perhaps for you), the population of Africa alone will reach 5 billion.</p>
<p>By 2100, the population of the planet will stabilize at 11 billion, and 50% of the world will live in just these 10 countries highlighted below, only one of which is in what we now consider the developed West.</p>
<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img3-lawson-large-opt.png"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img3-lawson-800w-opt.png" alt=""/></a><sup class="po" id="note-9"><a href="#9">9</a></sup><br/>
<figcaption>By 2100, 50% of humanity will live in these 10 countries. (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img3-lawson-large-opt.png">View large version</a><sup class="po" id="note-10"><a href="#10">10</a></sup>)</figcaption>
</figure>
<p>Over the same period, the population of the West will actually drop, due to declining birthrates. So, it makes sense to target people as your next customers in countries where the population is growing.</p>
<p>But it’s not only a question of head counts. Many of the developing economies are growing extraordinarily fast, with a rapidly expanding middle class that has increasing disposable income. Let’s examine some of those countries now, concentrating for the moment on Asia.</p>
<h3 id="china">China</h3>
<p>China has 1.4 billion people. Its economy saw <a href="https://www.cia.gov/library/publications/the-world-factbook/">6.6% growth</a><sup class="po" id="note-11"><a href="#11">11</a></sup> in gross domestic product (GDP). I don’t know the GDP growth of your country, but I’d imagine that your politicians would love to have 6.6% GDP growth.</p>
<p>So much money changes hands in China. For comparison, in 2014, on Black Friday and Cyber Monday combined, $2.9 billion changed hands in the US. In the same year in China, on Singles’ Day (November 11th), $9.2 billion changed hands. It is predicted that, by 2019, e-commerce will be <a href="https://www.forrester.com/China+Online+Retail+Forecast+2014+To+2019/fulltext/-/E-res118544">worth $1 trillion a year</a><sup class="po" id="note-12"><a href="#12">12</a></sup> in China.</p>
<h3 id="indonesia">Indonesia</h3>
<p>Indonesia has 258 million people and GDP growth of 4.9%. 75% of mobile phone subscribers are on 2G or EDGE networks, and half of all smartphone users say they <a href="https://www.ericsson.com/res/docs/whitepapers/wp-measuring-and-approving-improving-network-performance.pdf">experience network problems daily</a><sup class="po" id="note-13"><a href="#13">13</a></sup>. This is very much tied to geography: Indonesia consists of thousands of islands. In 2015, <a href="http://www.gbgindonesia.com/en/services/article/2015/indonesian_telecommunications_an_increasingly_mobile_market_11108.php">GBD Indonesia wrote</a><sup class="po" id="note-14"><a href="#14">14</a></sup>:</p>
<blockquote><p>Indonesia is still predominantly a 2G market, and leapfrogging from there to 4G is a huge task that will require substantial investment in towers and equipment.</p></blockquote>
<p>Nevertheless, for the Indonesian website BliBli, more than one third of its 2.5 million customers <a href="https://techcrunch.com/2016/07/29/indonesia-will-be-asias-next-biggest-e-commerce-market/">live in rural areas</a><sup class="po" id="note-15"><a href="#15">15</a></sup>, and <a href="https://ondeviceresearch.com/blog/indonesia-social-media-capital-world">Indonesia is the social media capital of the world</a><sup class="po" id="note-16"><a href="#16">16</a></sup>, being third most talkative on Twitter and fourth most on Facebook.</p>
<p>Southeast Asia is the fastest-growing Internet market in the world, and Indonesia is the fastest-growing country. The Internet economy in Southeast Asia will reach $200 billion by 2025 — 6.5 times what it is now, as <a href="https://docs.google.com/presentation/d/1Bp4KT-W8RF4ZorPUthts8X-B7QHBhsEnY1T5G7XifU0/edit#slide=id.p">estimated by Google and Temasec</a><sup class="po" id="note-17"><a href="#17">17</a></sup> in 2016.</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="myanmar">Myanmar</h3>
<p>Myanmar has 57 million people and 8.1% GDP growth, largely fuelled by the government’s democratic reforms (or, perhaps more accurately, reforms designed to appear democratic). One of the reasons for this growth is that five years ago a <a href="https://www.bloomberg.com/bw/articles/2014-09-29/myanmar-opens-its-mobile-phone-market-cuing-carrier-frenzy">SIM card cost $2000</a><sup class="po" id="note-18"><a href="#18">18</a></sup> in Myanmar; last August it went down to $1.50, which, of course, is fuelling growth in mobile phones.</p>
<h3 id="india">India</h3>
<p>As I write this, I’m sitting in a coffee shop in Kochi, Kerala State, India. The country has a population of 1.3 billion people, with a GDP growth of 7.6%. <a href="https://www.bcgperspectives.com/content/articles/center-consumer-customer-insight-marketing-changing-connected-consumer-india/">Boston Consulting Group estimates</a><sup class="po" id="note-19"><a href="#19">19</a></sup> that the number of Internet users will double from 190 to 400 million by 2018 and that the web will contribute $200 billion to India’s GDP by 2020. Indian (and Indonesian) smartphone users are particularly sensitive about data consumption; <a href="https://mobile.nytimes.com/2016/05/31/business/international/smartphone-ad-blocking-software-mobile.html">36% of Asia-Pacific</a><sup class="po" id="note-20"><a href="#20">20</a></sup> smartphone users block advertisements, whereas two thirds do in India and Indonesia.</p>
<h3 id="whatdothesenationshaveincommon">What Do These Nations Have In Common?</h3>
<p>Apart from China (because of its now-abandoned policy of one child per family), the populations of these nations are young. Of course, young people are always on their smartphones, looking for Pokemons, taking selfies, Instagraming their coffee: A young population is an Internet-savvy population.</p>
<p>56% of people in emerging economies see themselves first and foremost as global citizens, rather than national citizens, the <a href="https://www.bbc.com/news/world-36139904">BBC reported</a><sup class="po" id="note-21"><a href="#21">21</a></sup> last year. This is particularly pronounced in Nigeria, China, Peru and India.</p>
<p>And, of course, the people coming to the web are coming on smartphones. <a href="https://www.technologyreview.com/s/601498/the-best-and-worst-internet-experience-in-the-world/">According to MIT</a><sup class="po" id="note-22"><a href="#22">22</a></sup>, of the 690 million Internet users in China, 620 million go online with a mobile device.</p>
<p>There is a more profound commonality as well. Below are the top-10 domains that Opera Mini users in the US visited in September 2016. (These figures are from Opera’s internal reporting tools; I was Deputy CTO of Opera until November 2016. Now I have no relationship with Opera.)</p>
<ol>
<li>google.co.m</li>
<li>facebook.com</li>
<li>youtube.com</li>
<li>wikipedia.org</li>
<li>yahoo.com</li>
<li>twitter.com</li>
<li>wellhello.com</li>
<li>addthis.com</li>
<li>wordpress.com</li>
<li>apple.com</li>
</ol>
<p>The top-10 handsets used to view those websites were:</p>
<ol>
<li>Apple iPhone</li>
<li>Apple iPad</li>
<li>Samsung Galaxy S Duos 2</li>
<li>Samsung Galaxy S3</li>
<li>Samsung Galaxy Grand Prime</li>
<li>Samsung Galaxy Grand Neo Plus</li>
<li>Samsung Galaxy grand Neo GT</li>
<li>Nokia Asha 201</li>
<li>Samsung Galaxy Note III</li>
<li>TracFone LG 306G</li>
</ol>
<p>The top-10 domains visited in Indonesia during the same period were:</p>
<ol>
<li>facebook.com</li>
<li>google.com</li>
<li>google.co.id</li>
<li>wordpress.com</li>
<li>youtube.com</li>
<li>blogspot.co.id</li>
<li>wikipedia.org</li>
<li>indosat.com</li>
<li>liputan6.com</li>
<li>xl.co.id</li>
</ol>
<p>Note the commonalities — keeping in touch with friends and family; search; video; uncensored news and information (Wikipedia) — as well as the local variations.</p>
<p>The top-10 handsets in Indonesia are lower-end than those used in the US:</p>
<ol>
<li>Nokia X2­01</li>
<li>Nokia Asha 210</li>
<li>Nokia C3-00</li>
<li>Generic WAP</li>
<li>Nokia Asha 205.1</li>
<li>Samsung Galaxy V SM-G313HZ</li>
<li>Nokia 215</li>
<li>Nokia X2-02</li>
<li>Samsung GTS5260 Star 2</li>
<li>Nokia 5130 XpressMusic</li>
</ol>
<p>In Nigeria last month, almost the same kinds of websites were viewed — again, with local variations; Nigeria is football-crazy, hence goal.com.</p>
<ol>
<li>google.com.ng</li>
<li>facebook.com</li>
<li>google.com</li>
<li>naij.com</li>
<li>youtube.com</li>
<li>bbc.com</li>
<li>opera.com</li>
<li>wikipedia.org</li>
<li>goal.com</li>
<li>waptrick.com</li>
</ol>
<p>But the top-10 handsets in Nigeria are lower-end than in Indonesia.</p>
<ol>
<li>Nokia Asha 200</li>
<li>Nokia Asha 210</li>
<li>Nokia X2-01</li>
<li>Nokia C3-00</li>
<li>TECNO P5</li>
<li>Nokia Asha 205</li>
<li>Nokia Asha 201</li>
<li>TECNO M3</li>
<li>Infinix Hot Note X551</li>
<li>Infinix Hot 2 X510</li>
</ol>
<p>This suggests that across the world, regardless of disposable income, regardless of hardware or network speed, people want to consume the same kinds of goods and services. And if your websites are made for the whole world, not just the wealthy Western world, then the next 4 billion people might consume the stuff that your organization makes.</p>
<h3 id="betterstandardsbetterbrowsers">Better Standards, Better Browsers</h3>
<p>In Browserland and Web Standards World (not theme parks — yet — but wouldn’t they be great ones?), we are trying to make better standards and better browsers to make using the web a better experience for the next 4 billion people.</p>
<p>Let’s take a quick tour of some of the stuff we’ve been working on. My goal isn’t to give you a tutorial on these technologies (plenty of those are available elsewhere), but to explain <em>why</em> we’ve developed these standards, and to show that the use cases they address are not just nice-to-haves for Horatio and his Western colleagues, but that they address important needs for the rest of the world, too.</p>
<h4 id="progressivewebapps">Progressive Web Apps</h4>
<p>We know that end users love to install apps to the home screen, each app with its own icon that they can tickle to life with a digit. But native apps work only on single platforms; they are generally only available from a walled-garden app store (with a 30% fee going to the gatekeeper); and they’re often heavy downloads. <a href="https://code.facebook.com/posts/1365439333482197/how-we-built-facebook-lite-for-every-android-phone-and-network">Facebook found</a><sup class="po" id="note-23"><a href="#23">23</a></sup> that a typical 20 MB Android application package (APK) takes more than 30 minutes to download over a 2G connection, and that download often fails because of flaky networks.</p>
<p>Most installed apps are not used. <a href="https://think.storage.googleapis.com/docs/mobile-app-marketing-insights.pdf">According to Google</a><sup class="po" id="note-24"><a href="#24">24</a></sup>, the average smartphone user has 36 apps on their device. One in four are used daily, and one in four are never used. But we know that people in emerging markets use cheaper phones, and cheaper phones have less storage. Even now, 25% of all new Android shipments go out with only 512 MB of RAM and maybe only 8 GB of storage.</p>
<p>The World Bank asked people across 30 nations in Africa what they use their phone for.</p>
<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4-lawson-large-opt.png"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4-lawson-800w-opt.png" alt=""/></a><sup class="po" id="note-25"><a href="#25">25</a></sup>
<figcaption>What African phone users do with their device. (World Bank) (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4-lawson-large-opt.png">View large version</a><sup class="po" id="note-26"><a href="#26">26</a></sup>)</figcaption>
</figure>
<p>Unsurprisingly, phone calls and text messages were the primary use case, followed by missed calls. Across Africa and Asia, businesses encourage potential customers to send them a “missed call” — that is, to dial their number and then hang up. The business then phones the customer back, so that the cost of the contact is borne by the business, not the customer.</p>
<p>Here’s an example I photographed today in Kochi, India:</p>
<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4a-lawson-large-opt.jpeg"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4a-lawson-800w-opt.jpeg" alt=""/></a><sup class="po" id="note-27"><a href="#27">27</a></sup>
<figcaption>Advertisement in India with ‘missed call’ number. Photo by author. (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4a-lawson-large-opt.jpeg">View large version</a><sup class="po" id="note-28"><a href="#28">28</a></sup>)</figcaption>
</figure>
<p>The next most popular uses of mobile phones in Africa are games, music and transferring airtime. (In many countries, carrying cash can be a little risky, and many people don’t have access to banks, so people pay for goods and services by transferring airtime from their phone to the vendor’s phone.)</p>
<p>Then you have photos and videos, etc. Like everybody else, they are unlikely to delete video of their family or their favourite MP3s to make room for your e-commerce app. <a href="https://medium.com/inside-birdly/why-you-shouldn-t-bother-creating-a-mobile-app-328af62fe0e5#.ufoave1x4">Birdly</a><sup class="po" id="note-29"><a href="#29">29</a></sup>, in a blog post explaining why you shouldn’t bother creating a mobile app, said, “We didn’t stand a chance as we were fighting with both our competitors and other apps for a few more MB of room inside people’s phone.”</p>
<p>Wouldn’t it be super and gorgeous if we could offer the user experience of native apps with the reach of the web? Well, dear reader, now we can!</p>
<p>Progressive web apps (PWAs) allow users to “install” your app to their home screen (on supporting devices and browsers). Your PWA can launch in full-screen, portrait or landscape mode, just like a native app. But, crucially, your app lives on the web — it’s fully part of the web, and like the web, it’s based on the principles of progressive enhancement.</p>
<p>Recently, my ex-Opera colleague Andreas Bovens and I interviewed a Nigerian and a Kenyan developer who made some of the earliest progressive web apps. <a href="https://dev.opera.com/articles/pwa-nigeria-kenya-interview/">Constance Okoghenun said</a><sup class="po" id="note-30"><a href="#30">30</a></sup>:</p>
<blockquote><p>Nigerians are extremely data sensitive. People side-load apps and other content from third parties [or via] Xender. With PWAs […], without the download overhead of native apps […] developers in Nigeria can now give a great and up-to-date experience to their users.</p></blockquote>
<p>Kenyan developer Eugene Mutai said:</p>
<blockquote><p>[PWAs] may solve problems that make the daily usage of native mobile applications in Africa a challenge; for example, the size of apps and the requirement of new downloads every time they are updated, among many others.</p></blockquote>
<p>We are seeing the best PWAs come out of India, Nigeria, Kenya and Indonesia. Let’s look briefly at why PWAs are particularly well suited to emerging economies.</p>
<p>With a PWA, all the user downloads is a manifest file, which is a small text file with JSON information. You link to the manifest file from the <code>head</code> element in your HTML document, and browsers that don’t understand it just ignore it and show a normal website. This is because HTML is fault-tolerant. The vital point here is that <strong>everybody gets something</strong>, and <strong>nobody gets a worse experience</strong>.</p>
<p>(Making a manifest file is easy, and a lot of the information required is probably already in your <code>head</code> elements in proprietary meta tags. So, Stuart Langridge and I wrote a <a href="http://brucelawson.github.io/manifest/">manifest generator</a><sup class="po" id="note-31"><a href="#31">31</a></sup>: Give it a URL, and it will spider your website and write a manifest file for you to download or copy and paste.)</p>
<p>The manifest just gives the browser the information it needs to install the PWA (an icon for the home screen, the name of the app and the URL to go to when it launches) and is, therefore, very small. The actual app lives on your server. This means there is no lag with distributing updates. Usually, users receive notifications saying that new versions of their native apps have been released, but weeks might go by before they go to a coffee shop with free Wi-Fi to install the updates, or they might never download the updates at all — disastrous if one of the updates corrects a security flaw. But because PWAs are <em>web</em> apps, when you make an update, the next time the user starts the app on their device, they will automatically get the newest version.</p>
<p>Crucially, a PWA is just a normal website on Safari, Windows phones and Opera Mini. Nobody is locked out — that’s why they are called <em>progressive</em> web apps; they are progressively enhanced websites.</p>
<h4 id="flipkartlite">Flipkart Lite</h4>
<p>Flipkart is a major e-commerce website in India (competing with Amazon). A couple of years ago, they decided to abandon their mobile website and redirect users to the app stores to download native apps. <a href="http://timesofindia.indiatimes.com/business/india-business/Flipkart-drops-its-plan-to-go-app-only/articleshow/49751060.cms">Only 4%</a><sup class="po" id="note-32"><a href="#32">32</a></sup> of people who actually took the trouble to type the website’s URL (and, therefore, presumably were actively shopping) ever downloaded the app. With 96% of users failing to download the apps, Flipkart reversed its policy and replaced its website with a progressive web app, called Flipkart Lite. Since its launch, Flipkart reports 40% returning visitors week over week, 63% increased conversions from home-screen visits, and a tripling of the time that visitors browse the website.</p>
<p>Flipkart’s commitment to PWAs was expressed by Amar Nagaram, of Flipkart engineering, at its PWA summit in Bangalore, where I spoke:</p>
<blockquote><p>We want Flipkart Lite available on every phone over every flaky network in India.</p></blockquote>
<p>One great thing about a PWA is that, like any other secure website, it works offline, using the <a href="https://www.smashingmagazine.com/2016/02/making-a-service-worker/">magic of service workers</a><sup class="po" id="note-33"><a href="#33">33</a></sup>. This further closes the gap between native and web apps; an offline experience for the web is (I hate to use the phrase) a “paradigm shift.” Until now, when your web browser is disconnected from the Internet, you get a boring browser-derived “Sorry” message. Now, with service workers sitting between a page and the network, you can give visitors a meaningful offline experience. For example, when the user goes to your website for the first time, you can download images of the 10 most popular products to the cache, and upon subsequent offline visits, you could say, “I’m sorry. You are offline, but you can browse our top products and press ‘Buy,’ and we will background sync later.” The offline experience you provide will obviously depend on what your app does, but service workers give you all the flexibility you need.</p>
<p>Additionally, service workers give you:</p>
<ul>
<li><strong>push notifications</strong><br/>
Please don’t spam and pollute the ecosystem for everyone by making consumers sick of notifications!</li>
<li><strong>background sync</strong><br/>
This could allow the user to press a button to buy, and when they go back online, the buying process just automatically syncs up.</li>
</ul>
<p>Currently, PWAs are supported on Chrome for Android, Microsoft Edge and Opera for Android. (Opera may have a small market share where you are, but it’s long been a significant player in the developing world.) Mozilla has signalled that it’s implementing PWAs on Firefox for Android. Safari for iOS has a non-standard mechanism for adding websites to the home screen but as of yet doesn’t support service workers.</p>
<p>To recap, the advantages of a PWA are these:</p>
<ul>
<li>With no app store or gatekeeper, the browser can offer to add a web app to the home screen when the user visits your website.</li>
<li>It is searchable, indexable and linkable.</li>
<li>It works offline.</li>
<li>Visitors without supporting browsers get a normal website; no one is left behind.</li>
</ul>
<p>If you want to see some real PWAs, check out the community-curated website (itself a PWA) <a href="https://pwa.rocks">PWA.Rocks</a><sup class="po" id="note-34"><a href="#34">34</a></sup></p>
<h4 id="responsiveimages">Responsive Images</h4>
<p>Around 2011, at any conference I went to, everybody would tell me about the responsive images problem: How can we send “Retina-quality” images (much bigger in file size) to devices that can display them properly and send smaller images to non-Retina devices? At the time, we couldn’t; the venerable <code>img</code> element can point to only one source image, and that’s the only one that could be sent to all devices.</p>
<p>But solving this problem is vital if we want to save bandwidth for consumers whose devices aren’t Retina, and also to save battery life; sending unnecessarily large images and asking the browser to resize them with the conventional <code>img {max-width:100%}</code> trick requires a lot of CPU cycles, which causes delays and drains the battery. As <a href="https://timkadlec.com/2013/11/why-we-need-responsive-images-part-deux/">Tim Kadlec wrote</a><sup class="po" id="note-35"><a href="#35">35</a></sup>:</p>
<blockquote><p>On the test page with 6x images (not unusual at the moment on many responsive sites), the combination of resizes and decodes added an additional 278ms in Chrome and 95.17ms in IE (perhaps more …) to the time it took to display those 10 images.</p></blockquote>
<p>In many parts of the world, battery life is a considerable problem. If you have a two-hour commute across Lagos or Nairobi to get to work, and a two-hour commute back, you wouldn’t be able to recharge your device, which you’d need to do if you wanted to make phone calls.</p>
<p>For instance, power is in short supply in India. According to the <a href="http://ficci.in/sedocument/20218/power-report2013.pdf">Federation of Indian Chambers of Commerce &amp; Industry</a><sup class="po" id="note-36"><a href="#36">36</a></sup>, in 2012 (the last reliable figures I could find):</p>
<blockquote><p>A third of Indian citizens, especially in the rural parts of the country, remain without power, as do 6% of the urban population. During peak hours, the shortage was 9.8%.</p></blockquote>
<p>Battery life is so important that in India it has become a secondary industry unto itself. Alok Gupta, managing director and chief executive of The Mobile Store, India’s largest mobile phone retailer, <a href="https://www.businessinsider.in/Battery-life-crisis-of-smartphones-prompted-an-entire-industry-to-emerge-to-solve-it/articleshow/49301930.cms">recalls in October 2015</a><sup class="po" id="note-37"><a href="#37">37</a></sup>:</p>
<blockquote><p>Nearly 30 per cent of our annual smartphone unit sales have power banks bundled in. Two years ago, less than 1 per cent of our annual smartphone sales had power banks bundled in.</p></blockquote>
<p>So (spurred on by a slight post-conference-season hangover), in December 2011, <a href="http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/">I wrote a blog post</a><sup class="po" id="note-38"><a href="#38">38</a></sup> with a straw man suggestion for a new HTML <code>picture</code> element to solve the problem. My idea wasn’t fully thought out and wouldn’t have worked properly in its initial incarnation (damn hangovers), but cleverer people than me — Yoav Weiss (now at Akamai), Mat Marquis of Bocoup, Tab Atkins of Google, Marcos Cáceres of Mozilla, Simon Pieters of Opera — saw the utility in it and worked to make a proper specification. It was implemented, and now it is in every modern browser — even Safari.</p>
<p>This isn’t the place to talk about the nuts and bolts of <a href="https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/">HTML responsive images</a><sup class="po" id="note-39"><a href="#39">39</a></sup>, but if you use them, you’ll get significant savings on your images.</p>
<p>I did a talk about responsive images in Bristol last June, and the next day a developer in the audience named Mike Babb used the techniques and <a href="https://mikebabb.com/responsive-images-smaller-page-sizes-with-the-picture-element-and-webp/">reduced his web page down by 70%</a><sup class="po" id="note-40"><a href="#40">40</a></sup>. This is important because the average web page (<em>page</em>, not full app or website) is 2.3 MB, of which <a href="http://httparchive.org/interesting.php#bytesperpage">1.6 MB are images</a><sup class="po" id="note-41"><a href="#41">41</a></sup>. If you can save data, your website will be faster.</p>
<p>Mike saved 70%, and that 70% matters, because not everybody is like us and has a big data plan. In Germany, buying an entry-level mobile data plan of 500 MB per month takes one hour of work at minimum wage. In the US, it takes six hours, and in Brazil, it takes <a href="http://360.here.com/2015/06/03/offline-navigation-really-matters-500mb-data-costs-week-wages/">34 hours of work</a><sup class="po" id="note-42"><a href="#42">42</a></sup> .</p>
<figure><a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img5-lawson-large-opt.png"><img src="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img5-lawson-800w-opt.png" alt=""/></a><sup class="po" id="note-43"><a href="#43">43</a></sup>
<figcaption>Hours of work to afford entry-level mobile data package. (<a href="https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img5-lawson-large-opt.png">View large version</a><sup class="po" id="note-44"><a href="#44">44</a></sup>)</figcaption>
</figure>
<p>If your bloated images are eating up people’s data plan, then you are literally making them work more hours — and that it is hugely discourteous. As well as being rude, it’s bad business: They simply won’t go back to your website. (If you’d like to know more about the cost of accessing your website, check Tim Kadlec’s utility <a href="https://whatdoesmysitecost.com/">What Does My Site Cost?</a><sup class="po" id="note-45"><a href="#45">45</a></sup>)</p>
<h3 id="morenexttime">More Next Time!</h3>
<p>In this article, we’ve explored where the next 4 billion connected people will come from, as well as some of the innovations that the standards community has made to better serve them. In the <a href="https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/">next part of this article</a><sup class="po" id="note-46"><a href="#46">46</a></sup>, we’ll look at some of the demand-side problems that prevent people from accessing the web easily and what can be done to overcome them.</p>
<hr/>
<p><em>The population projections in this article are originally from the United Nations, but I got them from the excellent, humane documentary named <a href="http://www.gapminder.org/videos/dont-panic-the-facts-about-population/">Don’t Panic: The Facts About Population</a><sup class="po" id="note-47"><a href="#47">47</a></sup> by Hans Rosling, a hero of mine who died while I was writing this article. Thanks to Clara at <a href="http://www.damcho.com">Damcho Studio</a><sup class="po" id="note-48"><a href="#48">48</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 http://www.worldbank.org/en/publication/wdr2016</a></li><li id="#2"><a href="#note-2">2 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img1-lawson-opt.png</a></li><li id="#3"><a href="#note-3">3 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img1-lawson-opt.png</a></li><li id="#4"><a href="#note-4">4 http://www.nytimes.com/2011/02/20/business/20ignite.html</a></li><li id="#5"><a href="#note-5">5 https://www.washingtonpost.com/news/worldviews/wp/2013/05/07/map-more-than-half-of-humanity-lives-within-this-circle/</a></li><li id="#6"><a href="#note-6">6 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img2-lawson-large-opt.png</a></li><li id="#7"><a href="#note-7">7 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img2-lawson-large-opt.png</a></li><li id="#8"><a href="#note-8">8 https://www.gapminder.org/videos/dont-panic-the-facts-about-population/</a></li><li id="#9"><a href="#note-9">9 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img3-lawson-large-opt.png</a></li><li id="#10"><a href="#note-10">10 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img3-lawson-large-opt.png</a></li><li id="#11"><a href="#note-11">11 https://www.cia.gov/library/publications/the-world-factbook/</a></li><li id="#12"><a href="#note-12">12 https://www.forrester.com/China+Online+Retail+Forecast+2014+To+2019/fulltext/-/E-res118544</a></li><li id="#13"><a href="#note-13">13 https://www.ericsson.com/res/docs/whitepapers/wp-measuring-and-approving-improving-network-performance.pdf</a></li><li id="#14"><a href="#note-14">14 http://www.gbgindonesia.com/en/services/article/2015/indonesian_telecommunications_an_increasingly_mobile_market_11108.php</a></li><li id="#15"><a href="#note-15">15 https://techcrunch.com/2016/07/29/indonesia-will-be-asias-next-biggest-e-commerce-market/</a></li><li id="#16"><a href="#note-16">16 https://ondeviceresearch.com/blog/indonesia-social-media-capital-world</a></li><li id="#17"><a href="#note-17">17 https://docs.google.com/presentation/d/1Bp4KT-W8RF4ZorPUthts8X-B7QHBhsEnY1T5G7XifU0/edit#slide=id.p</a></li><li id="#18"><a href="#note-18">18 https://www.bloomberg.com/bw/articles/2014-09-29/myanmar-opens-its-mobile-phone-market-cuing-carrier-frenzy</a></li><li id="#19"><a href="#note-19">19 https://www.bcgperspectives.com/content/articles/center-consumer-customer-insight-marketing-changing-connected-consumer-india/</a></li><li id="#20"><a href="#note-20">20 https://mobile.nytimes.com/2016/05/31/business/international/smartphone-ad-blocking-software-mobile.html</a></li><li id="#21"><a href="#note-21">21 https://www.bbc.com/news/world-36139904</a></li><li id="#22"><a href="#note-22">22 https://www.technologyreview.com/s/601498/the-best-and-worst-internet-experience-in-the-world/</a></li><li id="#23"><a href="#note-23">23 https://code.facebook.com/posts/1365439333482197/how-we-built-facebook-lite-for-every-android-phone-and-network</a></li><li id="#24"><a href="#note-24">24 https://think.storage.googleapis.com/docs/mobile-app-marketing-insights.pdf</a></li><li id="#25"><a href="#note-25">25 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4-lawson-large-opt.png</a></li><li id="#26"><a href="#note-26">26 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4-lawson-large-opt.png</a></li><li id="#27"><a href="#note-27">27 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4a-lawson-large-opt.jpeg</a></li><li id="#28"><a href="#note-28">28 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img4a-lawson-large-opt.jpeg</a></li><li id="#29"><a href="#note-29">29 https://medium.com/inside-birdly/why-you-shouldn-t-bother-creating-a-mobile-app-328af62fe0e5#.ufoave1x4</a></li><li id="#30"><a href="#note-30">30 https://dev.opera.com/articles/pwa-nigeria-kenya-interview/</a></li><li id="#31"><a href="#note-31">31 http://brucelawson.github.io/manifest/</a></li><li id="#32"><a href="#note-32">32 http://timesofindia.indiatimes.com/business/india-business/Flipkart-drops-its-plan-to-go-app-only/articleshow/49751060.cms</a></li><li id="#33"><a href="#note-33">33 https://www.smashingmagazine.com/2016/02/making-a-service-worker/</a></li><li id="#34"><a href="#note-34">34 https://pwa.rocks</a></li><li id="#35"><a href="#note-35">35 https://timkadlec.com/2013/11/why-we-need-responsive-images-part-deux/</a></li><li id="#36"><a href="#note-36">36 http://ficci.in/sedocument/20218/power-report2013.pdf</a></li><li id="#37"><a href="#note-37">37 https://www.businessinsider.in/Battery-life-crisis-of-smartphones-prompted-an-entire-industry-to-emerge-to-solve-it/articleshow/49301930.cms</a></li><li id="#38"><a href="#note-38">38 http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/</a></li><li id="#39"><a href="#note-39">39 https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/</a></li><li id="#40"><a href="#note-40">40 https://mikebabb.com/responsive-images-smaller-page-sizes-with-the-picture-element-and-webp/</a></li><li id="#41"><a href="#note-41">41 http://httparchive.org/interesting.php#bytesperpage</a></li><li id="#42"><a href="#note-42">42 http://360.here.com/2015/06/03/offline-navigation-really-matters-500mb-data-costs-week-wages/</a></li><li id="#43"><a href="#note-43">43 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img5-lawson-large-opt.png</a></li><li id="#44"><a href="#note-44">44 https://www.smashingmagazine.com/wp-content/uploads/2017/02/www-img5-lawson-large-opt.png</a></li><li id="#45"><a href="#note-45">45 https://whatdoesmysitecost.com/</a></li><li id="#46"><a href="#note-46">46 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/</a></li><li id="#47"><a href="#note-47">47 http://www.gapminder.org/videos/dont-panic-the-facts-about-population/</a></li><li id="#48"><a href="#note-48">48 http://www.damcho.com</a></li></ol>