The Parallax Scrolling Dilemma

Parallax Scrolling themes or “Endless” pages are the “hot” new method of developing new websites, not because it is the best method, but in most cases, because it is what everyone is doing. Parallax scrolling is a website trend where the background content moves at a different speed than the foreground content while scrolling through a website.

A lot of business owners tend to want the latest and greatest for their website. However, it truly depends on the website’s primary use. The question remains, does a parallax theme provide the best theme option available?

An example where parallax scrolling makes perfect sense is Facebook. Newsfeeds are set up in a time sensitive format that allows users to keep up with what’s happening with their friends. With the added benefit of notifications regarding friends’ posts and comments. Whether one agrees with the latest changes or not, one would have to agree parallax is perfect for that format. Additionally, Facebook probably is not concerned with their Search Engine Optimization (SEO) ranking.

Benefits to Parallax Scrolling

  • Search and edit can all be completed on one document rather than searching through the entire server to find the right document to edit.
  • It is scroll friendly and does not require going to another page to view other data or information by the same owner.
  • Parallax themes only works if the theme allows multiple pages.  The home page could contain links to other pages where additional keywords, Meta titles, Meta descriptions, and Uniform Resource Locator (URL) with keywords to boost SEO rankings are contained.

Issues with Parallax Scrolling and SEO

The biggest problem with parallax scrolling themes is the reduced benefits derived from SEO efforts due to the increased loading times which lead to higher bounce rates and fewer customers.

If you look at Awwwards, The Favorite Website Awards (thefwa.com), Unmatched Style, and many other websites that “give” (actually for most it is just paid advertisement) awards for the best-designed websites, a large percentage of those sites are parallax scrolling sites.  Many of these sites do look amazing; one even has a spinning globe with planes circling the globe, very stunning and fun to look at, after it loads.

Try the same site on an iPhone; will likely take double the time to load. In some cases, it can take up to a minute to load all the effects onto a mobile device and both Google and Yahoo state that the average waiting time before clicking another site is 3 seconds.

Contrary to popular belief and what has become the norm, parallax scrolling does not need to be a single page with continuous scrolling. And of course, there is a common misunderstanding among perspective website owner that this concept is easily implemented, the fact is that it is not and it places a large onus on the owners to create most of the content before it is designed. And, since it is more difficult to make changes to the site after set-up, the owner is handcuffed to the developer, unless they are very proficient with JavaScript or CSS3.

A few things to bear in mind when designing a site using Parallax Scrolling

  • Loading times
  • SEO
  • User engagement
  • Browser compatibility
  • Mobile-Friendliness
  • Animations that become distractions

How to reduce loading times

The same concept applies to sites utilizing parallax scrolling as to other websites; optimize the images and use as few as possible. Other than that, you only have two choices for parallax right now: JavaScript or CSS3. With CSS3 it is almost impossible to create a fast foreground with the slow background effect that is necessary for sharp focus. Yet, the use of JavaScript will allow creation of a complete and genuine parallax scrolling site, but the load time will be frustratingly slow.

Many award-winning parallax-scrolling sites have reverted to conventional designs to increase loading times and cut bounce rates, those that remain usually have an established brand and/or rarely use organic search to drive traffic to their site.

How to maximize SEO and utilize Parallax Scrolling

SEO ranking algorithms give weight to heading titles with keywords that are “above the fold,” this is very difficult to accomplish with parallax scrolling. Only one H1 header is optimal for SEO and trying to cram more keywords into it does not seem natural, not to the user and not to the search engine indices.

One technique to maximize SEO, if you really must have that parallax scrolling design or theme on the website, is to use it on one page while utilizing the other pages for SEO content. This will provide the best of both worlds.

That page would include the internal links to pages containing content with a single H1 header above the fold, Meta tags, and descriptions, as well as page titles with keywords that boost SEO. This also allows for a greater natural disbursement of keywords and phrases without overcrowding a single page with the same keywords.

Parallax scrolling relies heavily on images and not content. Everyone knows Penguin penalizes websites that are void of rich content. So the idea of using the parallax scrolling effect on a single landing page with internal links to pages with content makes sense.

User engagement/experience or UX

In a recent Purdue University study, “it was hypothesized that parallax scrolling would improve user experience and influence user preference. However, the acceptance or rejection of these hypotheses depended on whether parallax scrolling improved perceived usability, enjoyment, fun, satisfaction, and visual appeal. These five variables have been claimed to directly affect overall user experience. With the exception of ‘fun’, the Mann-Whitney test failed to return any significant differences between the two experimental groups with respect to these variables. Therefore the hypothesis that parallax scrolling improves user experience and preference was rejected.”

It is a challenge measuring a visitor’s interaction using Google Analytics, without adding additional code, the only true indicator for single-page parallax scrolling is time on page. Parallax scrolling prohibits gathering much usable data regarding the UX or engagement.

Graceful Degradation, Progressive Enhancement and Web Functionality

When building your web functionality it is important to provide a certain level of user experience in a modern browser.  However your site should also degrade gracefully to allow users with older browsers the ability to use your site without things breaking.

Progressive enhancement however similar works opposite of graceful degradation.  Websites generally establish a basic level of user experience that most browsers can handle and build advanced functionality that will automatically work for browsers that can handle it.

Both graceful degradation and progressive enhancement are excellent ways to increase web functionality allowing most users the ability to use your site effectively.

Browser Compatibility

It is one of the most irritating issues for both users and developers. What works well on Safari, might not work so well on Chrome or any other browser. Testing across all browsers is necessary to ascertain compatibility.

Mobile-friendliness

Traffic to all websites from mobile devices has increased by 78 percent and now accounts for 24 percent of all traffic. However, due to loading times and other considerations, parallax scrolling is in most cases prohibitive on mobile devices and it would be unwise to ignore that much traffic just to provide users the “fun” experienced with some parallax scrolling. And yes, top-end smartphones can display these effects, but what about the others? The only other alternative is to deploy two websites, preferably with different content to avoid duplication, yet again is it worth the additional expense?

How can website owners avoid the Parallax Scrolling problem?

Small businesses that depend on organic search results to drive traffic to their sites should avoid parallax scrolling, or faceless control over their own websites and the added expense paid to designers who will need to make even small changes to their site.

Additionally, more money will wind up going out of the business to support additional SEO efforts. In the long run, it is easier to build user trust and confidence through rich content, than through the fun gimmicks provided by these 3D effects that only add “fun” not function to the user’s experience.

Ready to get started?


"Your passport to all things web."

CourseVector
1 Abbey Lane
Camp Hill, PA 17011
Phone: (717) 516-6955

Design and hosting by CourseVector. All rights reserved. Copyright 2018. | Sitemap

To contact us after hours please use the panic button.
Fees may be incurred depending on reason for support.