Slide 1
Slide 1 text
Designing
Progressive
Web Apps
Slide 2
Slide 2 text
We need a
progressive
web app!
Slide 3
Slide 3 text
What is a
progressive
web app?
Slide 4
Slide 4 text
How do we
create a plan
for this?
Slide 5
Slide 5 text
Do we need a
progressive
web app?
Slide 6
Slide 6 text
How does the CEO even
know about progressive
web apps?
Slide 7
Slide 7 text
Cool. I’ve been wanting to play with
service workers… Maybe we can use
Vue.js here as well… I wonder if this
can be used as excuse to switch to
node js…
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
How does the CEO even
know about progressive
web apps?
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
eXtra Electronics
• 12% click-through rate
• 100% more sales from users
arriving via web push
• 4x increase in re-engagement
Source: Google, http://bit.ly/2eqSf18
Slide 13
Slide 13 text
Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
What is a
progressive
web app?
Slide 16
Slide 16 text
Original Definition by Frances Berriman and Alex Russell
Responsive
Fit any form factor. RWD FTW!
Connectivity Independent
Offline features thanks to service workers.
App-like interactions
App shell for apps navigation.
Fresh
Up-to-date thanks to service workers.
Safe
Served on HTTPS.
Discoverable
Manifest files identify them as apps.
Re-engageable
Push notifications bring people back to apps.
Installable
Can be installed to the home screen w/o app stores.
Linkable
Still part of the web—URLs still work.
Progressive
Use progressive enhancement for better experience.
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22
Slide 25
Slide 25 text
PWA is a website that has been enhanced with:
{manifest}
https service worker
Credit to Jeremy Keith for explicitly declaring a technical definition: https://adactio.com/journal/13098
Slide 26
Slide 26 text
https
Slide 27
Slide 27 text
https
Slide 28
Slide 28 text
https
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Let’s Encrypt is a free, automated, and open
Certificate Authority.
We are a 501(c)(3) nonprofit. We're running a crowdfunding campaign to
support our operations, please consider contributing now!
Get Started Donate
FROM OUR BLOG
Nov 1, 2016
Launching Our Crowdfunding Campaign
Today we kicked off our first crowdfunding campaign with
the goal of raising enough funds to cover about one
month of our operations - $200,000.
Read more
Oct 27, 2016
Our First Grant: The Ford Foundation
We are proud to announce that The Ford Foundation has
awarded us a grant to help our growing operations.
Read more
Oct 24, 2016
Squarespace OCSP Stapling
Implementation
MA JOR SPONSORS
Documentation Get Help Donate ▾ About Us ▾
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Even existing features that used to work on HTTP, like
GeoLocation API, now require HTTPS
Slide 34
Slide 34 text
Soon browsers will warn users that your site isn’t on HTTPS
Slide 35
Slide 35 text
service worker
Slide 36
Slide 36 text
Progressive Web App Service Worker
Cache
Network
Explicit control of network requests and cache
Slide 37
Slide 37 text
Service workers key to performance boon
Source: Google, http://bit.ly/2fpGrRr
Slide 38
Slide 38 text
Service workers key to performance boon
Source: Google, http://bit.ly/2fpGrRr
Slide 39
Slide 39 text
Service workers are
also key to
providing an offline
experience and
push notifications
Slide 40
Slide 40 text
{manifest}
Slide 41
Slide 41 text
{ name: "Cloud Four",
short_name: "Cloud Four",
description: "We design and develop responsive websites and progressive web apps.",
icons: [
{ src: "/android-chrome-192x192.png",
sizes: "192x192",
type: "image/png" },
{ src: "/android-chrome-512x512.png",
sizes: "512x512",
type: "image/png" } ],
theme_color: "#456BD9",
background_color: "#FFFFFF",
display: "standalone",
orientation: "natural",
start_url: "/",
gcm_sender_id: "482941778795" }
Manifest files are simple JSON documents
Slide 42
Slide 42 text
Add to home
screen install
banners
Source: Google, http://bit.ly/2ejW2Rr
Slide 43
Slide 43 text
PWA is a website that has been enhanced with:
{manifest}
https service worker
But PWAs can be much more…
Slide 44
Slide 44 text
Progressive web
apps allow us to
build experiences
that previously
required a native
application.
Slide 45
Slide 45 text
https://www.youtube.com/watch?v=3tb-1MWg44Y
Slide 46
Slide 46 text
The hype can be a turn off
https://twitter.com/elliotecweb/status/864070806569066497
Slide 47
Slide 47 text
The name isn’t for you and worrying about it is
distraction from just building things that work better for
everyone. The name is for your boss, for your investor,
for your marketeer.
—Frances Berriman, Naming Progressive Web Apps
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Do we need a
progressive
web app?
Slide 50
Slide 50 text
If so, you would probably benefit from a PWA.
Does your organization have a website?
Slide 51
Slide 51 text
Does your organization make money on
your website via e-commerce,
advertising, or some other method?
If so, you definitely need a progressive web app.
Slide 52
Slide 52 text
FUD
Fear, Uncertainty, Doubt
Slide 53
Slide 53 text
We already
have a native
app, why do we
need a PWA?
Slide 54
Slide 54 text
Reach people who don’t have your native app
installed or are on a different device.
Slide 55
Slide 55 text
8+ apps
5-7 apps
4 apps
3 apps
2 apps
1 app
0 apps 49%
13%
11%
8%
6%
7%
6%
U.S. smartphone users’ number of apps downloads per month
Source: Comscore 2016 U.S. Mobile App Report, http://bit.ly/2d27iPI
Slide 56
Slide 56 text
Average Android App Retention of Daily Active Users
Source: Quettra via Andrew Chen http://bit.ly/1Hq53AR
Percentage of Users Still Active
0%
25%
50%
75%
100%
Days Since App Install
0 1 3 7 14 30 60 90
Slide 57
Slide 57 text
© comScore, Inc. Proprietary.
26
Advertising and marketing is becoming a more important driver of
app installs, while the app store’s influence may have peaked.
App acquisition
appears to be moving
from ‘pull’ to ‘push’.
App stores remain
the most important
method, but they are
no longer growing in
importance.
Meanwhile, more
users are now
discovering apps
from websites, digital
ads and traditional
media ads,
highlighting the
increasing
importance of
traditional push
marketing for user
acquisition.
Most Common App Discovery Channels Among Smartphone Users
Source: comScore MobiLens, U.S., Age 13+, 3 Month Average Ending June 2016 vs. June 2015
21%
14%
16%
9%
8%
9%
8%
6%
21%
14%
16%
11%
8%
11%
9%
9%
0%
5%
10%
15%
20%
25%
Searched app
store
Featured/ Top
List in app store
via friend/ family via comment/
review/ social site
via news/ print
review/ TV show
via a website via Ad on device
browser/ app
via Ad on TV/
print/ billboard
% of Smartphone Users
Jun-2015 Jun-2016
App Store Word-of-Mouth/Opinion Advertising/Marketing
Being in the
app store is no
longer enough.
Cost of
acquisition
higher.
Slide 58
Slide 58 text
© comScore, Inc. Proprietary.
15
And mobile audience growth is being driven more by mobile web
properties, which are actually bigger and growing faster than apps.
A comparison of the
Top 1000 Apps vs.
the Top 1000 Mobile
Web Properties
shows that despite
apps dominance in
usage time, mobile
web is responsible
for big audiences on
mobile. Mobile web
audiences are
almost 3x the size
and growing 2x as
fast as app
audiences.
Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties
Source: comScore Mobile Metrix, U.S., Age 18+
-
2,000
4,000
6,000
8,000
10,000
12,000
Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015 Sep-2015 Dec-2015 Mar-2016 Jun-2016
Unique Visitors (000)
Apps Mobile Web +82%
vs. 2014
+45%
vs. 2014
“Mobile web
audiences are
almost 3x the
size and
growing 2x as
fast as app
audiences.”
Slide 59
Slide 59 text
Your website is often a
customer’s first interaction
with your company.
A better web experience will likely mean
more revenue and more native app installs.
Slide 60
Slide 60 text
The web can’t do
[insert thing here]
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
https://www.flickr.com/photos/ashleyrosex/2861690380
The web can do more
than we think.
Slide 75
Slide 75 text
LET’S DO THIS!
Slide 76
Slide 76 text
1. Making it feel like an app
2. Installation and Discovery
3. Offline mode
4. Push Notifications
5. Beyond PWAs
Slide 77
Slide 77 text
1. Making it feel like an app
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
Like obscenity and brunch, web apps can be
described but not defined.
—Jeremy Keith, By any other name
Slide 80
Slide 80 text
Make it look
native?
https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt
Slide 81
Slide 81 text
Do you switch design language between platforms?
Material Design iOS Design
Slide 82
Slide 82 text
How many platforms will you adapt to?
Slide 83
Slide 83 text
What about desktop browsers?
Slide 84
Slide 84 text
Will you jump every time the platform changes?
Slide 85
Slide 85 text
Define your own design and be consistent.
Tripcase maintains same design across platforms.
Slide 86
Slide 86 text
More immersive experience
https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/
Slide 87
Slide 87 text
Manifest file display options
display: "standalone" display: "fullscreen"
display: "browser" display: “minimal-ui”
Slide 88
Slide 88 text
We’re spoiled by our browsers
Slide 89
Slide 89 text
The warm comforts of the browser
navigation bar
status bar
address bar
Slide 90
Slide 90 text
The warm comforts of the browser
info, refresh,
download
tabs
downloads
find in page
Slide 91
Slide 91 text
The warm comforts of the browser
sharing
printing
email
Slide 92
Slide 92 text
Roughing it in app land
Slide 93
Slide 93 text
Adding a back button is harder than it seems
• Manage the browser history so back
button goes to right location.
• Back button in an app often implies
a hierarchy, not simply going to the
last screen you were on.
• Do you rearchitect your site to
create an app hierarchy?
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
Where does this button go?
Does it do the same thing as
the browser back button?
Should
there be an
app back
button?
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
.backButton {
display: none;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
.backButton {
display: block;
}
}
Display mode media query
Slide 98
Slide 98 text
Not every customer or potential customer will add
your Progressive Web App to their home screen
…but every visitor will “install” your PWA!
Slide 99
Slide 99 text
Fast, Fluid Experience
Slide 100
Slide 100 text
Provide Immediate Feedback
Slide 101
Slide 101 text
Animate Transitions to
Support Wayfinding
Slide 102
Slide 102 text
Smooth Pages — Avoid Jumps, Use Skeleton Pages
Slide 103
Slide 103 text
App Shell model of PWAs
Slide 104
Slide 104 text
Perceived performance matters most
By Addy Osmani,
http://bit.ly/2o0YBgu
Slide 105
Slide 105 text
WARNING: App Shell model often assumes
you’re building a single page application
Slide 106
Slide 106 text
Get /category.html
Send /category.html
Page
Browser Server
Get /products.html
Send /products.html
Page
Get /green-hoodie.html
Send /green-hoodie.html
Page
Traditional Web
Architecture
Slide 107
Slide 107 text
Get /category.html
Send /category.html and JS app
Page
Browser Server
Get products
Send products
API Server
Get green hoodie
Send green hoodie
JS App
Single Page
Application
(SPA)
Slide 108
Slide 108 text
PWA != SPA
Slide 109
Slide 109 text
Personality & Polish
Slide 110
Slide 110 text
Attention to detail and polish
Slide 111
Slide 111 text
Animate Transitions for
Wayfinding and Polish
https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/
Slide 112
Slide 112 text
Personality
Amazing SVG Animation
by Darin Senneff
https://codepen.io/
dsenneff/full/
2c3e5bc86b372d5424b00
edaf4990173/
Slide 113
Slide 113 text
Should feeling like an app be the goal?
Should feeling
like an app be
your goal?
Slide 114
Slide 114 text
Feel Like an App
Website with
Performance
Improvements
Full screen, app
shell with native
design language
Minimal-ui
Standalone
System Fonts Fullscreen
Animation and Polish App Shell
Native Design
MORE COMPLEX
LESS COMPLEX
Slide 115
Slide 115 text
2. Installation and Discovery
Slide 116
Slide 116 text
Announcing Your PWA
Slide 117
Slide 117 text
{manifest}
Slide 118
Slide 118 text
{ name: "Cloud Four",
short_name: "Cloud Four",
description: "We design and develop responsive websites and progressive web apps.",
icons: [
{ src: "/android-chrome-192x192.png",
sizes: "192x192",
type: "image/png" },
{ src: "/android-chrome-512x512.png",
sizes: "512x512",
type: "image/png" } ],
theme_color: "#456BD9",
background_color: "#FFFFFF",
display: "standalone",
orientation: "natural",
start_url: "/",
gcm_sender_id: "482941778795" }
Manifest files are simple JSON documents
Slide 119
Slide 119 text
Startup Screen with Background Color
Chrome Opera Samsung
Slide 120
Slide 120 text
Theme Color
Chrome Default Theme Color
Chrome Custom Theme Color
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
Add to Home
Screen Prompts
Slide 123
Slide 123 text
Add to Home Screen Badges
Firefox Samsung
Non PWA
PWA
Slide 124
Slide 124 text
Add to Home Screen Badges
Firefox Samsung
Non PWA
PWA
Slide 125
Slide 125 text
Add to Home Screen Badges
Slide 126
Slide 126 text
Add to Home Screen Banners
Chrome Opera
Slide 127
Slide 127 text
Add to Home Screen Banner’s
Engagement Heuristic
Slide 128
Slide 128 text
Pick the Optimal Time to Ask for Install
Asking on order
confirmation page
resulted in 3x
increase in
conversion for
Flipkart
Slide 129
Slide 129 text
Chrome Changing Add-to-Homescreen Behavior
Slide 130
Slide 130 text
App Stores
Slide 131
Slide 131 text
PWAs don’t no
need an app store!
Slide 132
Slide 132 text
Progressive Web Apps
in Microsoft Store
Two ways to get into store:
1. Active submission
2. Passive ingestion
Source:
https://www.slideshare.net/AaronGustafson/progressive-web-
apps-and-the-windows-ecosystem-build-2017
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
PhoneGap
Slide 137
Slide 137 text
Remember, your PWA is your website so
all the normal web marketing applies.
Slide 138
Slide 138 text
Installation and Discovery
No Add to
Home Screen
Native
App Stores
Manifest
Spiders find PWA
Manually submit PWA PhoneGap
Trusted Web Activity
MORE COMPLEX
LESS COMPLEX
Slide 139
Slide 139 text
3. Offline Mode
Slide 140
Slide 140 text
Cache for performance and offline fallback
Slide 141
Slide 141 text
Offline Fallback Pages
Can Keep People
Engaged
• Trivago found that 67% of people
continue to browse the site when they
come back online.
Source: http://bit.ly/2GoXjCi
Slide 142
Slide 142 text
Cache recently viewed content for offline use
Slide 143
Slide 143 text
Cache recently viewed content for offline use
Slide 144
Slide 144 text
Highlight Stale Information
Slide 145
Slide 145 text
Display the Information You Have
Slide 146
Slide 146 text
Let User’s Choose What They Want Offline
Slide 147
Slide 147 text
Pre-cache Content and Apps
Slide 148
Slide 148 text
Give People Control
Slide 149
Slide 149 text
Offline Interactivity — Background Sync
https://developers.google.com/web/updates/2015/12/background-sync
Slide 150
Slide 150 text
Offline Interactivity — Or Disallow Editing
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
Offline
Cache for
Performance
Only
Offline
Interactivity
Offline
Fallback
Offline
Indicator
Cache Recently
Viewed Pages
Disable
Interactivity
Pre-cache
Predetermined Pages
Pre-cache
Dynamic Items
User Choose
What to Cache
MORE COMPLEX
LESS COMPLEX
Slide 154
Slide 154 text
4. Push Notifications
Slide 155
Slide 155 text
Notification JS is
Relatively Easy
Slide 156
Slide 156 text
Many
Hidden
Challenges
Slide 157
Slide 157 text
3x Higher Conversion for Personalized Notifications
Slide 158
Slide 158 text
Flowchart for how Slack
decides whether to send
a notification or not.
https://twitter.com/codevisuals/status/
838881724016787457
Slide 159
Slide 159 text
Push Notification Services
Full disclosure: I was an early adviser for Urban Airship and own a small number of shares in the company.
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
Many people are annoyed by notifications
http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications
Slide 162
Slide 162 text
Don’t immediately
ask for permission
to send push
notifications
Slide 163
Slide 163 text
No content
Slide 164
Slide 164 text
Twitter Lite handles push notifications well
Browser prompt Confirm and Customize
Twitter prompt
Slide 165
Slide 165 text
Twitter Lite handles push notifications well
Browser prompt Confirm and Customize
Twitter prompt
Slide 166
Slide 166 text
No content
Slide 167
Slide 167 text
62 63
https://cloudfour.com/thinks/time-to-update-your-permissions-ux/
Slide 168
Slide 168 text
Push Notifications
No Push
Notifications
Personalized and
Integrated
Notifications
CMS
Plugin
Subscribe via
Push Provider
One-off Marketing
Push Notifications
Background
Updates
Notification
Design
Analytics and
Segmentation
Backend
Integration
MORE COMPLEX
LESS COMPLEX
Slide 169
Slide 169 text
5. Beyond PWAs
Slide 170
Slide 170 text
Auto-login with
Credential
Management API
Slide 171
Slide 171 text
Payment Request API
Slide 172
Slide 172 text
No content
Slide 173
Slide 173 text
Beyond PWAs
Basic PWA Multiple New APIs
Autofill Support
AMP to PWA
Credential Management API
Camera, other sensors Payment Request API
AMP in PWA
MORE COMPLEX
LESS COMPLEX
Slide 174
Slide 174 text
How do we
create a plan
for this?
Slide 175
Slide 175 text
PWAs are progressive because… Progressive Roadmap
{manifest}
https
Jul 13
Redesign launches
Better security with HTTPS
Faster site via HTTP/2
Better bookmarks via manifest
Oct 3
Faster pages
Offline fallback
It’s a PWA!
service worker
Oct 18
Offline pages
Offline indicator
Improved font loading
Nov 22
Push notifications
HTTP/2 Link Preload
Dec 7
Small tweaks
PWA announced
Slide 176
Slide 176 text
Progressive Web App Blueprint
Planning &
Definition
Slide 177
Slide 177 text
Define Your Ideal
Progressive Web App
Slide 178
Slide 178 text
Offline
Interactivity
Cache for
Perf Only
Offline
Native App
Stores
Website with Perf
Improvements
Full Screen,
App Shell
New APIs
No Add to
Home Screen
Basic PWA
Feels Like An App
Installation and Discovery
No Push
Notifications
Personalized and
Integrated Push
Push Notifications
Beyond PWAs
Slide 179
Slide 179 text
Benchmark & Plan to Measure
Slide 180
Slide 180 text
Progressive Web App Blueprint
Planning &
Definition
Technical Debt
(if Necessary)
Gather team
Brainstorm Ideal PWA
Benchmarks and
measurement plans
Build roadmap
Slide 181
Slide 181 text
Assess Current Website
Slide 182
Slide 182 text
Is Your Website
Reasonably Fast?
Slide 183
Slide 183 text
Is it Usable?
Slide 184
Slide 184 text
Progressive Web App Blueprint
Planning &
Definition
Technical Debt
(if Necessary)
Baseline
PWA
Front-end
Additions
Larger
Initiatives
Gather team
Brainstorm Ideal PWA
Benchmarks and
measurement plans
Build roadmap
Assess current website
Fix performance issues
Fix usability issues
Manifest
HTTPS
Service worker for
performance
Offline Fallback
Cache recently viewed pages
Precache popular or
important pages
Add third-party push
notification service
CMS plugin for push
notifications
Payment Request API
Credentials Management API
Integrate notifications with
backend systems
Background sync
Move to app shell
Slide 185
Slide 185 text
Baseline
PWA
Front-end
Additions
Larger
Initiatives
Progressive Web App Blueprint
Planning &
Definition
Technical Debt
(if Necessary)
Gather team
Brainstorm Ideal PWA
Benchmarks and
measurement plans
Build roadmap
Assess current website
Fix performance issues
Fix usability issues
Manifest
HTTPS
Service worker for
performance
Offline Fallback
Cache recently viewed pages
Precache popular or
important pages
Add third-party push
notification service
CMS plugin for push
notifications
Payment Request API
Credentials Management API
Integrate notifications with
backend systems
Background sync
Move to app shell
Slide 186
Slide 186 text
Every step on
the path to a
PWA makes
sense on its
own.
Slide 187
Slide 187 text
No content
Slide 188
Slide 188 text
Coming in November!
Follow @abookapart, @grigs or sign up
for the A Book Apart newsletter to
receive updates.
https://abookapart.com/
No
28
PROGRESSIVE
WEB APPS
Jason Grigsby
Slide 189
Slide 189 text
Thank You!
Slide 190
Slide 190 text
Thank You!
White Blank Notebook by Tirachard Kumtanom
Woman Executive Holding Tablet by Pixabay
Schedule Planning by Startup Stock Photos
Hackers by Christopher Dombres
NSA by by Mario Antonio Pena Zapatería
Map Location Symbol by Tumisa
Smartphone on Bridge by Jeremy Levin
Hype by Kerry J
Instagram App on iPhone by Pixabay
Man in Fuzzy Hat by Gratisography
Southbank - Samsung Galaxy S8 (1) by TaylorHerring
Now THIS is comfort! by Garry Wilmore
Trojan Horse by Hsing Wei
Cold Snow Man Person
Asphalt Blur Car City by Pixabay
Woman Listening to Music by bruce mars
Woman and Dog by Tookapic
Focus by Mark Hunter
Person Holding Silver iPhone by rawpixel.com
MacBook Air Beside Painting by rawpixel.com
Android Phone by freestocks.org
Smart Watch by Oliur Rahman
Apple Office Internet iPad by Pixabay
Woman Jumping by Quang Anh Ha Nguyen
SEM by Pixabay
Legs on Chair by kaboompics.com
In Hiding by Taylor McBride
Medusa Kill Switch by Scott Hart
White Auto Gauge by Mikes Photos
Blue and Silver Stethoscope by Pixabay
Tortoise by Frans Van Heerden
iPhone Photo on Railroad Tracks by Kaique Rocha
database by ✦ Shmidt Sergey ✦ from the Noun Project
Cloud by Blackwoodmedia.com.au from the Noun Project
Responsive Design by Delwar Hossain from the Noun Project
cogs by Gregor Cresnar from the Noun Project
Special thanks to these fabulous people who graciously
shared their work under Creative Commons.