Perhaps one of the largest trends at the moment is something called parallax scrolling.
When done well, a parallax effect on your website can really wow your visitors and grab their attention with your high end user interface design and user experience.
Parallax scrolling in web design allows any design element on your web canvas to move independently (faster or slower) of the background or foreground design elements. Parallax website design is so popular at the moment that even if the term sounds foreign to you, you’ve very likely already experienced it.
Despite the beauty and wow-factor that parallax design can offer, there is still a wide debate within the design and search engine optimization (SEO) community about its effectiveness as a whole.
Some website user experience experts argue that parallax design distracts users from the actual web content, and the key message that the website owner wants to communicate is lost, or its effect may be diminished by the excitement on screen. SEO experts also suggest that parallax scrolling limits the performance and visibility of websites on search engine rankings.
I think parallax design is beautiful, exciting, and fun to work with. My main concern still remains with lack of mobile friendly parallax scrolling and support however. To date we still remove the parallax effect from our responsive website designs once the viewport scales down for tablet and mobile.
That said, I do think there is a place for parallax effects and parallax website design. If you’re able to use the effect appropriately and in moderation (aren’t all good things better in moderation anyway?) you are able to create some beautiful website interfaces and effects that are both user friendly and SEO friendly.
Let’s look at some parallax scrolling best practices to consider when creating a parallax website design.
How To Use The Parallax Scrolling Effects
Likely the most important thing to consider in the web design process is where to draw the line when it comes to parallax scrolling effects. How do you know when it becomes too much?
Critics argue that forcing users to scroll in order to access page content will frustrate them and ultimately lead to abnormally high bounce rates. This argument frustrates me more than any other. We may just have to wait for the baby boomers to fall into line and let go of the above the fold mentality. Scrolling is an inherently natural behaviour for web visitors (and in this day and age), and is as natural as taking a breath.
Loads of marketing research has been done on the page fold and determined by a landslide that the page fold, at least when it comes to the digital environment, is a myth.
I do believe there is one very valid argument buried in here though, and it stems from a study that suggests that people that suffer from motion sickness may in fact find parallax scrolling effects to be disorienting. However, I do believe if the parallax effect is applied in moderation and tastefully, this may not be an issue.
Parallax scrolling can be an incredibly powerful storytelling tool if optimal user experience is considered when creating the web design. The scrolling effect ads a surreal sense of depth and in many cases can make some web page elements appear as though you can reach out and touch them. Imagine the impact this has on giving products real appeal.
Now, when it comes down to the amount of the parallax effect to use in your web design or page length, there is no finite answer. The key is to understand your audience and fight the urge to overdo it with too many floating elements.
A parallax webpage should be long enough to tell a story or convey an idea to the user without overwhelming them. I believe that the most effective parallax websites do not feature large panels of scrolling elements, but use the parallax effect subtly to draw attention to smaller elements like product imagery or pull quotes. This prevents the overall design from distracting the viewer and also allows us to silence the User Experience (UX) and SEO critics.
Consider Web Page Load Speed
Website page load speed is a very important factor in web design not only to optimize user experience and conversions, but it has also become a ranking factor used by Google and other search engines when determining the position of a website in their SERPs.
The parallax effect relies both on CSS and Javascript to perform its dazzling show. With each movement the browser must calculate the position of every element on screen at the same time using these external scripts. Even with today’s technology this can be extremely taxing on the browser and Internet connection. Overdo it with the parallax effect and you can slow your website’s performance down to a crawl that will not only frustrate users, but sink your page ranking as well.
Beyond minimizing the application of the effect within your website there are other workarounds that web designers and developers can use to improve the page load speed and performance:
Request Animation Frame Callback
This function tells the browser there is an animation to perform and requests that the user’s web browser calculate the position of your page elements before the user scrolls down to this particular instance. What this method does is eliminates the forced page update with each and every scroll event.
3D Transformations
The method of applying 3D transformations to page elements that add more dimensions creates a new layer for every element that the transformations are applied to.
Rely more on CSS
The CSS required to create a parallax scrolling effect is quite basic and light. By relying more on CSS instead of Javascript, we are able to keep the external script usage to a comfortable minimum ensuring faster page load speed.
The parallax effect can sometimes result in a very image-heavy website design. In order for the user’s browser to render the website they will require more time to download all these large images. This can be a showstopper for users with a slower Internet connection or for mobile users accessing the website on a cellular network. It’s widely understood that users will not wait more than a few seconds for your page to load so website designers need to find creative ways to manage these images and offer acceptable page load times.
Consider Parallax Scrolling Performance on Mobile Devices
One of the largest criticisms of the parallax scrolling effect is its poor performance on mobile devices. Parallax effects appear broken or choppy on mobile devices because mobile web browsers are designed to limit script execution upon scroll events.
A good web designer will understand this in advance and plan for a static or mobile-optimized version of the website that essentially “turns off” the parallax effect when the mobile environment is detected. The website will look exactly the same in its static state, we just remove the movement of design elements and the requirement of the mobile browser to call external scripts to perform the calculations their desktop cousins can do more easily.
If we follow the practice of minimizing the parallax effect to elements within the user interface and not the whole canvas itself, the experience and transition between the parallax and static versions of the website can be simple and subtle.
That said, some brave web developers have created workarounds to emulate the parallax effect on mobile devices using CSS3 transformations. With this method, we are able to recreate the rich interactive user experience parallax scrolling that we can offer our audience on the desktop. There are several touchscreen-based scrolling libraries available to emulate parallax scrolling on mobile browsers, such as Scrollability, iScroll, Zynga Scroller.
Consider The Effect of Parallax Web Design on SEO
SEO experts will argue that parallax websites present far too many challenges when it comes to ranking the website. In many cases, they do have a very good point, as we often see parallax websites as single-page websites. The challenge created in this scenario for SEO's is that all the keywords for the website are concentrated on a single page, which will often lead to keyword cannibalization.
To effectively rank a website for more than one or two keywords the web content should be built out across multiple pages, allowing content writers and search engine optimization professionals to focus their efforts on optimizing each page for a specific keyword. Having a multi-page website also allows SEO’s to better manage their link building strategy and avoid focusing all inbound links on a single page.
These one-page parallax websites also limit you to a single URL, single H1 tag and Meta content. Being able to diversify these elements and use them across a multi-page website will increase your search engine page rankings ten-fold.
There are a handful of ways to create a parallax website and still adhere to best SEO practices. Perhaps the best and most obvious is to create a multipage website that features subtle parallax elements, or only feature parallax scrolling on select pages allowing you to focus in-depth page content elsewhere to target your keywords.
Another proven option is to make use of the jQuery ‘pushState’ function to divide a single parallax page into multiple indexable sections. This means that each section would then get indexed with its own unique URL and meta-content. This method is highly effective as it allows a single page to be indexed for unique content over and over again.
A more simple method is to use parallax scrolling on the homepage or landing page and static information pages that are able to use SEO-friendly URLs.
Parallax scrolling has definitely shaped the way we approach website design and development, as we have to reconsider how our audience consumes online content. As parallax scrolling continues to grow alongside technology and infrastructure,
I imagine the beautiful interfaces we’ve yet to design will continue to become richer as web designers continue to push the limits.
We hope that this Parallax scrolling guide will help you during your webdesign process. Do not hesitate to contact our team if you have any questions.