Parallax Scrolling: How to Get Started (Part 2)
This is part 2 of the 2-part UX design piece about parallax scrolling.
Parallax scrolling is an excellent graphic and web design technique that, when used appropriately, can spruce up any website. Essentially, it gives the page depth through the clever manipulation of foreground and background elements.
With parallax scrolling, background elements — images, usually — pass by at a slower speed than foreground elements. This makes an image that would otherwise be flat, or two-dimensional, seem like it has depth. It also gives pages a multi-layered appearance, such as what you see on Madwell’s site.
Parallax can be used for many things, like telling stories or drumming up user engagement. It also allows web designers to be much more creative, both in how they structure a page and how they create a navigational flow. For example, this parallax-built site from Akita moves horizontally, as opposed to the traditional vertical scrolling used on most pages.
But as with most elements of design, it’s possible to botch your site if you use the technique poorly. We’ll be taking a look at some tips that can help you ensure that your site remains both visually engaging and tasteful.
6 Tips to Getting Started with Parallax Scrolling
It is possible to lay on parallax so poorly that it ruins the user experience of your site entirely. Whether you have previous design experience or not, you might consider some of the tips listed below before getting started.
1. Consider the Limitations
Parallax scrolling is a useful and engaging technique, but it does have its own set of limitations.
- Parallax is not always mobile-friendly, and can hinder site performance and the experience for mobile users.
- Parallax may hinder performance even on desktop machines, especially when high-resolution images are used.
- Parallax scrolling requires cross-platform testing, across many browsers and devices.
- Parallax scrolling should never be the main focus of a site or a forced element. Only use it in instances where it’s deemed relevant.
As you can see, parallax scrolling isn’t always the best option for a new design. If the limitations are a problem for your brand or your site, you should consider using another design technique.
2. Make a Responsive Site First
If you plan to create a responsive site — or already have one — be sure to incorporate the necessary elements first, before moving on to parallax features. Don’t use scrolling animations until you have your site working with all existing browsers and devices.
Because parallax can have a negative impact on the mobile user experience, you should have a good core design in place first.
3. Try to Avoid Background Videos or Noisy Images
Parallax involves using background elements like videos, images, and other visual formats. While you can certainly include an animation or video in the background, you might want to consider if that’s a good idea first — and we’d argue it’s not.
Static images can affect performance, so just imagine the impact of a high-quality video. Even if you have the proper resources, you might want to consider how a video will steal attention from the rest of your content.
This is also true of images with a lot going on and are considered noisy. If you use a particularly exciting image in the background, it might steal the show. The idea of a parallax background is to provide an attractive element for your site, yes, but it’s not meant to serve as the main course.
You still want the primary focus to be on your foreground content and message.
If you’re using high-quality images, consider preloading your assets. The Soul Reaper comic is an example of parallax with preloaded assets.
4. Consider Disabling Scrolling Effects on Mobile
This tip is pretty self-explanatory. With modern browsers, you can query what type of device a user is visiting your site with. Instead of trying to make a parallax site mobile-friendly, you can disable the scrolling effects.
This will boost performance and improve the user experience for mobile visitors. Have parallax scrolling for desktop screens and disable the functionality on mobile and tablet devices.
5. Have Some Fun!
If you’re going to use parallax scrolling on your site, then you might as well have some fun with it. Chances are, your audience will love being entertained and engaged by the elements on your site in fun, interactive ways.
You can certainly use parallax in a way that will allow visitors to enjoy themselves.
KrystalRae does an excellent job of using parallax scrolling for fun! As you scroll down to view their current collection of styles, a single model appears and new clothes are shown for each panel you scroll to.
6. Use a Call to Action (Make Something Happen)
Generally, on a site that uses parallax, users are scrolling for a good amount of time. It doesn’t matter which direction they are moving on a site, either — most end up doing it for a long time.
So reward them for perusing your entire page. Don’t force them to scroll to the end for nothing. You can do this by including a great call to action, or activating some kind of special element. It doesn’t always have to be something amazingly spectacular, mind you — just enough to give your audience a reason to continue.
Tinke uses parallax design to funnel visitors toward the final frame, which calls for them to buy the brand’s wearable device.
In your case, you could show a product demo or trailer, offer an exclusive discount for trial members or even host a contest or giveaway. The point is, you need to give your audience a reason to scroll through your entire page.
Follow These Tips, Improve Your Site!
Nobody wants to end up with a poorly designed site that scares visitors away — or bores them to death! Just follow these tips to ensure your parallax design is up-to-par.
If you’ve already implemented parallax design on your site, you might want to go back and ensure that you have adhered to these guidelines. Because, in all honesty, that’s really what they are. You’re free to think as far outside the box as you like — just remember that the order of the day is tastefulness.
Other Posts in this Series:
Codementor is your live 1:1 expert mentor helping you in real time.