Discover some great tips whether you're thinking of building a parallax site or optimising an existing one

The history of parallax websites or more specifically parallax scrolling came from brands and web designers wanting to enhance the users experience when flowing between information. Thus, creating a more memorable and shareable website experience.  Parallax scrolling is created by placing different elements within the foreground, middle ground and background which combine to create depth of field. The parallax enables websites to provide the user with motion or 3D effects between corresponding sections of a single page. The word parallax comes from the Greek word παράλλαξις (parallaxis), meaning “alteration”

The easiest example of this for desktop and mobile devices is from Mathew Wagerfield. Whilst there is no traditional pagination it’s a great example of parallax being applied across the three core elements, the background, the middle ground and the foreground. For a far more extreme example I would look at Flat vs RealismTIP:  by extreme I mean hold your finger down on the scroll down key, the counter goes up to 100 before the experience really starts. But its worth the wait. 

There is a theme in this blog which are the links. From what you have read so far and having toyed with links above you should have an idea of what parallax techniques are centred on. However, applying this an actual website environment for a brand and its business requires a balance of new and old user experience (UX) approaches.

Parallax examples we can all learn from:

The objective of the Cyclemon site is to creatively showcase the categories of bikes they sell. However, the website suffers from 3 core issues:

  1. too much artwork that isn’t overly meaningful to the user (given they are trying to sell high end bikes)
  2. not showcasing any actual imagery of their bikes.
  3. not highlighting the USPs of their products (kind of essential for an ecommerce site) for example, quality breaking experience or thickness of the tires
    The Cyclemon page is 100 percent made up of this art work not showcasing any actual product photography, product USPs, context or CTAs. Infact this page doesn't do a lot for the brand or its actual products.

    The Cyclemon page is 100 percent made up of this art work not showcasing any actual product photography, product USPs, context or CTAs. Infact this page doesn’t do a lot for the brand or its actual products.

Ask yourself, would you buy a bike based on a cartoon? No, and not many people would. The first concept of web user experience (UX) is not to make the user think. The lesson here (which is obvious to me) is find a balance between creativity and actually showcasing products and/or their USPs. TheQ Camara website is a great example of how slight parallax techniques between sections provides a real story feel to the content with its seamless transition from section to section. However, they don’t use parallax to its full potential.

TheQ Lab Parallax Site

TheQ Lab is a great example of less is more but they missed a trick not using parallax to showcase USPs using specific product shots and close ups.

Retailers should take advantage of  parallax techniques that can blend product photography with engaging snippets of information.  An interesting example of this specific feature is Bagigia. As you scroll down the page you learn more about the product and it oozes elegance and desire as the motions tell the product story. However, being really observant the Bagigia.com site doesn’t have no navigation tabs traditionally associated with ecommerce websites.

Bagigia parallax website

Bagigia parallax website with no obvious menu structure or section headings, restricting the users ability to easily navigate between sections.

Furthermore, on the far right of the site there are dots/ radio buttons without headings or alt tags meaning the specific sections of the page are not initially obvious to the user. With a few tweaks this site could be really impactful.

An impressive parallax website that houses excellent navigation, combines CTAs, useful information and varying images, text and video content is Too Young To Wed.

Too Young To Wed Parallax Website

Too Young To Wed is an excellent Parallax example of combining navigation, CTAs and utilising content formats to achieve a slick, easy and informative website.

One of the best examples is fiftythree.com, as you scroll down you assume that there isn’t any parallax technique’s but before you know it scrolling breaks down the technology and USPs of the product. Then nice user techniques including turning the product and blending sections are noticeable to the eagled eyed amongst us. If I was to provide the team at fiftythree.com it would be the SEO techniques used within the site. Take one more look at the site and you will notice that as you scroll down the page the URL doesn’t change. Some of you will think that its ok and it doesn’t need to however, for search engine purpose you can change the URL based on the section the user is exploring. Take Boy-Coy as an example, brilliant use of creativity, real use of all three elements that make up a parallax experience (foreground, middle ground and background) but along with all that the URL changes:

It’s a simple enough concept, split a single page into sections and give each section a bespoke URL. But look at the might Spotify, not even they have used this approach and this demonstrates that even the larger (and therefore perceived as more organised) do improve their parallax websites.

So far we have explored some varied examples of creative and ecommerce based parallax websites. However, as you dive in deeper into the world of out and out branding then you come across some brands like The Royal British Legion. I highlight this one as an example of how valuable CTAs are if you’re going to explore creating an online experience. Take a look and tell me what you think.

The Royal British Legion parallax website example

The Royal British Legion parallax website example. Very few call to actions but high expected levels of engagement could result in poor results.

For me there’s some great examples of engagement and interaction. The best being the Z’s flying up from the old guy behind the wind screen. If you click them he pops up! Brilliant gimmick but as the target audience is educating children on the British Legion I don’t find it overly effective. How about a short fun quiz at the end where you can use various parallax techniques for right and wrong answers. Whilst this seems like an obvious solution it also is another route to measuring success of the website with the number of correct and incorrect scores being counted. This for me is an example of a creative agency taking a parallax making it engaging but having no online measurement framework. I would put money their KPIs were around time spent on site and visits. Food for thought maybe.

On the topic of pure brand engagement, I’m sure Nintendo wont thank me for this because I got bored after the first block and the brand experience is relevantly dull but here’s a GameBoy example.

Game Boy Parallax Example

If only they added an auto scrolling button and implemented more game variants

Now what would have been cool is moving from game to game with the console changing colours and shape. Really showcasing the GameBoy over the last 25 years.

So there are a couple of lessons for out and out brand activity but one site I really did enjoy was Peugeot’s Graphic Novel. Which isn’t the best title because its more comic style.

 

Peugeot Example parallax website

Excellent example of parallaxed being used for branding and data capture.

The thing I loved was the option of auto play which is a great feature when you consider how long you have to hold your finger down on the likes of Game Boy  and Flat vs Realism. The other feature I really like is how they nicely crossed referenced product features and has an end section dedicated to extending the experience and finding out more about the product. Which is a nice feature to the brand experience and ‘shareabilty’ of such a nicely crafted site.

Summary

Hopefully you will agree there is a combination of average to excellent examples of parallax websites that ticks boxes for both brand and ecommerce projects. The core takeaway has to be that despite the temptation of going parallax overload ensure you have the user first and ensure that minimal thinking is required by the target audience. I hope you enjoyed some of the points made in this post and of course post any other great examples in the comments below.

Author Perry Braun