You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/posts/beware-of-burnout.md
-1Lines changed: 0 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,6 @@ description: "How to make meaningful change"
4
4
summary: "Activism is not a sprint to a finish; there is no finish, but rather a life-long marathon commitment to showing up every single day. Like running, it requires training and a strategy"
Copy file name to clipboardExpand all lines: src/posts/mistakes.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Compassionate action over empathy
3
-
description: "On Empathy"
4
-
summary: "Empathy gets thrown around a lot as the solution to the world's problems. I think we need to examine what empathy really is."
3
+
description: "I see a lot of chatter about βempathy.β In design and tech we frame nearly every human problem with it. The word has become a watery, vague catch-all. I think itβs a problem."
4
+
summary: "Empathy gets thrown around a lot as the solution to the world's problems. I think we need to examine what empathy really is. (It's not what you think.)"
Copy file name to clipboardExpand all lines: src/posts/prefers-reduced-motion.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: "prefers-reduced-motion: Taking a no-motion-first approach to animations"
3
3
description: Animations should be an enhancement, not critical to a user's understanding
4
-
summary: Use the prefers-reduced-motion media query to help guide your animation principles
4
+
summary: Animations should be an enhancement, not critical to a user's understanding. Use the prefers-reduced-motion media query to help guide your animation principles
5
5
date: 2021-03-18 12:56:13
6
6
tags:
7
7
- featured
@@ -75,7 +75,7 @@ When I collaborate with a designer/animator on an animation, I first ask, "Is th
75
75
76
76
### When the answer is "No"
77
77
78
-
More often than not, the answer is "no." (It might take some finessing of the conversation, so remember to emphasise that being **critical** isn't the same thing as being **important** or **nice** or **aesthetic**.) When conceived well, animations should be an _enhancement_ to an explanation.
78
+
More often than not, the answer is "no." (It might take some finessing of the conversation, so remember to emphasise that being **critical** isn't the same thing as being **important** or **nice** or **aesthetic**.) When conceived well, animations should be an *enhancement* to an explanation.
79
79
80
80
If the animation isn't critical, then my default code is to include `animation: none` for all of my animations. In CSS, it could look something like this:
81
81
@@ -89,7 +89,7 @@ If the animation isn't critical, then my default code is to include `animation:
89
89
}
90
90
```
91
91
92
-
Another way it could look is to reverse our thought process. Instead of defaulting to _adding_ animations universally, we can instead _only add_ them for people who have designated `no-preference`.
92
+
Another way it could look is to reverse our thought process. Instead of defaulting to *adding* animations universally, we can instead *only add* them for people who have designated `no-preference`.
93
93
94
94
The code could look something like this:
95
95
@@ -124,7 +124,7 @@ Framer Motion sets a good tone for accessibilty in documentation with their [Gui
124
124
125
125
### Animation-specific stylesheet
126
126
127
-
Since we've all agreed that our animations aren't critical to perceiving our page (winky face), we can take that one step further and _only_ serve our users CSS if they are cool with `prefers-reduced-motion: no-preference`.
127
+
Since we've all agreed that our animations aren't critical to perceiving our page (winky face), we can take that one step further and *only* serve our users CSS if they are cool with `prefers-reduced-motion: no-preference`.
128
128
129
129
Here's what you might include in your HTML file in the `<head>` tag:
130
130
@@ -156,13 +156,13 @@ I also ranked these questions in level of spiciness for ~~no other reason than m
156
156
- What other ways can we serve up the critical animation? (e.g., through written text, through a static diagram, etc) πΆπΆ
157
157
- If the animation can't load for someone or they can't see it, what was your plan? πΆπΆπΆ
158
158
159
-
Most of the time, I'm negotiating a way to get information to be served in _more_ ways. Changing the answer from "yes, this animation is critical to understanding" to "no, this animation is not critical but an enhancement." Remember, accessibility means giving the users as many, diversified options as possible, not determining which option works best for them.
159
+
Most of the time, I'm negotiating a way to get information to be served in *more* ways. Changing the answer from "yes, this animation is critical to understanding" to "no, this animation is not critical but an enhancement." Remember, accessibility means giving the users as many, diversified options as possible, not determining which option works best for them.
160
160
161
161
## Beyond CSS animations
162
162
163
163
### Auto-playing video
164
164
165
-
Auto-playing anything is cruel to both users who experience vestibular disorders _and_ neurodivergent users for whom autoplay can cause major focus issues.
165
+
Auto-playing anything is cruel to both users who experience vestibular disorders *and* neurodivergent users for whom autoplay can cause major focus issues.
166
166
167
167
CSS-tricks covers this well with [Reduced motion picture technique: take two](https://css-tricks.com/reduced-motion-picture-technique-take-two/).
0 commit comments