Parallax Scrolling Websites…

Ah, parallax scrolling websites. You’re one of the current hot “it” web design strategies. Parallax scrolling itself refers to different layers of the website moving at different speeds when a user scrolls down the page. I first became aware of parallax scrolling when I was a kid playing Nintendo. Look at the layers, see how the foreground is moving faster than the background? That’s parallax scrolling.

On websites, parallax scrolling serves a particular purpose. That purpose is to increase the impact of the message. It’s a way to control the narrative. When done correctly, parallax scrolling actually adds to the message the designer/company is trying to convey.

The UX Honeycomb

Let’s talk about the UX Honeycomb for a minute. This is Peter Moreville’s creation and helps us talk about websites from a UX perspective. If you’re new to this idea, be sure to check out this short podcast where we talk more about this concept. In general, the seven attributes of the UX honeycomb sum up what users are looking for in a website. When we create a website we need to keep these attributes in mind and design accordingly.

Parallax scrolling has a few great things going for it:

1. Desirable – The tech is noticeably cool.
2. Findable – Where is it? Keep scrolling.
3. Useful – It increases the usefulness of the website by forcing a particular narrative on the user.
4. Accessible – Increases accessibility because scrolling is a natural, native way to interact with touch screen devices.
5. Credible – If you can pull off a cool website, you’re likely to make people feel you are capable. It’s impressive.
6. Usable – Easy, impressive, informative.
7. Valuable – Creates a positive association with the brand.

But it’s also a double edged sword. The same benefits can quickly become problems.

1. Desirable – Cool tech is cool until its distracting.
2. Findable – Narratives are great unless you forget to create one.
3. Useful – Not all content benefits from parallax scrolling, so don’t presume accessibility is improved because, ya know, scrolling.
4. Accessible – Problems develop when widgets show up or when navigation isn’t clear, or consistent.
5. Credible – Sloppy, confusing website = under-performing website
6. Usable – It will feel like the entire website is sucking so things can zoom by at different rates. Usability will suffer horribly.
7. Valuable – When users can’t find what they’re looking for and are unclear on what you’re saying, the value disappears.

Those Other Must Dos

Remember the 6 Things Your Homepage Must Do (to Keep from Sucking) from awhile back? Those are all still in effect. A website has to:

1. Needs to speak the users language
2. Needs to communicate who the customer is
3. Needs to communicate the core benefits
4. Needs to show passion for the product
5. Needs to build trust
6. Needs to push user into the sales funnel

When we look at the following parallax scrolling websites, we’re going to judge them on all of the above aspects.

This isn’t a scientific study, just my own interpretation. And to everybody who I talk bad about, lemme say upfront that I don’t mean any harm by it. If I can do this, so can your potential clients/customers. So take the criticism as it’s meant, with love for making things better.

The Bad

The interesting thing about these websites is that they all seem to do work for big clients. I don’t know what that means. Are their clients out of touch, am I out of touch, or what?

Muffi

I don’t know if Muffi is the name of this company or not. It might be Muffi.pl. This site is prototypical of parallax scrolling websites that don’t work for me. It’s like they say “we’re going to freak you out maaannn!” with their website. And consider me freaked out.

What do they do right? Let’s talk about that first: in the individual screens, they can create a nice parallax effect that shows off their portfolio. And as a tech demonstration, it stands as an impressive achievement. But as the primary showcase for your work, there are a few things that I would have liked to have seen. Like the name of your company.

Can you find it in the above screen shot? If not, try looking in the lower left hand corner, you know, where all logos are supposed to go.

Now, can you tell me what they do? Neither can I. And if you find the page where they show this, they call it “Offers”. Their list of clients is impressive but their site is so disjointed it’s hard to know what they did for whom.

They seem like good digital muscle if you need a programmer or graphic designer but for messaging and knowing how to create a digital experience, look somewhere else.

Green Splash Design

Green Splash Design is probably a fine web design firm. Unlike Muffi above, they feel somewhat conventional to web design firm. My main problem with their website is that their use of parallax scrolling doesn’t really add to anything. But it does seem to hide a bunch of good info. On the front page they have a crazy image of some kids and a monkey with the phrase “we create and innovate”. That’s not a strong value proposition but when combined with the message of “meet an award-winning design agency…” you start to get the picture.

My beef with their front page is that they sacrificed a more traditional layout or even a more impressive parallax layout to give us a slider that describes their main services.

It feels like Green Splash found a cool trick and used it for decoration. Click around their website, it’s not terrible. But it feels canned. Insert a photo at the top, use the same image in the footer, insert your text in the middle black div and we’re done here. The effect becomes just something to show off. It doesn’t add to the site.

In this sense, this website isn’t terrible. It’s just unfulfilled. They show some proficiency with the technology but lack messaging. There’s no narrative, just the illusion of one.

Figmenta

Holy crap. I wanna know if the companies that lead with their portfolio are doing so for any specific reason.

This strikes me as a bad thing but one that’s probably done when you don’t know the phrase value proposition. And so the first thing we get from Figmenta is the weakest value proposition in the history of things. “We are a cross digital agency we make imaginary things”. They also hate proper grammar. So right off the bat we know that their story is going to be odd. And they don’t disappoint. They proceed to show us a bunch of disconnect photos where the brands (clients) aren’t clearly evident and what the company did for them is unclear.

Then boom, we’re dumped into some logos of their clients and a map of their three office locations.

Nothing here makes me feel like they’re selling me anything. It doesn’t make me feel like they want to do the work for me. It just feels like a tech demo. I just want to know, who is impressed by these things? Would it survive the Shark Tank?

The Good

Fortunately, there are some really great examples of parallax scrolling done right on designer websites. Comparing these with the group above will help to illustrate the strengths and weaknesses of each.

Ala

This website does what I found annoying above — leading with the portfolio — but in a way that I love. The difference? They clearly state what they do in above the fold. They do illustration, interface design, and interaction. Everything in how they show off their portfolio underscores these abilities. Love it!

Whiteboard

Whiteboard is a design company that tells their story in a pretty straight-forward manner. The parallax highlights key elements of their story while also pushing users to engage further. What Whiteboard does right here is get the narrative right. By the time you reach the bottom of the page, you have a good feel for who they are as designers. What more can you ask?

Contrast Rebellion

This is not strictly a site for a web agency. It was, however, created by Zoltán Gócza and Richard Gazdik, two dudes who should get some work from a project like this. Besides being a proper showcase for how to do parallax scrolling right, the point of their website is using appropriate contrast in website designs. So Double-Word score! I could talk more about this one but really, you should just go check it out. From the colors to how they unroll the narrative, Contrast Rebellion is doing parallax right.