Articles, Links, and Tools From An Event Apart DC 2018
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
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.