The essential ingredients for perfect parallax UX

Wdd Logo.
December 13, 2013
The essential ingredients for perfect parallax UX.

thumbnailWith so many web technologies, platforms and programming languages, web designers and developers are still searching for new opportunities to engage visitors and turn them into regular clients.

There are all sorts of options for engaging users, but one of the most popular is parallax scrolling. Parallax scrolling uses a script to move elements on a webpage at different rates, creating the impression of depth.

If you like forced perspective photography you will probably like Parallax scrolling websites too. The effect can produce very heavy sites, but used properly it does create a spectacular and engaging visual effect.

The weight of parallax sites

The first obstacle when considering a parallax website is their large file size and the resulting increase in page load time. This is because you're typically loading far more on a single page than you normally would.

The more you load, the heavier the page. For this reason parallax sites are best suited to situations when the user is willing to wait a little longer for information.

Parallax and SEO

If you stay informed about industry news you probably know that search engines (especially Google) regularly toughen their requirements for on-page optimization. The process of searching for information becomes more user-friendly but it doesn't always coincide with site owners' plans and abilities.

Currently, if you prefer one-page Parallax scrolling website you'll have to optimize it for only one keyword. At the same time regular websites can optimize each page for a separate keyword/phrase. Consequently thoughtful separation of the home page can be quite effective, but you need to ensure that the content you're designing for is promotable under a very narrow range of keywords.

Mobile parallax

You can't escape the mobile web any longer, and that's as true for parallax sites as any other. If you choose to use a parallax effect, you need to ensure that you're translating the effect to mobiles properly.

Fortunately there are plenty of different libraries and scripts that help display pages with Parallax scrolling on mobile devices in a native way, some of my favourites are iScroll 4, Zynga Scroller, Stellar.js, and Scrollability.

Parallax scrolling and UX

Parallax sites are extremely engaging and do a great job of reducing a site's bounce rate — but that only happens if you keep the the size down and ensure that the effect works correctly on mobiles.

Parallax sites allow us to tell stories, and those stories are a great way to engage visitors. Below we've gathered together some of the best examples of parallax sites, all of which have avoided the pitfalls above to successfully deploy their projects.

Michelle Lana

parallax-scrolling-website-1

Every Last Drop

parallax-scrolling-website-2

FK Agency

parallax-scrolling-website-3

Wild Life

parallax-scrolling-website-4

KitKat

parallax-scrolling-website-5

Von Dutch

parallax-scrolling-website-6

CR-V Honda

parallax-scrolling-website-7

Sonia Rykiel

parallax-scrolling-website-8

Atlantis World's Fair

parallax-scrolling-website-9

Activate Drinks

parallax-scrolling-website-10

Soundscape

parallax-scrolling-website-11

Tokio Lab

parallax-scrolling-website-12

Head To Heart

parallax-scrolling-website-13

Cosmo

parallax-scrolling-website-14

Geze Bewegt

parallax-scrolling-website-15

Cultural Solutions

parallax-scrolling-website-16

The White House Iraq timeline

parallax-scrolling-website-17

Atipics

parallax-scrolling-website-18

Bolia

parallax-scrolling-website-19

Bagigia

parallax-scrolling-website-20

Health Service Payouts

parallax-scrolling-website-21

Netlash bSeen

parallax-scrolling-website-22

Spotify

parallax-scrolling-website-23

Madwell

parallax-scrolling-website-24

Mario Cart Wii

parallax-scrolling-website-25

Zeus

parallax-scrolling-website-26

Soleir Noir 2012

parallax-scrolling-website-27

Drug Treatment

parallax-scrolling-website-28

NH Hotels

parallax-scrolling-website-29

Divine Write

parallax-scrolling-website-30

Spaziergang

parallax-scrolling-website-31

Vita Frute Cocktails

parallax-scrolling-website-32

Gjenfodt

parallax-scrolling-website-33

Have you created a parallax site? Which of these sites is your favorite? Let us know in the comments.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…