Articles, Links, and Tools From An Event Apart Seattle 2017

Community

@aneventapart Twitter feed
An Event Apart Facebook
An Event Apart Google+
Twitter Search: #aeaea (AEA Seatle hashtag)

Speaker Links and Resources

Jeffrey Zeldman

• Sharing Our Work: Testing and Feedback in Design by Jessica Harllee
• A Primer on A/B Testing by Lara Hogan
• What Really Matters: Focusing on Top Tasks by Gerry McGovern
• Interviewing Humans by Erika Hall
• Managing Feature Requests by Rachel Andrew
• Beyond Goals: Site Search Analytics from the Bottom Up by Lou Rosenfeld
• Beyond Usability Testing by Devan Goldstein
• Design, White Lies & Ethics by Dan Turner
• The Distance to Here by Rian van der Merwe
• Connected UX by Aarron Walter
• Being Real Builds Trust by Steph Hay
• Audiences, Outcomes, and Determining User Needs by Corey Vilhauer
• Product Management for the Web by Kristofer Layon
• Testing Content by Angela Colter
• Quick and Dirty Remote User Testing by Nate Bolt
• Internal Site Search Analysis: Simple, Effective, Life Altering! by Avinash Kaushik
• 10 Fundamental Web Analytics Truths: Embrace ‘Em & Win Big by Avinash Kaushik
• Is Conversion Rate Enough? It’s A Good Start, Now Do More! by Avinash Kaushik
• Analyze This: 5 Rules For Awesome Impromptu Web Analysis by Avinash Kaushik
• How to Conduct Competitive Research by Inc. staff
• 10 Tips on How to Research Your Competition by Darren Dahl
• Book: Just Enough Research by Erika Hall
• How We Write Proposals in My Design Studio by Jeffrey Zeldman

---

Krystal Higgins

Onboarding opportunities over time

• MIT manager onboarding checklists
• “New data shows losing 80% of mobile users is normal, and why the best apps do better ” - Andrew Chen and Ankit Jain
• “Minimizing Change Aversion for the Google Drive Launch ” - Google (case study)
• “Change Aversion: Understanding It, and How to Design for It ” - Google (slideshow version of case study)
• “From first run to the long run ” - Krystal Higgins

Onboarding with multiple methods

• “The Truth About Learning Styles ” - Linda Nilson
• “Do users change their settings? ” - Jared Spool

Creating onboarding for long-term guidance

• “How we put Facebook on the path to 1 billion users ” - Chamath Palihapitya
• “Replication and Analysis of Ebbinghaus’ Forgetting Curve ” - Jaap M. J. Murre and Joeri Dros
• “Spaced Repetition Promotes Efficient and Effective Learning: Policy Implications for Instruction ” - Sean H. K. Kang
• “Onboarding New Hires: Current practices and new directions ” - Sirota
• “Building onboarding for long-term guidance ” - Krystal Higgins

---

Luke Wroblewski

• Spotify ditches the controversial ‘hamburger’ menu in iOS app redesign
• Media, Productivity & Emojis Give Mobile Another Stunning Growth Year
• How to design for thumbs in the Era of Huge Screens
• Windows 8 Touch Guidelines
• An Event Apart: Buttons are a Hack
• Why “The Fold” Is A Myth – And Where To Actually Put Your Calls To Action
• Scroll behavior across the web
• Scrolling is easier than clicking
• Ericsson Mobility Report

---

Val Head

UI Animation Newsletter

• The UI Animation Newsletter
• Designing Interface Animation

Design Systems & Animation Tips

• Researching Design Systems
• Integrating animation into the UX workflow
• Design Doesn’t Scale

Traditional storyboarding

• Pixar storyboards

---

Ethan Marcotte

• More information on Ben Schmidt’s data visualization work.
• Trent Walton’s “Redefined” and “Device-Agnostic” are two essays I’d recommend to any responsive designer.
• The Toast is a wonderful independent publication, and one I (and some friends) worked with last year. (Our team wrote a detailed overview of the redesign process, if you’re curious.)
• Both The Toast and The Guardian (and, like, many other sites) make use of the flexible box module, or “flexbox.” If you’d like to learn more, I can recommend:
  • Chris Coyier’s “Complete Guide to Flexbox” is an invaluable reference.
  • Flexbox in 5 Minutes. What it says on the tin.
  • Games! http://flexboxfroggy.com/ and http://www.flexboxdefense.com/ are fun but they also really helped me get my head around some of the finer layout tricks. Recommended.
  • And finally, it’s worth noting that flexbox isn’t for everything.
