Articles, Links, and Tools From An Event Apart Chicago 2019
An in-progress compendium of articles, links, tools, and other resources shared by our speakers at An Event Apart Chicago 2019.
Jeffrey Zeldman, “Slow Design for an Anxious World”
Learn how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.
- A Simpler Page
- Whitespace
- “Beyond Engagement: the Content Performance Quotient”
- Readability
- Mercury Web Parser
- Web Design Manifesto 2012
- Poynter Style Guide
- To Save Real News
- We Were Sofa
- Chanel
- Art Direction for the Web (book and courses by Andy Clarke)
- Art Direction and the Web by Stephen Hay (A List Apart, 2004)
- Art Direction vs. Design (zeldman.com, 2003)
- The Economist, front cover, April, 2003
- Is Your Website Font Size Too Small? Large Text Is In (Design Shack)
Una Kravets, “Extending CSS With SVG and Houdini”
If you’ve ever wanted to customize CSS itself to do something new, you won’t want to miss this talk.
- Wavy Underline Effect
- SVG Turbulence
- SVG Borders
- Sketchy Borders Material Demo
- CSSGram
- Color Filter Playground
- Is Houdini Ready Yet?
- Houdini Drafts
- Houdini Demos by Vincent De Oliveira
- Houdini Explainer for Sam Richard
- Houdini Samples from Chrome Labs
- CSS Tricks Houdini Articles
- Houdini Twitter List
- Angled Corner Demo
- Extra.CSS
- Conic Gradient Polyfill
Jason Pamental, “Dynamic Typographic Systems and Variable Fonts: Scalable, Fast, and Fabulous”
Using variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds.
- Web Typography News – A weekly newsletter I publish with tips and resources about web typography.
- Digging in to Dynamic Typography – I wrote about these techniques in detail in my newsletter a little while back. Lots of details and links to more demo code.
- Mandy Michael’s fluid font weight demo – Mandy created a really great JS method for using JS with a CSS custom property to scale font weight based on viewport size. Will definitely be looking at adding this to future projects!
- Google’s ‘Progressive Font Enrichment’ proof-of-concept demo – This is the first exploration of what we’re working on in the W3C Web Fonts Working Group—which will lead to some truly revolutionary changes in how we serve fonts on the web.
- IBM Plex Sans Variable – Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.
- Remix of Jeffrey Zeldman’s Poynter Institute demo news typography – This is my remix of Jeffrey Zeldman’s news typography demo that he created for the Poynter Institute, adding in a whole bunch of responsive typography and variable fonts.
- Typetura.js – Scott Kellum and Sal Hernandez’ fluid typesetting tool. Really interesting, and able to scale more than just type. Well worth a look!
- Textblock.io from Glyphic – Another Javascript tool for typesetting blocks of text from Theo Rosendorf and Glyphic.
- Dark Mode in CSS – Great run-down on different techniques for dealing with day/night modes on the web.
- MDN Variable Fonts Guide – I guide I wrote on the MDN site covering the basics of implementing variable fonts.
- Variable Font Demos on CodePen – A collection of demos I've created on CodePen for you to play with!
- Variable Font resources on my site – Lots of links, articles, books, talks and whatnot
- Essay explaining variable fonts as a concept – Good for less techy and more designy/brandy folks as well.
- Firefox (font tools!!!) – Explore the new fonts tab in the Firefox Dev Tools that will show you everything available in a given font (normal or variable, but let’s all agree that the variable ones are way cooler)
- Avenir Next – It's an earlier beta, but still an interesting experiment. Hoping a fuller release will be out by the end of the year.
- Wentin's Font Playground – Wentin is a designer/developer at Adobe, and she has pioneered some truly unique and compelling UI ideas for working with variable fonts. Really amazing stuff.
- Cera Pro by Typemates – (Variable font is a beta, but you should ask them about it and tell 'em I sent ya)
- Wakamai Fondue (What Can My Font Do... get it?) – Simple drag-and-drop web interface to discover all the features available in a given font file.
- Axis Praxis – The original variable fonts playground.
- V-Fonts.com – Nick Sherman's variable fonts catalog site
- Roslindale by DJR – David Jonathan Ross' design is what forms the primary typography for the talk and for my own site.
- FF Meta from Monotype – This is a fantastic typeface, and it was a real treat to design the demo page for it's introduction.
- Amstelvar by Type Network – One of the first variable fonts, and still one of the most compelling ones to showcase the breadth of possibilities.
- W3C Github CSS Fonts Level 4 (variable fonts and other bits) – Read up on the features and issues, provide feedback, and help shape the direction of the web
- State of Georgia Board of Workers Compensation – One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.
- State of Georgia ADA Coordinator’s Office – One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.
Eric Meyer, “Generation Style”
A spotlight on generated content that shows how it can be a generator of creativity as well as a powerful, practical tool for everyday use.
Rachel Andrew, “Making Things Better: Redefining the Technical Possibilities of CSS”
By understanding the new medium of web design we can start to imagine the future, and even help to shape it.
The code examples can be found in this CodePen Collection.
Flexbox
Sizing
- CSS Intrinsic and Extrinsic Sizing Spec
- How Big Is That Flexible Box
- CSS is Awesome discussion on CSS Tricks
- Graduating to Grid An Event Apart Video
- How Big Is That Box: Understanding Sizing in Grid Layout
Logical Properties and Values
- Logical Properties and Values Spec
- Understanding Logical Properties and Values
- CSS Logical Properties and Values on MDN
Scroll Snap
Subgrid (Grid Level 2)
- CSS Grid Spec Level 2
- CSS Grid Level 2 Examples
- Grid Level 2: Here Comes Subgrid
- Digging Into The Display Property: Grids All The Way Down
- Subgrid - CSS: Cascading Style Sheets | MDN
- Hello subgrid!
- A design pattern solved by subgrid
Paged Media
Multicol
Fragmentation
Regions
Exclusions
Jen Simmons, “Designing Intrinsic Layouts”
Jen walks you through the thinking process of creating accessible & reusable page and component layouts.
Cyd Harrell, “Making Research Count”
How to build a valuable research practice in any company by doing strong small research projects and involving the broader team.
Cheryl Platz, “New Solutions to Old Problems: Voice User Interface Design”
Gain a better understanding of when voice is an appropriate tool, and how to start adapting your design process for these new solutions.
Voice UI fundamentals (Cheryl Platz on Medium):
- A Conversational Design Primer
- Voice UI Best Practices: Learning from Phone systems
- The Narrowing Rift: Voice UI and Conversational UI
- Voice User Interface Design: New Solutions to Old Problems
Guidelines
- Google's Conversational Design Guidelines
- Alexa Design Guidelines
- https://voiceprinciples.com/
- Microsoft Inclusive Design Toolkit
Advanced VUI topics (Cheryl Platz on Medium):
- Pretty Please: Politeness in Voice User Interfaces
- Conversational UI: 5 Danger Zones
- Blind Spots in today's Voice User Interfaces
Books
- Designing Voice User Interfaces (Cathy Pearl)
- Wired for Speech (Clifford Nass and Scott Brave)
- The Voice in the Machine: Building Interfaces that Understand Speech
- Conversational Design (Erika Hall)
Multimedia on advanced topics
- BBC's Digital Human podcast: "Subservience"
- 'The Future of Voice' (60 minute talk, Amuse UX Budapest 2018)
- Explainer video for Carnegie Mellon's Harpy system (1976)
Further food for thought
- How Voice First technology helps older adults (Forbes)
- Smart Speaker installed base in 2018
- Voice Recognition Lift (Comedy, Burnistoun, 2014)
Jason Grigsby, “Web Forms: Now You See Them, Now You Don’t!”
See how to amaze and delight your users using new APIs and inputs to make your forms magical.
Web form best practices
- The Question Protocol: How to Make Sure Every Form Field Is Necessary by Caroline Jarrett
- 5 Studies on How Form Length Impacts Conversion Rates
- Boingo form field reduction from Luke Wroblewski
Sign-up and login
- Google Reveals A Big Problem With Passwords On Safer Internet Day
- Hackers are passing around a megaleak of 2.2 billion records
- Data Breaches, Phishing, or Malware? Understanding the Risks of Stolen Credentials (PDF)
- The End of Passwords is Here - You'll Never Need One Again Soon - YouTube
- What’s new with sign up and sign in on the web (Google I/O ’18) - YouTube
- Getting to a world without passwords - BRK3031 - YouTube
- Introducing Web Authentication in Microsoft Edge
- Passwordless Web Authentication Support via Windows Hello - Mozilla Security Blog
- WebAuthn Demo
- WebAuthn Demo and explainer
- Open Source WebAuthn Repo
- Authentication vs. Federation vs. SSO
- 10 Advantages and disadvantages of social logins
- Inside iOS 12: AutoFill gives password manager apps on your iPhone a big boost
Checkout and payment
- Cart abandonment rate
- Payment Request API
- Introducing Web Payments: Easier Online Purchases With The Payment Request API
- Deep Dive into the Payment Request API
- Choosing an API for Implementing Apple Pay on Your Website
- Stripe Demo
- Checkout and Payment - Apple Pay - Human Interface Guidelines - Apple Developer
- Progressive Web Apps book
- Campmor decreases cart abandonment 65% using Payment Request API
Autofill
Patty Toland, “The Weight of the WWWorld is Up to Us”
How performance-related decisions (intentional or not) affect our users, tools to measure and assess the impacts of our choices, and techniques to improve web performance and accessibility for all.
- “How not to say the wrong thing” – LA Times, April 7, 2013
- “Technology Device Ownership: 2015” – Pew Research Report
- “U.S. Smartphone Use in 2015” – Pew Research Report
- “Mobile Technology and Home Broadband 2019” – Pew Research Report
- “FCC broadband report ignores affordability issue” – National Digital Inclusion Alliance
- “Unlimited data plans will permeate wireless market but leave many consumers behind (Reality Check)” – RCR Wireless News
- “Global mobile consumer survey: US edition” – Deloitte
- “US Wireless Data Prices Are Among the Most Expensive on Earth” – Vice, Nov 20, 2018
- “A Contract for the Web” – World Wide Web Foundation
- Mozilla Internet Health Report 2018
- “Total Consumer Power Consumption Forecast, October 2017” – Anders S.G. Andrae
- “Web Accessibility Lawsuits: What’s the Current Landscape?” – Essential Accessibility
- The A11y Project Checklist
- Site-wide WAVE Tools
- Page Speed Insights, Google
- WebPageTest
- SpeedCurve
- Request Map Generator
- “Geeking out with Performance Tweaks” — Adrian Holovaty at Performance.Now conference November 2018
Jeremy Keith, “Going Offline”
All the knowledge and code you’ll need to free your website from the tyranny of the network connection.
Books
- DOM Scripting, 2005
- Bulletproof Ajax, 2007
- Going Offline, 2018
Sites
- adactio.com
- Resilient Web Design
- jQuery
- The Prime Number Shitting Bear
- Ampersand
- Trivago
- Clearleft
- The Session
- Una Kravets
- Sara Soueidan
- dConstruct Archive
Progressive Web Apps
- What the heck is a "Progressive Web App"? Seriously. by Ben Halpern
- Building Progressive Web Apps by Diogo Cunha
- Before You Build a PWA You Need a SPA by Mark Muskardin
- Tweet by Jake Archibald
- What is a PWA by Salva de la Puente
- Naming Progressive Web Apps by Frances Berriman
- Progressive Web App Checklist by Google
Marcy Sutton, “Emerging CSS Techniques and What They Mean for Accessibility”
A look at some of the newest and shiniest CSS techniques, weighing them against accessibility support and browser compatibility.
- Chrome Accessibility Devtools
- Firefox Accessibility Inspector
- Dark Side of the Grid by Manuel Matuzovic
- Grid Level 2 and Subgrid by Rachel Andrew
- More accessible markup with display: contents by Hidde de Vries
- CSS Tricks Guide to Flexbox
- Accessibility Insights for Web
- CSS :focus-visible
- WhatInput.js
- Ally.js focus-within polyfill
- Reduced Motion Codepen
- Animatable CSS properties
- Styling in Gatsby.js
- CSS-in-JS Codepen for supporting user stylesheets
Val Head, “Making Motion Inclusive”
How to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.
- Your interactive makes me sick (and what to do about it)
- Responsive design for motion
- The prefer-reduced-motion query at a glance
- Safer web animation for motion sensitivity
- An introduction to the reduced motion query
- Move Ya! Or maybe, don't, if the user prefers-reduced-motion!
- Reduced motion picture technique take two
- Exclusive Design
Gerry McGovern, “The Customer-Obsessed Professional”
Become more agile by increasing the amount of customer feedback you receive, and developing faster methods to make changes to your code, content, or design.
- Buurtzorg website
- Buurtzorg: the Dutch model of neighbourhood care that is going global
- It’s too slow! It’s taking 600 milliseconds to load: Larry Page - Gmail
- Ask HN: Anyone else find the new Gmail interface sluggish?
- The New Normal: Viacom young people study
- Physics paper sets record with more than 5,000 authors
- Atypical Combinations and Scientific Impact
- Top user tasks European Union
- Fast Path to a Great UX — Increased Exposure Hours
- Empathy: the web professional’s greatest skill
- How Slack Became a Unicorn Company in 2 Years
- Collaborating and Connecting: Gerry McGovern
- The Huge, Unseen Operation Behind the Accuracy of Google Maps
- Continuous user research in 11.6 seconds, Tomer Sharon, Amazon
- Inclusive content, ethical tech, and you: Sara Wachter-Boettcher, Confab 2018
- Make me think! The design of complexity. Ralph Ammer
- Gerry McGovern website
- Top Tasks: Customer Carewords website