Articles, Links, and Tools From An Event Apart Chicago 2018

• Beyond Engagement: the Content Performance Quotient
• No More FAQs: Create Purposeful Information for a More Effective User Experience by Lisa Wright
• The King vs. Pawn Game of UI Design by Erik Kennedy
• Why Performance Matters by Jeremy Wagner
• Marlboro Man (Wikipedia)
• @DesignCPQ on Twitter
• Performance: Showing Versus Telling by Laura Hogan
• Planning for Performance by Scott Jehl
• We need design that is faster and design that is slower.
• Art Direction and the Web by Stephen Hay
• Large Type: One Web Designer Puts Content First in a Big Way by Anthony Wing Kosner
• Authoritative, Readable, Branded: Report From Poynter Design Challenge, Part 2
• To Save Real News
• The Big Web Show № 171: Art Directing the News – with ProPublica Design Director David Sleight
• Top Task Management: Making it Easier to Prioritize by Gerry McGovern—An Event Apart video
• Organizing Mobile by Luke Wroblewski
• Redesigning in Public Again
• The Year in Design

• Code Collection of examples used
• CSS Grid Specification
• Flexbox Specification
• Box Alignment Specification
• CSS Intrinsic and Extrinsic Sizing Specification
• Grid by Example
• CSS Grid documentation on MDN
• Mozilla CSS Grid playground
• CSS Grid Gotchas and Stumbling Blocks
• Naming Things in CSS Grid Layout
• Breaking out with CSS Grid Explained
• CSS Grid Fallbacks and Overrides Cheatsheet
• Should I try to use the IE implementation of Grid Layout
• Using Feature Queries in CSS
• CSS Grid - Supporting browsers without grid
• Naming things in CSS Grid Layout
• MDN Flexbox docs
• Getting Started With CSS Layout
• Best Practices With CSS Grid Layout

• CSS Conditional Rules Module Level 3
• Picture credit: Innerbelt Bridge by Erik Drost, used under the terms of CC BY 2.0; minor straightening and color enhancement applied
• CSS:TDG4e Table of Contents
• CSS Flexible Box Layout Module Level 1
• Speaker pages:
  • Jen Simmons
  • Rachel Andrew
  • Eric Meyer
  • Jeffrey Zeldman
• An Event Apart San Francisco 2018 store page (note: page will expire December 2018)
• CSS Grid Layout Module Level 1
• How We Adopted CSS Grid at Scale

• Layout Land on YouTube
• Layout Land
• Jen Simmons
• @jensimmons
• Firefox Nightly
• Example 1, HTML Flow only
• Example 2, Fluid Web Design
• Example 2.5, Fluid Web Design
• Example 3, Fixed Web Design
• Example 4, Responsive Web Design
• Example 5, Intrinsic Web Design
• Example of Image Options
• Stages of Squish
• Nesting Contexts
• Teaser card
• Multiple Teaser Card nested in a Grid layout

• Facebook Mobile App navigation menus:
• Ten Years of eBay Android App Design
• 30 Years of Adobe Illustrator Design
• How People Unmask Passwords
• Remove password masking
• Showing Passwords on Log-In Screens
• Mobile DropDowns Revisited
• Smartphones, iPads & the state of the mobile Internet
• How Often Do You Check Your Phone?
• We touch our phones 2,617 times a day
• What do you dislike most when browsing Web on mobile?
• Designing for Apple Watch
• Designers Shaping Things

Case Studies

• PWA Stats
• Google Case Studies
• WEGO Case Study Video
• Why does The Washington Post’s Progressive Web App increase engagement on iOS?
• Flipkart triples time-on-site with Progressive Web App
• Konga cuts data usage 92% with new Progressive Web App
• United eXtra Electronics grows eCommerce sales by 100% with Web Push Notifications
• 5miles decreases bounce rate by 50% and increases conversions by 60% with new Progressive Web App
• AliExpress saw 82% increase in iOS conversion rate
• Total Retailer: Why All Retailers Need to Be Aware of PWAs
• Digiday: With new mobile site, Forbes boosted impressions per session by 10 percent
• Lancôme speeds its mobile site with Google’s progressive web apps
• A Pinterest Progressive Web App Performance Case Study

Progressive Web App Definitions

• What the heck is “Progresive Web App”? Seriously.
• Progressive Web Apps: Escaping Tabs Without Losing Our Soul — Where Frances Berriman and Alex Russell define Progressive Web Apps for the first time.
• Progressive Web Apps at Google
• Naming Progressive Web Apps by Frances Berriman
• A Brief History of How PWAs Came to Be a Twitter moments thread
• What is a Progressive Web App? by Jeremy Keith

Why Progressive Web Apps?

• Progressive Web Apps Simply Make Sense
• The Business Case for Progressive Web Apps
• Yes, That Web Project Should Be a PWA
• Progressive Web Apps on iOS are here

Making it Feel Like an App

• CSS Tricks Poll Results: “Sites” vs “Apps”
• By any other name
• Designing Great UIs for Progressive Web Apps
• Designing Responsive Progressive Web Apps
• Instant Loading Web Apps With An Application Shell Architecture
• Does Anyone Use Social Sharing Buttons on Mobile?
• Introducing the Web Share API
• Animated SVG Avatar v2
• Proposed Web Share API (experimental)

Installation and Discovery

• MDN Web App Manifest
• Google Developers: Web App Manifest
• PWA Discovery: You Ain’t Seen Nothin Yet
• Progressive web apps and the Windows ecosystem
• Why Are App Install Banners Still A Thing?
• Integrating Progressive Web Apps deeply into Android
• Twitter updates its Windows 10 UWP app to PWA with support for push notifications
• Welcoming Progressive Web Apps to Microsoft Edge and Windows 10
• PWA Builder
• Using Trusted Web Activities
• PhoneGap

Offline

• The Next Billion Users: trivago Embrace Progressive Web Apps as the Future of Mobile
• Offline UX Considerations
• Workbox JS

Push Notifications

• How Consumers Really Feel About Push Notifications
• Best Practices for Push Notifications Permissions UX
• Web Push Notifications: Timely, Relevant, and Precise
• Time to Update Your Permissions UX
• Web Push Book
• Notification Generator

Beyond PWAs

• Accelerated Mobile Project (AMP)
• Combine AMP with Progressive Web Apps
• Bootstrapping Progressive Web Apps with amp-install-serviceworker
• Credential Management API and Google documentation
• Payment Request API and Google documentation

Sample PWAs

• Twitter Lite
• Vaadin Expense Manager Demo
• FlipKart
• English Accent Maps
• Smashing Magazine
• Offline WikiPedia
• Pokedex
• Polymer Shop Demo
• Cloud Four

PWA Galleries

• PWA Rocks
• Outweb
• PWA Directory

PWA Resources and Tools

• MDN Documentation on display-mode media query
• Lighthouse

Progressive Web App Roadmap

• Hey, Hey, Cloud Four is a PWA!

• How to choose the right UX metrics for your product
• How to Choose the Right UX Metrics for Your Project (interactive)
• I’m Sorry, But Those Are Vanity Metrics
• Case Study: Firebase Machine Learning Predictions
• Sample Size Calculator for A/B testing
• Pirate metrics

• Seven principles of effective digital navigation