Articles, Links, and Tools From An Event Apart Orlando 2016

Community

Live Photos and Tweets on Eventifier @aneventapart Twitter feed An Event Apart Facebook An Event Apart Google+ Twitter Search: #aeaorl (AEA Orlando hashtag) A Groove Apart: Ten Years of AEA in Playlist Form

Attendee Write-ups

Some lovely sketchnotes from Nate Walton More lovely sketchnotes from Jake Palmer

Speaker Links and Resources

Jeffrey Zeldman

24 ways: Grid, Flexbox, Box Alignment: Our New System for Layout by Rachel Andrew 24 ways: Putting My Patterns Through Their Paces by Ethan Marcotte A List Apart: Understanding Progressive Enhancement by Aaron Gustafson Atomic Design (blog post) by Brad Frost Atomic Design (book, readable online) by Brad Frost Content Display Patterns by Daniel Mall (danielmall.com) CSS-Tricks: Complete Guide to Flexbox by Chris Coyier CSS-Tricks: A Complete Guide to Grid by Chris Coyier CSS-Tricks: The Debate Around “Do We Even Need CSS Anymore?” by Chris Coyier Designing With Web Standards (Wikipedia article) Future-Friendly Manifesto Fuzzy Notepad: Maybe we could tone down the JavaScript by “eevee” Of Patterns and Power: Web Standards Then & Now by Jeffrey Zeldman (zeldman.com) Has Design Become Too Hard? Position Wanted: Front-End Director


Lara Hogan

Designing for Performance (the book)

HTML format (free to read!) Buy print & ebook formats

Studies

Google, Amazon case studies HTTP Archive’s “Interesting Stats” average breakdown of assets Reducing image sizes (blurring JPEG study) Semantics/repurposability clean up study Battery life consumption study Mobile-only internet usage Taming the Mobile Beast Seth Walker’s A Public Commitment to Performance Brad Frost’s Performance as Design

Tools and Techniques

WebPageTest ImageOptim ImageOptim CLI Wordpress plugin SVG scrubber and another one SmushIT FontSquirrel Font Generator Picturefill Tutorial on creating videos of web performance


Dan Mall

President Obama and Bill Simmons: The GQ Interview Change by Design by Tim Brown Seventh-Day Adventist church Philly.com How to Make Sense of Any Mess by Abby Covert Interviewing Users by Steve Portigal Service Level Agreement template KPI and OPI Measurement Pack BetterWorks OKR primer Just! Build! Websites! by Melanie Richards Design is a Job by Mike Monteiro O'Reilly Graphik typeface FF Quadraat typeface Compass St typeface


Jen Simmons

Examples at labs.jensimmons.com Jen’s on Twitter at @jensimmons Listen to thewebahead.net, especially episodes 115, 114, 81, & 9 for more on layout Video of Jen’s talk on how to use new CSS now Video of Jen’s talk, Modern Layouts: Getting Out of Our Ruts A blog post by Manuel Rego that gets into the implicit and explicit grid, hinting at just how complicated CSS Grid Layout gets Using Feature Queries in CSS Round specification Firefox Nightly


Val Head

The UI Animation Newsletter Designing Interface Animation Researching Design Systems Integrating animation into the UX workflow Design Doesn’t Scale Pixar storyboards


Rachel Andrew

Grid By Example List of resources for AEA Chicago


Chris Coyier

Charts and Graphs

Highcharts.com Animated SVGs: Custom easing and timing Chartist.js, An Open-Source Library For Responsive Charts Interactive SVG Info Graph Simple SVG Charts Dynamic Area Series with Min/Max JavaScript Charts & Maps - amCharts

Shape Morphing

How SVG Shape Morphing Works MorphSVGPlugin Heart to X Transitional Interfaces, Coded

Line Drawing

A line animation of a bear. Feast SVG Logo Animation THINK SVG Animation

Animate Your Interface

