How can a business website work well with less motion?

A customer in University Place opens a barbershop website to see the work and find the booking link. A moving gallery might suit the brand. That customer should also be able to browse still images and reach booking when their device asks for less motion.

A website’s character can come from its photographs, type, color, spacing, and words. Movement is another design decision. Give it a purpose, then decide what someone sees when that movement is reduced.

The business examples below are hypothetical design choices, not client results or claims that a particular website meets an accessibility standard.

Decide what the movement helps someone understand

List the animations on a page and describe what each one does for the visitor. A gallery transition might show that a different project has been selected. A progress indicator might explain that a request is being processed. A continuously moving background may simply set a mood.

Those purposes call for different treatments. A selected project still needs a name and an image when its transition is removed. A working form still needs a visible processing state. A decorative background can often become a still composition without changing the service information.

For a Tacoma service business, start with the customer’s task: understand the service, judge whether it fits, and find the next step. Keep that path available while deciding how much movement belongs around it.

Keep the same brand in the quieter version

Plan a reduced-motion presentation alongside the animated one. For the hypothetical barbershop, that could mean:

• Keep the same portrait photography, logo, type, and colors.
• Show the chosen haircut image in a stable frame, with its caption beside it.
• Use clearly named previous and next buttons instead of advancing the gallery automatically.
• Keep the booking action in the same understandable place.

A home-care service page might use a still family photograph instead of a panning background. A contractor’s project gallery could change images directly when a visitor selects a project, retaining the project name and description.

These are recommendations for a design brief. They are not measured conversion improvements. Their purpose is to preserve the information and the business’s visual identity when movement changes.

Review automatic movement separately from clicked transitions

The source and duration of motion matter. W3C’s Pause, Stop, Hide guidance explains WCAG 2.2.2, a Level A criterion. Automatically starting moving, blinking, or scrolling information that lasts more than five seconds and appears alongside other content needs a way to pause, stop, or hide it, unless essential. Auto-updating information has a separate requirement without that five-second exception.

That makes a looping text ticker a different review from a brief gallery transition someone deliberately starts. Stopping a ticker only while the pointer rests over it is not the persistent pause described in that guidance. Scrolling an effect into view also does not automatically make it an intentional activation.

Animation from Interactions, WCAG 2.3.3, addresses nonessential motion animation triggered by interaction. It is Level AAA. W3C describes ways to disable that movement, including honoring a reduced-motion preference. Parallax, where backgrounds move differently from foreground content, deserves attention here.

Keep those criteria distinct when discussing a site with a designer. A reduced-motion setting is useful, but it is not a blanket answer to every automatically moving or updating element.

Make sure the website actually uses the preference

The prefers-reduced-motion media feature lets a website detect the preference the device or browser makes available. The website still needs appropriate behavior in response. A setting on a phone does not guarantee that every effect on every site will change.

Ask the developer to check both styling and scripts. W3C’s CSS technique C39 and JavaScript technique SCR40 provide implementation examples. Removing a CSS transition alone will not necessarily stop a gallery or background drawn by JavaScript.

Specify the intended result in ordinary language. For example: “With reduced motion enabled, project names and images stay visible, the background is still, and selecting another project changes the image without a large slide or zoom.” Ask what happens if the preference changes while the page is open.

Review embedded booking tools and video players too. They may have their own behavior and controls. A quieter surrounding page does not establish how an outside widget behaves.

Keep flashes out of the visual brief

Flashing needs a separate review. WCAG 2.3.1, Three Flashes or Below Threshold, is a Level A criterion with defined flash thresholds. A pause button does not solve hazardous flashing that occurs before someone can use it.

For a business website brief, leave strobe effects out. Inspect animated logos, videos, and decorative layers as well as the main content. A motion preference check should not be presented as a flash-safety assessment.

Walk through the same customer task twice

Review the ordinary and reduced-motion presentations using the same task. For the barbershop example, the task is to inspect a service, browse the work, and reach the real booking destination.

1. Open the page with the device’s reduced-motion preference enabled. Follow the current instructions for that device rather than assuming every settings menu is identical.
2. Read the service details. Check that text and images are present without waiting for an entrance effect or scrolling through an extra animation sequence.
3. Open the menu and choose another page. Use the keyboard as well as the pointer, and follow the visible focus indicator.
4. Select another gallery image. Confirm the image, caption, and selected state agree after the change.
5. Reach the actual booking or inquiry action. For a form, review an error and use an approved test submission to confirm delivery with the business.
6. Repeat with the ordinary motion presentation, including on a phone. Check the moving background at different moments behind the text.

Record the browser, viewport or device, preference, and task. A phone-sized browser preview is useful evidence, but it should not be described as a physical-phone test. Our mobile website checklist covers more of the reading and navigation checks.

These steps examine motion and selected customer tasks. A full accessibility review also needs to consider other requirements, including structure, contrast, text alternatives, and form behavior.

Give the designer a decision they can implement

Choose one effect on your website and write down when it starts, what it communicates, and how it behaves with less motion. If it runs continuously, identify the applicable control or a still presentation. Name the information that must remain available either way.

Bring that note into a website design discussion alongside your brand materials. Umanifest’s graphic design approach considers the visual choices that can carry a business’s identity in a still layout too. The next useful step is a working comparison of the two presentations, followed by the same customer task in each.

The cover is Umanifest’s blue-and-gold brand illustration, not a photograph of a client project.