Parallax Scrolling 101: The Good, The Bad and The Beautiful

One of the hottest trends in website design is parallax scrolling. First employed by Ian Coyle on the Nike Better World site in 2011, this is a special scrolling technique wherein background images move by the camera – or in this case, your computer screen – more slowly than images in the foreground, thereby creating an illusion of depth in what is in reality a two-dimensional environment on your screen.

With its explosive popularity, you have likely seen this effect in use but may not have known exactly what it was or how parallax scrolling is reshaping the landscape of today’s Web. But just like any trend or technique, parallax scrolling is not the right fit for every site, and it does have a few drawbacks. To help you decide whether this is a bandwagon you should jump on, let’s dive in and take a look at parallax scrolling from every angle – the good, the bad and the beautiful.

The good

The obvious benefit of parallax scrolling is its undeniable visual wow factor. Even though this technique has become very popular of late, it is still not so overdone that it has become commonplace. This means that any site that uses this approach well will make a lasting impression on its visitors. In a world where every company and organization is looking for a way to stand out from the crowd, this can be a powerful advantage.

The bad

While the bold visual impact of parallax scrolling is hard to beat, there is a downside to all that eye-popping punch: due to the weight of these graphic-intensive designs, these sites generally take a bit longer to load. In our modern age of impatience, this could potentially be a deal-breaker. Many people will not wait more than a few seconds for your site to load, so if your awesome parallax scrolling means that you have a 20-second load time (which is not unheard of), that is a big problem.

The reason that parallax sites take longer to load is due to the size of the images that must be used to create this style of presentation. As a result, you must be cautious in how you implement this technique. It's easy to overdo it, thereby making your site so large and cumbersome that you’ll turn away customers who aren’t inclined to wait for the page and its images to load.

If you are considering incorporating a parallax effect on your site, be sure to consider performance and work with your web development team to ensure that all images are optimized so that your site not only looks great but also loads as quickly as possible.

The beautiful

Let’s look at a few examples of parallax scrolling that really amp up the wow factor:

Life Of Pi

The website for the movie Life of Pi illustrates the incredible journey of not only the characters in the film but also of the filmmakers who took on this challenging story.

Through the use of numerous still images taken from the film and pieced together, the implementation of the scrolling technique here gives the illusion of video content, providing an element of motion that really enhances the presentation.

Other effects used include images that start out black and white or as sketches and are colored in as you scroll down the page, as well as content that appears from the sides of the screen. In this way, the site is the perfect reflection of a film that relies heavily on visual effects, recreating that feeling of “movie magic” on the screen for its visitors.

Rimmel London

Rimmel London's site uses a traditional parallax effect, where images of the company's products appear in the foreground and scroll at a different rate than those in the background. This gives the site a sense of visual interest and perception of dimension that you simply would not get with flat, static photographs.

Parallax.js

This site, which is a sandbox aimed at web developers, has an incredibly complex and layered implementation of the parallax effect.

The scene depicted has multiple layers of ocean waves that move at different speeds and patterns along with a lighthouse that bobs up and down to give the illusion of an undulating seascape. For added effect, users on mobile devices equipped with a gyroscope can use the orientation of the device to manipulate the way the page moves and flows.

As this intricately layered demonstration of the parallax scrolling effect shows, with so many layers and axes of motion at your disposal, there is a mind-boggling array of possibilities for the kind of experience you could design for your visitors.

Make Your Money Matter

The purpose behind this website is to illustrate the difference between putting your money in a bank versus a credit union.

As you scroll down the page, a series of whimsical illustrations are layered into the page to tell the story of “where your money really goes” when you put it in a bank. In doing so, a topic that is fairly dry and serious becomes much more engaging and approachable through the strength of its presentation. The end result is much more powerful than it would be had the site’s owners simply published a flat page of content and bullet points relating this same information.

Sony

In much the same way as the site for Life of Pi, Sony uses a series of photographic images strung together to create the sensation that the visitor is watching a video in motion, as Sony’s products – ranging from a 4k television screen, speakers, a smartphone and more – appear to assemble themselves right before their very eyes.

This is a very cool presentation technique that far surpasses what traditional still photography alone could capture. Even a video of the product assembly process would not be nearly as engaging, because here, there is the added element of surrealism where the user’s scroll is what controls the build of the products.

TEDxGUC

The site for TedxGUC is far less intricate than others covered so far, but it’s still a great example of how parallax scrolling can deliver a narrative via the Web.

Using nothing but elementary illustrations and some well-written copy, this approach conveys its intended message much more effectively than it could through a few paragraphs of text alone. In fact, the strength of this site is in its simplicity, which goes to show that you do not need to be as over-the-top as the Life of Pi or Sony examples in order to use make effective use of the parallax scrolling technique. Sometimes, less is, in fact, more.

