To Parallax or not to Parallax

Share

Tweet

by Cameron Alcorn August 19, 2014   Web Design

“If there’s one thing you learn by working on a lot of different Web sites, it’s that almost any design idea – no matter how appallingly bad – can be made usable in the right circumstances, with enough effort.”

Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability

So, you’ve stumbled upon parallax scrolling and you’re considering incorporating this magical effect into your website? Or maybe you’ve known about parallax effects for years, even before it was a trend on the Web. Well, either way, with parallax scrolling being one of the hottest web design trends at this point in time, you will likely come to a crossroad where you must ask yourself, “Is parallax for me”, or more importantly, your site. Before you make that call, you should understand some of the pros and cons.


The Pros

Depending on your intentions, parallax scrolling may be exactly what you’re looking for.

1. That “Wow” Factor

Brice Darmon Photography, definitely has that "wow" factor.

Brice Darmon Photography definitely has that “wow” factor.

No doubt, if you’ve ever unexpectedly run across a website that utilizes parallax scrolling during one of your adventures on the Internet, you were probably taken by surprise. After all, who would expect that the content of a website would suddenly come to life or take on a whole new level of depth when scrolling? It’s not common, and there are some truly incredible creations out there that incorporate parallax scrolling. You can easily find some great examples with a quick Google search – design award websites love to highlight the use of parallax.


2. Controlling the Flow of Content

The Prince AV site tells a story to potential customers.

The Prince AV site tells a story to potential customers.

One of the great challenges of designing a website is setting up the page structure in a logical way and giving users subtle (or not-so-subtle) hints regarding where to click and navigate to next. This is especially true in storytelling, which is typically linear. Parallax scrolling, if implemented correctly, can be used to tell powerful stories with beautiful graphics and animations, displayed and executed in a linear fashion, ensuring the user does not read or view anything out of order or out of context. This makes parallax scrolling a wonderful tool for marketing campaigns online, since it can be used to wow customers, as they mindlessly scroll down a webpage.


The Cons

Ready to build that flashy parallax site? Hold on. You may want to consider the cons.

1. Mobile Support

Currently, mobile support for parallax scrolling is, to put it simply, not so good, mainly because mobile devices are not equipped to properly handle intensive animations that result in reflows and repaints. Performance issues are particularly bad on iOS devices, such as the iPhone and iPad. When a user scrolls, the native scrolling and CSS/JavaScript animations are, in a sense, competing for GPU control, and the native scrolling almost always wins. There are some frameworks, such as Hammer.js, which can help to override some native features of Apple’s Safari browser, but they can make animations taxing on the user’s battery life. In some cases, creating properly functioning and visually pleasing parallax scrolling on mobile devices is not only difficult, but impossible.


2. Bad for SEO

That’s right. Your pretty parallax scrolling website can negatively impact your search engine ranking. First of all, if you incorporate several large background images on a web page, which is quite common with parallax scrolling web pages, it will inevitably increase load times and, as a result, impact your search engine ranking. On top of this, websites that utilize parallax scrolling typically have vertically long pages, instead of multiple pages. This means that, since there are fewer web pages, or, in some cases, only one web page, there are fewer opportunities to incorporate meta tags. Lastly, while parallax scrolling can appear to add to a website’s depth, due to the heavy usage of images and animations, there is typically less text, and as a result, fewer backlinks, making it difficult to display truly deep content that helps with search engine rankings.


3. Against Progressive Enhancement

It’s difficult to make the claim that parallax scrolling is in-line with progressive enhancement and web design best practices. All-in-all, parallax scrolling is not a necessity, and is, in many cases frivolous. To put it plainly, parallax scrolling is about painting a picture with several thousand pixels, rather than writing a story in a few hundred words. In one sense, this is beautiful, but in another sense, it is very impractical, especially when it leaves mobile users with a sub-par experience. Take the example below:

The website you see in the above example is amazing (you may have to experience it for yourself). Visit this site on your desktop or laptop, and you will be able to view the stylish Bagigia bag from all angles; rotate it, inspect it, and much more. However, view the website on a mobile device, and you will be left disappointed. Not only is the website not optimized for mobile devices, but the content on the page changes completely; there are no longer the rich images and descriptive text. This is not progressive enhancement, but rather, poorly implemented graceful degradation. The sad truth is, this is still not uncommon for many websites that utilize parallax scrolling, since there truly is no solid fallback at this point in time.


Parallax?

So, is parallax scrolling worth all the trouble? Is the “wow” factor and ability to tell a story with pictures rather than words really worth poor mobile support and possible low search engine rankings? It all depends on what matters most to you.

Regardless of what your motivations are for implementing parallax scrolling, most of the cons listed above can be avoided. If you want to avoid poor performance issues, I recommend taking a look at this best practice guide by Dave Gamache, the previous designer of Twitter and Medium. You can seriously increase performance if you follow some of the simple steps in this guide. Also, if you want to ensure that you do not damage your search engine rankings by implementing parallax scrolling, I highly recommend this guide by the Panoptic Marketing agency. In fact, you can avoid most of the SEO pitfalls of parallax scrolling if you follow their guide.

If you have any questions, leave a comment, email me, or find me on Twitter. Good luck and happy scrolling.

 

  Comments

Written by

Business professional by day, web developer by night, when I’m not creating solutions for my clients, I’m writing or creating meaningful content for the Web.


Posted In