Codemotion keynote - Bruce Lawson

Slide 1

Slide 1 text

World-Wide Web not Wealthy Western Web Bruce Lawson AMSTERDAM 11-12 MAY 2016

Slide 2

Slide 2 text

World-Wide Web, not Wealthy Western Web Bruce Lawson, Opera Software

Slide 3

Slide 3 text

Make the web better for… Consumers Business owners The next 4 billion 4bn Developers

Slide 4

Slide 4 text

ICT access by population Total   global population ~7.4 billion High-speed  internet 1.1 billion Total   internet users 3.2 billion Mobile phones 5.2 billion Within mobile coverage 7 billion

Slide 5

Slide 5 text

The world’s offline population Total   internet users 3.2 billion High-speed  internet 1.1 billion India 1.063 billion Countries outside of the top 20 China 755 million Indonesia 213 million Pakistan 165 million Bangladesh 148 million Nigeria 111 million Brazil 98 million Ethiopia 95 million Mexico 70 million Congo, Dem. Rep. 68 million Philippines 63 million Russian Federation 55 million Iran, Islamic Rep. 54 million Myanmar 53 million Vietnam 52 million United States 51 million Tanzania 49 million Thailand 48 million Egypt, Arab Rep. 42 million Turkey 41 million

Slide 6

Slide 6 text

WHERE WILL YOUR NEXT COSTUMERS COME FROM?

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Jon Hicks’ map

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

▪ Black Friday + Cyber Monday: $2.9 Bn ▪ Double 11 Day: $9.2 Bn Sources: Nanjing Marketing Group, Q4 2014 Ecommerce (top sales day)

Slide 16

Slide 16 text

Total online retail spending in China reached $307 billion in 2013 and is forecast to grow at a compound annual rate of nearly 20% until 2019, when it should exceed $1 trillion. “ $1 trillion by 2019 - China Online Retail Forecast Forrester

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

in Indonesia 75% of users are on older 2G, or GSM/ EDGE, networks, and the nation’s geography (it is made up of thousands of islands) presents additional challenges… more than half of Indonesian smartphone users said they experienced network problems daily. “ Indonesia - Measuring and improving network performance Ericsson, September 2014

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

