Animation Trend: Moving Backgrounds on Web Designs

Web design concept image showing multiple websites and the animation trend used to enhance the visual experience

In 1999, Jakob Nielsen listed scrolling text and looping animation as one of the top ten mistakes of web design. It seems that these days, we’ve moved on from that thought. We no longer deem looping animation as a usability failure. Of course, as the web evolves, so do websites.

The continuous pursuit to gain readership and interest in your content and brand is daunting. Web designers and Digital Marketers alike are constantly exploring new ideas and techniques to help the website or blog stand out in a very crowded internet. These new trends in website design give rise to some of the coolest website gadgets. They offer a new dimension to the same old, same old website experience.  We see websites beginning to embrace interactive buttons, menus, lightboxes, expanders, sliders, galleries, smart forms and even the return of ridiculously cool gradients.

Mobile-Friendly Considerations

Web designer working on her laptop with WEB DESIGN showing on screen

Websites that want to employ these cool features must be careful with how they use them. These features carry extra baggage slowing page speed and hinder the user experience…especially on mobile. Heed our advice and keep the following tips in mind. With Google’s “Mobile First Indexing” on every agency’s mind, you would be wise to consider the overall impact to your page loading times while providing for the best user experience possible.

Pro Tip: Visually-appealing web design contributes a lot to a website by capturing the users’ attention.

When developing a cutting-edge website, it’s essential to imagine what it will look like and function on a mobile phone…landscape and portrait, please. Mobile operating systems can now support plenty of features. However, mobile devices still require special consideration when displaying these interactive features. Example: video backgrounds or anything else that’s file size or resource heavy will slow the mobile experience.

Instead of using video backgrounds, consider every mode of engagement in a different way. You might try swapping for simple background and conserving the video download bandwidth for the mobile user. When using enhanced functionality such as sliders, be sure your slider technology allows the user to advance with a mouse click on the desktop and gracefully switches to a finger swipe on mobile. These days, your website theme comes standard with Slider Revolution or similar.

Clearly Stated Text

It’s essential that you know how to clearly place text on top of a background visual asset. Select colors that combine well with the entire website design scheme. Additionally, it should perfectly legible while on top of moving or fixed imagery. If you can’t find a color that can fit your description, use a text shadow box to separate writing from the moving background or use a semi-transparent background color to provide additional contrast while not fully obstructing the visual below.

The background animation trend can be entertaining and also be engaging for users, but it will be risky for websites that don’t incorporate it wisely to the benefit of the reader. Websites must incorporate a good balance between stirring interest and reducing annoyance to reach their target audience.

Final Thoughts

REMEMBER: the focus of any good web page or blog post should be the content and not the design. Your design should rest quietly in the abstract or in the background adding subtle influence to your content. The design and imagery should also compliment the emotion of the copy as well invoke the proper mood for the reader to properly relate to the subject matter. Create content with your readership in mind while considering access to your content on a smaller device ie – making use of clean fonts that are easily legible on mobile. Use this as good practice and your readers will thank you.

If you need help with your website or blog, get in touch with us at