Problem
Internet Explorer 8—a slow, outdated browser—is dying in popularity. But Internet
Explorer 9, its successor, is still widely used outside of the Americas. Further, older
Android smartphones running Android 2.3.x and below, which are slow relative to the
latest-generation Android and iOS devices, also remain tremendously popular. Out of
every ten users to your site, expect up to three of them to fall into one of these two groups
(depending on the type of users your app attracts). Accordingly, if your site is rich in
animation and other UI interactions, assume it will perform especially poorly for up to a
third of your users.
Solution
There are two approaches to addressing the performance issue raised by weaker devices:
either broadly reduce the occurrence of animations across your entire site, or reduce them
exclusively for the weaker devices. The former is a ultimately a product decision, but the
latter is a simple technical decision that is easily implemented if you’re using the global
animation multiplier technique (or Velocity’s equivalent mock feature) explained in the
Chapter 4, “Animation Workflow.” The global multiplier technique lets you dynamically
alter the timing of animations across your entire site by setting a single variable. The trick
then—whenever a weak browser is detected—is to set the multiplier to 0 (or set
$.Velocity.mock to true) so that all of a page’s animations complete within a
single animation tick (less than 16ms):
Click here to view code image
// Cause all animations to complete immediately
$.Velocity.mock = true;
The result of this technique is that weaker devices experience UI animations that
degrade so that instant style changes replace your animated transition. The benefits are
significant: your UI will perform noticeably more smoothly without resource-intensive
animations occurring on your page. While this technique is undoubtedly destructive (it
compromises your motion design intentions), an improvement in usability is always worth
a reduction in elegance. After all, users visit your app to accomplish specific goals, not to
admire how clever your UI work is. Never let animations get in the way of user intentions.
If you’re still irked by the notion of stripping animations from your UI, keep in mind
that users on weaker devices are accustomed to websites behaving slowly for them. So, if
your site bucks the trend in a constructive way, they’ll be especially delighted by it and
will be more likely to continue using it.