I am struck by how some design agencies pack animation into websites. I see if I can discern a particular WordPress theme, or animation library that is behind the visual noise.
Cookie-cutter website animations consist of a combination of lazy-loading, fade-ins and easing techniques. These animation devices are sometimes also combined with parallax scrolling.
Too much animation is distracting. Especially when every element is animated in some way. No particular bit of content has priority. Constant distractions make it hard to focus on the content. Assembling websites with common Bootstrap layout patterns make them look cheap.
The “gee-whiz” factor quickly fades as users struggle to comprehend content through the fog of motion overload.
Now with automated systems and libraries this visual disease will become more ubiquitous. Managers will plop animated components into websites and every widget will jiggle about.
Excessive animation can trigger issues for people with certain disabilities. Users are now offered a preference function to limit website movement on browsers. The necessity of this preference setting is a clear sign of the hazards of animation overuse.
I like content-driven animation. Storytelling is a proper use for content-focused animation. Short animated clips offer content and meaning.
Programs like GreenSock and Three.js do amazing things. D3 information display JavaScripts help to make information transparent and easy to understand.
But animations should not be landing page gatekeepers. Don’t make users wait each time they visit a website. Users who come to fulfill a task grow tired of having to sit through the same sequence again and again.
Animation as an affordance can be useful to inform the user. Affordances tell users they have successfully started a function or completed a task. Animation affordances can be subtle. They do not have to be on every element. Limit affordance animations to assisting users to find destinations.
Contexts for good animation application
1. Animation used as a navigational affordance or user aid
2. Information-driven storytelling featured as a focal piece of content
Recently I took a deep dive into learning the in’s and out’s of a JavaScript program named Eleventy.
The first iteration of the Eleventy program was first published in late December, 2017. A certain core of web mavens on Twitter, whom I follow, noticed Eleventy and began to talk about it. I put a sustained effort into building a working Eleventy jamstack system.
Eleventy is a JavaScript method of templating websites. This type of JavaScript rendering is called jamstack. Jamstack refers to a component architecture that includes Javascript, APIs, and Markup. Programs like Eleventy stage static pages on the server, ready to send. Eleventy generates static HTML page output that can include functions and data.
As a comparison, WordPress compiles templates on the server and then builds pages on the client. WordPress, built with php, is not JavaScript. WordPress code can be bulky ugly and slow. Because WordPress crosses the Internet to build pages, WordPress has increased security risks.
A previous static website builder named Jekyll, built in Ruby, launched in 2008. It became popular as a way to build websites housed on Github, a social media website for sharing programs and code.
Developers sought ways to compile website templates using JavaScript instead. JavaScript templating gained interest many years ago. Programs like Mustache and Handlebars led the way. Popular modern frameworks such as Angular and React incorporate JavaScript templating.
I build my website using Gulp and Handlebars. Working with Eleventy feels similar to working with Gulp and Handlebars. Developers are doing amazing work with Eleventy.
Eleventy uses a plugin system that enables connection to programs such as React, Vue and APIs. People continue to build open-source components and APIs to add functionality.
Eleventy’s flexibility allows development of very large enterprise websites with complete design systems.
Doing work that I love reflects my passion.
I am attracted to this kind of web development. I like to know the code and have control over the means of production.
I like building complete website structures. Template scaffolding is valuable. It fits with building simple, effective CSS cascades and concise writing.
Eleventy is not on the radar of corporate recruiters. I have only seen one job description asking for Eleventy skills. Insider developers know about Eleventy and are using it.
Concept, design and creative development.
Build a core identity and message tailored to your target audience.
Craig Webb Art provides all aspects of New Business Communications Development including project management, creative development, copywriting and graphic design.