SVG Page Hopper SVG Balloon Slider morphing shape with spinning color stroke (svg + canvas) Morning Commute Clyp.it Day 090 - Equalizer - version 1 Musical Chord Progression Arpeggiator SVG Animated Guitar (Play Me!) SVG Animated Bucket Drums

The Best Icon System Ever

Icon System with SVG Sprites Inline SVG vs Icon Fonts [CAGEMATCH] SVG symbol a Good Choice for Icons Inline SVG with Grunticon Fallback

Do Art

Rotating Planet The Bezier Adventures Mr. Potatohead SVG Alex the CSS Husky microlife Kubist SVG Animated Low Poly Tiger modifier3RBlend.svg

Diagrams

All Olympic Gold Medal Winners (summer editions since 1896) film flowers The anatomy of responsive images The anatomy of responsive images My First SVG Banner Ad

Headline Lockups

Creating a Web Type Lockup Ghost In The Shell Movie Logo SVG Animation

In the Real World

Tami Brass on Twitter no sprite, no JS heart animation - click it! CSSconf (2016) Let’s make you some really nice letterpress plates

Explain Your Product

Change inline svg styling Automate Droplet actions Location Map Drivetrain MC High Five SVG Phone call What's The Summer Book For You? | Bustle Interactive Data Visualization: Animating the viewBox The Illusion of Life: An SVG Animation Case Study I DESIGN WITH CODE ❤


Josh Clark

Web APIs for sensor-based UI

The full list all W3C JavaScript APIs Geolocation Web speech (make/understand speech) (demo) Web audio (make/understand sound) Media capture (audio/video/photo) Web bluetooth Accelerometer Proximity Battery status Vibration Ambient light

Other APIs and dev environments

Physical Web IFTTT: If This Then That Alexa Skills Kit for making Alexa apps Wayfindr standard for beacon-based wayfinding Open Hybrid for connected devices Presto Android gesture control with smartwatch Reality Editor augmented reality for connecting devices

Examples/videos from the talk

Nappy Notifier Propeller Health asthma control Amazon Echo Amazon Dash button Bluetooth buttons: bt.tn and flic Ringly notification ring Lechal map shoes Glowcaps medication reminder Mailchimp Oliver (also: the whole series) Lifeprint video photographs THAW phone/screen interaction Happy Together music transfer (github) Presto smartwatch gesture control Grab Magic tv/phone sharing Reality Editor for connecting objects Wink Robot Butler Wayfindr subway navigation for the blind

Framing the imaginative opportunity

Of Nerve and Imagination by Josh Clark Magical UX and the Internet of Things (video) Enchanted Objects (book) by David Rose Hazards of Prophecy (pdf) from Profiles of the Future by Arthur C. Clarke The Future Mundane by Nick Foster #IoTH: The Internet of Things and Humans by Tim O’Reilly

Ethics and values for the physical interface

IOT Design Manifesto: guidelines for responsible design The Ethical Design Manifesto: a response to surveillance capitalism The Coming Age of Calm Technology by Aral Balkan The Nature of the Self in the Digital Age by Mark Weiser and John Seely Brown Connected // Disconnected by Josh Clark Wearables and Our Dysfunctinoal Obsession with Screens and Engagement Living with the Algorithm by Josh Clark Smartwatches, Wearables and that Nasty Data Rash by Josh Clark

Speculative fiction for potential futures

Curious Rituals Teacher of Algorithms TBD Catalog How smart does your bed have to be, before you are afraid to go to sleep at night? by Rich Gold Addicted Products: the story of Brad the toaster (video) Ethical Things: a fan that makes moral choices Black Mirror tv series (Netflix)


Jeremy Keith

Books

The Victorian Internet by Tom Standage, 01998 Where Wizards Stay Up Late: The Origins of the Internet by Katie Hafner, 01996 Weaving the Web by Tim Berners-Lee, 01999 The Fountains of Paradise by Arthur C. Clarke, 01979

References

