Episode 13: Donovan Hutchinson on web animation tools & progressive enhancement
The force behind cssanimation.rocks joins the show to talk about how animation experiments can inform client work and why UI animation takes both designers and engineers to pull of well. We also dig into how animation plays into progressive enhancement.
Episode Links
Transcript
(music) Hi, and welcome to episode 3 of season 2 of motion and meaning. I’m your host, Val Head and on today’s show, Donovan Hutchinson joins us to talk about animation. That’s kind of what this whole podcast is about.
Donovan is the person behind the CSS animation Rocks website. He runs a Twitter account for that site where he tweets a lot. He’s a self described freelance front end person where he helps companies and startups with product and UI design and building things for the web. I thought that title was a pretty interesting one, so I started out by asking Donovan to just explain a little bit more about why he chose that title.
I can’t settle on one specific part and say, "I’m just a UI person, or just a designer." It’s nice to be involved in different parts of it, I think.
Right, there’s so much opportunity to touch so many different things. You specializing in front end doesn’t mean you’re really limited to one thing. That’s good. You mentioned that you’ve been doing this for quite some time. How has seeing all of these changes over the web industry, how does that make the current web design landscape look? Is it super exciting? Did the best time already happen or how do you think this fits in in the grand history of the web?
I wouldn’t say that the best time has happened. I think we’re getting to, continually we’re getting to a better time for the internet in terms of what can be done, the tools that are being created are continually improving and it’s becoming more diverse, more powerful. Looking back, things used to be quite a lot simpler for the webmaster. We used to be able to create a couple of files, throw them onto a web server, and that was basically the job. For getting into the industry, I’d say it’s pretty tough now and there’s a lot more choices to think about before you even start. Maybe that makes it more difficult.
It does seem more complicated, but you still can just put together a few flat files and have a website. You can still do that, but it’s not really what they’re thinking you’re going to do. That’s not the common definition of one.
True, but people can still jump in and make things. That’s what brilliant. You can go onto CodePen or something like that and you don’t have to then think about hosting or think about the back end and you can try ideas.
I love CodePen for that. It’s great to see people just trying out pretty much anything. On CodePen, there’s serious work things, like people trying to solve a work problem, layout issues or whatever else. Then there’s also all this experimentation which is what I love about it, that kind of collision of these two sides of what web designers and web developers like to do.
I see it a bit like what Dribble used to be for design in terms of a place you go for inspiration to get some ideas, then try them out.
You mentioned things like technology changing. In today’s web, with all the things that have changed over the years, how important do you think it is for web folks to understand how web animation works and how to use it?
I’ve been thinking a lot about how automation and web animation, it’s really part of design. Design is bigger than just how things look. It’s how they work. It’s the intent. It’s how people get something out of an experience of using an app for a website. In the context of that, I think it’s like topography or web layouts. It’s something that designers can use to deliver useful and hopefully very effective experience in the apps and websites they design. For that reason, I don’t really think it stops at just the designer to take consideration of web animation. In fact, I think being involved with the design process is something that’s important for everyone from the stakeholders through to the developers. In the same way, being aware of good ways to animate and the importance of getting the animations right, it’s very much a shared responsibility.
Right, I love the idea of animation being part of design. We have this whole array of tools that we use to create, to design a thing essentially and animation is just one of those things we can use, so it kind of requires equal attention to type and layout and everything else we use to say what we want to say with design. It is really true that especially I think for web animation and I’d love to hear your take on this too. I feel like web animation especially requires that joint effort between engineers and designers. Designers can’t just build it all in a vacuum and then just toss it over the fence and expect it to work out well. There’s the performance aspect and the interactive aspect of it requires both areas to be invested in it to do it right.
Absolutely, having worked on both sides of the fence on this in the past, I find that working as a developer, I could help designers understand what was possible in terms of what the browsers were getting good at doing. At the same time, designers could inspire me to build more impressive results too, so it works both directions and within the context of animation, the same applies. We can say that, "Yes, we can do all these great things now in the browser. The capabilities now have improved to the point where now we actually can use key frame animation confidently. We can put together rather complicated sequences of movements that maybe would have been impossible before. This whole world is opening up for the design process to make the most out of.
The browsers and how well they handle web animation has just changed so quickly. I feel like they’ve just gotten better and better at it. It almost feels like daily. I know it’s not that fast, but it seems like every time you go to try things out or start a new project, you realize that there’s just more browser tools. There’s better performance and they’re just really keeping up on this, which I think is what makes it so easy to use and the thing we can use is their support of it.
Absolutely, yeah. Also making use of good tools like Modernizer to make sure that it’s a consistent experience going back through the stack too, maybe some less powerful browsers or devices.
No matter what, there’s still that kind of older devices, older browsers. That’s the fun part of doing things on the web.
Sure, I wouldn’t let that get in the way of trying to do something that’s the best result we can build.
How do you handle that in terms of animation? Do you shoot for the big picture blue sky version of what most modern browsers can do and then kind of work backwards to make it supported in older browsers, or do you consider what older browsers can do as an initial limitation?
I’d say I’d start with the first one in terms of you want to really shoot for the moon in terms of what can be done in the concept before it’s being built, but when you approach building it, then you might start with the other approach which is to make it work in a way that people don’t feel, aren’t blocked from getting to the content or getting to the result they’re trying to achieve, then later on, the extra capabilities on top of that using something like Modernizer is an easy way to do that. An example recently was, I was designing a sequence that would show a model on the screen. It’s a fairly standard thing. You click buttons, it shows a box over the top of the UI, and initially to build it, it was just making it appear. Some of it in JavaScript to show it on the page, that’s the most basic implementation. The longer term goal for the design was to make it move into the screen with a bit more deliberate action that actually animated it nicely, and then when it was done, went back out from where it came. That’s done then by applying Modernizer so I know when there’s a clash in the HTML part of the HTML tag of CSS animation.
I can put within that the animation rules themselves, and then I know if a browser comes along that doesn’t have the capability to handle the animation, it just won’t even try.
Right, right, so you don’t ever end up in that situation of someone not being able to see it or having that behavior be broken because whatever’s in that model is probably a thing they want to read and/or interact with.
Yeah, you don’t want it to be invisible or missing from the experience. An example might be if there’s an animation that needs to start at capacity of 0, but be delayed for a little while. An easy approach is to set it initially as having a capacity of 0, but then that relies on the browser being able to do the animation that makes it visible.
Rather than just having that hang out there and have the thing be invisible for people that maybe don’t have the capability to see the animation, that’s wrapped within the CSS animation class itself on the right HTML tag, so that initially it has the capacity of 1, but if it can do animation, then you set the animation capacity to 0.
Right. You want to think of those initial states both when animation exists and can be executed, and when everything, when that can’t be handled at all. It’s like you want to make sure that things will still make sense. I think that’s sometimes a tough challenge to remember to think about that. You’re like, "I’ve got this great animation." What happens if it doesn’t work? You’re like, "Oh, oops." Especially that opacity thing. I think that gets a lot of people. You do it once, and then you learn, nope. Never set it ahead of time.
It’s an easy one. I can’t pretend I haven’t walked into that trap myself in the past.
Oh exactly. It’s like one of those mistakes maybe you have to do once, then you’re like, "Oh no. Nothing is on the page. It’s not there."
You were talking a little bit about how you build these animations like that modal example. When in your process do you start thinking about animation for various projects you work on? At what point are you like, "Now, we think about how animation is going to work here?"
It depends on the project, but I really try to make it a discussion point as early as possible during the process. Like you said, in the same way that you might think about the color choices of a brand, it can be useful to talk about what the character of the brand is, and how it’s portrayed or understood by people. Knowing that information can be useful when you think about how things might move in terms of selling the brand and marketing page might have elements that move in a certain way that say something about the brand itself. Having that discussion is very important. In an ideal world, we would start with fully fledged style guides and make sure we think about every possible condition and design for it. Often projects don’t quite go as smoothly as that. It goes in situations like that, being able to bring in a discussion as soon as possible regardless of having a fully fledged style guide in place. It’s still very important.
How do you start that discussion with clients about their brand that have nothing like a style guide? How do you tease that brand information out of them?
The same way as you might approach any other aspect of design, asking questions of how people are, the stakeholders consider their brand, ideally speaking with the customers as well and finding out what they think of the brand and what matters to them and it’s a part of the design process. I wouldn’t consider it separate from the design process.
That’s good. I like the idea of talking to people who actually interact with the brand too as opposed to just looking at how it’s perceived versus just what people are trying to project about their own product or company.
Absolutely. In the end, we’re trying to solve problems for the people that are going to be using the service, so it helps understand that point of view.
I like that you keep saying that it’s just part of the design kind of approach, all the rest of the design elements too, which I think is probably really key to how you can get things to all of your design elements whether it’s type or color, or animation. Having that same message, trying to say that same thing about the brand which I think is super smart.
Recently I was working with Tito on a redesign of their marketing website and just to give an example on this, the site itself had some good designs in place and part of my job was to build those and to bring them to life a bit more in the browser. We were able to talk about animation as part of that, and animation as being a big part of the design. We set out at the start to define some automations that would fit the voice of the brand. I set up a set of cubic Bezier curves that we then reused depending on the situation. One was for maybe quicker shuffle animations and there was a slower one for those that maybe needed to draw attention. I also set up some sets of key frames from basic fades and movements that would be consistent across the rest of the site. The intent was to make them like a reusable library of animation.
Right, like almost like an easing palette or an animation palette. These are the things we’re working with and here’s when we use each in particular one.
It’s more deliberate that way then deciding at the time that a certain element should move in a certain way where that might result in inconsistency across and serving a larger project.
Right, if you have a whole team of developers working on something, everyone might fade things in a different way, and then you’ve got this weird mix of fade ins when you could have one consistent one that would just have a consistent feel across it. It’s almost like with that approach, you’re kind of developing a style guide almost, without actually designing a style guide. You’re like covertly creating one.
In a way. It’s the beginnings of what could turn into a style guide as well, a palette of tools that you can use and reuse. I know certainly when it comes to animation, when we’re talking about voice and character, I try to stay away from the precepts when it comes to things like easing. I tend to start with the idea that we should have a type of movement that best fits the kind of movement that the brand wants through its UI and often ease out isn’t quite that. Starting off with a palette of cubic Beziers that are a bit more tweaked, maybe there’s a little more bounce in them or some sort of look or feel that fits better to the brand. It’s a good way to go.
Yeah, I like that approach a lot. I also encourage people to stay away from the defaults and just come up with your own, at the very least, come up with your own custom cubic Beziers that you use instead of those defaults. If you use those enough, over one animation or one transition, no one’s really going to notice, but used consistently across your whole site, suddenly that becomes your things. Even just that small decision can make such a powerful impact, which is one of my favorite things about design, just these little things. You pay attention to those details and the bigger picture changes. When you were dealing with these things, exploring what kind of easing would work best for the brand for Tito’s project, how did you present those to the client for discussion? Did you create prototypes, or were you just like, "Here’s what we’re doing"? Was there kind of some back and forth there of what they thought would fit their brand as well?
With Tito, I was lucky enough to have a client that was already starting from a pretty strong position in terms of a design and a clear understanding of what benefits that brings of having a consistent design that was like a language through the brand. I was pretty lucky that I was able to jump in and just start building it and show examples as I went. In terms of selling that to clients, maybe not all clients are quite in that position and I guess that’s where selling the benefits of design are so important. Maybe if you were to design a call to action on a page, you’d be expected to talk about the positioning, the size, the color choices and why these work together to help people sign up for service. In the same way, if you’re designing a list of items and something was being added to the list, animation can be something that makes it easy to see what part of the page has changed by drawing attention to it and these, like you say small benefits of a well articulated design can be as important as any of the big wow aspects of animation. Selling these many small benefits then can be a part of making sure that the overall impact is understood.
Right. I really like that idea of selling the design based on its purpose and what things are there to say and to guide the user through as opposed to-, really just talking about that bigger picture and how everything fits in as opposed to doing the whole, "We put the logo on the left because that’s where logos go." Being very obvious in that sense talking about bigger picture as opposed to those individual decisions.
I guess if you’ve taken time or been lucky enough to have the chance to speak to customers, then it makes it easier and again, you can couch those terms in terms of this is the benefit it brings to this group of customers and why they’ll find that valuable.
Right, that’s what’s important. Those business goals are what’s important to the people, the stakeholders. They want their brand to come across a certain way. They want to create things that their customers and their audience actually want so you can tie it directly to what that audience says they want or how they perceive things, that there’s that strength there in really showing how design effects these things. Doing that kind of stuff is always almost like the magic of design in a sense. You’re like, "Here’s how we can actually say, how we can create this message and convey it consistently in a way that people will understand it." It’s kind of like the power of design.
Do you have any go-to tools yourself that you had used, a prototype to try to convey that yourself?
Web projects, I like to try to keep things in the browser and on the web. I feel like that working in the same context it’s going to end up in makes it easier for people to see that progression and see how the final results might be before you get to a final polished thing. I’ve been using Code Pen a lot for creating these motion mock ups, or prototypes depending on how you want to think of them, to show people what things could look like and how they could be. For web stuff, I like to stick with that. Do you have any different tools you use for exploring these and showing them to clients?
Yeah, absolutely. It depends on the context. Sometimes it can be as simple as maybe just waving my hands around a bit to show the intent. When it comes to really delivering something, for Code Pen, I’d use that for more fidelity stuff. I’d use that to abstract the core of an animation from a design, and then that could be something that just delivers on that specific aspect. It doesn’t necessarily reflect the entire design, but water frame might show layouts, it might then just show how the animation works in isolation. For more high fidelity stuff, because I come from a technical background, I like using tools like Frame or JS.
t’s perhaps slightly heavy for some users. You need to know a bit more programming, it’s Java script. I’ve had some success with Principle as well. It’s pretty useful.
I did a project recently where I did a lot of framer prototypes as well and I was really impressed with how powerful it was, but one thing I ran into, and I’m curious if you ran into this too. For this particular project, the client wanted to use these framer prototypes for user testing, which was great, but we kind of ran into this problem where we were like, "Where does the prototype end in building the actual thing start?" We’re not going to build this thing in Framer, but some of these prototypes got so involved. We started wondering, "Are we putting too much time into these? Should we just be building the real thing?" Do you ever end up in that situation?
Yeah, definitely. It’s something to make the call on depending on how far into a project maybe we need to get or what we’re building, but the times I’ve found it most useful was when we were developing iOS applications and the time to get something properly into a phone would be longer than it would be to mock something up in Framer. Really, I guess whatever gets something visible quickest is the best approach for us that we’ve found, being able to just get things to the point of something that could be moved around. It was a bit of a crazy example, but I once just used a whiteboard and a marker, drew out each of the different screens, took a photo and imported each one into Principle and put together the animations in the most liquefied way possible. It got the point across.
Yeah, of just the goal being to articulate your idea in a way that the other people on your team or the stakeholders can also understand it. That’s the goal. It’s not so much the tool. It’s not like to show off your Framer chops. It’s to explain a thing in a way other people can understand it. I like that approach a lot especially the quickness of it. The faster you can get to that, the better and maybe that doesn’t mean excessive tools, or even what you described. You’re kind of using Principle at a very different way than I think it’s intended, but it works.
Yeah, it made the decision easier to make. People could understand what it was we were trying to build and it got us to the next step.
Yeah, that’s the main goal especially. You want to move that design process forward. It’s interesting how many of these prototyping tools are out there right now. I feel like now we’re kind of losing some because Pixate has decided they’re going away because they got acquired I guess, by Google last year or whenever that was. It seems like we have so many of these tools. The main reason for that I think is because we’re still figuring out how to use these things, like how to make them part of our design process. We have all these options and we can use whichever one in whichever way makes the most sense for us.
I guess it’s a bit of a Cambrian explosion of sorts of tools, maybe like what we’re having in the Java Script world as well where the options have just exploded and there are as many tools as there are opinions.
That is so true. It’s just like there’s another prototyping tool almost every day, there’s a new JavaScript library with a lot of opinions attached to it every day too.
One other thing I wanted to ask you about is, you wrote an article about using animation in your style guide and the importance of having animation in your style guide. Can you talk a bit about the benefits of documenting these animation decisions you make?
One of the biggest benefits is that it limits the opportunity for designs to diverge away from standards. By designing or building as we go, I had this happen to me in the past where I come up with ideas as I went along, things would evolve and I wouldn’t necessarily have the time to really go back to the start and make sure that everything fits that latest idea. In a sense then, it’s a way of grinding the design and the decisions into one place that can then be revisited and evolve with the design. For animation then, you can bring animation into that maybe through the use of video or through live examples or CSS, or Java Script. These aren’t meant to be a do it once and then use it as a rule going forward forever, but instead a central repository of ideas, ideally an evolving idea that can always change as the brand evolves.
That’s really key to any style guide really. It’s like, you can’t just like write it and be like, "It’s done. That is the style guide." No matter what, your goals as a business, your brand evolves of things you make evolve. It has to be this kind of living document, for lack of a better description.
Absolutely. It can be fun to make it as well, being able to have that freedom to explore ideas, one step aside from the actual live code or the real product that’s being worked on. It can be a place to have more experimentation.
Right now, that’s a really, really good point. If your goal is to document these things, your animation decisions as part of your style guide, it kind of forces you to examine them a little more closely and gives you that room or motivation to kind of experiment with them and maybe see if you have the best solutions or if there’s a better one or a better fit. In documenting it, you have to look at it more closely which can lead you to making more specific or better fitting decisions. I think it’s a great side benefit of style guides and putting animation in them.
Absolutely. Are there examples yourself that you’ve used with style guides on projects, or approaches to even make in the style guides that you’d find useful?
Yeah, I kind of do what you were describing of setting up this base system of easing and maybe set animations and maybe that becomes like a secret style guide that the only people that see it is me and the other folks, the other designers and developers and maybe it doesn’t become an official document, but I have worked with some other clients like Shopify and helping them define an actually style guide for themselves. I find that there’s kind of that spectrum. There’s the style guide parts benefit you as the person building and designing it to a certain extent and sometimes you can just kind of hold those and keep them to yourself to make your job easier and more consistent and not always have it be an official document. It’s still useful either way.
I guess that takes some of the pressure off having to deliver it as a product in itself.
It can be a little messier, have a little less selling to it, that there’s always that part of a style guide where you have to both establish why this is a good idea, kind of like the baseline of good design decisions and then also the brand personality on top of that. There’s that kind of balance of education and description. You can’t be just like, "Do this or else." That would not make for a good style guide, or at least not one anyone wants to use.
That’s the danger as well. You don’t want a style guide that people don’t use. It has to stay relevant.
You have to really create something that people want to use, and want to turn to and can easily find. That’s almost just as much a challenge about style guides as the actual content, is getting people to use them and making them easy and approachable in that sense. They are very useful, but they’re definitely not. You can’t make a style guide in 5 minutes and be like, "I’m done. Style guide, go." There’s a reason people talk about them so much. They’re involved and still very useful, but to do them right takes a little bit of work. One other thing I wanted to talk to you about is one project you’ve had going on for a couple of years now, CSS Animation Rocks. How long has it been going on?
I launched that one January last year, so I guess about 19 months or so.
What was your motivation to start this project and how’s it been going over the last nearly two years?
It’s a great project. I really enjoy building it. This is something I started. It came from my interest in blogging and sharing as I learned new things. Over the past maybe 5 or so years, I got into more the idea that as I learned something, I learn it better if I share the knowledge as I’m learning it. It’s almost like a practice thing to help me really understand by trying to explain it. I was blogging for a while on all sorts of topics, angular JS, note JS. I started making things with CSS really as an experiment to see what could be done and I made some fun examples and demos and found that it was very well received with anyone that I shared the posts with, so I decided to really focus it down on one subset of the whole stuff I was learning and really focus on CSS animation as a topic and see where that would go. To do that then, I registered cssanimation.rocks and set up a very basic little site there and made it rock themed and put in some posts and experiments that really reflected just my journey about learning CSS animation and the kinds of ideas like what maybe it could achieve. It really comes from the idea of, "I wonder if this is possible." I tried it and talked about what I did or didn’t achieve during the process.
I like that a lot. I like the idea of sharing as you go and the fact that sharing and writing about it actually helps your learning process as well, so it’s you get things from it as well as give things while you create these sorts of projects.
Absolutely, it’s been really well received and that’s massively encouraging in itself. It’s just great to get feedback from people or to have people actually pay money for a course is amazing. The last year and a half then, I’ve been gradually adding to the site. One of the directions I thought would be interesting is to extend it to as many languages as possible. There’s a great service called Native. I believe it’s get native. They provide a platform for people to submit partial or complete translations of articles and I’ve been using their service for well over a year now. It’s been translated into about a dozen languages and it’s just amazing to see the diversity of the site as well as being able to reach a much bigger audience than just people that can speak English.
Right, right. That’s a really good goal. I think we, especially as people who speak English as a first language, I think we often forget that the entire internet doesn’t and when we’re just putting out content in English, maybe we are leaving out some people who can’t actually learn from it because it’s just not a language they’re comfortable with. That’s a really great effort. I like it.
It’s fantastic to get the feedback as well. People have really gone to some effort to translate these articles. They end up more involved in the process as a result. There was fantastic back and forth there recently with a fellow called Mohammed from Yemen. He was part of the course. He did my CSS Animation 101 email course and as a result he got very excited about CSS Animation. He made some fantastic examples and I actually featured some of them in the newsletter and then he went on to help translate some articles into Arabic. I did not expect when I started a year and a half ago building the site that it would have such an impact and reach so many people.
Yeah, that’s great. It’s really rewarding to put this out there and then get that response and kind of have people jump in and help you share it even further than you could have on your own. That’s really great.
Even just personally in terms of the skills, I always like learning and learning new skills and I’ve always wondered, "Is there a big gap between the fun demos and the real life application of work in UI animation?"
How do we combine those two worlds? Make anything you want. There’s no rules to, client requires certain things.
I guess they could be inspiring. They could open up ideas, make people think about what the project can do. What I’ve learned really from creating the demos, I’ve run into browser quirks, performance issues, how to sculpt animations and how things move over time and these skills I find useful when it comes to building UI animation and without pushing things a bit, you might not know what really can be achieved and in the end, it’s all good practice. It’s good at practicing the specific skills that can then be applied to more practical situations.
Yeah, that’s a really good point. You might make an experimental CodePen that’s a crazy particle world with crazy things going on that may never come up. A particle system may never come up for your real day job, but the things you learn creating that, that’s kind of the basis of your knowledge that you’re going from no matter what the project at hand is. It’s a really good way to think about it. It really creates that value, that experimentation. It’s not just a throwaway things.
Exactly. There’s something to learn in every project.
Very, very true. I think that’s a good spot to end on, but before we go and close up this episode. Where can people find you online? Definitely tell us what we can find at CSS Animation Rocks.
Sure, my Twitter handle if people want to get in touch personally is donovanh and the website, cssanimation.rocks. It has articles and tutorials all about CSS animation and there’s a course there as well if you want to go further. It’s currently pay what you want, which means if you want to try it out for free, that’s absolutely great. There’s also a weekly newsletter on the site too. I’ve been collating interesting articles and interesting, inspiring examples of UI animation. Each week that goes out and you can sign up if you’d like to receive news around that too. That’s all at cssanimation.rocks.
Great, it’s a really good project. I’m really excited to see how this has grown and excited to see what you’re going to do with it next. Thanks so much for joining me. It was really, really great talking with you and I hope we get to chat again soon.
Thank you very much Val. It’s been great.
That’s it for episode 3. Be sure to follow Donovan on Twitter as donovanh and check out cssanimationrocks. I’ll link both of those in the show notes too of course because it’s a lot easier to find them that way.
If you want to learn more about making motion style guides and making animation a part of your own process, check out my book, Designing Interface Animation on Rosenfeld Media. It covers all that stuff and more and you can find it at designinginterfaceanimation.com.
You’ve been listening to season 2, episode 3 of motion and meaning with me, Val Head. You can find out more about the show at motionandmeaning.io as well as listen to all of last season’s episodes with myself and Cennydd Bowles and you can find those on the site or on iTunes. I’d love to hear your feedback on the show via Twitter. You can find me there as motionandmeaning and if you’re enjoying the show, give us a rating and review on iTunes so more people can find out about Motion and Meaning. See you again soon