Articles, Links, and Tools From An Event Apart Orlando 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
Sarah Parmenter
- 256 Web Safe Colours and Names
- Gary Vee
- Vanity Metrics
- Google Digital Garage
- Social Views Per Day
- Snapchat’s Weakness is the “Olds”.
- Video will account for 80% of Consumer Traffic in 2019
- Virgin Holidays
- Klarna
- Facebook Pixel
- [Infographic] Marketers Who Use Video Outperform Their Peers
- Facebook Audience Insights
- trends.google.com
- Google My Business
- Hashtagify
- Planoly
- Trust in Earned Advertising Grows in Importance
- Search for Influencers in a Given Market
- Instagram Influencer Rates
- Away Travel
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
Dan Mall
- Zeplin
- The Agile Manifesto
- Is there any value in people who cannot write JavaScript?
- The Value of HTML and CSS with Mandy Michael and Lara Schenck
- The Brand Gap
- The Hammer and The Chisel
- Designer + Developer Workflow
- Defining Product Design: A Dispatch from Airbnb’s Design Chief
- What Google Learned From Its Quest to Build the Perfect Team
Kristina Halvorson
Jason Pamental
- Resources on Variable Fonts on my site
- Essay explaining variable fonts as a concept (good for less techy and more designy/brandy folks as well) (also links to the same essay on CodePen)
- My Codepen Demos
- Clearleft/Rich Rutter – How to use Variable Fonts in the Real World
- Firefox Nightly (font tools!!!)
- Mozilla blog post on VF support and font tools
- Type Network Variations Guide
- Monotype’s Variable Fonts intro:
- Microsoft Variable Font Demo Site
- Wentin’s Font Playground
- Wakamai Fondue (What Can My Font Do… get it?)
- Axis-Praxis.org
- V-Fonts
- Monotype Variable Font Tester
- Brad Frost ‘ish’ Responsive Resizer
- Sahar Afshar & José Miguel Solé on evolving interfaces for Arabic typography on the web
- Code examples and demos for Arabic variable fonts
- W3C Github CSS Fonts Level 3
- W3C Github CSS Fonts Level 4 (variable fonts and other bits)
Fonts In Use
- Roslindale by DJR
- FF Meta by Monotype
- Avenir Next by Monotype (it’s an earlier beta, but open to download)
- Cera Pro by Typemates (variable font is a beta, but you should ask them about it and tell ’em I sent ya)
- Amstelvar by Type Network
- Bello Write by Underware
Trent Walton
- Harry Roberts’ tweet
- Jason Fried’s tweet
- General Data Protection Regulation (Wikipedia entry)
- Privacy by design (Wikipedia entry)
- GDPR for Web Developers
- 30% of all Internet users will ad block by 2018
- Survey shows US ad-blocking usage is 40 percent on laptops, 15 percent on mobile
- Firefox will soon be blocking trackers by default
- Ghostery
- Calibre
- SpeedCurve
- Dareboost
- HAR Resources
- Charles
- Driving WebPagetest from a Google Docs Spreadsheet
- Request Map Generator
- BuiltWith
- Posts Tagged “Third-Party” at trentwalton.com
- Trackers | Better
- Third-Party Script Prevalence on Alexa Top 50
- Tweet about BBC load abandonment
- WebPagetest
Aarron Walter
- Make Space: How to Set the Stage for Creative Collaboration
- GV Guide to Design Critique
- Etsy’s Debriefing Facilitation Guide for Blameless Postmortems
- Enterprise Design Sprints by Richard Banfield
- The DesignOps Handbook by Dave Malouf, Collin Whitehead, Meredith Black, and Kate Battles
- DesignBetter.Co
Josh Clark
More on this topic from Josh
- Design in the era of the algorithm
- Systems smart enough to know they’re not smart enough
- The Juvet Agenda
- The state of UX in UI (User Defenders podcast)
- Designing with artificial intelligence: the dinosaur on a surfboard (Presentable podcast)
- The rise of artificial intelligence: how AI will affect UX design (Adobe interview)
- Making software with casual intelligence
- Stop pretending you really know what AI is
- AI first—with UX
- In a few years, no investors are going to be looking for AI startups
- “Algorithms aren’t racist. Your skin is just too dark.”
Context
- Benedict Evans: Ways to think about machine learning
- MIT Technology Review: Machine Learning: The New Proving Ground for Competitive Advantage
- Harvard Business Review: In the AI age, “being smart” will mean something completely different
- Kranzberg’s laws (PDF)
Example applications
- Slack topic search: A new way to discover and connect with just the right teammates
- The Washington Post’s robot reporter has published 850 articles in the past year
- Automated Journalism – AI Applications at New York Times, Reuters, and Other Media Giants
- Google Forms: No Machine Learning in your product? Start here
- Post-It Plus app captures Post-Its in digital form
- CycleGAN transforms photos of apples into oranges, horses into zebras
Robot designers: AI for design and code
Machine learning APIs and data sets
- Microsoft cognitive services
- Amazon Web Services (AWS) machine learning
- Google Cloud AI building blocks
- IBM Watson products and services
- Topbots: Chihuahua or muffin? Searching for the best computer vision API
Customize or construct your own model
- Lobe (user-friendly visual interface)
- Google Cloud AutoML
- Microsoft Custom Vision
Open-source data sets
- Open Images
- Mozilla’s Common Voice data set
- Google’s “Quick, Draw!” data set
- Large self-annotated corpus for sarcasm
Designing for speech interfaces
- Awni Hannun: Speech recognition is not solved
- Benedict Evans: Voice and the uncanny valley of AI
- Cooper: Talking to machines is primitive and frustrating, but it’s gonna be huge
Mental models and opaque logic
- MIT Technology Review: The dark secret at the heart of AI
- Ralph Ammer: Make me think! The design of complexity
Surveillance capitalism
- Vicki Boykis: What should you think about when using Facebook?
- Digital Content Next: Google data collection research
- Gizmodo: Facebook is giving advertisers access to your shadow contact information
Designing to counter misinformation, error and bias
- Facebook: Designing against misinformation
- Book by Cathy O’Neil: Weapons of math destruction
- ACLU: Amazon’s face recognition falsely matched 28 members of congress with mugshots
- Google’s speech recognition has a gender bias
- AI programs are learning to exclude some African-American voices
- Passport system rejects this dude’s photo for a pretty racist reason
- Google mistakenly tags black people as ‘gorillas,’ showing limits of algorithms
- Machine Bias: There’s software used across the country to predict future criminals, and it’s biased against blacks.
Manner and language as cues for confidence and interaction
- Wikipedia: Paralanguage
- Amazon: Alexa speechcons
- Google: Google Duplex
- Jeremy Keith: Google duplicitous
Machine ethics
- The Juvet Agenda
- Book by Cennydd Bowles: Future Ethics
- Mike Loukides: The ethics of artificial intelligence
- Genevieve Bell: From human-computer interactions to human-computer relationships
- The European Union’s General Data Protection Regulation
Articles, Links, and Tools From An Event Apart Orlando 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
Sarah Parmenter
- 256 Web Safe Colours and Names
- Gary Vee
- Vanity Metrics
- Google Digital Garage
- Social Views Per Day
- Snapchat’s Weakness is the “Olds”.
- Video will account for 80% of Consumer Traffic in 2019
- Virgin Holidays
- Klarna
- Facebook Pixel
- [Infographic] Marketers Who Use Video Outperform Their Peers
- Facebook Audience Insights
- trends.google.com
- Google My Business
- Hashtagify
- Planoly
- Trust in Earned Advertising Grows in Importance
- Search for Influencers in a Given Market
- Instagram Influencer Rates
- Away Travel
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
Dan Mall
- Zeplin
- The Agile Manifesto
- Is there any value in people who cannot write JavaScript?
- The Value of HTML and CSS with Mandy Michael and Lara Schenck
- The Brand Gap
- The Hammer and The Chisel
- Designer + Developer Workflow
- Defining Product Design: A Dispatch from Airbnb’s Design Chief
- What Google Learned From Its Quest to Build the Perfect Team
Kristina Halvorson
Jason Pamental
- Resources on Variable Fonts on my site
- Essay explaining variable fonts as a concept (good for less techy and more designy/brandy folks as well) (also links to the same essay on CodePen)
- My Codepen Demos
- Clearleft/Rich Rutter – How to use Variable Fonts in the Real World
- Firefox Nightly (font tools!!!)
- Mozilla blog post on VF support and font tools
- Type Network Variations Guide
- Monotype’s Variable Fonts intro:
- Microsoft Variable Font Demo Site
- Wentin’s Font Playground
- Wakamai Fondue (What Can My Font Do… get it?)
- Axis-Praxis.org
- V-Fonts
- Monotype Variable Font Tester
- Brad Frost ‘ish’ Responsive Resizer
- Sahar Afshar & José Miguel Solé on evolving interfaces for Arabic typography on the web
- Code examples and demos for Arabic variable fonts
- W3C Github CSS Fonts Level 3
- W3C Github CSS Fonts Level 4 (variable fonts and other bits)
Fonts In Use
- Roslindale by DJR
- FF Meta by Monotype
- Avenir Next by Monotype (it’s an earlier beta, but open to download)
- Cera Pro by Typemates (variable font is a beta, but you should ask them about it and tell ’em I sent ya)
- Amstelvar by Type Network
- Bello Write by Underware
Trent Walton
- Harry Roberts’ tweet
- Jason Fried’s tweet
- General Data Protection Regulation (Wikipedia entry)
- Privacy by design (Wikipedia entry)
- GDPR for Web Developers
- 30% of all Internet users will ad block by 2018
- Survey shows US ad-blocking usage is 40 percent on laptops, 15 percent on mobile
- Firefox will soon be blocking trackers by default
- Ghostery
- Calibre
- SpeedCurve
- Dareboost
- HAR Resources
- Charles
- Driving WebPagetest from a Google Docs Spreadsheet
- Request Map Generator
- BuiltWith
- Posts Tagged “Third-Party” at trentwalton.com
- Trackers | Better
- Third-Party Script Prevalence on Alexa Top 50
- Tweet about BBC load abandonment
- WebPagetest
Aarron Walter
- Make Space: How to Set the Stage for Creative Collaboration
- GV Guide to Design Critique
- Etsy’s Debriefing Facilitation Guide for Blameless Postmortems
- Enterprise Design Sprints by Richard Banfield
- The DesignOps Handbook by Dave Malouf, Collin Whitehead, Meredith Black, and Kate Battles
- DesignBetter.Co
Josh Clark
More on this topic from Josh
- Design in the era of the algorithm
- Systems smart enough to know they’re not smart enough
- The Juvet Agenda
- The state of UX in UI (User Defenders podcast)
- Designing with artificial intelligence: the dinosaur on a surfboard (Presentable podcast)
- The rise of artificial intelligence: how AI will affect UX design (Adobe interview)
- Making software with casual intelligence
- Stop pretending you really know what AI is
- AI first—with UX
- In a few years, no investors are going to be looking for AI startups
- “Algorithms aren’t racist. Your skin is just too dark.”
Context
- Benedict Evans: Ways to think about machine learning
- MIT Technology Review: Machine Learning: The New Proving Ground for Competitive Advantage
- Harvard Business Review: In the AI age, “being smart” will mean something completely different
- Kranzberg’s laws (PDF)
Example applications
- Slack topic search: A new way to discover and connect with just the right teammates
- The Washington Post’s robot reporter has published 850 articles in the past year
- Automated Journalism – AI Applications at New York Times, Reuters, and Other Media Giants
- Google Forms: No Machine Learning in your product? Start here
- Post-It Plus app captures Post-Its in digital form
- CycleGAN transforms photos of apples into oranges, horses into zebras
Robot designers: AI for design and code
Machine learning APIs and data sets
- Microsoft cognitive services
- Amazon Web Services (AWS) machine learning
- Google Cloud AI building blocks
- IBM Watson products and services
- Topbots: Chihuahua or muffin? Searching for the best computer vision API
Customize or construct your own model
- Lobe (user-friendly visual interface)
- Google Cloud AutoML
- Microsoft Custom Vision
Open-source data sets
- Open Images
- Mozilla’s Common Voice data set
- Google’s “Quick, Draw!” data set
- Large self-annotated corpus for sarcasm
Designing for speech interfaces
- Awni Hannun: Speech recognition is not solved
- Benedict Evans: Voice and the uncanny valley of AI
- Cooper: Talking to machines is primitive and frustrating, but it’s gonna be huge
Mental models and opaque logic
- MIT Technology Review: The dark secret at the heart of AI
- Ralph Ammer: Make me think! The design of complexity
Surveillance capitalism
- Vicki Boykis: What should you think about when using Facebook?
- Digital Content Next: Google data collection research
- Gizmodo: Facebook is giving advertisers access to your shadow contact information
Designing to counter misinformation, error and bias
- Facebook: Designing against misinformation
- Book by Cathy O’Neil: Weapons of math destruction
- ACLU: Amazon’s face recognition falsely matched 28 members of congress with mugshots
- Google’s speech recognition has a gender bias
- AI programs are learning to exclude some African-American voices
- Passport system rejects this dude’s photo for a pretty racist reason
- Google mistakenly tags black people as ‘gorillas,’ showing limits of algorithms
- Machine Bias: There’s software used across the country to predict future criminals, and it’s biased against blacks.
Manner and language as cues for confidence and interaction
- Wikipedia: Paralanguage
- Amazon: Alexa speechcons
- Google: Google Duplex
- Jeremy Keith: Google duplicitous
Machine ethics
- The Juvet Agenda
- Book by Cennydd Bowles: Future Ethics
- Mike Loukides: The ethics of artificial intelligence
- Genevieve Bell: From human-computer interactions to human-computer relationships
- The European Union’s General Data Protection Regulation
Articles, Links, and Tools From An Event Apart Orlando 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…
“Graduating to Grid” by Rachel Andrew—An Event Apart Denver 2017
When CSS Grid Layout shipped into multiple browsers in the Spring of 2017 it heralded the dawn of a new way to do layout on the web. In this video, captured live at An Event Apart Denver: Special Edition, Rachel Andrew looks at wha…
“Graduating to Grid” by Rachel Andrew—An Event Apart Denver 2017
When CSS Grid Layout shipped into multiple browsers in the Spring of 2017 it heralded the dawn of a new way to do layout on the web. In this video, captured live at An Event Apart Denver: Special Edition, Rachel Andrew looks at wha…
“Graduating to Grid” by Rachel Andrew—An Event Apart Denver 2017
When CSS Grid Layout shipped into multiple browsers in the Spring of 2017 it heralded the dawn of a new way to do layout on the web. In this video, captured live at An Event Apart Denver: Special Edition, Rachel Andrew looks at what went right or wrong in these first few months, and offers help to those struggling to transition away from legacy methods.
In a practical, example-packed hour, Rachel helps give you the confidence and practical skills to fully embrace Grid layout. She compares common framework patterns to new Grid code, and teaches how to create a workflow that is right up to date—a workflow grounded in new CSS, yet able to care for old browsers and ensure a good experience for their users.
Developer, author, and entrepreneur Rachel Andrew is one half of edgeofmyseat.com, the company behind Perch CMS and Notist. She’s an Invited Expert to the W3C on the CSS Working Group, a Google Developer Expert, and the Editor-in-Chief of Smashing Magazine. Her books include the recent Get Ready for CSS Grid Layout and HTML5 for Web Designers, Second Edition.
Enjoy all the videos in An Event Apart’s library. There are over 30 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.
“Graduating to Grid” by Rachel Andrew—An Event Apart Denver 2017
When CSS Grid Layout shipped into multiple browsers in the Spring of 2017 it heralded the dawn of a new way to do layout on the web. In this video, captured live at An Event Apart Denver: Special Edition, Rachel Andrew looks at what went right or wrong in these first few months, and offers help to those struggling to transition away from legacy methods.
In a practical, example-packed hour, Rachel helps give you the confidence and practical skills to fully embrace Grid layout. She compares common framework patterns to new Grid code, and teaches how to create a workflow that is right up to date—a workflow grounded in new CSS, yet able to care for old browsers and ensure a good experience for their users.
Developer, author, and entrepreneur Rachel Andrew is one half of edgeofmyseat.com, the company behind Perch CMS and Notist. She’s an Invited Expert to the W3C on the CSS Working Group, a Google Developer Expert, and the Editor-in-Chief of Smashing Magazine. Her books include the recent Get Ready for CSS Grid Layout and HTML5 for Web Designers, Second Edition.
Enjoy all the videos in An Event Apart’s library. There are over 30 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest.
“Graduating to Grid” by Rachel Andrew—An Event Apart Denver 2017
When CSS Grid Layout shipped into multiple browsers in the Spring of 2017 it heralded the dawn of a new way to do layout on the web. In this video, captured live at An Event Apart Denver: Special Edition, Rachel Andrew looks at what went right or wrong…
“Where Accessibility Lives” by Derek Featherstone—An Event Apart Denver 2017
You do your very best to make the things you design and build easy to use for everyone, including people with disabilities. The developer in you loves solving problems with code, automation, and a robust toolset. The designer in you craves exploration;…
“Where Accessibility Lives” by Derek Featherstone—An Event Apart Denver 2017
You do your very best to make the things you design and build easy to use for everyone, including people with disabilities. The developer in you loves solving problems with code, automation, and a robust toolset. The designer in yo…