PADNUG — Designing Progressive Web Apps

If you have a website — particularly one that generates revenue for your organization — you need a Progressive Web App. So where do you begin?

How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)?

In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.

Transcript

1. Designing
   Progressive
   Web Apps
   

   View Slide

2. We need a
   progressive
   web app!
   

   View Slide

3. What is a
   progressive
   web app?
   

   View Slide

4. How do we
   create a plan
   for this?
   

   View Slide

5. Do we need a
   progressive
   web app?
   

   View Slide

6. How does the CEO even
   know about progressive
   web apps?
   

   View Slide

7. 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…
   

   View Slide

8. View Slide

9. How does the CEO even
   know about progressive
   web apps?
   

   View Slide

10. View Slide

11. View Slide

12. 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
    

    View Slide

13. Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
    

    View Slide

14. View Slide

15. What is a
    progressive
    web app?
    

    View Slide

16. 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.
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22
    

    View Slide

25. 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
    

    View Slide

26. https
    

    View Slide

27. https
    

    View Slide

28. https
    

    View Slide

29. View Slide

30. View Slide

31. 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 ▾
    

    View Slide

32. View Slide

33. Even existing features that used to work on HTTP, like
    GeoLocation API, now require HTTPS
    

    View Slide

34. Soon browsers will warn users that your site isn’t on HTTPS
    

    View Slide

35. service worker
    

    View Slide

36. Progressive Web App Service Worker
    Cache
    Network
    Explicit control of network requests and cache
    

    View Slide

37. Service workers key to performance boon
    Source: Google, http://bit.ly/2fpGrRr
    

    View Slide

38. Service workers key to performance boon
    Source: Google, http://bit.ly/2fpGrRr
    

    View Slide

39. Service workers are
    also key to
    providing an offline
    experience and
    push notifications
    

    View Slide

40. {manifest}
    

    View Slide

41. { 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
    

    View Slide

42. Add to home
    screen install
    banners
    Source: Google, http://bit.ly/2ejW2Rr
    

    View Slide

43. PWA is a website that has been enhanced with:
    {manifest}
    https service worker
    But PWAs can be much more…
    

    View Slide

44. Progressive web
    apps allow us to
    build experiences
    that previously
    required a native
    application.
    

    View Slide

45. https://www.youtube.com/watch?v=3tb-1MWg44Y
    

    View Slide

46. The hype can be a turn off
    https://twitter.com/elliotecweb/status/864070806569066497
    

    View Slide

47. 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
    

    View Slide

48. View Slide

49. Do we need a
    progressive
    web app?
    

    View Slide

50. If so, you would probably benefit from a PWA.
    Does your organization have a website?
    

    View Slide

51. 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.
    

    View Slide

52. FUD
    Fear, Uncertainty, Doubt
    

    View Slide

53. We already
    have a native
    app, why do we
    need a PWA?
    

    View Slide

54. Reach people who don’t have your native app
    installed or are on a different device.
    

    View Slide

55. 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
    

    View Slide

56. 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
    

    View Slide

57. © 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.
    

    View Slide

58. © 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.”
    

    View Slide

59. 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.
    

    View Slide

60. The web can’t do
    [insert thing here]
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. https://www.flickr.com/photos/ashleyrosex/2861690380
    The web can do more
    than we think.
    

    View Slide

75. LET’S DO THIS!
    

    View Slide

76. 1. Making it feel like an app
    2. Installation and Discovery
    3. Offline mode
    4. Push Notifications
    5. Beyond PWAs
    

    View Slide

77. 1. Making it feel like an app
    

    View Slide

78. View Slide

79. Like obscenity and brunch, web apps can be
    described but not defined.
    —Jeremy Keith, By any other name
    

    View Slide

80. Make it look
    native?
    https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt
    

    View Slide

81. Do you switch design language between platforms?
    Material Design iOS Design
    

    View Slide

82. How many platforms will you adapt to?
    

    View Slide

83. What about desktop browsers?
    

    View Slide

84. Will you jump every time the platform changes?
    

    View Slide

85. Define your own design and be consistent.
    Tripcase maintains same design across platforms.
    

    View Slide

86. More immersive experience
    https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/
    

    View Slide

87. Manifest file display options
    display: "standalone" display: "fullscreen"
    display: "browser" display: “minimal-ui”
    

    View Slide

88. We’re spoiled by our browsers
    

    View Slide

89. The warm comforts of the browser
    navigation bar
    status bar
    address bar
    

    View Slide

90. The warm comforts of the browser
    info, refresh,
    download
    tabs
    downloads
    find in page
    

    View Slide

91. The warm comforts of the browser
    sharing
    printing
    email
    

    View Slide

92. Roughing it in app land
    

    View Slide

93. 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?
    

    View Slide

94. View Slide

95. Where does this button go?
    Does it do the same thing as
    the browser back button?
    Should
    there be an
    app back
    button?
    

    View Slide

96. View Slide

97. .backButton {
    display: none;
    }
    @media (display-mode: standalone), (display-mode: fullscreen) {
    .backButton {
    display: block;
    }
    }
    Display mode media query
    

    View Slide

98. Not every customer or potential customer will add
    your Progressive Web App to their home screen
    …but every visitor will “install” your PWA!
    

    View Slide

99. Fast, Fluid Experience
    

    View Slide

100. Provide Immediate Feedback
     

     View Slide

101. Animate Transitions to
     Support Wayfinding
     

     View Slide

102. Smooth Pages — Avoid Jumps, Use Skeleton Pages
     

     View Slide

103. App Shell model of PWAs
     

     View Slide

104. Perceived performance matters most
     By Addy Osmani,
     http://bit.ly/2o0YBgu
     

     View Slide

105. WARNING: App Shell model often assumes
     you’re building a single page application
     

     View Slide

106. 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
     

     View Slide

107. 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)
     

     View Slide

