Optimize animations for lightweight and accessible websites

Using animations on websites can greatly enhance user experience and engagement, but it's essential to optimize them for performance data. Hungriness is that even a word? And carbon emissions and its impact on nature, as well as accessibility for all people?

And just a quick note before we dive into the episode, the next Green UX/UI Design group live cohort starts next week, where obviously animations are also one topic of it, so you can enroll if you want to take part of this 10 amazing week course together.

And I also opened a second course which is dedicated to eco friendly WordPress design. So if you're a WordPress designer, have a look in there. There's also a free eco-friendly WordPress quick guide for you to get the first steps into the topic. All of those links and topics are linked in the episode description for your easy access.

So now let's dive into the episode. First of all, welcome to the Green the Web Podcast. As usual, it's a podcast about ecologically and socially sustainable design. And I'm your host, Sandy Dähnert, a freelance UX/UI designer and researcher based in Cologne in Germany and the mind behind Green the Web.

And yes, animations are an absolutely amazing thing we have in web design, in UX, UI design that truly helps us in creating great user journeys, but there are also often overused, aren't really accessible for all, and are very energy inefficient. Some of them, not all of them, but often I see that and animations and interactions are supported by scripts, usually such as the well-known JavaScript, or also sometimes it's based on CSS and other formats and things. They increase the digital products weight and can even add to inaccessible design. This is like the big challenge and the problem behind animations. And I want to give you a little breakdown of how to effectively use and optimize animations for lightweight websites, as well as accessible websites. And before I get into the different topics of lightweight and accessible websites, there's two questions we always need to ask. Number one is do you really need animations? And if you're in my course, any course of mine, then you already know this question that I always like to ask do you really need it? So do you really need animations? Any kind of animations actually, and always question whether they are supporting your user's journey, your storytelling, your the product, decisions that need to be made, and so many other things on your website and your online shop and your application. Whatever you have, it often can work without it. We just put things in there because we can and because it's trendy and modern and because one of the team members said we should. So we put in animations, but is it actually supporting the user's journey? If an animation doesn't add value, it shouldn't be included in the digital product. It's as easy as that. Question number two that we always should ask is this animation purposeful? Really consider the purpose of each animation. Are you using it to provide feedback for the user, to guide users, or to simply add visual appeal? It is strongly connected to the first question of whether we really need animations. And yes, it also can be just visual appeal, but asking whether it's a purposeful visual appeal and ensure that every animation serves a clear purpose and enhances the user experience instead of taking it away or being harmful, or putting focus on things that aren't really necessary. And then I want to go deeper into those two topics that I wanted to discuss with you in this episode. First of all, the lightweight design, and then after that, the accessible design of animations. So in lightweight design, there is a couple of things we can have a look at first. One is choose the right type of animation. There is different types of animations that have varying levels of impact on performance, on data, on therefore energy usage and therefore carbon emissions and therefore impact on nature. You know the drill by now and CSS animations and transitions, as well as Lottie animations and SVG animations are generally lightweight and easy to optimize as well. Some are also compressible and stuff like that, while JavaScript based animations can be more resource intensive and also other formats that might be heavier, definitely stay away from any GIF formats as it's way too much data for too little quality, so choose the appropriate type of animations based on your needs and performance considerations. The second topic in lightweight design is optimized Performance to keep animations lightweight, focus on optimizing it. This includes minimizing the number of animated elements on a page, using hardware accelerated CSS animations, and avoiding complex animations that require excessive processing power. I'm not talking about like tiny micro animations, but like big animations that really need a lot of processing power with that reduce motion complexity. So complex animations with many moving parts and frequent changes can consume more energy. It's really simple. So simplify animations by reducing the number of animated elements, using fewer frames, and minimizing the complexity of those motion paths, and also the transitions that you're using. You can also use lazy loading. You might be familiar with that for especially images. We're talking a lot about that. And consider implementing lazy loading for animated elements as well that are not immediately visible on the screen because they are not in the viewport. Maybe they just need to be in there a little later, and this really helps reduce initial page load times and improves overall performance. And that means that once the user actually scrolls down to the part of the page where there is this specific animation or these specific animations, then they get loaded. This is lazy loading if you haven't heard of it before. One factor that you will also hear me talk about in the accessibility section in a second is to provide pause and control options. And this might seem just way too much work for small animations, but especially animations that are longer and also keep rotating. Always allow users to pause, stop, or control the playback of animations. We all know that from constantly reloading videos, for example, but also from animations. I've seen that a couple of times. Even just last week, I had one incident like that where I thought, oh, I really want to stop this animation because I was in one part of this website and I wanted to get deeper into the text content, but because this animation kept rotating and playing back and back and back, I just couldn't focus. It really bothered me. It really did. So I wished there would have been a pause and stop or any kind of control for this animation on this page, especially if they rotate from back to the beginning and so on. That also brings me to three really special factors, I would say. First one is don't show animations and interactions on low internet connection, like the big data hungry animations and interactions, because low internet connection means I have less data that can go back and forth in order to actually load this page. So animations can be quite big, so just don't load it on low internet connection. Another way to go is also to offer an on and off switch for animations like website white on and off switch, for example, the Sustainable Digital Design website and the Organic Agency website offers those kinds of switches, which is amazing for people and the planet to be able to say, hey, I don't need those animations in order to make this website more lightweight and less impactful on energy, carbon emissions, nature and stuff, as well as makes it easier for myself in order to read the things that I actually want to get into. And there is also one thing that, for example, Farshad Irani does on his website and also on the branch magazine it has been done, which is carbon aware animation displays and the content which can be animations, imagery, other things automatically changes depending on the user's location and grid intensity at this very moment, and if the user's grid intensity is very high, then the image quality gets reduced, JavaScript is reduced, animations are reduced, and really depends on how high or low your grid intensity is, which is something very special and unique I guess still, but maybe at some point we will all have that in our websites to offer. So a quick recap on the lightweight design of animations is really about the formats you're choosing, the type you're choosing, optimizing it for performance, having reduced motion complex city and animation complexity, transition complexity, stuff like that. Um, having lazy loading, providing pause and control options, and also being aware of low internet connection, having an on and off switch, or also carbon aware animation displays. Just to name a couple of the things that we can do with animations. There's obviously always more, but those are like the main things that I wanted to share with you today. And then the second chapter of this episode is optimizing animations for accessibility. And there is a couple of things that are similar to the lightweight design factors that I just talked about. And you can see how they are cooperating with each other and how one thing that we're doing can be beneficial for a couple of different aspects, like accessibility as well as lightweight design. So first of all, ensure that animated content is accessible to all users, including those with permanent but also with temporary and situational disabilities. I feel like when we talk about accessibility and disabilities, we often only talk about the permanent disabilities, but we all have been in some kind of situation where we couldn't interact with a website or online shop the way we wanted because of situational or temporary disabilities. So provide alternatives for users who may not be able, for example, to see or interact with animations such as having descriptive text or alternative content instead of animations. This ensures that users relying on screen readers or assistive technologies can understand the purpose and context of the animation that you're showing. Also consider motion sensitivity because some users may have conditions such as vestibular disorders that make them sensitive to motion or animation, provide options to display or reduce those motion effects for users who may find them uncomfortable or disorienting. Some users even find that, for example, animations or parallax scrolling cause nausea, and others find them plain distracting. Ensure that you keep all of your audience in mind. As I said, it doesn't have to be a permanent disability. It can also be just having a stressful day, and then you don't have the discipline to stay focused. And it doesn't even have to be a stressful day. It's just a day and then you're just distracted by animations. So consider all of that. Also, fast paced and splashing animations can trigger everyone, but especially people with impairments and cognitive challenges like people on the autism spectrum with Tourette's ADHD. There are so many other things, so stay away from fast paced and splashing animations. It's just brain busting and not good for anyone. I would say better use micro animations for example for little task celebrations and buttons, opening overlays, explanatory illustrations, stuff like that. And then two more things in the realm of accessibility. First is keyboard accessibility that I briefly touched up on. Ensure that animated elements are really keyboard accessible, meaning users can navigate to and interact with them using keyboard controls alone. This includes providing focus indicators ensuring that keyboard focus order is logical. Yes, this is actually a thing, and enabling keyboard shortcuts or controls for interacting with animations. And I've seen many, many websites where animations aren't easy to navigate to, to interact with, or also to navigate from, and then you're just stuck and blocked from the rest of the website. And last but not least, as I already mentioned in the first chapter in Lightweight Design, provide pause and control options. As I said, there's a lot of impact, positive impact, if we reduce that or if we provide those pause and control options that it has on lightweight design and energy efficient design. But it's also really helpful for users to have the flexibility to interact with animated content at their own pace, and can be especially helpful for users who may need more time to process information. As I said, to focus on maybe another part of the website and just keeps your users more mentally healthy if you provide those options. So to recap this second part of accessibility and accessible animations, it's really ensuring that your animated content is accessible for all users, providing alternatives in form of descriptive text or alternative content, considering motion sensitivity, having it all keyboard accessible, and also again, providing pause and control options. So what did you encounter in those different topics that I just talked about that you haven't had an eye on? Or maybe also that you're doing all of them already, or you have some additional advice on it. Just let me know on LinkedIn or Instagram at Green the Web, because I'm always happy to get your feedback, get your best practices that you have and can just share what's on your mind. Because I really want to make this a two side conversation. I really think that animations can be used in an accessible and lightweight way. We just need to be very purposeful with them, questioning whether we really need animations, introduce micro animations rather than like big ones, and if we include bigger ones, then ensuring that they are reduced and minimal and optimal and well optimized for mental health, accessibility and the impact on nature. So share what you have on your mind on Instagram, LinkedIn, or just send me an email if you have some additional thoughts on it. By following these guidelines, you can really effectively use and optimize animations to create lightweight and accessible websites, and that can actually provide a seamless user experience across also all devices and all platforms, because we often forget that as well.

And then subscribe to the Green the Web podcast. Again, this is season two of the podcast, so dive into the many other episodes that are already published. Rate the podcast. I'm really enjoying seeing your ratings on, especially Spotify and Apple Podcasts. It really means a lot to me and visit me on greentheweb.com, or via Instagram and LinkedIn. I'm happy to hear about your thoughts, to connect with you, to read from you, and then see you in the next episode.