There’s a million ways to make content look good. Ideally, it’ll be able to shine because it’s well-written, witty and interesting…but we all know that’s not always the case. Or even all that often. So instead, it needs a little help with grabbing the customer’s or visitor’s attention.
Fortunately for the clients, web designers tend to be good at that. Fancy colours, layouts and graphics – they all work, but they have one ‘flaw’ – they are static. Good for a solid foundation, static websites will only get you so far. Users are used to motion, animation and effects on the web by now, and have come to expect it in some regards.
Lucky you, because employing them is easier than you might think. While you can, of course, do simple animations with key frames and CSS (which depending on the size and impact of your project can be the perfect solution!), but if you want to go the extra mile towards something really special, you need something else.
Seems tempting right? Less code, same effect. Here’s an example of why not.
In this, the heart will enlarge on hover and stop pulsing. There’s a CSS and a JS version. As you’ll be able to see, both work. Both look fine. Until you hover. Then you’ll notice a huge difference: The CSS version jumps. It moves to a particular size mid-pulse before it enlarges. The JS completes the animation before it does the enlarging bit, thereby ensuring smooth transitions.
Now, this may seem like a minor thing, but imagine if you don’t have one element like that, but ten, and they ALL jump each time they are hovered over or clicked on. Creates a much less nice picture, doesn’t it?
If you don’t want to or can’t include content like that, consider a fixed box as part of the layout, and place moving content in it. This could be interactive, something like pause on hover, or maybe start on click. You could have a bar across the top that rotates lines of text or images.
You are reading the DebugMe blog. DebugMe supports the design, development and testing phase of web sites and web applications by enabling visual feedback.
Register now to have free access to the tool for life
Don’t overdo it – you don’t want to overload the page with moving elements. Try instead to use this sort of thing to reduce the amount of content that is visible at any given point in time. Generally, people will prefer to see a paragraph rather than a complete block of text.
If possible, try to give the user some control over the speed of things, though. This could be, for example, a pause button or a next button. A fairly small addition, this still makes a lot of difference, as it still lets people read at their own speed, whether that is slower or faster than the default speed that you set. As far as that goes, when in doubt, go slower. Not too slow – you don’t want the visitors to get bored and leave the site prematurely. The easiest way to make up for this problem is to add manual controls.
The makers of DebugMe hope that you like this post and would love it if you follow us on Twitter. We are tweeting about web design, UI/UX and development related topics multiple times a day. DebugMe is an issue tracking, project management and screenshot tool for every website project. Get visual feedback right away and solve front-end problems faster. Try it now for free.