Falling Snow and Other Holiday Effects

Snow across the order form

This week, snow is falling across a good many small business websites. Some have coloured lights blinking along the header, and a few play a carol when the home page opens.

Each effect took minutes to add, usually through a plugin or a snippet of code, by someone who wanted the site to feel festive.

The snow falls over the opening hours, the gift card offer and the order form, and it keeps falling until the visitor leaves.

Decorating is not the problem. Decoration that moves, blinks or makes noise while people are trying to get something done is.

What the effects actually do

• Falling snow redraws dozens of flakes many times a second, on every page.
• Blinking lights pull the eye away from the words beside them.
• Holiday music starts before the visitor has chosen to hear anything.
• Sparkle trails follow the pointer and get in the way of clicking.
• Flying sleighs cross the page every so often, over whatever is there.

The first is the most common and the most expensive. A snow script works the whole time the page is open, which on an older phone means jerky scrolling, a warm handset and a draining battery.

Motion and the people it bothers

For some visitors, movement on the screen is more than a distraction. People with vestibular conditions, migraines or recent concussions can feel dizzy or sick when the background moves while they read.

WCAG 2.0, the main accessibility guidelines, asks for a way to pause, stop or hide any movement that starts by itself, runs longer than five seconds and sits beside other content. Few snow scripts offer one.

Safari on Apple devices can already tell a page that its visitor has asked for reduced motion. A carefully built effect can listen and stay still. Most holiday scripts do not.

Flashing is a different risk

Blinking lights deserve their own warning. For people with photosensitive epilepsy, rapid flashing can bring on a seizure.

WCAG 2.0 sets a limit of three flashes in any one-second period, with an exception for flashes too small or faint to matter. Large, bright red flashes are treated as the most dangerous.

Light strings are often built from free animated graphics, and nobody times the blinks. If one flashes quickly, replace it with a still image.

Music nobody asked for

A carol that starts by itself arrives at the worst moments: in an open-plan office, in a waiting room, late at night beside someone asleep.

For a visitor using a screen reader, which reads the page aloud, music underneath can make the site unusable.

WCAG 2.0 asks that any sound playing automatically for more than three seconds can be paused, stopped or turned down on its own.

Phones mostly refuse to play sound until the visitor taps something. There, the music script loads, adds weight and does nothing at all.

A worked example

A small sake brewery with a tasting room in an industrial area sells gift sets in December: a bottle, two cups and a card in a box. Most are ordered on the website for pickup.

In late November a staff member installed a holiday plugin. It added snow on every page, a row of blinking lights across the header and a music player that began a carol when the home page opened.

Within a week the owner heard three things. The gift set page scrolled in jerks on his own older phone. A regular said the lights gave her a headache.

And a customer who uses a screen reader phoned in her order, because the music drowned out her screen reader on the home page.

The plugin came out that afternoon. In its place went a still photograph of the gift sets on the tasting room bar, taken by staff, and a line under the header with holiday hours and the last pickup date.

The removal date for both, January 2, went into the owner's calendar, and the plugin was deleted rather than switched off.

Touches that stay out of the way

A photograph of your own premises or products, dressed for December, says more than any animation and costs one image.

A line of useful holiday information near the top, such as hours, last order dates and closures, is festive because of what it says.

A colour accent or a small still illustration adds the season without moving. Keep text off busy pictures.

Never on forms

Some pages should stay plain all year: checkout, booking, quote and contact forms, anything a customer has to fill in.

An effect there competes with the one task that matters.

Most holiday plugins apply themselves to every page by default. If one stays, limit it to the home page and test the forms on a phone afterwards.

Where the code comes from

Snow effects are scripts, and free ones are often loaded from someone else's server, so whoever controls that server decides what runs on your site for as long as the line stays in.

A plugin installed for one December also needs updates, and tends to sit forgotten and unpatched for the other eleven months.

Ask whoever looks after the site to add seasonal touches in a way they can remove cleanly, and to delete them afterwards rather than deactivate them.

A date to take it down

Holiday effects go up in late November and come down whenever someone notices. In January, falling snow tells visitors nobody is watching the site.

Choose the removal date when the effect goes up, and give it an owner. The first working day of January suits most businesses; for one running a Boxing Week sale, the day after it ends.

The counter-case

A business that sells the season itself, such as a Christmas tree lot or a holiday market, can go further. Even there, effects should stop on their own and leave forms alone.

A slow, light snowfall confined to the home page header, which stops after a few seconds and respects reduced motion, is a different thing from flakes over every page all month.

But for most businesses the advice holds: decorate with still images and useful information, keep movement off forms, and set the removal date before anything goes up.

Today

1. Open the site on an older phone.
2. Note every effect that moves, blinks or plays.
3. Remove anything that flashes or plays sound.
4. Keep moving effects off forms and checkout.
5. Swap animation for a seasonal photograph.
6. Add one line with holiday hours.
7. Put the removal date in a calendar.

Step three matters most. Flashing and sound are the two effects that can actually harm a visitor, and neither adds anything a still picture cannot.

Checking a design on the phones customers actually carry is the same habit as in the iPhone X screen and websites.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.