Articles, Links, and Tools From An Event Apart Chicago 2018
Community
- An Event Apart 2018 – Day 1 by Josh Tuck
- An Event Apart: Content Performance Quotient by Luke Wroblewski
- An Event Apart: Full-Featured Art Direction by Luke Wroblewski
- An Event Apart: Designing Progressive Web Apps by Luke Wroblewski
- An Event Apart: Data Basics by Luke Wroblewski
Jeffrey Zeldman
- 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
Rachel Andrew
- 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
Eric Meyer
- 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:
- 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
Jen Simmons
- 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
Luke Wroblewski
- 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
Jason Grigsby
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