The fourth dimension of application design: crucial but often forgotten

When we talk about web (or app) design, we often think in two or three dimensions. A great design is a design that has the right colors, typography, layout, whitespace and so on. But what about the fourth dimension? How does the design change over time? How does it behave and animate? How does it feel?

If you google ‘front-end performance’, you get a whole bunch of tricks and techniques for compressing your images, stylesheets and scrips. You can read about how to reduce the number of server requests by using base64-encoding to embed images directly into your stylesheets, how minification can reduce the size of your application’s files and how to combine multiple images into a single sprite. As you might know – the time it takes to load a webpage is crucial when it comes to keeping your visitors happy but your web app’s performance after the initial page load is perhaps just as important (if not more important).

Improving your app’s performance isn’t that hard. You can achieve great results by simply changing the CSS property you animate. To back this up I’m going to demonstrate an easy way to improve your web app’s animation performance using plain CSS. I’ll use a very common web component for this example: the all-known image carousel.

Please note: the CSS I’ll be demonstrating is part of the CSS3 specification and is therefor not supported by older browsers (< IE9). You could (and should) detect support for CSS3 transforms using a tool like Modernizr and write a Javascript/jQuery fallback in case it’s not supported. The old way -
Since jQuery came around, animating any giving element has been a piece of cake. For example when animating a carousel, one can simply animate the margin-left or left property of the container containing the slides. Check out this JSfiddle to see it in action.

The newer way –
When CSS3 and HTML5 became populair, CSS transitions were the next great thing.
You would animate your element by changing a class or modifying a property directly.

The right way –
However when you use the CSS3 translate property, your GPU will provide you with better animations. Paul Irish wrote provides a good explaination: “The top/left has very large time to paint each frame, which results in a choppier transition. […[ The translate version, on the other hand, gets the laptop element elevated onto it’s own layer on the GPU (called a RenderLayer). Now that it sits on its own layer, any 2D transform, 3D transform, or opacity changes can happen purely on the GPU which will stay extremely fast and still get us quick frame rates.”

Of course the carousel is just a simple way to demonstrate the CSS behind animations using the transform property rather than the left property. You probably won’t see much difference when comparing these different demos since there’s not a lot going on inside these fiddles. But what happens when we bulk things up a bit? In case I didn’t manage to convince you of the importance and awesomeness of hardware accelerated CSS animations, prepare to be amazed by the difference between these demos:

Animating using pos. absolute:
Animating using transform:

Be sure to add lots of Macbooks. Note that it’s the only difference between the two fiddles is the property that is being animated.

There are numerous way to benchmark and improve your app’s performance. Here’s a small list of resources that I found to be most helpful:

Paul Irish – core contributor of Bower, Yeoman, jQuery, Modernizr and more – is a developer advocate for Google Chrome and is an expert when it comes to front end development

Addi Osmani’s blog is great source of front-end knowledge. This article on making a site jank-free in particular is well-worth the visit

This video (also by Paul Irish) on benchmarking and improving front-end performance using Google Chrome Dev Tools

Share your thoughts

Leave a Reply