Hold your visitor’s attention with animation

In recent years there has been a rise in micro-animations using the facilities available within your browser. As browsers become more powerful, and uniform in how they display a page, it's easier than ever to animate your page to keep your visitor's attention.
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Animation on the Internet has come to the fore over the last few years as the tools that are available to create web pages and your website browser have become more and more powerful.

Micro-Animations

Animation should not be added just for the sake of us its use is twofold the most important are micro-animations that gives the visitor with cues on what is important and what to do next. For example, you might have a button that can shake or grow in size as you hover over it to indicate that you can click on it to go somewhere else or complete a transaction.  

Large Animations

The second reason for having animation is to build a compelling experience for your visitor. These can be micro animations, or they can be large scale animations that provide an interesting visual to new pull you into the page. The trick is for the animation to make sense and to tell a story. Otherwise you could end up with chaos, and your visitor will get frustrated and head off somewhere else.

The example site on this page has been designed to showcase the services of a friendly, playful dog walking company. The initial animation is the most complicated at the top of the page, and becomes much simpler has the visitor scrolls down the page.

Remember the Mobile Devices

Visitors with mobile phones may not have the computing power to display the animation in the website’s header, and also cell phones can be all shapes and sizes, so a decision was made to replace the complicated animation with a static header image. The micro animations on the page have been kept there to provide are great user experience.  

Dog Walker’s Website

I went overboard on the dog walker’s website! But it was in a good cause to show how a page can be animated As you scroll down, a scene is acted out by the elements on the page that tells the story of the dog walker taking her client’s dogs out into the mountains. As always, the page has been checked in all of the major browsers and on Macs and Windows and other devices to make sure that it makes sense to as many of your visitors as possible. Internet Explorer is no longer a current browser

In Conclusion

Done properly, animation can greatly enhance your website’s sticking power and provide your visitor with a more interesting and cleaner experience.