6 Tips to write a good animated webpage for mobile devices

Everyone loves smart phones and tablets now, because we can enjoy our interested stuff everywhere, even on bed, on bus, or in bathroom. But that’s perhaps not a good situation for web developers right now. You must let your webpage be compatible to many different devices that would have different screen resolution, different operating system, and even different reading layout, your goal is to make sure that all your user could see A SAME PAGE. Looks terrible right? Come on, at least the Internet Explore has gone, we have the best time that never has been.

One of the most attractive stuff introduced by CSS3 is animation(including transition, they work alike). The animation style is so easy to use and many web developers have been looking forward to it, then add some animated elements into their pages. That’s a good sign, but not a perfect one. Why? Because if you use the animation style in a bad way, or use it too much, it might mess up your pages. Sometimes the performance would be roughly laggy, especially on mobile devices that don’t contain powerful chips. As developers, we of course hope this problems could never happen on our webpages. So how to do it? I have some tips for you.

1. DO NOT use javascript animation functions, DO use CSS3 animation styles

I admit that using javascript to animate element is also easy if you try some libraries like jQuery, but please use CSS to write animation. Not only most times CSS3 animation has better performance, javascript might bring other problems when one animation is running by it. One example is, if one element is animated by javascript, you can hardly get some original style values because they keep changing. But with CSS animation, the element’s original style values won’t be changed. Besides, more animation styles means less javascript code that you must write and the browser must run. In my opinion it always a good habit that write all styles by CSS, but not by javascript.

2. DO NOT change elements’ layout params too often, DO try transform animation if you can

Believe it or not, even CSS animation has bad performance sometimes, especially some layout params(like width, height, margin, etc) are changed. In most situations changing the values of these parameters forces the browser to render the whole page once again, so stop doing it. The better solution is elements’ transform styles. Throw the width and height, use scale; throw the margin and left&top, use translate. Transform styles have perfect rendering speed and never break the original layout, they could do much more than you think!

3. DO NOT add strong shadows on elements, DO use thin borders with opacity

Performance, still performance. Shadows are nice, I know it, but they slows the speed at the same time. In fact, some of the most popular design disciplines that focus on flat shapes tell us not to use shadows or just add a few. So the rules is, if you use shadows, don’t use too many; if you add shadow on a element, don’t make it too strong; if you want to animated one element that contains shadow, think about to use borders instead. Borders with transparent colour look comfortable as well, but can be rendered very quickly.

4. DO NOT include too many images in your page, DO include icon fonts instead

All professional web designers use icon fonts, so do it. You might noticed that Sony has already equipped 4K screen on their phones, so stop using the 256x256 image icons. Sometimes even SVG is not the best choice, but the icon fonts almost has no disadvantage. Look up the Font Awesome, they are really doing a great job.

Font Awesome Icons © http://themeflection.com/

5. DO NOT use “px”, DO use “%”, “vw”, “vh”

Responsive design, that’s the answer. Pixel is not correct any longer to describe the size, and people want a responsive webpage. When the window has been resized, or the devices has been changed, the page could keep the same styles and layout, but the text and information is always easy to read. It could only be done by relative parameters. So stay out of “px”, it’s out of time.

6. DO NOT add more than one animation on a element, DO add another animation to its parent

Yes, you could add many animation on one element, but then the element’s behaviour could be weird. Don’t forget you are writing HTML, adding a parent to a element is as easy as having a breath. My habit is that every elements in my page could only has one animation or transition, then if one behaviour is not same as I expected, I can easily find which one is the criminal.

Then, I just have one more, not a tip, but a suggestion, which is DO NOT use too many animations in your page! Animation is not always cool and awesome as we think, sometimes it will confuse your users and waste the battery of their devices. But comfortable transition effects will always be welcomed, you just need to use it in right way.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.