Articles, Links, and Tools From An Event Apart Chicago 2019

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)
​

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

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.

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.

• CSS Generated Content Module Level 3
• Clearfix: A Lesson in Web Development Evolution
• CSS Gradient generator
• vector-effect
• Bug 1530525: vector-effect non-scaling-stroke ignored when resized via css background
• Accessible CSS Generated Content
• Super short note on CSS text

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

• Flexbox spec
• Use Cases For 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

• Scroll Snap Spec
• CSS Scroll Snap on MDN

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

• Paged Media Spec
• Designing For Print With CSS

Multicol

• When And How To Use Multi-column Layout

Fragmentation

• Breaking Boxes With CSS Fragmentation

Regions

• CSS Regions Spec
• CSS Regions considered harmful

Exclusions

• Exclusions Spec
• Status of the Exclusions spec issue
• Editorial Layouts, Floats and CSS Grid
• Editorial Layouts, Exclusions and CSS Grid

Jen walks you through the thinking process of creating accessible & reusable page and component layouts.

• Layout Land on YouTube
• Layout Land home
• Playlist of Jen’s past conference talks on layout
• Jen's Lab
• Demo 7
• Demo 6
• Demo 8
• CSS Grid Inspector: Examine grid layouts
• Debugging CSS Grid Layouts With Firefox Grid Inspector

How to build a valuable research practice in any company by doing strong small research projects and involving the broader team.

• Erika Hall, Research Questions Are Not Interview Questions
• Atul Gawande, Spreading Slow Ideas
• Laurissa Wolfram-Hvass, Research for the Right Audience
• Sam Ladner, Mixed Methods
• How to teach the research basics with origami (a twitter thread by me)

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)

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

• Autofill: What web devs should know, but don’t
• Help users checkout faster with Autofill
• Autofill specification
• Enabling Password AutoFill on an HTML Input Element - Apple Developer Documentation

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

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

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

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

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