108. PWA != SPA
     

     View Slide

109. Personality & Polish
     

     View Slide

110. Attention to detail and polish
     

     View Slide

111. Animate Transitions for
     Wayfinding and Polish
     https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/
     

     View Slide

112. Personality
     Amazing SVG Animation
     by Darin Senneff
     https://codepen.io/
     dsenneff/full/
     2c3e5bc86b372d5424b00
     edaf4990173/
     

     View Slide

113. Should feeling like an app be the goal?
     Should feeling
     like an app be
     your goal?
     

     View Slide

114. 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
     

     View Slide

115. 2. Installation and Discovery
     

     View Slide

116. Announcing Your PWA
     

     View Slide

117. {manifest}
     

     View Slide

118. { 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
     

     View Slide

119. Startup Screen with Background Color
     Chrome Opera Samsung
     

     View Slide

120. Theme Color
     Chrome Default Theme Color
     Chrome Custom Theme Color
     

     View Slide

121. View Slide

122. Add to Home
     Screen Prompts
     

     View Slide

123. Add to Home Screen Badges
     Firefox Samsung
     Non PWA
     PWA
     

     View Slide

124. Add to Home Screen Badges
     Firefox Samsung
     Non PWA
     PWA
     

     View Slide

125. Add to Home Screen Badges
     

     View Slide

126. Add to Home Screen Banners
     Chrome Opera
     

     View Slide

127. Add to Home Screen Banner’s
     Engagement Heuristic
     

     View Slide

128. Pick the Optimal Time to Ask for Install
     Asking on order
     confirmation page
     resulted in 3x
     increase in
     conversion for
     Flipkart
     

     View Slide

129. Chrome Changing Add-to-Homescreen Behavior
     

     View Slide

130. App Stores
     

     View Slide

131. PWAs don’t no
     need an app store!
     

     View Slide

132. 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
     

     View Slide

133. View Slide

134. View Slide

135. View Slide

136. PhoneGap
     

     View Slide

137. Remember, your PWA is your website so
     all the normal web marketing applies.
     

     View Slide

138. 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
     

     View Slide

139. 3. Offline Mode
     

     View Slide

140. Cache for performance and offline fallback
     

     View Slide

141. 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
     

     View Slide

142. Cache recently viewed content for offline use
     

     View Slide

143. Cache recently viewed content for offline use
     

     View Slide

144. Highlight Stale Information
     

     View Slide

145. Display the Information You Have
     

     View Slide

146. Let User’s Choose What They Want Offline
     

     View Slide

147. Pre-cache Content and Apps
     

     View Slide

148. Give People Control
     

     View Slide

149. Offline Interactivity — Background Sync
     https://developers.google.com/web/updates/2015/12/background-sync
     

     View Slide

150. Offline Interactivity — Or Disallow Editing
     

     View Slide

151. View Slide

152. View Slide

153. 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
     

     View Slide

154. 4. Push Notifications
     

     View Slide

155. Notification JS is
     Relatively Easy
     

     View Slide

156. Many
     Hidden
     Challenges
     

     View Slide

157. 3x Higher Conversion for Personalized Notifications
     

     View Slide

158. Flowchart for how Slack
     decides whether to send
     a notification or not.
     https://twitter.com/codevisuals/status/
     838881724016787457
     

     View Slide

159. Push Notification Services
     Full disclosure: I was an early adviser for Urban Airship and own a small number of shares in the company.
     

     View Slide

160. View Slide

161. Many people are annoyed by notifications
     http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications
     

     View Slide

162. Don’t immediately
     ask for permission
     to send push
     notifications
     

     View Slide

163. View Slide

164. Twitter Lite handles push notifications well
     Browser prompt Confirm and Customize
     Twitter prompt
     

     View Slide

165. Twitter Lite handles push notifications well
     Browser prompt Confirm and Customize
     Twitter prompt
     

     View Slide

166. View Slide

167. 62 63
     https://cloudfour.com/thinks/time-to-update-your-permissions-ux/
     

     View Slide

168. 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
     

     View Slide

169. 5. Beyond PWAs
     

     View Slide

170. Auto-login with
     Credential
     Management API
     

     View Slide

171. Payment Request API
     

     View Slide

172. View Slide

173. 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
     

     View Slide

174. How do we
     create a plan
     for this?
     

     View Slide

175. 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
     

     View Slide

176. Progressive Web App Blueprint
     Planning &
     Definition
     

     View Slide

177. Define Your Ideal
     Progressive Web App
     

     View Slide

178. 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
     

     View Slide

179. Benchmark & Plan to Measure
     

     View Slide

180. Progressive Web App Blueprint
     Planning &
     Definition
     Technical Debt
     (if Necessary)
     Gather team
     Brainstorm Ideal PWA
     Benchmarks and
     measurement plans
     Build roadmap
     

     View Slide

181. Assess Current Website
     

     View Slide

182. Is Your Website
     Reasonably Fast?
     

     View Slide

183. Is it Usable?
     

     View Slide

184. 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
     

     View Slide

185. 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
     

     View Slide

186. Every step on
     the path to a
     PWA makes
     sense on its
     own.
     

     View Slide

187. View Slide

188. 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
     

     View Slide

189. Thank You!
     

     View Slide

190. 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.
     

     View Slide