in 1993, Bangladesh became the first South Asian country to adopt cellular technology … household ownership of at least 1 working mobile phone grew from 29.85% in [2008] to 56.07% in [2011]. “ - Johns Hopkins Bloomberg School of Public Health Feb 2015

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Five years ago, buying a cell phone SIM card in Myanmar could set you back more than $2,000… In August [2014], Qatar’s Ooredoo began selling data-enabled cards with a 3G connection for $1.50. “ SIM: was $2,000 now $1.50 - When a SIM Card Goes From $2,000 to $1.50 Bloomberg (29 Sept '14)

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

we expect the number of Internet users to at least double, from 190 million in 2014 to 400 million in 2018 … We expect the Internet to contribute $200 billion to India’s GDP (5% of total GDP) by 2020. “ - Boston Consulting Group (BCG), 23 April 2015

Slide 25

Slide 25 text

WHAT DO THESE NATIONS HAVE IN COMMON?

Slide 26

Slide 26 text

56% in emerging economies saw themselves first and foremost as global citizens rather than national citizens. In Nigeria (73%), China (71%), Peru (70%) and India (67%) the data is particularly marked. “ - Globescan poll for BBC, April 2016

Slide 27

Slide 27 text

http://www.bbc.com/news/world-36139904

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

1. google.com 2. facebook.com 3. youtube.com 4. wikipedia.org 5. yahoo.com Top domains: USA 6. twitter.com 7. wellhello.com 8. addthis.com 9. wordpress.com 10. apple.com

Slide 30

Slide 30 text

1. Apple iPhone 2. Apple iPad 3. Samsung Galaxy S Duos 2 4. Samsung Galaxy S3 5. Samsung Galaxy Grand Prime Top handsets: USA 6. Samsung Galaxy Grand Neo Plus 7. Samsung Galaxy grand Neo GT 8. Nokia Asha 201 9. Samsung Galaxy Note III 10.TracFone LG 306G

Slide 31

Slide 31 text

1. facebook.com 2. google.com 3. google.co.id 4. wordpress.com 5. youtube.com Top domains: Indonesia 6. blogspot.co.id 7. wikipedia.org 8. indosat.com 9. liputan6.com 10. xl.co.id

Slide 32

Slide 32 text

1. Nokia X201 2. Nokia Asha 210 3. Nokia C3-00 4. Generic WAP 5. Nokia Asha 205.1 Top handsets: Indonesia 6. Samsung Galaxy V SM-G313HZ 7. Nokia 215 8. Nokia X2-02 9. Samsung GTS5260 Star 2 10. Nokia 5130 XpressMusic

Slide 33

Slide 33 text

1. google.com.ng 2. facebook.com 3. google.com 4. naij.com 5. youtube.com Top domains: Nigeria 6. bbc.com 7. opera.com 8. wikipedia.org 9. goal.com 10. waptrick.com

Slide 34

Slide 34 text

1. Nokia Asha 200 2. Nokia Asha 210 3. Nokia X2-01 4. Nokia C3-00 5. TECNO P5 Top handsets: Nigeria 6. Nokia Asha 205 7. Nokia Asha 201 8. TECNO M3 9. Infinix Hot Note X551 10. Infinix Hot 2 X510

Slide 35

Slide 35 text

SUPPLY-SIDE IMPROVEMENTS

Slide 36

Slide 36 text

Making the web work on lower-spec devices

Slide 37

Slide 37 text

Progressive Web Apps ▪ “install” to the home screen ▪ have their own icon (defined by the web developer) ▪ can launch full-screen, portrait or landscape ▪ but “live” on the Web

Slide 38

Slide 38 text

Most installed apps are not used often. The average app user has 36 apps installed on his or her smartphone. Only one in four of those apps are used daily, while 1 in 4 apps are never used. “ Native Apps take up space - How Consumers Really Find and Use Your Apps (Google research, May 2015)

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Downloading a typical app with 20 MB APK can take more than 30 minutes on a 2G network, and the download is likely to fail before completion, due to the flaky nature of the network. “ - How we built Facebook Lite for every Android phone and network

Slide 41

Slide 41 text

    With space this limited, the user is comparing their personal photo collection with the adoption of a new app on their phone. “ - Mobile App Developers Are Suffering

Slide 42

Slide 42 text

Africa: mobile phone use

Slide 43

Slide 43 text

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 phones. “ Birdly - Why you shouldn’t bother creating a mobile app

Slide 44

Slide 44 text

Manifest file stores metadata for your web app: icons, description, colors, and related info that lets browsers create high-quality experiences for the launcher icon, task switcher, and splash screen.

Slide 45

Slide 45 text

all in the

Slide 46

Slide 46 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }

Slide 47

Slide 47 text

STARTING A PWA

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "fullscreen", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }

Slide 50

Slide 50 text

