Thursday, August 5 2021

  COMPUTER / CONSULTING / 101 

website

When Does Parallax Scrolling Work on Your Website?

website

When Does Parallax Scrolling Work on Your Website?

Share on facebook
Share on twitter
Share on linkedin
Share on email

When you decide to invest in professional web design services for your personal or business site, you may feel compelled to push the envelope in terms of creativity. After all, we’re two decades deep into the 21st century. Static pages are Jurassic, and people want to be entertained by your site.

This may explain the popularity of a user experience (UX) trend known as ‘parallax scrolling.’ It’s a technique that uses multiple layers in a 2D scene, moving them at different speeds to create a 3D illusion. It was a staple of vintage video games and now sees widespread use across various websites.

Campaigns by Nike and Apple have used parallax scrolling to great effect. The New York Times has published several articles integrating it into the format. There’s something about parallax scrolling that can enrich content and drive engagement, which is always desirable. Right? So why not see if you can harness its potential?

Common criticisms

Although parallax scrolling dates back to the gaming platforms of the 80s and 90s, it took some time to be adopted online. After all, the infrastructure of the internet is partly determined by the capabilities of end-user devices. It made little sense to deploy something that’s visually rich but never seems to finish loading.

These problems continue to be a common knock against the use of parallax scrolling. It may not always load quickly on slower connections, or render properly on mobile devices. Uneven load times may also result in animations unfolding too quickly across the screen. It can lead to users missing content or experiencing nausea.

Along with those issues, businesses may be wary of this trend for two more reasons.

First, parallax scrolling implies that not all of your content is immediately visible. This goes against the commonly held UX wisdom of front-loading your important content so that users can take it in right away. Instead, users must scroll along for more, and since not everyone will complete the journey, you risk losing out on conversions.

The second concern for businesses is related to SEO. Most often, parallax scrolling is deployed on single-page websites. This makes it harder to optimize them for indexing by search engines, which in turn hurts your ability to rank highly on the first page of search results.

website on devices

Finding workarounds

That said, those downsides are not necessarily fatal. Moz Blog, for instance, cites the SEO limitations of parallax scrolling websites as an implementation flaw, rather than something inherent to the technique itself.

One-page website architecture is definitely sub-optimal for SEO. A solution, then, is to create a multi-page architecture first and apply the parallax scrolling effects to individual SEO URLs. And if you want to keep loading times light, you can limit them to the homepage alone.

Another workaround involves using jQuery’s ‘pushState’ functionality. This allows a one-page architecture to be indexed into multiple sections. You retain the interactivity from a UX standpoint, while also making the page easier for machines to parse.

A designer’s perspective

A better way to consider using parallax scrolling on your website would be to adopt a designer’s way of thinking. Designers need to view the whole situation. That means not only considering the client’s vision but aligning it with the user’s needs and expectations.

The reason why parallax scrolling works so well for certain brands is that it resonates with their target audience. It enhances the product experience. When you want to showcase a premium product like Apple’s iPads, you can get away with a resource-intensive technique such as this. Your ideal consumer, after all, is someone who likely has a high-speed connection and devices to match.

Similar principles made the ‘Nike Better World’ campaign resonate when the brand used a parallax scrolling technique on their website. At its heart, that was conceived as a storytelling experience. The technique was chosen in service to the concept, rather than the other way around.

This is backed up by research. A 2013 study had participants rate two versions of a website, with parallax scrolling as the only difference, on aspects such as usability, enjoyment, fun, satisfaction, and visual appeal.

The result? No significant difference was found across the responses in all aspects other than ‘fun.’

This shouldn’t be surprising when you consider the technique’s roots in video games. Parallax scrolling is just one of many options in a designer’s toolbox. When deployed in the right context, with a great story to tell, and paired with any workarounds necessary, it will create a much more fun experience than a generic page.

Scroll to Top