Pop quiz, hotshot. Parallax is:
A) An advanced race of creatures from Dr. Who with the ability to parallel park...sinisterly.
B) A web page design used to tell a long visual story.
C) The title of the newest movie Nic Cage "stars" in.
While everything in me wishes it was C, the correct answer happens to be B. Parallax is hands-down the hottest web design trend to sweep the digital world. Undoubtedly you've heard the phrase, and you might have seen examples without even knowing it. Here's a glimpse:
It's cool, it's flashy and gosh darn it you need it now. Right? Hold your proverbial horses. Before you go sprinting for your spot on the bandwagon, have you considered the SEO implications? How your story would fit in this design? The work that goes into creating such a masterpiece? And what about conversion rates — could it have an effect on those? Point is, jumping into parallax is a big decision, and you need all the facts first. Fortunately for you, we’re here to provide you with The Definitive Guide to Parallax Design.
What Is Parallax? | One Page: Parallax's Companion | Parallax Benefits
Examples | Criticism of Parallax | Should You Get It?
What Is Parallax Design?
Believe it or not, parallax has been around longer than the internet.
In fact, parallax is one of the most interesting design trends because, in the past, its use has signaled the onset of something big for whatever medium it's implemented in.
Take a step back all the way to 1930. Fireside chats were a big deal, there was apparently a lot of dust everywhere and the golden age of animation was just beginning.
A few people in this wide animation world decided to get together and come up with a new way of filming cartoons. It was called the multiplane camera effect, which amounts to moving pieces of art across the camera at different speeds, creating three-dimensional depth.
Thus, parallax was born.
Fast forward to the 1980s. The wildly popular and friendship-destroying game Pong left an insatiable appetite for more vidya games. The industry realized its potential and started exploring the art of game design. And you know what that means.
That's right. Parallax. The technique started with a little game called Moon Patrol, then quickly made its way to mainstay classics like Sonic The Hedgehog, Super Mario and a whole lot more.
So what exactly does this technique look like? Take a look at the gif below.
See how the foreground (bushes) moves quicker than the midground (hills) and blindingly faster than the background (sky)?
That's parallax happening. It's creating the illusion of depth in a 2-D world by making stacked layers move at different speeds.
It's the same thing we see in real life. You're in the passenger seat of a car, flying down the road at five miles over the speed limit. You look out the window and see the stores on the side of the road fly past, yet the mountains deep in the distance barely move.
That's parallax happening.
And now parallax is coming into the webpage fold. More and more sites are transitioning to parallax, producing pleasing and powerful pages for personal perusal (alliteration is great).
But how does this style translate to web design? Let's stick with that gif and break it down piece by piece.
Background: This is the static part of the webpage. As you scroll down (or even across), that background image of the site will appear as if it's barely moving at all. This is what sets the page up for depth.
Intermediate: Some sites have this, others don't. This would classify as any images that are above the background image but not part of the content. These images move a bit faster than the background, added to create a sense of depth against the background.
Content: The content is what finishes off the three dimensional feel. The main focus of the page (generally word-focused, though sometimes images take the forefront) will float over the previous two layers, largely moving as fast as you can scroll. This cohesive movement and perspective is what defines the parallax style, but the core function is determined by something else: one page.
One Page: The Companion to Parallax's Dr. Who
Parallax is kind of like Dr. Who. Stay with me, this is going somewhere. I promise. Parallax has been around for a long time -- almost a full century. It has all the knowledge of the decades behind it, fueled by artistic passion and the driving need to do good. But, it's new to the web. It needed to find a way to be useful in this medium, as it has in the media before. So it had to regenerate. Take on a new form in order to serve a new purpose. And it needed a companion. Someone to be the bridge between new trends and old experience.
That companion is one page.
One page design had been around since 2010, becoming more prevalent recently. The guiding theory behind one page design is that a single page will hold the majority of the content on a website. Content on this type of page is sectioned off into content boxes as opposed to their own separate pages. Quick example —Check out the Affiliate Minisite landing page template we created at LeadPages.
While there's a lot of beautiful imagery happening, it's all static — the main difference between standard one page and parallax. The core idea is still what your affiliate program can offer, but the content sections are broken up into different offerings. These different content sections would traditionally be their own pages, yet they're held on one entire page. That's the big differentiation point between one page design vs. other designs on the web. As such, it is the overarching theme that parallax falls under. Parallax is a specific style dependant on existing design. One page is the design that parallax is applied to. But once you have that style in place, it can be an absolute game-changer for you.
What Parallax Can Do For You
There's a reason you're seeing it everywhere. From 14-year-olds listening to Now 75 (or whatever they're on now) all the way to 80-year-olds who accidentally clicked the IE button instead of the Solitaire shortcut, parallax draws the universal ooo's and ahhh's.
But what's that mean for you, though? Audible ovations are always a plus, but those are only the byproducts. So what is it about parallax that gets you from a claim to acclaim?
Several things, actually.
1) You can tell an uninterrupted story.
When you watch a movie, it's nice to be able to watch that hour and a half of cinematography/Michael Bay explosion extravaganza uninterrupted, right? How annoying would it be if every 20 minutes you had to get up and switch out Blu-Rays?
Not very fun. And that's what parallax solves.
You don't have to worry about telling a story across multiple pages. There's nothing else to click on that distracts from your message.
Everything is all on one page.
That's a massive plus from a psychological standpoint. Scrolling is a continuation, whereas clicking is a decision. It's easier to continue down the path you're on instead of having to pick which fork in the road you want to take.
2) You control the information order.
Think about the last time you bought something on Amazon. What steps did you take to get to the purchase? Did you look at the price, then check the description, the pictures, then take a look at what Danny V. from Ohio had to say about the product?
I guarantee the way YOU interact with that page isn't 100% identical to everyone else who touched that page.
Parallax unifies that process.
When you're selling something on a web page, your word structure is your sales pitch. Parallax enables you to pitch like a storied pro: the build-up, the hook, then the clincher.
Each site in this style is new to the visitor. They know they have to scroll, sure, but they don't know what that next scroll will give them. So they keep scrolling in the only direction they can: the direction you want them to.
Now you know exactly how your story, your pitch, will be viewed. Your writing can be linear, just like if you were talking on the phone or writing a sales letter.
3) You stand out artistically.
They say a picture's worth a thousand words.
If that's the case, a parallax page is like War and Peace wrapped in the Mona Lisa. The Reese’s Peanut Butter Cup of the internet, if you will.
These types of sites transcend regular pages. Some border on actual works of art (you'll see a few in the next section). Parallax is currently the hottest way for the best design minds to flex their Adobe skills and create truly interactive masterpieces.
In a sense, it's like going from this:
To this:
4) You have the perception of being current.
If you work in any high-profile business where visibility matters, then the sad saying rings true:
Perception matters.
Imagine if you were a top-of-the-line R&D firm and this was your website.
AHHH! MY EYES!!! So...much....flash....animation...
Even if your site isn't necessarily THAT old, it sure can look like it is if your competition is staying current with new trends.
With parallax, you're on the bleeding-edge of new style. There won't be any question of if you're "with the times."
You are the times.
5) You don't have to worry (as) much about SEO.
Listen. SEO is extremely important. I came from a website that had 4,000+ pages and I had to manage every single one of those bad boys.
But that was my job. As in, there was a person whose sole focus was to optimize SEO for all those pages.
You might not have that person with you business. And that's ok.
With the parallax style, you only have to worry about a few pages for SEO purposes. Even if you know absolutely nothing about SEO, the cost of hiring someone to construct five pages vs. 1,500 is substantially cheaper.
But enough about the what and how. Let's take a look at the one.
The only.
Parallax.
Neat Examples of Parallax Design
One year ago, the list of parallax sites that were good was pretty small. Now, the choices are endless. Different takes on the style have popped up everywhere, but these are ten of my favorite ones.
NASA PROSPECT
Why I Like It: What a cool way to tell a story. Lots of other sites tell a story, too, but they're trying to sell something. Not here. This is entertainment for knowledge's sake. Plus, they reverse the normal parallax structure by making the background and text one layer and the pictures the focal point of the movement.
HONDA CRV
Why I Like It: They intersperse lots of media with slight parallax animation. You won't normally classify this as a straight one page design, but Honda uses parallax imagery to break up media-rich content sections. A more subtle use of the style, but that's not a bad thing at all.
BETTER OR BESTOR
Why I Like It: This has subtle parallax like the Honda example, but it's used for the personal portfolio side. However, where Honda used parallax to break up content sections, this site uses it within alternating sections. Plus, it's MY site, so I've gotta show it love, right?
ALA
Why I Like It: They use parallax within the content sections like Better or Bestor, but they play with the speed and design a lot more. I literally mouthed the word "....Trippy..." when I first saw this site. What's important is that the style still doesn't take away from the content, which is a largely overlooked principle.
MAKE YOUR MONEY MATTER
Why I Like It: Their scrolling is the smoothest I've ever seen. Not only do they tell an immersive story that sells you something, but the parallax animation they use is intricate and gorgeous. They do a fantastic job of balancing wowing you with imagery vs. letting the small snippets of content take center stage.
NEOMAM
Why I Like It: No one ever thought of making an infographic into parallax. Until these folks, that is. And why not? The imagery is already there. This is a whole new way to display the already popular infographic format. Great use of parallax behind the content, and how meta is it that the infographic is about why we like infographics!
MADWELL
Why I Like It: This is one of the best parallax examples for an agency I've seen to date. They've turned their actual work into parallax examples that fill the content sections. This is two-layer style, but look at how beautiful the site looks with such a simple treatment.
PEUGEOT
Why I Like It: They include an auto scroll option. The parallax is straight animation on the site, almost feeling like a 3-D comic book. But this group included the ability to let the site scroll for you, taking you through the page like it's a video. What a great way to guarantee full viewership from beginning to end.
PITCHFORK
Note: Link contains some NSFW language.
Why I Like It: They advanced parallax even further by making the static background image...well...not static. Technically, they're cheating to use depth by making the background a looping video clip, but they still adhere to parallax guidelines by scrolling the text over "static" imagery. But c'mon. This was too awesome to leave out.
EXSUS
Why I Like It: This is the flat-out COOLEST parallax site on the web. The interactivity of the page is off the charts. I'll be honest with you: the first time I saw this page, I scrolled through it all and didn't pay attention to the words. I just enjoyed the intricacy of the scenery that much.
It's not all roses and upvotes, though. Just like anything else on the internet, there ARE some potential downsides you've got to really consider. Which brings me to....
Criticism of Parallax
One page design has been around for a few years. But parallax is still relatively new and, as with all new things, discoveries are made after larger sample sizes are collected and synthesized.
Sometimes the discoveries have conflicting findings. This IS the internet, after all. Land of the opinionated and the home of the comment thread. Theories can be proven or disproven with the right numbers and perspective to back you up.
I’ve pored over all those reports and found the consistent themes that are universally agreed upon in opposition of parallax. So here are four things we know to be, at the very least, worthy of discussion.
1) SEO is more difficult.
I know. I know. A few paragraphs ago I was telling you it was a blessing to have less SEO.
Put down the pitchforks and hear me out. While having less SEO is a blessing for the non-search engine savvy, it's also in itself the curse. The minimalism limits what you can do vs. if you had a more traditional site design.
First off, you have to deal with losing keywords. While it's great to have so much of your site on one page, you're now challenged with pulling the general theme from that content and building keywords from there.
Let me explain.
Say your site had information about dogs. You used to have a German Shepherd page, a Golden Retriever page and a Poodle page. Each of those pages had keywords surrounding those specific breeds, meaning people who searched for "cute german shepherds" would probably land on your site because of the German Shepherd page.
Now, since all your dog information is on one page with parallax, you can't run keywords for all those breeds. The structure of a single page would flag you with keyword stuffing if you tried to cram them all in there. Conversely, if you tried to put one of each keyword on the page then you'd spread yourself too thin and ultimately get no one on the site.
The whole losing pages thing ends up hurting if you try to consolidate too much information onto a single page. Pages with link equity, page count, site size and, of course, keywords can be lost in this transition.
If people can't find your website, it doesn't matter how pretty it is. Good SEO is fundamental, and parallax is much weaker in that department than traditional website structures.
2) Load times can destroy you.
There's a reason these sites are so successful. The imagery is stunning. You get lost in watching that astronaut glide over the spacey, star-filled background.
Think about how many images that is, though. And the order they have to load. And how they have to interact.
That's a whole lotta Javascript and images getting called up. If the end user has a slow connection, views on mobile or (god forbid) runs it on IE, they're either A) Going to leave because of the high load time or B) Not get the full experience you intended. And that's all assuming your code is super clean.
Google will drop you down the rankings if your site loads slowly, but what you really need to worry about is the amount of people who will bounce due to a lack of patience. It all adds up to an SEO and UE mess if your site can't load quickly.
3) If you rely on page views for advertising, you'll lose money.
Kind of a no-brainer, but people forget about this when they switch their site over to parallax.
Lots of sites go with the CPV/CPM model of advertising. Page views drive the majority of income for these sites, so you can imagine what happens if they transition to a single page as opposed to multiple pages. Less page views = cold hard cash loss.
4) Parallax might not even improve the site viewing experience.
There's a study out there conducted at Purdue University that claims parallax might not even be that much more effective than traditional sites. From the study:
“A Mann-Whitney test was performed to compare participants’ survey responses with respect to the five measured variables. However, it failed to return any significant differences between the groups, except for ‘fun’. The finding revealed that although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience."
Something to note with this test: there's dispute over if the sites were true parallax sites. I wasn't privy to the actual pages they used, but in 2013 people were widely confusing one page design with parallax style (part of the reason I created this guide in the first place). The structure of both is very similar, but the differences of parallax are enough to warrant some healthy skepticism with the study.
With all that in mind, it brings us to the burning question on everyone's minds.
Do You Need Parallax?
Maybe.
Ok, ok. That's a cop-out. And very anti-climactic. You're looking for something more concrete, right?
Honestly, it really does depend on you. You've seen the pros and cons, as well as some great site examples. Now you've got to ask yourself if it's worth it.
Here's what I did to help you out with that question. I went and talked to 22 different companies/people that switched over to the parallax design and I asked them what went into the decision. A couple commonalities stood out, and I'll share them with you here.
Ask yourself these things:
1) Can you consolidate everything?
This was bar-none the most popular question these companies and people asked themselves. So popular, in fact, that it was unanimously asked. Needless to say, this is the big one you've got to address.
Do you have such specialized content that you can put it all on one page? Are your goals singular enough that one page can focus on one specific message?
With this style, you have to be willing to settle with one main URL that has one specific set of keywords covering the main points on the page. Consolidating everything can be tricky, but if it's all under the same goal and would add to your main story, then parallax could be a good fit.
2) Do you have an engaging story to tell?
Parallax, chiefly, is meant to entertain. You can get your point across well enough in other styles, but parallax is there to stun with imagery.
So you've got to sit down, look in the mirror and ask yourself, "What'CHU talkin' 'bout, Willis?" If it starts with any variation of , "Well, we've got...", "So, like, there's..." or "It's kinda about..." then stop.
Your story has to be strong. It has to be able to translate to visuals, and it has to engage a visitor for at least five straight minutes. You need to know exactly what you want to say, how you want to say it and, most importantly, why someone would want to spend their valuable time on your new page.
You aren't competing against your competitors. You're competing for the user's time. And that's a whole lot of businesses/activities to go toe-to-toe with. But if you can give them a reason to stay with your story, then parallax could be for you.
3) Will it translate to responsive?
26% of website traffic comes from mobile devices.
By the end of 2014, mobile internet usage should overtake desktop internet usage.
Half of all local searches are performed with a mobile device.
See the importance of mobile marketing? Good.
It goes unsaid that your site needs to be mobile-friendly. A responsive site is a successful site these days. That’s why our developers and designers work so hard to make all of our landing page templates at LeadPages 100% mobile responsive and easy to view on every device under the sun.
The tough part happens to be making parallax work on a mobile device.
Granted, there are sites that do it well. Parallax can be structured in a way where the images condense to keep the general flow of the desktop version intact.
But it's kind of tricky. And it leads in to my next point.
4) Can you afford it?
Successfully doing everything on this list won't come cheap. Everything from story concept/graphics and existing content consolidation to SEO and building the site are extremely demanding and require some real pros to execute.
Those pros don't come cheap. You're essentially creating (if you're doing it correctly) a piece of interactive art for others to enjoy. The Starry Night wasn't created in a day, and the same can be said of a good parallax site. It takes weeks and months to create, and that craftsmanship and time demand some serious pay.
The decision is ultimately up to you. Parallax is a type of design, and design is always fluid and evolving.
But one thing is for certain: Parallax has been at the beginning of many different industry revolutions. It happened with TV. It happened with video games. And now, it could be happening on the internet.