{ "name": "Air Horner", "short_name": "Air Horner", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#2196F3", "background_color": "#2196F3", "display": "fullscreen", "orientation": "portrait", "start_url": "/?home=true" }

Slide 51

Slide 51 text

{ "name": "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#990000", "background_color": "#DFCFAF", "display": "fullscreen", "orientation": "landscape", "start_url": "/inbox-attack/?home=true" } https://andreasbovens.github.io/inbox-attack/

Slide 52

Slide 52 text

Tools Manifest Generator http://brucelawson.github.io/manifest/   Manifest validator manifest-validator.appspot.com  List of PWAs pwa.rocks

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Flipkart Lite ▪ 40% returning visitors week over week  ▪ +63% conversions from Home screen visits  ▪ 3x time spent on FlipKart Lite

Slide 55

Slide 55 text

We want Flipkart Lite available on every phone over every flaky network in India “ Engagement + Reach - Amar Nagaram (Flipkart engineering)

Slide 56

Slide 56 text

Progressive Web Apps ▪ live on the server so no update distribution lag  ▪ require no app store or gatekeeper  ▪ are a normal website on browsers such as Opera Mini, Safari, Windows phones  ▪ searchable, indexable, linkable  ▪ can work offline

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Also with Service Worker ▪ Push Notifications  ▪ Background Sync

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Responsive images

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

▪ ▪ srcset attribute ▪ x descriptor ▪ w descriptor ▪ sizes attribute Video, tutorials New HTML thingies

Slide 66

Slide 66 text

Average Bytes per Page by Content Type Total 2296 kB Stylesheets 76 kB HTML 66 kB Images 1,457 kB Other 4 kB Video 203 kB Fonts 126 kB Scripts 358 kB Data: httparchive.org, 15 April 2016 (Alexa Top 1,000,000 Sites)

Slide 67

Slide 67 text

Citizens of rich nations pay on average just 1- 2% of their monthly income to connect. In the 51 countries we analysed … the price for an entry-level mobile broadband package hovers at just above 10% of monthly incomes. “ Affordability of access - The Affordability Report, 2014

Slide 68

Slide 68 text

500MB data: hours worked

Slide 69

Slide 69 text

NETWORK PROBLEMS

Slide 70

Slide 70 text

WHAT ARE PROXY BROWSERS?

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Meet Thor

Slide 74

Slide 74 text

Stop! Hammer Time

Slide 75

Slide 75 text

ad-blocking

Slide 76

Slide 76 text

Opera Mini consumes on an average 14% less battery and 89% less data when compared to other mobile browsers. “ Testing in India - Cigniti Technologies (Chrome, UC browser, CM browser and UC Mini on WiFi, 2G and 3G networks in India, March April 2015)

Slide 77

Slide 77 text

A third of Indian citizens, especially in the rural parts of the country remains without power, as does 6% of the urban population. During peak hours the shortage was 9.8 percent. “ Battery life matters - Federation of Indian Chambers of Commerce & Industry (2012)

Slide 78

Slide 78 text

Nearly 30 per cent of our annual smartphone unit sales have power banks bundled in," said Alok Gupta, managing director and chief executive of The Mobile Store, India's largest cellphone retailer. "Two years ago, less than 1 per cent of our annual smartphone sales had power banks bundled in." “ Battery life matters 2 - Business Insider (October 2015)

Slide 79

Slide 79 text

120k transactions/second 23 PB last month

Slide 80

Slide 80 text

Approximately 600 million times per second, particles collide within the Large Hadron Collider (LHC)…Electronic circuits record the passage of each particle …and send the data to the CERN Data Centre… Physicists must sift through the 30 petabytes or so of data produced annually. “ - CERN computing

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

In India, only 96k of the 736k cell towers are 3G enabled, but more critically, only 35k of those towers have a fiber optic connection to the backbone, which results in inconsistent connection. “ Single connection - India's mobile Internet: The revolution has begun Avdendus (2013)

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Design considerations for developing markets

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

Tech constraints for lower- spec markets

Slide 91

Slide 91 text

Everything happens on the server ▪ Everything needs user interaction ▪ Everything needs a server roundtrip ▪ JS on page load runs for 5 seconds ▪ JS-only APIs do NOT work More: Opera Mini and JavaScript.

Slide 92

Slide 92 text

Design won't always be preserved ▪ No CSS rounded corners or gradients ▪ Animations (CSS/ SVG) show only first frame ▪ No web fonts ▪ Don't use icon fonts; use SVG Make SVG icons (even more!) responsive.

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

we've launched our first Holy Grail app into production! … It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker “ Holy Grail App - AirBnB

Slide 96

Slide 96 text

because 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. “ Holy Grail App #2 - AirBnB

Slide 97

Slide 97 text

Rise of The Smartphones

Slide 98

Slide 98 text

India emerged as the world's third largest smartphone market after the U.S. and China. Total smartphone shipments are expected to increase to reach more than 150 million units in 2018. “ - Busiess Korea (8 May '15)

Slide 99

