If you aren’t sure what “parallax” is, you will by the end of this article. Even if you don’t know what it is, you’ve undoubtedly encountered it on a website. It became all the rage around 2013 and it is still being used today; sometimes effectively, sometimes not at all. Some content management based website templates include built-in parallax effects so the ability to create this eye-catching technique is not difficult. In this short article the point I want to dissect is whether this effect actually improves your website or if parallax is just a gimmick.
What exactly is parallax?
We should frame the discussion by giving the proper definition of parallax. According to Wikipedia, parallax scrolling is:
“a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth"
If anyone remembers the classic Nintendo game Super Mario Brothers, or Sega’s Sonic the Hedgehog, this is exactly what parallax is.
The layers in the background move slower than the ones in front, to give the illusion of depth. This technique is being used on the internet now as well. Since HTML5 and CSS3 were introduced around 2011, it has given designers the ability use parallax. Surely you can see why this effect would be so desirable on a website, right? You want to catch a user’s eye by drawing attention to whatever you are promoting. This is why parallax became such a huge topic of interest for designers. Before getting onto the topic of proper use of parallax, we need to explain some of the pitfalls and what to consider before jumping on board.
Does parallax improve UX (user experience) of a website?
In a 2013 Purdue University study, over 80 users tested 2 versions of the same website: one with parallax and one without. The consensus was that people thought parallax was a fun effect, but did not improve the overall user experience. In some cases, designers overuse the effect and get carried away with the animation and forget WHY they are using parallax. Web designers have a lot of tools available to them and parallax can be effective when used in the proper context and in moderation. The purpose of a website is to concisely deliver content to a target audience, right? Designers can need to use these tools, like parallax effects, to increase user engagement by enticing them to click on something that directs them to a page capture leads, or sell something.
Parallax Is Not Mobile Responsive
In short, No. At least, not when the entire website navigation is parallax driven. Check out this very cool Life of Pi movie website and notice how the scrolling carries you through the site:
This website is not mobile friendly at all. It has no text navigation and you must scroll down continuously to get through the entire site. The Life of Pi website has a fun factor, but it’s not recommended to go 100% parallax like this.
You may be asking why a website needs to be mobile responsive? It may shock you to know that almost HALF of online purchases in 2015 were from mobile devices. This trend is only going to continue to grow. Making your website attractive and easy to navigate on a smart phone can make or break your online success.
Slow load times can kill a website
Did you notice how long it took the Life of Pi website to load before you could actually begin scrolling? If you were on a mobile device the load times were probably over a minute suffer even worse. Since you are loading all the images, videos and content on a single page it takes a long time to load. Even on a lower tier broadband connection this site would be horrendously slow to load and scroll through. Hence, why they use lower resolution images on their site instead of super high resolution graphics. If your desktop website takes 5 seconds to load, you are already on the lower end of what the average internet user’s patience will endure. But worse, that same website could take 30 seconds to a minute to load on a 3G or 4G mobile device. Optimizing your website load time should be a huge priority, and avoiding full page parallax would be a good start!
SEO can suffer with a parallax website
If your entire website is one main page like the Pi website above, your SEO is going to take a pretty big hit. First, your only getting one H1 on the entire site for the title tag, here multi page websites have numerous opportunities to optimize a title H1 for each page, along with stuffing more H2 and H3’s into those additional pages. These are just the surface arguments against the use of parallax driven websites, but they are massively important if you are at all concerned with SEO for your website.
Why use parallax at all?
It is important to note that parallax is not a terrible thing at all, when used appropriately. That means using it for small areas within your home page to draw attention to specific points of interest. It absolutely grabs attention when used right! We recommend using it in a slider or small section of your landing page BUT you need a simple navigation system to help users find the information that want immediately, without much effort.
Some designers feel the cool factor outweighs the annoyance of scrolling, but the importance of making your site fast and responsive on mobile must be one of the driving factors of your design choices since it has become nearly half of your audience. For those customers who are looking to build websites that are trendy and on the cutting edge, they may be impressed with a full blown parallax website; but the reality is they could be losing customers and driving traffic elsewhere at the expense of looking cool.
If you have any awesome examples of parallax websites leave us a link below!