But does it convert?

The million dollar question is whether parallax scrolling has any measurable impact on the power of a website to convert leads and customers. While the results are still hazy on that front, a Purdue University study from 2013 did find that “although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience.” This is, of course, just one attempt to evaluate a relatively new technique, but it is noteworthy.

That being said, this particular study did not take into account the memorability of the sites included. The ability of parallax scrolling sites to make a lasting impression is one of their key benefits – one which could theoretically have a very real effect on the site’s ability to capture and convert customers.

In summary

While the business benefits of parallax scrolling are yet to be fully determined, the visual wow factor of this technique is very appealing and is one of the main reasons it has become such a popular trend. In the end, like any element of web design and marketing, parallax scrolling is something that you and your trusted web development team will need to decide whether or not it is a fit for your brand and your website.

SEO the Right Way

Search engine optimization, or SEO, is a term you’ve undoubtedly been introduced to, likely by spammy email solicitations or SEO “gurus” who promise to “fix” your site so that it rockets straight to the top of search engine results.

But is this the right approach? After all, search engines don’t buy your products or services – people do. As a result, it’s much more important to optimize your website so that it provides the best possible experience for human users, not for Google.

In this article, we’ll examine why optimizing for real people – and better serving the needs of your website visitors – will ultimately yield greater success in capturing and converting new customers. We’ll start by letting you in on a little secret that those so-called SEO “specialists” don’t want you to know: by optimizing for humans, you will also be optimizing for search engines.

Why the “SEO-Only” approach fails

Before we dive into the principles and benefits of optimizing for humans, let’s first take a look at what I call the “SEO-only” approach and why it often falls short of expectations.

Consider this scenario:

You’re in the market to purchase a certain product or service, so you type some relevant keywords into your search engine of choice. You click on the top result, and as the website loads in your browser window, the next words out of your mouth are, “what the heck is this?”

The site is a confusing mess, and there is no clear indication of what the company does, what sets them apart or what you steps you should take next to progress through the site. Frustrated, you quickly click your browser’s “back” button and select a different result from the list, hoping to land on a site that will give you information that is easy to understand and seems trustworthy.

How many times has this happened to you? If you’re like me, it happens all the time.

In the example above, the website was “optimized” for search engines, and it ranked favorably for key search phrases. This is good, as it means that when users are searching for the products or services the company offers, their website has a good chance of appearing on the first page of the search results and being clicked on. However, the effect of bringing this visitor to the website was rendered null and void because the poor user experience it offered drove them away just as quickly as they landed.

In other words, from an SEO standpoint, the site is successful, as it ranks high for the right keywords and phrases. From a business standpoint, however, the site is an abject failure. It did not convert a customer. Even worse, it drove that customer away and directly to the site of a competitor. More often than not, this is what will happen if you optimize for only for search engines and not for actual people.

The complete package

The reason the SEO-only approach does not work is because it focuses only on a single piece of the picture – achieving a high ranking.

As we’ve just seen, however, capturing a lead because of strong ranking but then losing their business due to a poorly designed website ultimately yields no benefit to your bottom line.

To truly succeed, your website needs much more than just favorable search engine placement. The complete packages includes:

• Quality design
• Intuitive user experience
• Relevant, useful and timely content
• Support for a variety of devices
• Findability

Quality design and intuitive user experience

These two items often go hand-in-hand, especially when we are talking about optimizing websites for humans. The value of top-notch design is often underestimated and seen as little more than “making things looks nice,” but quality design is about so much more than that.

A quality design is certainly one that is aesthetically appealing, but it is also one that is easy to use. The simple truth is that your customers – and potential customers – do not come to your website to admire its visual design like a work of art hanging in a gallery. They come to your site to accomplish a task, whether that is to gather information, book an appointment, make a purchase, etc. They come with a specific purpose, and a quality design is one that does not distract them from that goal. Instead, it helps them fulfill it.

The scenario we described earlier of a user visiting a website that ranked high in search results only to immediately abandon the site due to a confusing user experience is a great example of why the quality of the design is critical to your site’s success. It helps ensure that the site visitors you attract are ones you can convert into actual business.

Additionally, a great user experience is one that happy visitors will share with others through word of mouth or, perhaps, via links on social networks or blogs. A quality design and user experience can help turn your satisfied customers into promoters of your website. And as we will see in a moment, inbound links to your website can be a very valuable asset.

Relevant, useful and timely content

While an elegant design and refined user experience are very important aspects of optimizing your site for humans, great content is what gives your visitors a reason to come back time after time. Providing value-add resources that are relevant, useful and timely – and that your site visitors actually want – is how you optimize your web content for humans.