Slide 99 text

Smartphone shipments to the Middle East and Africa saw unprecedented year-on-year growth of 83% in 2014… Feature phones have been hit hard … with shipments down 4.5% year on year in 2014. “ - International Data Corporation (IDC) (26 Apr '15)

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

Bruce’s law of Smartness™

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

91.7% live within range of a 2G network. At less than a quarter the speed of a 56K dialup modem, 2G/ GSM (9.6 KBPS) is insufficient for practical use of the internet. 48.7% live within range of a 3G mobile network. “ Infrastructure - State of Connectivity 2014 internet.org

Slide 104

Slide 104 text

Opera Mini: modes ▪ High mode: WebView (≈ 50% compression)  ▪ Extreme mode: Server (up to 90% compression)  ▪ iOS defaults to High mode  ▪ Android defaults to Extreme mode (except Poland, USA, Sweden, Norway, Russia and Germany, which default to High)  ▪ WindowsPhone, Feature Phones: Extreme mode only

Slide 105

Slide 105 text

DEMAND-SIDE PROBLEMS

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

Smartphone growth? ▪ Global smartphone shipments fell 3 percent annually from 345.0 million units in Q1 2015 to 334.6 million in Q1 2016. Strategy Analytics (28 April 2016) ▪ According to IDC, the market grew by 0.2 per cent year-on-year to 334.9 million units, marking “the smallest ever year-on-year growth on record”. Mobile World Live, 28 April 2016

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

In Africa, 7 in 10 people who do not use the internet say they just don’t know how to use it, and almost 4 in 10 say they do not know what the internet is.   In high-income Poland and the Slovak Republic, one- fifth of adults cannot use a computer. “ Africa: digital illiteracy web? - World Bank

Slide 110

Slide 110 text

41% do not use the internet at all, 53% do not have broadband access at home, and 23% do not use cell phones. “ American seniors - Older Adults and Technology Use (Pew Research Centre, April 2014)

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

Video by ClubInternet, Pakistan.   Used by kind permission. http://clubinternet.co/ https://vimeo.com/116787124

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

Developing countries are home to 94% of the global offline population. “ - State of Connectivity 2014, internet.org

Slide 117

Slide 117 text

Digital Divide: Africa 2011-12 Individuals who use the internet (%) 0 5 10 15 20 25 Bottom Upper  40% 60% Mature Young  (45+) (15-24) Rural Urban Women Men  Gender Location Age Income distribution  (household)

Slide 118

Slide 118 text

Rural mobile internet users grew by a staggering 93% between December 2014-Dec 2015, yet only nine per cent of the hinterland has access to the technology. In comparison, 53% of urban areas had mobile internet connectivity and grew at 71% during the same period. “ Digital Divide (India) - Times of India, 3 Feb 1016

Slide 119

Slide 119 text

Making the internet universally accessible and affordable should be a global priority. “ World Bank

Slide 120

Slide 120 text

In Nigeria, the data needed to watch just 2 minutes of online video a day can cost more than sending a child to school for a month. “ Nigeria - How To Make Internet Affordable

Slide 121

Slide 121 text

Digital products are taxed as luxury goods Import tariffs (%) 0 5 10 15 20 C uba C am bodia Argentina Brazil C am eroon C entral   African R ep. C had C ongo, D em .   R ep. G abon Liberia Belarus M adagascar Sam oa M ozam bique C hile Computers Laptops Computers and laptops

Slide 122

Slide 122 text

Digital products are taxed as luxury goods Import tariffs (%) 0 5 10 15 20 25 30 35 Fiji Pakistan Sam oa D om inican   R epublic C abo Verde Bangladesh Zim babw e Antigua and  Barbuda Barbados Belize D om inica G renada G uyana Jam aica Mobile phones Mobile phones

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

• Settle on fair and transparent ICT taxes. • Get governments and donors to step up efforts. • Agree on “affordability”: 1 GB for 2% • Invest in public access solutions. • Make getting women online a top priority. Fast Africa

Slide 125

Slide 125 text

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. “ Online work

Slide 126

Slide 126 text

Women 25% Men 75% Total nonagricultural employment Women 44% Men 56% Online work (Elance) Web empowers women

Slide 127

Slide 127 text

Online work: Most important advantages Able to earn extra money Friends and family do not   understand what I am doing Able to work from home   and work flexible hours Reduce time and   cost for job search Provide access to the   job market which   was limited before Higher chances of   getting a job that matches   my skills and interests 0 10 20 30 40 50 Men Women Percent of respondents

Slide 128

Slide 128 text

Online work: Most important disadvantages Payment is not   good enough Friends and family   do not understand   what I am doing Do not have any   social benefits Require access to an   online payment system Require access to internet Require internet and   computer skills The job is temporary,   and it is not for a   long-term career 0 10 20 30 40 Men Women Percent of respondents

Slide 129

Slide 129 text

The government of the Indian state of Kerala set up the Kudumbashree project to outsource information technology services to cooperatives of women from poor families; 90 percent of the women had not previously worked outside the home. “ “Prosperity of the family”

Slide 130

Slide 130 text

Access to the internet is critical, but not sufﬁcient “ World Bank:

Slide 131

Slide 131 text

the full benefits of the information and communications transformation will not be realized unless countries continue to improve their business climate, invest in people’s education and health, and promote good governance. “

Slide 132

Slide 132 text

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. “ Internet matters - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)

