Is parallax scrolling bad for your website?
You may be very familiar with the term “parallax scrolling” or you might just be hearing it for the first time, regardless, if you’ve browsed the web in the past four years you’ve certainly encountered it at some point.
Parallax scrolling is the effect in which the background of the website moves at a different speed to the rest of the page. CSS code allows different layers of the webpage to move at different rates. Just like every level of Super Mario World or Walt Disney’s “MultiPlane Camera”.
Parallax scrolling was a web trend that began in 2013. It gained traction after The New York Times released multimedia Pulitzer Prize-winning piece “Snow Fall” in 2012. It was pretty cool and different, but then it began to turn up everywhere, even in places where it is almost inappropriate.
This raises the question, is parallax scrolling bad for your website?
I’ll be making reference to quotes and findings from two relevant articles:
User Testing Blog – Parallax Scrolling: Engaging or Annoying? – Jennifer Winter
Smashing Hub – 5 reasons why parallax scrolling is bad for your website – Ali Qayyum
Parallax scrolling increases load time
To achieve the effect of parallax scrolling, the website requires additional computation for the jquery script. Pages with heavy amounts of content will suffer from longer load times while the script calculates where everything should be placed. For users with slower internet speeds, a parallax scrolling website will be seen as crawling.
“Although many users didn’t notice this themselves, I could see they were missing large portions of the content because they were scrolling too fast through the page.”
It does not work on mobile devices
Mobile is now without a doubt the most popular device used to browse the internet. Why invest time and effort implementing parallax scrolling when it doesn’t work on mobile devices? Including this design will lower the performance rate of your website, and in turn, the success rate for your customers.
“Only one user was able to load the page of one site, but the scrolling was so difficult the user gave up before completing the test.”
Parallax scrolling pages can be confusing
“Nearly all the users found the sites to be confusing and had a hard time grasping the point of the site.”
Excessive scrolling can be irritating for users, especially when there is added animation interfering the users success rate of completing a task. Adding more “shiny” to your website will not solve poor navigation design. Anchor links solve this problem on longer pages, and this is a solution we have implemented on our subjects pages.
Conclusion
We certainly have some long pages on the University website, notably our recently launched subjects pages, and our own long-form stories. But we have refrained from implementing parallax scrolling onto either styles due to the accessibility risks.
It can be easy to slap some parallax scrolling onto your website and say “look at how fancy our website is.” But that’s not what websites are about. It’s important to stay up to date with the latest web-trends in terms of accessibility, but it is less important to latch onto the latest design trends where it is not necessary.