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.

---

Intelligent Design: Transform Your Website into a Sales Engine with Machine Learning

Machine learning: The phrase evokes images of computers playing chess or IBM’s Watson destroying two legendary Jeopardy! champions in a three-day tournament. The truth is, though, machine learning is no longer a novelty; it’s now an integral part of our daily lives. Every time you receive a product recommendation from Amazon, your email server weeds out spam before it reaches your inbox or you enjoy a playlist on Pandora, you’re seeing machine learning in action. In a nutshell, machine learning is the science of training computers to recognize data patterns and make adjustments automatically when those patterns change. While on the surface this may not sound very exciting, nothing could be further from the truth. In fact, machine learning is the key to transforming your website into a lean, mean selling machine.

Understanding machine learning in 100 words or less

Machine learning uses algorithms to build models from data; as more data is collected, the algorithms are “trained” to adapt to changes. There are two ways in which machine learning can be implemented: supervised and unsupervised. Supervised learning algorithms are used to create models that establish relationships between types of data — the relationship between purchase data and user clickstream data, for example. Unsupervised learning uses algorithms to gain insights into customer behaviors and preferences by looking for patterns within the data. Both of these methodologies are designed to make marketing and e-commerce more exact, more personal and more profitable.

Putting machine learning to work

Netflix, Pandora and Amazon are all familiar examples of machine learning in action. All three use recommender systems powered by complex algorithms. These systems collect data about your browsing activities, past selections and any ratings or reviews you may have provided. Then they segment you into clusters with other customers who have demonstrated similar interests or behaviors and use this data to suggest items that might appeal to you based on the browsing and purchasing habits of these other customers. You see this on Netflix as the category titled “Because you watched...” and on Amazon as “Customers who viewed this also viewed...” To gain a deeper understanding of how these algorithms work, let’s take a closer look at Amazon. To Amazon, you are a very long row of numbers in a massive table of data. Your row represents everything you’ve looked at, clicked on, purchased (or, equally as important, not purchased) or reviewed on the site. The other rows in this gargantuan table encompass the same thing for the millions of other customers who shop on Amazon. With every click, visit and purchase, more data is added to your row, which allows Amazon to constantly mold and shape the products it recommends to you and the special offers you receive based on an ever-evolving stream of information about you that is being collected and stored. Another innovative example is True Fit, a retail software start-up that is on a mission to apply data analytics to increase customer confidence in online clothing purchases while decreasing the number of returns for e-railers. Well-known fashion retailers, including Nordstrom, Macy’s and Guess, have implemented True Fit’s algorithms on their e-commerce sites. When customers shop on these sites, they’re asked to create a profile that includes their height, weight and perhaps most importantly, the size and brand of their favorite piece of clothing. Using that data, True Fit is able to recommend the correct size for a specific brand and article of clothing. Even more importantly, as customers continue to use the True Fit system, it learns more about their personal style and preferences and steers them toward purchases they’ll be more likely to keep and enjoy rather than return.

How machine learning drives smarter marketing

You don’t need the resources of major e-commerce giants like Amazon or Netflix to take advantage of machine learning to to improve your e-commerce site and your online marketing efforts. By enhancing your existing site with systems that allow you to create a virtual marketing intelligence brain, you can create a more personalized – and therefore higher quality – shopping experience for your customers. By establishing this type of marketing intelligence ecosystem, you can mine the data provided by customers every time they visit your site to answer vital questions that will help you fine-tune your site and your online marketing strategy – questions like these:

• How likely is a given website visitor to convert?
• What behaviors characterize customers who are likely to buy?
• What behaviors characterize customers who are likely not to buy?
• How can new visitors be identified as high-potential long-term customers?
• Which type of web traffic has the most value?
• Which products or services appeal most to a given segment of customers?
• Given the contents of a particular customer’s shopping cart, which additional products are high-potential recommendations?
• How can website visits be optimized to provide the best possible experience for each individual customer?

Making it personal

The final question in the list above is one that deserves special notice because of the staggering potential for using machine learning to create a more personalized shopping experience – one of the key drivers for increasing online sales. Not only can the data collected via such marketing intelligence ecosystems be used to drive recommender systems, it can also be used to create personalized advertising based on market segments — or even individual profiles — that can be distributed across a variety of desktop, mobile and social platforms. This type of advertising can be tailored to any number of personal preferences and demographic information, including age, marital status, location, lifestyle choices, typical purchases, brand preferences and so on. Ads can be focused to such a granular level that they reflect specific colors a given customer prefers, and their individual purchase drivers, such as status or cost-effectiveness. Another exciting aspect of machine learning-based personalization is the development of individual customer profiles. You can even combine online and offline customer data to create a more complete picture of a given user. Types of data included in this profile might include online and in-store purchases, membership and activity in rewards programs, product ratings and clothing sizes. Just imagine how much more powerful your marketing efforts could be if you were armed with this level of information. One of the most important aspects of a successful marketing intelligence ecosystem is how data mined from customer activities is combined with sound business rules in order to make smart recommendations that are well received by customers and that do not compromise their trust in your brand. For example, most people who walk into a supermarket like bananas and will often buy some. So shouldn’t the recommender simply recommend bananas to every customer? No – because it wouldn’t help the customer, and it wouldn’t increase banana sales. So a smart supermarket recommender would always include a rule to exclude recommending bananas. At the other end of the spectrum, the recommender shouldn’t push high-margin items just because it’s beneficial to the seller’s bottom line. It’s like going to a restaurant where the server steers you toward a particular high-dollar entree. Is it really his favorite? Or did the chef urge the staff to push the dish because it comes with a side order of premium mark-up? To build trust, the best recommender systems strive for some degree of transparency by giving customers clues as to why a particular item was recommended and letting them adjust their profile if they don’t like the recommendations they’re receiving.

Science fact, not fiction

Machine learning can give your business a serious competitive edge by opening the door new opportunities in the marketplace. It can help you personalize and improve your customer experience dramatically and thereby drive sales and revenues. Creatives and developers alike are rapidly pioneering new and innovative ways for marketers to use machine learning — and the future of marketing built on these ideas has seemingly endless possibilities.

---