Slide 133

Slide 133 text

It took the Industrial Revolution of the 19th century 50 years to produce the same result. “ Internet matters - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)

Slide 134

Slide 134 text

[email protected] opera.com/developer brucelawson.co.uk @brucel

Slide 135

Slide 135 text

Resources ▪ Population forecast video by Hans Rosling (raw data from United Nations) ▪ More than half of humanity lives within this circle (Washington Post)) ▪ Hours worked for 500MB data plan ▪ By 2011, 56% of Bangladeshi households had access to a mobile phone ▪ Indonesia: social media capital of the world Indonesia #3 nation on Twitter, #4 on Facebook ▪ Myanmar: When a SIM Card Goes From $2,000 to $1.50 ▪ Population and GDP figures from CIA World Fact Book ▪ Stats on page size/ images ratio from httparchive.org ▪ Opera’s work to reduce Chromium’s memory use ▪ Opera signs licensing agreement with Microsoft ▪ Average app user has 36 apps on smartphone. 25% used daily (social/ comms/ gaming); 25% never used. Goo gle, May 2015. PDF ▪ Fast Africa: How Do We Get FAST Internet? (Policy Advice)

Slide 136

Slide 136 text

Thanks ▪ Me by HTML sign in Tokyo by Doug Schepers (@shepazu), used with permission. All rights reserved. ▪ World Development Report 2016: Digital Dividends ▪ “Is Google usable” video - clubinternet.co; used with permission. All rights reserved. https://vimeo.com/116787124 ▪ Opera's Blink commits cake photographed by Andreas Bovens. All rights reserved. ▪ Opera Mini and Angular by Jeremy Keith. All rights reserved. ▪ Overloaded truck, monks buying phones, packed tuk-tuk, Bangkok cables - Bruce Lawson. All rights reserved. ▪ Putri photo used with Putri's permission; all rights reserved. ▪ Proxy browser market share graph by Scentia Mobile, used with permission. http://data.wurfl.io/MOVR/ pdf/2016_q1/MOVR_2016_q1.pdf

Slide 137

Slide 137 text

Maps ▪ True size of Africa by Kai Krause (Public Domain) ▪ Map of Indonesia Single Color by FreeVectorMaps.com ▪ Map of India Single Color by FreeVectorMaps.com ▪ Map of Bangladesh Single Color by FreeVectorMaps.com ▪ Map of Myanmar Single Color by FreeVectorMaps.com ▪ Map of China Single Color by FreeVectorMaps.com ▪ Map of Africa Single Color by FreeVectorMaps.com ▪ Map of Asia Single Color by FreeVectorMaps.com