• Interested in @supports? Well! MDN, David Walsh, and SitePoint have more information for you.
• If you’re interested in learning more about pattern libraries / style guides, I can recommend Anna Debenham’s excellent book on the topic.
• A few favorite pattern libraries / style guides are those published by Starbucks, Ushahidi, MailChimp, and Code For America.
• We are, as I mention in the talk, living in a golden age of automation and tooling for pattern libraries. Zeplin, DevBridge’s Styleguide, and KSS are a few examples; Fractal is one I especially like.
• For many more, I recommend Susan Robertson’s article on the topic.
• While “Atomic Design” is a popular methodology for organizing a style guide, many organizations and teams find value in designing, well, their own design language. Alla Kholmatova, Charlotte Jackson, and Ellen de Vries have been big influences for me in this area.

---

Jeremy Keith

Links

• Design Principles
• The Extensible Web Manifesto
• Developer Fallacies

• Service Workers

  • My First Service Worker
  • Making A Service Worker: A Case Study by Lyza Danger Garnder
  • The Service Worker Lifecycle by Ire Aderinokun
  • An Offline Experience With Service Workers by Brandon Rozek
  • Offline Content With Service Workers by Mike Riethmuller

• Web Components

  • Web Components
  • Responsible Web Components
  • Extensible Web Components
  • Uncomfortably Excited by Alex Russell
  • My Lightning Talk On Web Components by Soledad Penadés
  • Practical Questions Around Web Components by Ian Feather
  • Web Components And Progressive Enhancement by Adam Onishi

• Progressive Web Apps

  • Home Screen
  • Regressive Web Apps
  • The Progressive Web App Dev Summit
  • The Imitation Game
  • Progressive Web Apps: Escaping Tabs Without Losing Our Soul by Alex Russell
  • The Building Blocks of Progressive Web Apps by Ada Rose Edwards
  • Progressive Web Apps: The Long Game by Remy Sharp
  • What, Exactly, Makes Something A Progressive Web App? by Alex Russell

 

People

• Rosalind Franklin, 1920–1958
• Margaret Hamilton, 1936–
• Tim Berners-Lee, 1955–
• Grace Hopper, 1906–1992
• Hedy Lamarr, 1914–2000
• Ada Lovelace, 1815–1852
• James Burke, 1936–
• Kevin Kelly, 1952–

 

Papers

• Reports and Working Notes on DNA by Rosalind Franklin
• I, Pencil by Leonard E. Read
• HTML Design Principles edited by Anne van Kesteren and Maciej Stachowiak
• Sketch of The Analytical Engine Invented by Charles Babbage by L. F. Menabrea with notes upon the memoir by the translator Ada Augusta, Countess of Lovelace
• The Coming Technological Singularity: How to Survive in the Post-Human Era by Vernor Vinge

 

Presentations

• The Real World of Technology by Ursula M. Franklin @ the CBC Massey Lectures, 1989
• The Triumph Of Technology by Lord Sir Alec Broers @ the BBC Reith Lectures, 2005
• How Technology Evolves by Kevin Kelly @ TED, 2005
• When Ideas Have Sex by Matt Ridley @ TED, 2010
• How I Built A Toaster—From Scratch by Thomas Thwaites @ TED, 2010
• Admiral Shovel and the Toilet Roll by James Burke @ dConstruct, 2012
• Unexpected Item In The Bagging Area by Dan Williams @ dConstruct, 2013
• Hypertext As An Agent Of Change by Mandy Brown @ dConstruct 2014
• The Humane Representation Of Thought by Bret Victor @ the UIST and SPLASH conferences, 2014
• Our Comrade The Electron by Maciej Cegłowski @ Webstock, 2014
• Step Off This Hurtling Machine by Alex Feyerke @ JSConf.au, 2014
• The Moral Economy of Tech by Maciej Cegłowski @ the Society For The Advancement Of Socio-Economics, 2016

 

Books

• The Real World Of Technology by Ursula M. Franklin
• The Rational Optimist by Matt Ridley
• What Technology Wants by Kevin Kelly
• The Inevitable by Kevin Kelly
• Where Good Ideas Come From: The Natural History of Innovation by Steven Johnson
• How We Got To Now: Six Innovations That Made The Modern World by Steven Johnson
• 101 Unuseless Japanese Inventions: The Art of Chindogu by Kenji Kawakami
• The Toaster Project (Or A Heroic Attempt to Build a Simple Electric Appliance from Scratch) by Thomas Thwaites
• Connections by James Burke

 

---

Rachel Andrew

• Code Collection of examples used
• Boring CSS
• Glish CSS
• The Noodle Incident Box Lessons
• Fractal
• Using Feature Queries in CSS
• CSS Grid Specification
• Flexbox Specification
• Box Alignment Specification
• CSS Shapes Specification
• Can I Use
• Being Where the People Are - a post about vendor prefixes
• Grid by Example
• MDN Grid Guides

---

Jen Simmons

