If you have been keeping up with what is trending in Web Design this year, one word (and many nicknames) keeps topping the list: parallax. For those unfamiliar with it, parallax is the shortened moniker for a scrolling technique implemented on a website. What started in video games has turned into the must-have feature for a new website. But, is parallax scrolling really all it’s cracked up to be?
What is Parallax Scrolling?
According to our Senior UX Designer, Fallon, parallax scrolling “creates not only movement, but a depth previously unachievable on the web. ” How does it move the way it does, though? Simply put, this visual “movement” comes from multiple scrolling speeds, wherein the background is scrolling much slower than elements in the foreground… but in parallel. Ready to see parallax in action? emagine redesigned ECRS’s website in late 2014. (Go ahead and play, I’ll wait…) Fun, right? Now let’s get down to nitty gritty.
Besides the obvious ‘fun’ factor, parallax scrolling can be beneficial in such that it:
- Tells a compelling story that “wows” your visitors
- Encourages your visitors to stay on your page longer not only interacting with the site’s animation, but also they are potentially more intrigued to dig a little deeper
- Entice them to see “what’s coming next” – the next generation of calls-to-action. DMZ Interactive provides great examples of B2B websites that set the bar high for this trend.
Because this type of scrolling calls for a one-page design, there are a few problems you can run into:
- Parallax scrolling websites are not always SEO friendly. However, that doesn’t mean they can’t be. Carla Dawson provides great insight on this common misconception.
- If done incorrectly, it can overwhelm your visitors. When you add motion to a website, you add the likelihood of giving your visitor the similar feeling of motion sickness, causing them to leave your site quickly
- It can slow down load time in browser – a major factor to consider since 40% of people will abandon a web page if it takes more than three seconds to load.
- No great design can make up for the lack of navigation in many cases; it is simply annoying
Web developers often find that websites featuring parallax can be a coding nightmare.
- Mobile devices do not respond to parallax scrolling. In fact, many sites drop the scrolling functionality for devices smaller than the average tablet.
- There are many types of parallax scrolling: Infinite Scroll (hiding content as a page loads and continues to scroll – popular with eCommerce sites), Single-page Parallax Scrolling (i.e. the bane of SEO’s existence), horizontal parallax scrolling (fairly disjarring and twice as likely to cause motion sickness in susceptible audiences), the list goes on. Just because a site moves, doesn’t automatically qualify it as parallax.
- Given the many types of parallax and scrolling techniques on the web, that means there are many methods to the madness behind the movement – is there one correct way to implement? Not necessarily, no. That being said, this is the internet and things are always evolving and changing. Perhaps someone will create the almighty workaround to these woes.
The Bottom Line
If you just have to have a website featuring parallax, ask yourself these questions:
- Who is your target audience? (see motion sickness) Are they trend-savvy? Will they appreciate your brand being visually driven?
- Is your content compelling enough to tell a story? If so, does your story translate well into visuals?
If you still believe a parallax design will benefit your website and your business, then go right ahead! Our advice: Start your site with a proper SEO architecture, then apply your design. Have you tried this hot trend in website design? We’d love to know your thoughts and experience. Let us know in the comments below!