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:
- Needs to speak the users language
- Needs to communicate who the customer is
- Needs to communicate the core benefits
- Needs to show passion for the product
- Needs to build trust
- 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 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?
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.
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?
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.
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 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?
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.
Pingback: 6 of the Best and Worst Parallax Scrolling Websites for Design Agencies | MarketingHits.com
Thanks for this article. I’ve been waiting for someone to discuss the poor use of Parallax scrolling. Once again we get this fantastic new way of presenting information and it gets abused by people trying to look trendy rather than as a solution.
Pingback: 6 of the Best and Worst Parallax Scrolling Websites for Design … : User Experience Design Rx
Pingback: Learn, Buy, and Cheat Your Way To An Incredible Parallax Scrolling Website | A Better User Experience
Pingback: 4 Top Web Design Trends for 2013
Pingback: Cool examples of Parallax Scrolling Websites
Used parallax on my website really loving the whole HTML5/CSS3 style everyone is going for now check my website out http://www.samjayheaton.com/ and let me know what you think!
in my opinion most of the websites showed here are not really about PARALLAX scrolling. Actually parallax “is a displacement or difference in the apparent position of an object[…]” (http://en.wikipedia.org/wiki/Parallax) and regarding websites it is used to create a 3D-Effekt. I think “real” parallax scrolling websites are sites like the following:
Besides that I really like the article 🙂
Ha. I like the article and this comment made it for me 😉
Amazing to think that this was written in 2013 and parallax only seems to be coming into it’s own recently:
Pingback: Utilisez le parallax scrolling avec précaution « RichCommerce.fr RichCommerce.fr
Pingback: Web Design Trends In 2013 (And Why) | A Better User Experience
Contrast Rebellion……………my eyes hurt after looking at their text. Too much contrast with text is like staring at a light bulb.
I have realized something about parallax scrolling : I hate it.
OK, so it’s a LOT of fun the very first time you go to a website, but after going there once, the gimmick tests my patience. Also, the lack of intuitive navigation means I have to acclimate myself to the way each website is intended to work (usability expectations suck). I know, I know, “dude, all you have to do is scroll!”, but what happens if I don’t want to scroll? I hit “About” on some of these pages, it scrolls me down to some section of a very tall website, then I can’t get back without scrolling all the way up.
Websites that did have a continuous-presence of navigation were oft-times using image icons sans text, which meant I had to scroll over the image to figure out what it was representing.
Basically, these sites are very impressive at first, followed by frustration, followed by “get me out of here!!”.
Awesome article. We have noticed that 99% of parallax scrolling sites are not SEO friendly.
We created a SEO parallax scrolling site. We are an SEO Agency in Argentina. The site is here
Our goal with this project was to do a
Responsive Web Design
SEO (Onsite optimization site)
We think we did a pretty good job. It’s not perfect but most parallax scrolling sites do not have SEO. And very few SEO Agencies have parallax scrolling sites. We have yet to find one. Let me know if you do.
Here is a really nice tutorial about SEO and Parallax http://www.seobuzzinternetmarketing.com/blog/how-to-create-a-parallax-scrolling-website-with-seo/
Thanks for this useful post! I’ve bookmarked for future reference. Another site that I also recommend that you haven’t included in your post is http://www.dreame.biz. I love it because it has more than 50+ Tutorials.
Thank you for the valuable information. The Way of Your article presentation is very effective and very easy to understand about the process. Keep Blogging!