You may be proud of the awards your company has won, the great things that have been written about you, your leadership team’s accomplishments or your company’s charitable outreach efforts, but that’s probably not the content your audience is looking for. Therefore, if you’re organizing your site around showcasing this type of content, you are only serving your own needs, not your visitors’.

Optimizing your web content for your visitors means putting yourself in their shoes. Ask yourself what they want to see, and then put that content front and center. All of that other stuff can still have a place on your site, but not at the expense of elevating the content your audience is actively looking for. That content must be given top priority.

You also need to make sure your content is useful and timely. If something is no longer relevant, remove it or relegate it to your archives and replace it with something that is new and interesting. Publishing a steady stream of fresh content is one of the best ways to encourage links back to your website from visitors who found that content useful.

What about inbound links?

One of the tried-and-true tactics of good search engine optimization is increasing your number of inbound links – that is, links from other sites that point to your own site.

Search engines treat these links as votes of approval for the quality and relevance of your site and factor the number of links you have established into their rankings calculation. Therefore, the more quality inbound links you have, the better your chances of climbing the rankings.

The practice of building inbound links is not an exercise in quantity over quality, however. Anyone claiming that they can get you “5,000 inbound links quickly!” is someone you should run away from – quickly! You don’t want these links, many of which come from link farms and other spammy websites. Search engines are smart enough to discern these type of no-quality links, which can actually send your ranking plummeting or, even worse, get your site blacklisted entirely.

What you want are high quality links from real people who have read your content and want to share it with others. Whether these links live on social media platforms, articles, blog posts or another site’s brochure pages, they are produced when a thinking human consumes your content and says, “Hey! That was really good. Other people will find this valuable, too. Let me link to this page.”

These links will both put your website in front of more people who are interested in the types of content you publish and help increase your search results rankings at the same time – a perfect example of how optimizing for humans simultaneously achieves the objective of optimizing for search engines.

Support for a variety of devices

Long gone are the days when the only way a user would view your website would be when sitting in front of a desktop computer with a large monitor.

Today, you can be assured that your website is being accessed via a staggering variety of devices with an array of different screen sizes. From handheld smartphones to tablets to laptop computers to the aforementioned desktops, your website must work well on a wide range of devices in order to be successful.

If you’ve ever searched for something on your phone, found a listing that looked promising and touched the link only to be presented with a website that was designed for a large screen only, you know what a painful experience that can be – that is, if you even bothered trying to use the site. Most visitors in this situation will just leave right away and look for another site that works well on their device. Again, the site in this scenario we’ve painted was optimized well for search, and it came up favorably. But yet again, the opportunity to convert was squandered due to the site’s poor user experience – in this case, the experience of using the site on a mobile device.

Once a visitor is gone, they are likely gone for good. Expecting them to come back to your site later when they are on a desktop computer where the site will perform better is wishful – and erroneous – thinking.

Optimizing for humans means making sure your website works well for them the first time they visit the site, regardless of the device they choose to do so with.

Findable websites

Yes, this is where the traditional SEO approach of creating high rankings for relevant search terms comes in.

When a searcher is looking for the products, services or information your site offers, you want that site to rank as high as possible in the search engine’s results to give it the best chance of being seen and clicked.

Achieving this high ranking is where most traditional SEO services end, however. As this article and the scenarios illustrated so far have shown, good rankings are just the start. What your site does with the traffic it captures through organic search is equally important – and this is where human optimization and all of the elements it encompasses (quality design, relevant content, device support, etc.) come into play.

Creating a “findable” website is about more than just attaining high search engine rankings, however. You want your website to be in front of someone whenever they are in need of your products or services.

This could mean a search engine result, but it could also mean a referral from a trusted friend or colleague. It could even mean a link on a social networking site or blog.

By optimizing for humans and presenting them with truly useful content within the framework of a design that is easy and enjoyable to use and that works well on any of the devices they may use to access the site, you’ll effectively encourage them to share your site with others.

This added exposure helps increase the findability of your website and your chances of having it land in front of real people who are actively looking for what you have to offer. This is the power of optimizing your website for humans.

Humans first, last and always

Optimizing your website for humans means making choices that will help them obtain the information they need from your website or perform the task they have set out to accomplish quickly, easily and without encountering any obstacles along the way.

It means putting the needs of real people first and foremost in all decisions that shape the design and content, with the understanding that by doing so, your site will be more appealing to those people, which can in turn make it more appealing to search engines, which will attract more people and links to the site, which will make it even more appealing to search engines, and so on and so forth...

It’s a cycle of success that starts with making sure that every element and every aspect of your site is carefully chosen and crafted to create an experience that is optimized for the human beings who will ultimately decide whether or not to purchase your products or services rather than just for the search engine algorithms that can only decide where your site ranks on a page.