• Examples from this talk
• A giant list of links to resources for learning CSS Grid
• Jen Simmons, The benefits of learning how to code layouts with CSS
• Jen Simmons, Six Layout Myths Busted
• Layout Land
• Video of Jen Simmons’ 2015 talk, Modern Layouts: Getting Out Of Our Ruts
• Video of Jen Simmons’ 2016 talk, Revolutionize Your Page: Real Art Direction on the Web
• Book recommendation, Graphic Design the New Basics
• The Vignelli Canon (free PDF)
• Mark Boulton, A Richer Canvas
• Mark Boulton, Five Simple Steps to Designing Grid Systems, Part 1
• The Marber example at Grid Set App (and find others, along with blog posts at https://gridsetapp.com)
• Nathan Ford, Content Out Layout
• Jen Simmons, CSS Writing Modes
• Jen Simmons, Using Feature Queries in CSS
• Grid Garden, a game for learning bits of CSS Grid

---

Una Kravets

• Google Mobile Perf Study Results
• Internet Usage in India
• Wikipedia
• Progressive Rendering
• Putting your Images on a Diet
• WebP Documentation
• Video on WebP
• Zamzar Online Converter
• Homebrew
• BPG Web Encoder
• FLIF Format
• FLIF Polyfill
• magick-loader
• gulp-gm
• grunt-imagemagick
• node-imagemagick
• SVGOMG
• Comparing File Formats
• Introducing GIFV
• Social Media Sizes Cheat Sheet
• “Blur-Up” Technique
• Medium’s Image Loading Technique
• iOS Video Autoplay News
• Facebook Image Loading Technique
• Picturefill
• una.im/CSSgram
• Guetzli Compression

---

Chris Coyier

I have a book! It’s called Practical SVG.

Some good SVG primers

• Using SVG
• Everything You Need To Know About SVG
• Can I use… data for Basic SVG Support
• Make the Logo Bigger (Chrome Extension)

Graphs & Charts in SVG

• How to Make Charts with SVG
• Highcharts
• Animated SVGs: Custom easing and timing
• Chartist.js, An Open-Source Library For Responsive Charts
• Codepen: Interactive SVG Info Graph
• Codepen:  Simple SVG Charts
• amCharts

SVG Shape Morphing

• How SVG Shape Morphing Works
• MorphSVG Greensock plugin
• Codepen: Donald Trump's Signature Morphing Into a Buttface
• Codepen: Mobiltelefonens Evolution (SVG Shape Morphing)
• Codepen: Shape Morph in CSS with d: path() + :active state
• The SVG path Syntax: An Illustrated Guide
• Codepen: Simple Path Examples
• bodymovin - after effects to html library
• svg jou jou monster

SVG Line Drawing

• Playstation 4: The Review
• Codepen: Feast SVG Logo Animation
• Codepen: THINK svg Animation

Animating Interfaces

• Transitional Interfaces, Coded
• Codepen:  SVG Page Hopper
• Codepen:  SVG Balloon Slider
• Animating an SVG Menu Icon with Segment
• Codepen:  morphing shape with spinning color stroke (svg + canvas)
• Loaders and Spinners
• Codepen:  Morning Commute
• Codepen:  Day 090 - Equalizer - version 1
• Codepen:  Musical Chord Progression Arpeggiator
• Codepen:  SVG Animated Guitar (Play Me!)
• Codepen:  SVG Animated Bucket Drums

SVG Icon Systems

• Icon System with SVG Sprites
• grunticon
• Inline SVG with Grunticon Fallback

Art

• Codepen: BB8 from Starwars️ – with SVG & GSAP
• Codepen:  SVG Fire
• Codepen: Mr. Potatohead SVG
• Codepen: Alex the CSS Husky
• Codepen: microlife
• Codepen: #Codevember 08 - Animated SVG Turbulence Filter
• Kubist
• Codepen:  SVG Animated Low Poly Tiger

Diagrams

• Olympic Feathers
• film flowers
• The anatomy of responsive images
• The SVG path Syntax: An Illustrated Guide
• SVG text and Small, Scalable, Accessible Typographic Designs
• Codepen: My First SVG Banner Ad

Headline Lockups

• Codepen:  Example of a Text Lockup
• Codepen:  SVG with <text> example

SVG in the Real World

• Tweet by Tami Brass
• Codepen:  no sprite, no JS heart animation - click it!
• Codepen:  Twitter Birthday Heart Animation in SVG
• Boxcar Press

Explain Your Product

• Codepen:  Change inline svg styling
• Networking on DigitalOcean
• Codepen:  Drivetrain
• Codepen:  MC High Five
• Codepen:  SVG Phone call
• Interactive Data Visualization: Animating the viewBox
• Codepen:  Urban landscape in polygonal style