Responsive Images Are Here. Now What? by Jason Grigsby—An Event Apart video
It took nearly four years, four proposed standards, the formation of a community group, and a funding campaign to pay for development, but we finally got what we’ve been clamoring for—a solution for responsive images baked into browsers. Now the hard work begins.
In this 60-minute presentation, captured live at An Event Apart Austin, Jason Grigsby shows us how to use the new responsive image specifications, which ones are appropriate for which images, and how to tackle the riddle of responsive image breakpoints.
Jason Grigsby got his first mobile phone in 2000, and has been obsessed ever since with how the world could be a better place if everyone had access to the world’s information in their pockets. Since co-founding Cloud Four in 2007, he has worked on fantastic projects, including the Obama iPhone App. Jason is a sought‐after speaker and consultant on mobile, and the founder and president of Mobile Portland, a nonprofit. You can find him blogging at cloudfour.com; on his personal site, userfirstweb.com; and on Twitter as @grigs.
Enjoy all the videos in An Event Apart’s library. There are over 30 hours of them—all absolutely free. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest. Subscribers get exclusive access to our latest videos weeks before anyone else!
A Redesign With CSS Shapes
Here at An Event Apart we recently refreshed the design of our “Why Should You Attend?” page, which had retained an older version of our site design and needed to be brought into alignment with the rest of the site. Along the way, we decided to enhance the page with some cutting-edge design techniques: non-rectangular float shapes and feature queries.
To be clear, we didn’t set out to create a Cutting Edge Technical Example™; rather, our designer (Mike Pick of Monkey Do) gave us a design, and we realized that his vision happened to align nicely with new CSS features that are coming into mainstream support. We were pleased enough with the results and the techniques that we decided to share them with the community.
Here are some excerpts from an earlier stage of the designs. The end-stage designs weren’t created as comps, so I can’t show their final form, but these are pretty close.
What interested me was the use of the circular images, which at one point we called “portholes” but which I came to think of as “bubbles.” As I prepared to implement the design in code, I thought back to the talk Jen Simmons has been giving throughout the year at An Event Apart. Specifically, I thought about CSS Shapes, and how I might be able to use them to let text flow along the circles’ edges—something like this.
This layout technique used to be sort of possible by using crude float hacks like Ragged Float and Sliced Sandbags, but now we have float shapes! We can define a circle, or even a polygon, that describes how text should flow past a floated element.
“Wait a minute,” you may be saying, “I haven’t heard about widespread support for Shapes!” Indeed, you have not. They’re currently supported only in the WebKit/Blink family—Chrome, Safari, and Opera. But that’s no problem: in other browsers, the text will flow past the boxy floats the same way it always has. The same way it does in the design comps, in fact.
The basic CSS looks something like this:
img.bubble.left { float: left; margin: 0 40px 0 0 ; shape-outside: circle(150px at 130px 130px); } img.bubble.right { float: right; margin: 0 0 0 40px; shape-outside: circle(150px at 170px 130px); }
Each of those bubble images, by the way, is intrinsically 260px wide by 260px tall. In wide views like desktops, they’re left to that size; at smaller widths, they’re scaled to 30% of the viewport’s width.
To understand the shape setup, look at the left-side bubbles. They’re 260×260, with an extra 40 pixels of right margin. That means the margin box (that is, the box described by the outer edge of the margins) is 300 pixels wide by 260 pixels tall, with the actual image filling the left side of that box.
This is why the circular shape is centered at the point 130px 130px
—it’s the midpoint of the image in question. So the circle is now centered on the image, and has a radius of 150px
. That means it extends 20 pixels beyond the visible outer edge of the circle, as shown here.
In order to center the circles on the right-side bubbles, the center point has to be shifted to 170px 130px
—traversing the 40-pixel left margin, and half the width of the image, to once again land on the center. The result is illustrated here, with annotations to show how each of the circles’ centerpoints are placed.
It’s worth examining that screenshot closely. For each image, the light blue box shows the element itself—the img
element. The light orange is the basic margin area, 40 pixels wide in each case. The purple circle shows the shape-outside
circle. Notice how the text flows into the orange area to come right up against the purple circle. That’s the effect of shape-outside
. Areas of the margin outside that shape, and even areas of the element’s content outside the shape, are available for normal-flow content to flow into.
The other thing to notice is the purple circle extending outside the margin area. This is misleading: any shape defined by shape-outside
is clipped at the edge of the element’s margin box. So if I were to increase the circle’s radius to, say, 400 pixels, it would cover half the page in Chrome’s inspector view, but the actual layout of text would be around the margin edges of the floated image—as if there were no shape at all. I’d really like to see Chrome show this by fading the parts of the shape that extend past the margin box. (Firefox and Edge should of course follow suit!)
At this point, things seem great; the text flows past circular float shapes in Chrome/Safari/Opera, and past the standard boxy margin boxes in Firefox/Edge/etc. That’s fine as long as the page never gets so narrow as to let text wrap between bubbles—but, of course, it will, as we see in this screenshot.
For the right-floating images, it’s not so bad—but for the left floaters, things aren’t as nice. This particular situation is passably tolerable, but in a situation where just one or two words wrap under the bubble, it will look awful.
An obvious first step is to set some margins on the paragraphs so that they don’t wrap under the accompanying bubbles. For example:
.complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; }
The point here being, for all even-numbered child div
s (that aren’t the last child) in a complex-content context, add a 20% right margin; for the odd-numbered div
s, a similar left margin.
That’s pretty good in Chrome, with the circular float shapes, because the text wraps along the bubble and then pushes off at a sensible point. But in Firefox, which still has the boxy floats, it creates a displeasing stairstep effect.
On the flip side, increasing the margin to the point that the text all lines up in Firefox (33% margins) would mean that the float shape in Chrome would be mostly pointless, since the text would never flow down along the bottom half of the circles.
This is where @supports
came into play. By using @supports
to run a feature query, I could set the margins for all browsers to the 33%
needed when shapes aren’t supported, and then reduce it for browsers that do understand shapes. It goes something like this:
.complex-content div:nth-child(even):not(:last-child) p { margin-right: 33%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 33%; } @supports (shape-outside: circle()) { .complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; } }
With that, everything is fine in the two worlds. There are still a few things that could be tweaked, but overall, the effect is pleasing in browsers that support float chapes, and also those that don’t. The two experiences are shown in the following videos. (They don’t autoplay, so click at your leisure.)
Thanks to feature queries, as browsers like Firefox and MS Edge add support for float shapes, they’ll seamlessly get the experience that currently belongs only to Chrome and its bretheren. There’s no browser detection to adjust later, no hacks to clear out. There’s only silent progressive enhancement baked right into the CSS itself. It’s pretty much “style and forget.”
While an arguably minor enhancement, I really enjoyed the process of working with shapes and making them progressively and responsively enhanced. It’s a nice little illustration of how we can use advanced features of CSS right now, without the usual wait for widespread support. This is a general pattern that will see a lot more use as we start to make use of shapes, flexbox, grid, and more cutting-edge layout tools, and I’m glad to be able to offer this case study.
Further reading
If you’d like to know more about float shapes and feature queries, I can do little better than to recommend the following articles.
- CSS Shapes 101 by Sara Soueidan
- Using Feature Queries in CSS by Jen Simmons
A Redesign With CSS Shapes
Here at An Event Apart we recently refreshed the design of our “Why Should You Attend?” page, which had retained an older version of our site design and needed to be brought into alignment with the rest of the site. Along the way, we decided to enhance the page with some cutting-edge design techniques: non-rectangular float shapes and feature queries.
To be clear, we didn’t set out to create a Cutting Edge Technical Example™; rather, our designer (Mike Pick of Monkey Do) gave us a design, and we realized that his vision happened to align nicely with new CSS features that are coming into mainstream support. We were pleased enough with the results and the techniques that we decided to share them with the community.
Here are some excerpts from an earlier stage of the designs. The end-stage designs weren’t created as comps, so I can’t show their final form, but these are pretty close.
What interested me was the use of the circular images, which at one point we called “portholes” but which I came to think of as “bubbles.” As I prepared to implement the design in code, I thought back to the talk Jen Simmons has been giving throughout the year at An Event Apart. Specifically, I thought about CSS Shapes, and how I might be able to use them to let text flow along the circles’ edges—something like this.
This layout technique used to be sort of possible by using crude float hacks like Ragged Float and Sliced Sandbags, but now we have float shapes! We can define a circle, or even a polygon, that describes how text should flow past a floated element.
“Wait a minute,” you may be saying, “I haven’t heard about widespread support for Shapes!” Indeed, you have not. They’re currently supported only in the WebKit/Blink family—Chrome, Safari, and Opera. But that’s no problem: in other browsers, the text will flow past the boxy floats the same way it always has. The same way it does in the design comps, in fact.
The basic CSS looks something like this:
img.bubble.left { float: left; margin: 0 40px 0 0 ; shape-outside: circle(150px at 130px 130px); } img.bubble.right { float: right; margin: 0 0 0 40px; shape-outside: circle(150px at 170px 130px); }
Each of those bubble images, by the way, is intrinsically 260px wide by 260px tall. In wide views like desktops, they’re left to that size; at smaller widths, they’re scaled to 30% of the viewport’s width.
To understand the shape setup, look at the left-side bubbles. They’re 260×260, with an extra 40 pixels of right margin. That means the margin box (that is, the box described by the outer edge of the margins) is 300 pixels wide by 260 pixels tall, with the actual image filling the left side of that box.
This is why the circular shape is centered at the point 130px 130px
—it’s the midpoint of the image in question. So the circle is now centered on the image, and has a radius of 150px
. That means it extends 20 pixels beyond the visible outer edge of the circle, as shown here.
In order to center the circles on the right-side bubbles, the center point has to be shifted to 170px 130px
—traversing the 40-pixel left margin, and half the width of the image, to once again land on the center. The result is illustrated here, with annotations to show how each of the circles’ centerpoints are placed.
It’s worth examining that screenshot closely. For each image, the light blue box shows the element itself—the img
element. The light orange is the basic margin area, 40 pixels wide in each case. The purple circle shows the shape-outside
circle. Notice how the text flows into the orange area to come right up against the purple circle. That’s the effect of shape-outside
. Areas of the margin outside that shape, and even areas of the element’s content outside the shape, are available for normal-flow content to flow into.
The other thing to notice is the purple circle extending outside the margin area. This is misleading: any shape defined by shape-outside
is clipped at the edge of the element’s margin box. So if I were to increase the circle’s radius to, say, 400 pixels, it would cover half the page in Chrome’s inspector view, but the actual layout of text would be around the margin edges of the floated image—as if there were no shape at all. I’d really like to see Chrome show this by fading the parts of the shape that extend past the margin box. (Firefox and Edge should of course follow suit!)
At this point, things seem great; the text flows past circular float shapes in Chrome/Safari/Opera, and past the standard boxy margin boxes in Firefox/Edge/etc. That’s fine as long as the page never gets so narrow as to let text wrap between bubbles—but, of course, it will, as we see in this screenshot.
For the right-floating images, it’s not so bad—but for the left floaters, things aren’t as nice. This particular situation is passably tolerable, but in a situation where just one or two words wrap under the bubble, it will look awful.
An obvious first step is to set some margins on the paragraphs so that they don’t wrap under the accompanying bubbles. For example:
.complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; }
The point here being, for all even-numbered child div
s (that aren’t the last child) in a complex-content context, add a 20% right margin; for the odd-numbered div
s, a similar left margin.
That’s pretty good in Chrome, with the circular float shapes, because the text wraps along the bubble and then pushes off at a sensible point. But in Firefox, which still has the boxy floats, it creates a displeasing stairstep effect.
On the flip side, increasing the margin to the point that the text all lines up in Firefox (33% margins) would mean that the float shape in Chrome would be mostly pointless, since the text would never flow down along the bottom half of the circles.
This is where @supports
came into play. By using @supports
to run a feature query, I could set the margins for all browsers to the 33%
needed when shapes aren’t supported, and then reduce it for browsers that do understand shapes. It goes something like this:
.complex-content div:nth-child(even):not(:last-child) p { margin-right: 33%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 33%; } @supports (shape-outside: circle()) { .complex-content div:nth-child(even):not(:last-child) p { margin-right: 20%; } .complex-content div:nth-child(odd):not(:last-child) p { margin-left: 20%; } }
With that, everything is fine in the two worlds. There are still a few things that could be tweaked, but overall, the effect is pleasing in browsers that support float chapes, and also those that don’t. The two experiences are shown in the following videos. (They don’t autoplay, so click at your leisure.)
Thanks to feature queries, as browsers like Firefox and MS Edge add support for float shapes, they’ll seamlessly get the experience that currently belongs only to Chrome and its bretheren. There’s no browser detection to adjust later, no hacks to clear out. There’s only silent progressive enhancement baked right into the CSS itself. It’s pretty much “style and forget.”
While an arguably minor enhancement, I really enjoyed the process of working with shapes and making them progressively and responsively enhanced. It’s a nice little illustration of how we can use advanced features of CSS right now, without the usual wait for widespread support. This is a general pattern that will see a lot more use as we start to make use of shapes, flexbox, grid, and more cutting-edge layout tools, and I’m glad to be able to offer this case study.
Further reading
If you’d like to know more about float shapes and feature queries, I can do little better than to recommend the following articles.
- CSS Shapes 101 by Sara Soueidan
- Using Feature Queries in CSS by Jen Simmons
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
Sarah Parmenter
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
Brad Frost
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 ❤
Derek Featherstone
Jaimee Newberry
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
Ethan Marcotte
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
Gerry McGovern
Ten years: the final chapter
As part of our A Decade Apart celebration—commemorating our first ten years as a design and development conference—we asked people we know and love what they were doing professionally ten years ago, in 2006. We start with a special guest: Carl Thien, an Attendee Apart who’s been to ten shows in the past ten years! And if you missed parts one, two, or three, have a look back.
Carl Thien
In 2006, I attended my first An Event Apart conference. Several months earlier, I had attended Steven Pemberton’s Advanced CSS workshop at the Nielsen/Norman Group User Experience 2005 conference. I remember how pissed off people were that everything presented could not be used, as there was no browser support. I soaked it all up like a sponge.
I was coding for IE6, dissecting microformats, amazing friends with the easyclear float clearing technique, IE bug fixes, pure CSS layouts, and magical print stylesheets.
I worked at Cambridge MA’s Quantum Books, a technical bookstore in the MIT area, which used Miva Merchant as its e-commerce platform. I hacked Miva and created a pure CSS store, which earned Miva Merchant developer of the month. The timing was perfect, as I had heard about a social networking site for people over 50 that Jeff Taylor (founder of Monster) was starting with the goal “to be bigger than Google.” Under Reed Sturtevant, I became a member of the founding developer team at Eons—my first big break!
Jon Hicks
In 2006, I’d been freelancing for four years, but up until that point I’d been working from home. Things seemed to be going well enough to afford renting an office, but the local area was thin on the ground. I found a print design company that had a spare desk, and finally I had a place to go.
That year the focus was Microformats, a brilliantly simple way of making an API for personal data. But in 2016 the focus for me is SVG, particularly for icons. Due to lack of support in browsers, this was a rather esoteric format in 2006, but now I use it more than I use HTML. 2006 was also the year that Mike Davidson called me a “browser polygamist,” and the start of a fascination with browsers that led to my working at Opera.
Josh Clark
Ten years ago, I lived in Paris, where I designed websites and built a designer-friendly content management system. Back then, I believed that digital interfaces would always sit inside a big box on my desk. I naïvely assumed the web would always be tied to screens. Now I design digital interfaces for phones, living rooms, cars, clothing, jewelry, and asthma inhalers.
Ten years ago, my watch couldn’t tell me the weather. When I asked my living room to “turn on the lights,” it ignored me. I watched my favorite TV shows in agonizing weekly intervals, an hour at a time. When I needed a car to take me somewhere, I had to go into the street and wave my arm at yellow automobiles. Keeping in touch with friends required individual communication via phone call, email, or ink scratchings on a sheet of wood pulp. A tweet was the sound a bird made.
Ten years ago, my primary phone plugged into the wall. People left messages on a recording device which sat next to it. I occasionally typed text messages into a cell phone, using a keyboard labeled 0-9.
Ten years ago, there were two screens in my life: my PC and my TV. Now I have eight. When friends went out to dinner, none of us looked at our phones, ever. When I browsed the web, I didn’t see the same ad following me everywhere. There wasn’t a microphone in my living room allowing one of the world’s biggest companies to listen to everything I say. I didn’t feel beholden to my bracelet to walk a certain number of steps per day.
Technology has changed the whole fabric of our lives in just ten years. Through it all, An Event Apart has shined a bright light not only on the best techniques for crafting that technology, but the values that should shape it. Thank you, AEA, and happy birthday. You look just great.
Jason Fried
Ten years ago, Basecamp was starting to roll. We’d released it on February 5, 2004—same day as Facebook, coincidentally—and by 2006 we could tell we were really on to something. However, it was such early days in the software-as-a-service world that the biggest challenge we had was convincing people to trust their data with an online service.
Times have really changed. I think we had six or seven employees total at that time, and we’d also just released Getting Real, our first book, sharing some of our unorthodox work methods. Overall, the mid 2000s were especially exciting times. We had a good feeling about the future, but we had no idea what it would hold. We moved quickly, and we were changing minds. It was a great place to be.
Lea Verou
I was living in Greece, finishing my second year studying electrical engineering, and had realized I hated it. So I switched to computer science in 2007, which I loved. I had been dabbling in web development and graphic design for about a year, and had a few clients for whom I did some embarrassingly underpaid freelance work. I was also running a discussion forum with a friend that two years later would become a company, which I left in 2011.
At the time, I firmly believed that tables were the best option for layout, and would even argue with those who advocated for CSS layout. Way to be on the wrong side of history there! I did use CSS for everything else, though I didn’t really understand it very well. I was also into server-side coding, PHP & MySQL, and had just been starting to enjoy releasing scripts for others to use by writing vBulletin plugins for our forum and then releasing them on their mods site. It took about one to two more years to start being more interested in the frontend.
Looking back, it’s funny how much things have changed over the last 10 years, both in my life and for the web.
Luke Wroblewski
In 2006, I was thinking about forms. You know those things that you used to fill out on web browsers before bio-metrics became a thing and you could just thumb-print your way to purchases? Forms used to run on computers, which are really big versions of phones that people who sit at desks all day still use. Yeah, I didn’t think you’d remember. But I had just written a book on the topic of web forms and was off giving talks on how to fix them in order to reduce digital angst around the planet. Good thing no one has to suffer through those kinds of experiences ten years later. Right?
Samantha Warren
2006 was the year I first attended SXSW interactive, and I was working on the army.mil web team. We were knee-deep in a project to rebuild the entire website; the dev team was building a “from scratch” content management system, and we were redesigning the largest military website at the time to be completely standards-based—no tables! It was so much fun. We were a rag-tag group of super-enthusiastic young designers who genuinely wanted to make something great. We were all learning as we were making.
I came from a print design background, but this team taught me “how to code” and all the wonders of web design. My role included a little bit of everything from writing markup and making Photoshop mockups to creating content. One of the most memorable moments for me was getting to photograph Sgt. Leigh Ann Hester for a feature website I was working on. She is the first female soldier since World War II to receive the Silver Star and the only woman to get it for engaging in direct combat. I didn’t realize it at the time, but the entire experience was the opportunity of a lifetime.
Ethan Marcotte
When I started writing, I’d convinced myself 2006 was a fairly, well, normal year: I was finishing up my first year of freelancing, happily chipping away at some fun projects for a couple local clients, and for New York Magazine. I’d just finished contributing to my first web design book the year prior, and was contributing to A List Apart, Digital Web, and a few other publications.
But the more I think about it, 2006 was on the edge of a few, well, somethings. I was a year or so away from joining forces with my friends at Airbag Industries, Greg Storey and Ryan Irelan, though I didn’t know it; I was two or three years away from co-authoring the third edition of Designing With Web Standards, though I was clueless about that; and I was four years from coining the term “responsive web design,” though I didn’t know that, either. The year didn’t seem like much at the time, I suppose—but looking back, I’m grateful for it.
Eric Meyer
I was blogging a fair amount, as was the fashion, and amongst various travelogues and short observations, I chronicled the evolution of S5 and posted one of my most popular articles, about unitless line-heights. Even today, I see occasional links to it with comments like “MIND BLOWN”. It’s a useful reminder that whatever we think of as too basic to comment on, someone else is discovering for the very first time.
2006 was also the year I wrote a series of posts about how I thought the W3C should change itself. Very few of my recommendations came to fruition, but I like to think the community outreach ideas found a home in a least a few working groups.
Of course 2006 is the year AEA really got rolling, and the year that we decided to go from one-day shows to two-day conferences. It’s still a little dizzying to look back and realize how far we’ve come in ten years. And it’s the year our eldest daughter had her tonsils and adenoids surgically removed for the first time, a procedure that allowed her to finally speak without pain. Thanks to years of sign language, she jumped straight to nearly complete sentences, and has been highly articulate ever since.
Jeffrey Zeldman
2006 doesn’t seem forever ago until I remember that we were tracking IE7 bugs, worrying about the RSS feed validator, and viewing Drupal as an accessibility-and-web-standards-positive friendly platform, at the time. Pundits were claiming bad design was good for the web (just as some still do). Joe Clark was critiquing WCAG 2. “An Inconvenient Truth” was playing in theaters, and many folks were apparently surprised to learn that climate change was a thing.
I was writing the second edition of Designing With Web Standards. My daughter, who is about to turn twelve, was about to turn two. My dad suffered a heart attack. (Relax! Ten years later, he is still around and healthy.) A List Apart had just added a job board. “The revolution will be salaried,” we trumpeted.
Preparing for An Event Apart Atlanta, An Event Apart NYC, and An Event Apart Chicago (sponsored by Jewelboxing! RIP) consumed much of my time and energy. Attendees told us these were good shows, and they were, but you would not recognize them as AEA events today—they were much more homespun. “Hey, kids, let’s put on a show!” we used to joke. “My mom will sew the costumes and my dad will build the sets.” (It’s a quotation from a 1940s Andy Hardy movie, not a reflection of our personal views about gender roles.)
Jim Coudal, Jason Fried and I had just launched The Deck, an experiment in unobtrusive, discreet web advertising. Over the next ten years, the ad industry pointedly ignored our experiment, in favor of user tracking, popups, and other anti-patterns. Not entirely coincidentally, my studio had just redesigned the website of Advertising Age, the leading journal of the advertising profession.
Other sites we designed that year included Dictionary.com and Gnu Foods. We also worked on Ma.gnolia, a social bookmarking tool with well-thought-out features like Saved Copies (so you never lost a web page, even if it moved or went offline), Bookmark Ratings, Bookmark Privacy, and Groups. We designed the product for our client and developed many of its features. Rest in peace.
I was reading Adam Greenfield’s Everyware: The Dawning Age of Ubiquitous Computing, a delightfully written text that anticipated and suggested design rules and thinking for our present Internet of Things. It’s an fine book, and one I helped Adam bring to a good publisher. (Clearly, I was itching to break into publishing myself, which I would do with two partners a year or two afterwards.)
In short, it was a year like any other on this wonderful web of ours—full of sound and fury, true, but also rife with innovation and delight.
An Event Apart’s 2017 Conference Schedule
From the Gateway Arch to the Mile-High City, we proudly present our 2017 schedule, including two cities we’ve never visited before:
- St. Louis — January 30–February 1
- Seattle — April 3–5
- Boston — May 15–17
- Washington DC — July 10–12
- Chicago — August 28–30
- San Francisco — October 30–November 1
- Denver: Special Edition — December 11–13
We hope you’ll join us for three focused days of user experience, digital design, peer interaction, and a sneak peek at the future of our industry. The AEA store will open soon for registration, so get ready to grab a seat and be part of our biggest year yet!
For more insight into what An Event Apart is all about, enjoy our free full-length videos from previous events. And for your free monthly guide to the latest in design, development, and digital experiences, subscribe to The AEA Digest!
Articles, Links, and Tools From An Event Apart Chicago 2016
Community
An Event Apart Facebook
An Event Apart Google+
@aneventapart Twitter feed
Twitter Search: #aeachi (AEA Chicago hashtag)
A Groove Apart: Ten Years of AEA in Playlist Form
Attendee Write-ups
From Josh Tuck:
The Event Apart 2016 – Day 1
The Event Apart 2016 – Day 2
The Event Apart 2016 – Day 3
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
Yesenia Perez-Cruz
GQ Performance Case Study
Emotion & Design: Attractive things work better
Talk: Stefan Sagmeister “Beauty vs. Utility”
The Truth About Download Time
More Weight Doesn’t Mean More Wait
Walmart Performance Case Study
Obama for America Performance Case Study
Fast Enough
Designing Medium
7 Alternatives to Popular Web Typefaces for Better Performance
IBM “Good Design”
Creating Living Style Guides to Improve Performance
Jason Grigsby
Hololens Gestures
Leap Motion Oculus Rift tour
You cannot reliably detect a touch screen
Interactive touch laptop experiments
New Rule: Every Desktop Design Has To Go Finger-Friendly
jQuery Pointer Events Polyfill
Compass.js
Warby Parker Gyroscope Example
Lightsaber Escape Gyroscope Example
Generic Sensor API Draft
requestAutocomplete
Web Cam Toy
HTML Media Capture and getUserMedia
Web Speech API Demonstration
Web Speech API Translation Demonstration
Web Bluetooth
Physical Web
Open Device Labs
Autofill: What web devs should know, but don’t
Brad Frost
Stephanie Hay
Journey trailer
Animal crossing trailer
Ben & Jerry’s
FastCustomer
CashTapp
SecondLook
Capital One on Alexa
“Make it Stick” book
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
Mat Marquis
Bocoup
Official ECMAScript Conformance Test Suite
“GQ cut its load time by 80%… traffic and revenue jump: http://bit.ly/1MuofOB #perfmatters” —Ilya Grigorik
“13% of Americans own a smartphone but don’t have home broadband – up from 8% in 2013 http://pewrsr.ch/1mf2ZDX ” —Pew Research
Searching for Work in the Digital Era
U.S. Smartphone Use in 2015
“TIL @opera is bigger, by user count, than @twitter #wowzer #DOM15” —James Finlayson
Design for Real Life
loadcss: A function for loading CSS asynchronously
Mobile Analysis in PageSpeed Insights
Grunt wrapper for criticalcss
CSS Font Loading Module Level 3
fontfaceobserver: Font load events, simple, small and efficient
Critical Web Fonts
Responsive Images Now Landed In WordPress Core
grunt-perfbudget: Grunt task for Performance Budgeting
Calibre
Inclusive Web Development
Rachel Andrew
Grid By Example
List of resources for AEA Chicago
Derek Featherstone
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
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)
The Fault, Dear Brutus (or: Career Advice From a Cranky Old Man) by Jeffrey Zeldman—An Event Apart
“We have met the enemy, and he is us.” Many of the professional problems we blame on boneheaded bosses and clueless coworkers actually come from ourselves. How can we identify career woes we bring on ourselves, and learn to get out of our own way?
In this candid presentation captured live at An Event Apart Austin, AEA cofounder Jeffrey Zeldman shares personal and professional foibles over a long career that taught him the hard way how to make himself a better, and more valued designer, partner, and colleague. Give him 60 minutes of video viewing time, and he’ll share those secrets with you.
Designing and blogging since 1995, Jeffrey Zeldman is the publisher of A List Apart Magazine and A Book Apart, co-founder of An Event Apart, author of Designing With Web Standards, and founder and designer at studio.zeldman. Follow him on Twitter @zeldman.
Enjoy all the free videos in An Event Apart’s library. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest. Subscribers get exclusive access to our latest videos weeks before anyone else!
Everything you want in a website—and less: AEA and Microsoft Edge revive the 10k Apart contest
Could you build an entire website using less than 5 kilobytes? Not a paragraph or a dinky GIF image, mind you, but a complete, full-fledged, working website crafted with under 5k of stuff. Well, could you?
That was the question Stewart Butterfield posed to our industry back in 2000. He asked because, even back in those comparatively primitive times, conscientious designers and developers worried that the young web was already becoming bloated. Many of us believed that bandwidth abuse, which included overreliance on tricky scripting, was harmful to the accessibility, usability, and overall long-term health of the web. We worried and worried. And then one of us finally did something about it.
Stewart—who would later go on to do cool things like cofound Flickr and Slack—posed his 5k challenge in the form of a contest. And hundreds of designers and developers rose to it, creating amazing works of art using less than 5k and more than a little ingenuity. The contest was such a huge hit that Stewart repeated it in 2001 and 2002.
In 2010, An Event Apart and Microsoft revived the contest with an updated limit (10k) and a new name: the 10k Apart. True to its heritage, the 10k Apart once again urged designers and developers to get ultra-creative within an insanely low bandwidth constraint. Why the jump from 5k to 10k? Because competitors had to pull off a responsive design, maintain accessibility, and perform other dazzling feats unknown in the era of the original 5k contest. And, once again, the community outdid itself rising to the challenge.
If this sounds like your kind of challenge, have we got an announcement for you: as part of our tenth anniversary celebrations, AEA and Microsoft Edge are bringing back the 10k Apart contest—this time with even more new challenges. Visit our new contest website for complete details on contest rules and challenges.
As to why you’d want to compete (besides the love of a good challenge and the bragging rights), prizes include cash rewards for the top three winners, plus tickets to An Event Apart, the complete A Book Apart series, and copies of Aaron Gustafson’s brilliant Adaptive Web Design 2nd Edition, which Jeremy Keith and Jeffrey Zeldman consider the modern Bible of developing with progressive enhancement.
So what are you waiting for? Head over to the brand-spanking new contest website and start planning your victory speech.
Articles, Links, and Tools From An Event Apart DC 2016
Community
An Event Apart Facebook
An Event Apart Google+
@aneventapart Twitter feed
Twitter Search: #aeadc (AEA DC hashtag)
A Groove Apart: Ten Years of AEA in Playlist Form
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
Sarah Parmenter
May Day, May Day (zeldman.com)
A Fireside Chat with Jen Simmons & Jeffrey Zeldman
Facebook Audience Insights
Building a Visual Language: Behind the scenes of our new design system (Airbnb)
The Way We Build: How rethinking the Airbnb app changed the way we approach design
Voice & Tone: Success Message
Vox
Syria’s war: a 5-minute history
Serial
Frank Body
OO#2 – frank Body Scrub interview
Frank Body (frank_bod) on Instagram
Frank Body on Pinterest
Victoria (inthefrow) on Instagram
Gary Vaynerchuk (garyvee) on Instagram
marie forleo: B-School
studio.zeldman
Luke Wroblewski (lukew) on Twitter
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
Val Head
To Keep Up On Web Animation and Motion Design
To Read Up on Classic Animation Principles
The Illusions of Life Book
The Animator’s Survival Guide
TED-Ed video – The art of timing and spacing
Helpful research, examples, tools and articles
UI Animation and UX: A Not-So-Secret Friendship
Easings.net
Cubic-bezier.com
Google Web Fundamentals – Choosing the right easing
Motion & Meaning Ep 4: Playing Director with Choreography
IBM’s Machines in Motion
Meaningful Transitions
A Few Sources For Inspiration
Art of The Title
capptivate.co
All The Right Moves
Use Your Interface
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
Round specification
Firefox Nightly
Derek Featherstone
Kevin M. Hoffman
When planning meetings early in a larger process, think about agenda
content that manages assumptions. For example, if working with personas,
Indi Young has a great approach.
Drawings with simple diagrams with short phrases eliminate ambiguity and
surface critical decisions. Learn from the master, David Sibbett.
Afraid to draw in meetings? Learn the visual alphabet, and more, from Sunni Brown.
Storytelling is a powerful way to structure a presentation. Learn more
about good story structure from Donna Lichaw in her new book.
Is a Lean Coffee an amazing new drink? Nope. But it’s a great way to run a
meeting without preparing an agenda in advance.
Ever wonder why people are afraid of ideas that feel “too creative” in
meetings, even though they want you to come up with “game changers?” It’s
probably the creativity bias.
Meetings at the end of a process can be really tough and filled with blame.
That’s why ETSY makes them “blameless.”
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
Karen McGrane
Responsive versus adaptive is not a thing
Beyond Responsive Design: How to Optimize Your Website for Mobile Users
Moving Beyond the Responsive Web to the Adaptive Web
Beyond Responsive and Adaptive: Introducing “Adjustive” Web Design
2014 State of the Union for Mobile Web Performance
9 basic principles of responsive web design
Liquidapsive
Modern Design Tools: Adaptive Layouts
Responsive vs. Adaptive Design: Which Is Best for Publishers?
Mixing Responsive Design and Mobile Templates
Responsive Web Design Podcast: Codepen
A Mobile Responsive Landing Page Is Crushing Your Conversion Rate
Responsive Web Design Podcast: NPR
Responsive design is failing mobile UX
The State Of Mobile Apps For Retailers
2014 Mobile Behavior Report
Netflix, you don’t know diddly about context!
Analyzing The Value Of Responsive Web Design Can Be Messy
Embrace Responsive+ Web Design
Dave Rupert
Ethan Marcotte