"What is that, and where can I learn to do it?"
That's the first thing I thought when I first saw a site with parallax design. They're beautiful to look at, and kind of awesome from a UX (user experience) perspective.
Take this site page from Honda CRV, for example. Or a simpler version of parallax seen on HubSpot's State of Inbound Marketing page. (Go ahead and click -- I'll wait.)
How cool are all those different layers, moving images, videos, and interactive hotspots? It's kind of like the digital version of those "choose your own adventure" books. From a design perspective, parallax looks pretty good.
But there's been some chatter about the downsides of parallax web design from a marketing perspective. The pros of parallax all have to do with the "wow" factor -- how visually appealing and differentiating the design is from most other websites. The cons that people have been buzzing about have to do with decreased searchability, Google penalties, and other search engine optimizaton (SEO) concerns.
I'll show you why parallax design itself isn't to blame for these SEO no-no's -- and how it's actually the overuse and misuse of parallax design that leads to poor SEO. Before I get to that, let's briefly go over how parallax works.
How Parallax Design Works
Parallax design originates from video games like Super Mario, where different layers move at different speeds. The goal here was to simulate depth in a 2D game.
Here's a side view of the layers used for parallax scrolling in a video game:
On websites, the user is the one who controls how quickly or slowly to scroll through the design elements.
The Arguments Out There Against Parallax
Here are several arguments marketers have made against parallax design. Take note that they all have to do with website content, not the code for parallax itself.
1) One URL for all that content means lower searchability and fewer internal links.
Websites with parallax design house all that juicy content on just a single page with one URL, one set of meta information, and one effective h1 tag. This means search engines like Google and Bing index only one page on their search results, which can seriously hurt your organic search visibility. You aren't nearly as searchable as websites with content spread over multiple pages. Plus, it means fewer internal links -- and more internal links means better SEO.
2) It causes your website to load slowly.
Load time increases with multimedia, and you can imagine how much that affects an interactive, media-heavy website using parallax design. But just a second or two of increased page load time significantly affects how many people stick around to view your website. A study by Gomez shows the average online shopper expects a page to load in two seconds or less, and after three seconds, up to 40% will abandon your website. Plus, remember that page load time has been part of Google's algorithm since 2010.
3) It "doesn't work" on mobile devices.
This actually isn't true, which I'll explain in another section. But some have argued that you'd have to build a second, mobile-optimized version of any webpage you build that uses parallax design -- and having duplicate content on two different websites could be seen by Google as creating a poor user experience, meaning you could be penalized by Google as a result. Device detection and re-direction also slows down load time (see point #2).
How to Use Parallax Without Hurting SEO
Every one of these problems stem not from the parallax design itself, but from content distribution and SEO mistakes. In other words, SEO problems come from incorrect practices, not from the parallax code.
For example, because storytelling using parallax looks so beautiful, website designers might be tempted to put several site pages worth of content onto a single page. But putting a ton of content on a single page is still a bad SEO idea without parallaxing it. For instance, it's wiser not to bundle your mission statement, project process, case studies, philosophy, culture, and contact information into a single, long "Who We Are" page -- rather, split some of those up onto separate pages (especially those case studies).
But remember, putting all this good content into a single URL reduces organic search engine visibility opportunities and could result in fewer external links. If getting found organically is a priority of yours, then you'd usually do better to spread out this content onto separate pages. You can still use parallax design on any of these pages, just don't let it get in the way of your SEO-related priorities.
Dan Ritzenthaler, HubSpot Product Designer and UX expert, suggests using parallax design on select parts of your pages. "You can do parallax effects in a portion of the screen to illustrate smaller stories without hiding content from search engines or breaking how people expect a website to react to them," says Ritzenthaler. "I think it's all in how you use it. Many people overuse or abuse it."
He cites this site page from IWC Shaffhausen. The background moving a little slower than the foreground is harmless from an SEO perspective, and it looks really cool to users. Another example is the footer of the Guy Vernes website, where the parallax effect adds a really nice design touch.
What About Mobile?
Parallax certainly does work on mobile if you have responsive design (like the HubSpot COS). With responsive design, mobile device users will be detected and the browser will turn off some of the parallax features that wouldn't work or would be confusing on those platforms.
For example, look at Spotify's homepage on your personal computer, then again on a mobile device. You'll see their content is the same, but they figured out how to separate large text with the same big background pictures as the parallax version -- but on mobile, these pictures just don't move.
If you don't have responsive design, then you still don't need to create a separate, mobile version of your parallax site pages. Instead, Ritzenthaler explains that an experienced web designer "can 'shut off' parallax on smaller devices without causing problems -- as long as [the webpage] is designed with that in mind."
How to Implement a Parallax Effect on Your Website
Want to implement a simple parallax effect on your website? Find out how by reading this post written by the HubSpot Design Team.
Credits: Dribbble, Wikimedia, Wikipedia