On Distributed Communications by Paul Baran, 01964 Transmission Control Protocol by Jon Postel, 01980 WorldWideWeb: Proposal for a HyperText Project by Tim Berners-Lee, 01990 The Rise of the Stupid Network by David S. Isenberg, 01997 Delay-Tolerant Networking Architecture by Vint Cerf, et al, 02007 There is a Horse in the Apple Store by Frank Chimero, 02010

Resources

Submarine Cable Map by Telegeography Everyone Has JavaScript, Right? by Stuart Langridge Government Service Design Manual Introduction to Service Worker by Matt Gaunt The Offline Cookbook by Jake Archibald

Related posts on adactio.com

02014-02-26 Continuum 02014-10-23 Be progressive 02014-11-03 Just what is it that you want to do? 02015-07-02 Baseline 02015-09-06 Enhance!

Further reading

Grade components, not browsers by Scott Jehl, 02013 Building for the device agnostic web by Orde Saunders, 02013 Device-Agnostic by Trent Walton, 02014 Stop Breaking the Web by Nicolas Bevacqua, 02014 The Practical Case for Progressive Enhancement by Jason Garber, 02015 Let Links Be Links by Ross Penman, 02015 Thriving in Unpredictability by Tim Kadlec, 02015 Designing with Progressive Enhancement by Jason Garber, 02015 A fictional conversation about progressive enhancement by Tom Morris, 02015

See also: other links tagged with "progressive enhancement" on adactio.com


Krystal Higgins

Guided interaction

New users matter too: Guided interaction Using Scaffolded Instruction To Optimize Learning How I got my mom to play plants vs. Zombies Hopscotch: A framework for user-guided tutorials Appcues: A platform for user-guided tutorials Coaching cadence worksheet

Free samples

New users matter too: Free samples Janrain: Customers who leave a website because of or lie on signup forms Phillip Kunz's reciprocity experiment with Christmas cards Sweetening the Till: The Use of Candy to Increase Restaurant Tipping The $300 Million Button Evaluating onboarding experiences

Personal focus

New users matter too: Personal focus Herbert Simon, scientist and psychologist and his work with attention CMU Eberly Center Principles of Teaching How a bot named Dolores Landingham transformed 18F’s onboarding


Cameron Moll

Kevin Spacey speaking at Edinburgh TV Festival ‘Ish’ by Brad Frost The fastest-growing mobile phone markets barely use apps Google: The New Multi-Screen World Study Mail to Self iOS extension No one’s forgotten how to pinch and zoom Switching Between Devices Normal for 40% of U.S. Web Users [Facebook Study] Web Apps & Web Views Witnessing papal history changes with digital age @hoyboy: “The CNN iOS app is so bad…” @caged: “How to browse the mobile web…” @yarcom: “The publishing industry in one screenshot.” JotNot Scanner iOS app Adobe Lightroom Mobile app Facebook Ads Manager iOS app MailChimp Voice & Tone

Progressive Web Apps

Progressive Web Apps – Google Progressive Web Apps: Escaping Tabs Without Losing Our Soul Apps are faltering. But progressive web apps seem pretty legit. Progressive Web Apps isn’t a Google-only thing The Building Blocks Of Progressive Web Apps Introducing Progressive Web Apps: What They Might Mean for Your Website and SEO Progressive Web Apps Simply Make Sense A wager on the web Getting started with Progressive Web Apps


Eric Meyer

Inadvertent Algorithmic Cruelty Thinking, Fast and Slow by Daniel Kahneman 1959 Chevrolet Bel Air vs. 2009 Chevrolet Malibu IIHS crash test The World is Designed for Men Flickr faces complaints over 'offensive' auto-tagging for photos Google Photos labeled black people 'gorillas' “Edge case” tweet by Evan Hensleigh Apple Adds Menstrual Cycle Tracking To HealthKit App Performing a Project Premortem - Harvard Business Review Design for Real Life Patients Like Me Simple Voice and Tone My Favorite Editing Tip: Read It Aloud by Kate Kiefer Lee Forms That Work Help, I’m Trapped in Facebook’s Absurd Pseudonym Purgatory

An Event Apart is proud to be sponsored by: