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 L…
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 L…
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
PWA Galleries
PWA Resources and Tools
Progressive Web App Roadmap
Laura Martini
Gerry McGovern
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
PWA Galleries
PWA Resources and Tools
Progressive Web App Roadmap
Laura Martini
Gerry McGovern
Articles, Links, and Tools From An Event Apart Chicago 2018
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 Jer…
Articles, Links, and Tools From An Event Apart DC 2018
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
Una Kravets
Design Systems
- Shopify Polaris
- Primer
- GitHub Style Guide
- Carbon Design System
- IBM Design Language
- Lightning Design System
- Welcome to the MailChimp Content Style Guide
Resources
- Website Style Guide Resources
- A collection of awesome design systems
- Voice & Tone
- Introducing design systems
- Setting up An Accessibility Dashboard from Scratch with Pa11y on DigitalOcean
- Space in Design Systems
Tooling
Lara Hogan
- Tuckman’s stages of group development – Wikipedia
- Paloma Medina’s BICEPS model
- Dealing with surprising human emotions: desk moves
- Etsy’s Charter of Mindful Communication
- Amy Ciavolino’s Mindful Communication in Code Reviews
- Team Leader Venn Diagram – Making Meetup
- The Five Dysfunctions of a Team – Wikipedia
- Mike Morgan’s Two by Two: Trust and disagreement
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
PWA Galleries
PWA Resources and Tools
Progressive Web App Roadmap
Aaron Gustafson
- You Are @ 10K Apart
- Resource Hints: dns-prefetch, preconnect, prefetch, preload and prerender
- Preload, Prefetch And Priorities in Chrome
- Web Font Anti-Pattern: Aggressive subsetting
- Easy Navigation, Speed Are Leading Website Performance Attributes
- How Loading Time Affects Your Bottom Line
- How Page Load Time Affects Conversion Rates: 12 Case Studies
- Research: Performance Impact of Popular JavaScript MVC Frameworks
- Vanilla JS
- The Best Request Is No Request, Revisited
- HTTP/2: the Future of the Internet | Akamai
- The Growth of Web Page Size
- Not every article needs a picture
Kristina Halvorson
Michael Austin Sui
Airbnb Design blog posts
- The Way We Build How rethinking the Airbnb app changed the way we approach design
- Building a Visual Language Behind the scenes of our new design system
- Designing for Access Creating new features for guests with disabilities
Articles on design in crisis
- “The Other Tech Bubble” by Erin Griffith
- “Internet inventor: Make tech accessibility better already” by Joan E. Solsman
- “Tech’s Moral Reckoning” hosted by Krista Tippett in conversation with Anil Dash
Inclusive product examples
- Eone watch website
- Frank Lloyd Wright’s Laurent House
- The Accessible Icon Project and https://en.wikipedia.org/wiki/International_Symbol_of_Access
People with Disabilities to know & follow
- https://instagram.com/p/Bfwg3F7HXZ6/
- https://www.instagram.com/lillapip30
- https://www.instagram.com/aannggeellll/
- https://www.instagram.com/mamacaxx/
- https://twitter.com/SFdirewolf
- https://twitter.com/VilissaThompson
- Matt Maxey (video)
- Jessica Kellgren-Fozard YouTube channel
- “I’m not your inspiration, thank you very much” by Stella YoungatTEDxSydney
- https://www.duckworth.senate.gov/about-tammy/biography
- “I Couldn’t Find Any Disability Maternity Photos, So I Made My Own” by Christa Couture
A11y tools & Ally resources
- Contrast-A Color Contrast Checker
- Color Contrast Analyzer by NC State University IT Accessibility Resources
- World Health Organization Report on Disability
- Black American Sign Language via Wikipedia
- Search For Common Ground by John Marks & Susan Collin Marks
- “Better Than Before” by Gretchen Rubin
- Neanderthals with Disabilities Survived through Social Support” via Gizmodo
- Ally Skills Workshops by Frame Shift Consulting, Valerie Aurora
Kevin Hoffman
- I wrote a book about designing meetings called Meeting Design for Mangers, Makers, and Everyone. I’m certain you’ll find it useful, and I’d be most pleased if you checked it out.
- A basic overview of the catastrophic launch of the Space Shuttle Challenger, and how it changed processes at NASA.
- Why does Spotify think it knows me so well that it can tell me what to listen to?
- Think about your hierarchy of goals in the context of a Jobs to Be Done framework using William Power’s Hierarchy of Goals.
- What if instead of using JIRA, you made your meeting walls into your KanBan Board? From Leisa Riechelt, who actually works for JIRA.
- When meeting remotely, think about tools that will help you visualize content instead of each other’s faces.
- If brainstorming meetings don’t work, Adam Grant wants to know how does the Daily Show do brainstorming meetings so well?
- It’s not about you: it’s about the team. Learn more about what makes good teams work from Google’s Project Aristotle.
- One team’s journey into designing their own meetings so that they don’t suck.
- Go on a cruise with the Backstreet Boys. Why not? What does this have to do with meetings? Depends on what you believe.
- Etsy changed its culture to bring safety into post mortem meetings.
- Can we design better meetings? Listen to my chat with Jeff Veen on his Presentable podcast.
Gerry McGovern
Articles, Links, and Tools From An Event Apart DC 2018
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
Una Kravets
Design Systems
- Shopify Polaris
- Primer
- GitHub Style Guide
- Carbon Design System
- IBM Design Language
- Lightning Design System
- Welcome to the MailChimp Content Style Guide
Resources
- Website Style Guide Resources
- A collection of awesome design systems
- Voice & Tone
- Introducing design systems
- Setting up An Accessibility Dashboard from Scratch with Pa11y on DigitalOcean
- Space in Design Systems
Tooling
Lara Hogan
- Tuckman’s stages of group development – Wikipedia
- Paloma Medina’s BICEPS model
- Dealing with surprising human emotions: desk moves
- Etsy’s Charter of Mindful Communication
- Amy Ciavolino’s Mindful Communication in Code Reviews
- Team Leader Venn Diagram – Making Meetup
- The Five Dysfunctions of a Team – Wikipedia
- Mike Morgan’s Two by Two: Trust and disagreement
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
PWA Galleries
PWA Resources and Tools
Progressive Web App Roadmap
Aaron Gustafson
- You Are @ 10K Apart
- Resource Hints: dns-prefetch, preconnect, prefetch, preload and prerender
- Preload, Prefetch And Priorities in Chrome
- Web Font Anti-Pattern: Aggressive subsetting
- Easy Navigation, Speed Are Leading Website Performance Attributes
- How Loading Time Affects Your Bottom Line
- How Page Load Time Affects Conversion Rates: 12 Case Studies
- Research: Performance Impact of Popular JavaScript MVC Frameworks
- Vanilla JS
- The Best Request Is No Request, Revisited
- HTTP/2: the Future of the Internet | Akamai
- The Growth of Web Page Size
- Not every article needs a picture
Kristina Halvorson
Michael Austin Sui
Airbnb Design blog posts
- The Way We Build How rethinking the Airbnb app changed the way we approach design
- Building a Visual Language Behind the scenes of our new design system
- Designing for Access Creating new features for guests with disabilities
Articles on design in crisis
- “The Other Tech Bubble” by Erin Griffith
- “Internet inventor: Make tech accessibility better already” by Joan E. Solsman
- “Tech’s Moral Reckoning” hosted by Krista Tippett in conversation with Anil Dash
Inclusive product examples
- Eone watch website
- Frank Lloyd Wright’s Laurent House
- The Accessible Icon Project and https://en.wikipedia.org/wiki/International_Symbol_of_Access
People with Disabilities to know & follow
- https://instagram.com/p/Bfwg3F7HXZ6/
- https://www.instagram.com/lillapip30
- https://www.instagram.com/aannggeellll/
- https://www.instagram.com/mamacaxx/
- https://twitter.com/SFdirewolf
- https://twitter.com/VilissaThompson
- Matt Maxey (video)
- Jessica Kellgren-Fozard YouTube channel
- “I’m not your inspiration, thank you very much” by Stella YoungatTEDxSydney
- https://www.duckworth.senate.gov/about-tammy/biography
- “I Couldn’t Find Any Disability Maternity Photos, So I Made My Own” by Christa Couture
A11y tools & Ally resources
- Contrast-A Color Contrast Checker
- Color Contrast Analyzer by NC State University IT Accessibility Resources
- World Health Organization Report on Disability
- Black American Sign Language via Wikipedia
- Search For Common Ground by John Marks & Susan Collin Marks
- “Better Than Before” by Gretchen Rubin
- Neanderthals with Disabilities Survived through Social Support” via Gizmodo
- Ally Skills Workshops by Frame Shift Consulting, Valerie Aurora
Kevin Hoffman
- I wrote a book about designing meetings called Meeting Design for Mangers, Makers, and Everyone. I’m certain you’ll find it useful, and I’d be most pleased if you checked it out.
- A basic overview of the catastrophic launch of the Space Shuttle Challenger, and how it changed processes at NASA.
- Why does Spotify think it knows me so well that it can tell me what to listen to?
- Think about your hierarchy of goals in the context of a Jobs to Be Done framework using William Power’s Hierarchy of Goals.
- What if instead of using JIRA, you made your meeting walls into your KanBan Board? From Leisa Riechelt, who actually works for JIRA.
- When meeting remotely, think about tools that will help you visualize content instead of each other’s faces.
- If brainstorming meetings don’t work, Adam Grant wants to know how does the Daily Show do brainstorming meetings so well?
- It’s not about you: it’s about the team. Learn more about what makes good teams work from Google’s Project Aristotle.
- One team’s journey into designing their own meetings so that they don’t suck.
- Go on a cruise with the Backstreet Boys. Why not? What does this have to do with meetings? Depends on what you believe.
- Etsy changed its culture to bring safety into post mortem meetings.
- Can we design better meetings? Listen to my chat with Jeff Veen on his Presentable podcast.
Gerry McGovern
Articles, Links, and Tools From An Event Apart DC 2018
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
Una Kravets
Design Systems
- Shopify Polaris
- Primer
- GitHub Style Guide
- Carbon Design System
- IBM Design Language
- Lightning Design System
- Welcome to the MailChimp Content Style Guide
Resources
- Website Style Guide Resources
- A collection of awesome design systems
- Voice & Tone
- Introducing design systems
- Setting up An Accessibility Dashboard from Scratch with Pa11y on DigitalOcean
- Space in Design Systems
Tooling
Lara Hogan
- Tuckman’s stages of group development – Wikipedia
- Paloma Medina’s BICEPS model
- Dealing with surprising human emotions: desk moves
- Etsy’s Charter of Mindful Communication
- Amy Ciavolino’s Mindful Communication in Code Reviews
- Team Leader Venn Diagram – Making Meetup
- The Five Dysfunctions of a Team – Wikipedia
- Mike Morgan’s Two by Two: Trust and disagreement
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
PWA Galleries
PWA Resources and Tools
Progressive Web App Roadmap
Aaron Gustafson
- You Are @ 10K Apart
- Resource Hints: dns-prefetch, preconnect, prefetch, preload and prerender
- Preload, Prefetch And Priorities in Chrome
- Web Font Anti-Pattern: Aggressive subsetting
- Easy Navigation, Speed Are Leading Website Performance Attributes
- How Loading Time Affects Your Bottom Line
- How Page Load Time Affects Conversion Rates: 12 Case Studies
- Research: Performance Impact of Popular JavaScript MVC Frameworks
- Vanilla JS
- The Best Request Is No Request, Revisited
- HTTP/2: the Future of the Internet | Akamai
- The Growth of Web Page Size
- Not every article needs a picture
Kristina Halvorson
Michael Austin Sui
Airbnb Design blog posts
- The Way We Build How rethinking the Airbnb app changed the way we approach design
- Building a Visual Language Behind the scenes of our new design system
- Designing for Access Creating new features for guests with disabilities
Articles on design in crisis
- “The Other Tech Bubble” by Erin Griffith
- “Internet inventor: Make tech accessibility better already” by Joan E. Solsman
- “Tech’s Moral Reckoning” hosted by Krista Tippett in conversation with Anil Dash
Inclusive product examples
- Eone watch website
- Frank Lloyd Wright’s Laurent House
- The Accessible Icon Project and https://en.wikipedia.org/wiki/International_Symbol_of_Access
People with Disabilities to know & follow
- https://instagram.com/p/Bfwg3F7HXZ6/
- https://www.instagram.com/lillapip30
- https://www.instagram.com/aannggeellll/
- https://www.instagram.com/mamacaxx/
- https://twitter.com/SFdirewolf
- https://twitter.com/VilissaThompson
- Matt Maxey (video)
- Jessica Kellgren-Fozard YouTube channel
- “I’m not your inspiration, thank you very much” by Stella YoungatTEDxSydney
- https://www.duckworth.senate.gov/about-tammy/biography
- “I Couldn’t Find Any Disability Maternity Photos, So I Made My Own” by Christa Couture
A11y tools & Ally resources
- Contrast-A Color Contrast Checker
- Color Contrast Analyzer by NC State University IT Accessibility Resources
- World Health Organization Report on Disability
- Black American Sign Language via Wikipedia
- Search For Common Ground by John Marks & Susan Collin Marks
- “Better Than Before” by Gretchen Rubin
- Neanderthals with Disabilities Survived through Social Support” via Gizmodo
- Ally Skills Workshops by Frame Shift Consulting, Valerie Aurora
Kevin Hoffman
- I wrote a book about designing meetings called Meeting Design for Mangers, Makers, and Everyone. I’m certain you’ll find it useful, and I’d be most pleased if you checked it out.
- A basic overview of the catastrophic launch of the Space Shuttle Challenger, and how it changed processes at NASA.
- Why does Spotify think it knows me so well that it can tell me what to listen to?
- Think about your hierarchy of goals in the context of a Jobs to Be Done framework using William Power’s Hierarchy of Goals.
- What if instead of using JIRA, you made your meeting walls into your KanBan Board? From Leisa Riechelt, who actually works for JIRA.
- When meeting remotely, think about tools that will help you visualize content instead of each other’s faces.
- If brainstorming meetings don’t work, Adam Grant wants to know how does the Daily Show do brainstorming meetings so well?
- It’s not about you: it’s about the team. Learn more about what makes good teams work from Google’s Project Aristotle.
- One team’s journey into designing their own meetings so that they don’t suck.
- Go on a cruise with the Backstreet Boys. Why not? What does this have to do with meetings? Depends on what you believe.
- Etsy changed its culture to bring safety into post mortem meetings.
- Can we design better meetings? Listen to my chat with Jeff Veen on his Presentable podcast.
Gerry McGovern
Articles, Links, and Tools From An Event Apart DC 2018
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
Una Kravets
Design Systems
- Shopify Polaris
- Primer
- GitHub Style Guide
- Carbon Design System
- IBM Design Language
- Lightning Design System
- Welcome to the MailChimp Content Style Guide
Resources
- Website Style Guide Resources
- A collection of awesome design systems
- Voice & Tone
- Introducing design systems
- Setting up An Accessibility Dashboard from Scratch with Pa11y on DigitalOcean
- Space in Design Systems
Tooling
Lara Hogan
- Tuckman’s stages of group development – Wikipedia
- Paloma Medina’s BICEPS model
- Dealing with surprising human emotions: desk moves
- Etsy’s Charter of Mindful Communication
- Amy Ciavolino’s Mindful Communication in Code Reviews
- Team Leader Venn Diagram – Making Meetup
- The Five Dysfunctions of a Team – Wikipedia
- Mike Morgan’s Two by Two: Trust and disagreement
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
PWA Galleries
PWA Resources and Tools
Progressive Web App Roadmap
Aaron Gustafson
- You Are @ 10K Apart
- Resource Hints: dns-prefetch, preconnect, prefetch, preload and prerender
- Preload, Prefetch And Priorities in Chrome
- Web Font Anti-Pattern: Aggressive subsetting
- Easy Navigation, Speed Are Leading Website Performance Attributes
- How Loading Time Affects Your Bottom Line
- How Page Load Time Affects Conversion Rates: 12 Case Studies
- Research: Performance Impact of Popular JavaScript MVC Frameworks
- Vanilla JS
- The Best Request Is No Request, Revisited
- HTTP/2: the Future of the Internet | Akamai
- The Growth of Web Page Size
- Not every article needs a picture
Kristina Halvorson
Michael Austin Sui
Airbnb Design blog posts
- The Way We Build How rethinking the Airbnb app changed the way we approach design
- Building a Visual Language Behind the scenes of our new design system
- Designing for Access Creating new features for guests with disabilities
Articles on design in crisis
- “The Other Tech Bubble” by Erin Griffith
- “Internet inventor: Make tech accessibility better already” by Joan E. Solsman
- “Tech’s Moral Reckoning” hosted by Krista Tippett in conversation with Anil Dash
Inclusive product examples
- Eone watch website
- Frank Lloyd Wright’s Laurent House
- The Accessible Icon Project and https://en.wikipedia.org/wiki/International_Symbol_of_Access
People with Disabilities to know & follow
- https://instagram.com/p/Bfwg3F7HXZ6/
- https://www.instagram.com/lillapip30
- https://www.instagram.com/aannggeellll/
- https://www.instagram.com/mamacaxx/
- https://twitter.com/SFdirewolf
- https://twitter.com/VilissaThompson
- Matt Maxey (video)
- Jessica Kellgren-Fozard YouTube channel
- “I’m not your inspiration, thank you very much” by Stella YoungatTEDxSydney
- https://www.duckworth.senate.gov/about-tammy/biography
- “I Couldn’t Find Any Disability Maternity Photos, So I Made My Own” by Christa Couture
A11y tools & Ally resources
- Contrast-A Color Contrast Checker
- Color Contrast Analyzer by NC State University IT Accessibility Resources
- World Health Organization Report on Disability
- Black American Sign Language via Wikipedia
- Search For Common Ground by John Marks & Susan Collin Marks
- “Better Than Before” by Gretchen Rubin
- Neanderthals with Disabilities Survived through Social Support” via Gizmodo
- Ally Skills Workshops by Frame Shift Consulting, Valerie Aurora
Kevin Hoffman
- I wrote a book about designing meetings called Meeting Design for Mangers, Makers, and Everyone. I’m certain you’ll find it useful, and I’d be most pleased if you checked it out.
- A basic overview of the catastrophic launch of the Space Shuttle Challenger, and how it changed processes at NASA.
- Why does Spotify think it knows me so well that it can tell me what to listen to?
- Think about your hierarchy of goals in the context of a Jobs to Be Done framework using William Power’s Hierarchy of Goals.
- What if instead of using JIRA, you made your meeting walls into your KanBan Board? From Leisa Riechelt, who actually works for JIRA.
- When meeting remotely, think about tools that will help you visualize content instead of each other’s faces.
- If brainstorming meetings don’t work, Adam Grant wants to know how does the Daily Show do brainstorming meetings so well?
- It’s not about you: it’s about the team. Learn more about what makes good teams work from Google’s Project Aristotle.
- One team’s journey into designing their own meetings so that they don’t suck.
- Go on a cruise with the Backstreet Boys. Why not? What does this have to do with meetings? Depends on what you believe.
- Etsy changed its culture to bring safety into post mortem meetings.
- Can we design better meetings? Listen to my chat with Jeff Veen on his Presentable podcast.
Gerry McGovern
Articles, Links, and Tools From An Event Apart Boston 2018
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 Perfo…