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.

---

Business Toolbox: How to Standardize Your E-mail Signature

E-mail is the workhorse of communication for your business. It’s likely to be your first point of personal contact with prospective customers as well as your go-to vehicle for conducting day-to-day conversations with existing clients. As a result, your e-mail signature is an important – but all too often overlooked – extension of your brand. Just as you wouldn’t mail a letter or a proposal printed on any old paper stock, you should give equal consideration to creating and implementing a standardized corporate e-mail signature. However, this is where things get a little tricky. While your e-mail signature serves as your electronic business card, it doesn’t play by the same rules of branding that govern your stationery, website design or even participation in social media networks. Here are five common misconceptions that can lead you astray when crafting your signature:

1. If I’m going to represent my brand, I must include my logo.

According to conventional thinking, your company’s brand and logo are one and the same. However, as counterintuitive as it might seem, it is best not to include your logo in your e-mail signature. Why? Because it is difficult to control how images are interpreted and displayed by different e-mail clients. Most e-mail applications either store images as attachments or block them, resulting in a broken image. Therefore, if you construct your signature around a logo, and that image frequently is not displayed, it compromises the consistency and professionalism that you are trying to achieve. The best, most universally replicable alternative is to integrate your corporate colors in your signature, albeit with restraint. For example, you might choose to display your company name in one of your corporate colors, which will make it the most prominent element while also employing one of the primary elements of your visual brand.

2. Personality, personality, personality...it’s all about personality, right?

In marketing, yes. On Facebook, Twitter and LinkedIn, you’ll never get anywhere without personality. However, when it comes to e-mail, make sure your messages are friendly and personable, but keep your signature strictly professional. The one and only purpose of an e-mail signature is to let the recipient know who sent the message and provide a way for them to get in touch with you. You might think it’s fun to include your favorite quotation in every e-mail, but in doing so, you run the risk of unknowingly offending a client or prospect. And never include any non-company-related information in your corporate e-mail signature. Not a link to your personal blog, not the URL of your side-project website, not your Facebook, Twitter or Skype details. That’s only asking for trouble.

3. It’s important to make a lasting impression.

The only impression you want your e-mail signature to make is professionalism. If your clients remember your signature and not the point of your message, there’s a problem. Don’t give into the temptation to experiment with large, bold or multi-colored text. Don’t try to use the typeface from your logo; more often than not, it won’t be displayed properly by the recipient’s e-mail client. Stick with simple, plain, web-safe fonts in the same size as the body of your message, and you can’t go wrong. Returning to the example of mailing a letter or a proposal, there’s a reason you would never print your correspondence on multi-colored florescent paper. Like your letterhead, your signature should reflect the legitimacy and gravity of your business-related communication. It should never compete with your message or in any way distract from the information you need to convey.

4. I need to make sure that my clients can reach me by any and every means necessary.

There’s no question that great customer service is a key competitive edge in today’s marketplace. And it’s understandable why giving your clients your direct office line, 800 number, cell phone, fax number, IM handle, mailing address and LinkedIn profile would seem to convey that you are accessible at their convenience through any number of channels. However, a much better way to serve your clients is to provide the one method of contact through which they can almost always reach you. Most of the time, this will be a phone number (pick one: work or mobile). Then, rather than having to sift through a dozen different means of communication to identify the one they need or play guessing games about which one will connect them to you in the most expedient manner, it will be right there for them to find at a glance. As a rule, there’s no need to include your fax number or your mailing address in your e-mail signature. In the unlikely event that your client needs to send you something by fax or mail, you can either include this information in the body of your message, or they can jump over to your website, where these details should always be readily available.

5. I want to drive traffic to my blog / encourage people to follow me on Twitter / promote a limited-time offer.

These are all great marketing objectives. However, you must always keep in mind that e-mail is, first and foremost, a platform for communication between one human being and another. You wouldn’t wrap up a phone conversation with your client by asking them to be your friend on Facebook, and you wouldn’t conclude a sales meeting by making a blatant plug for your blog. Your e-mails aren’t billboards for your marketing message du jour; always keep it personal and professional. Including your website URL in your signature is a good way to indirectly promote your business, its presence on various social media networks and targeted marketing efforts without cluttering up your e-mail messages. If your customer or prospect clicks through to your site, they should be presented with all of these options – most likely before they ever leave the cover page.

Best practices for a professional e-mail signature

Follow these tried-and-true guidelines to ensure your e-mail signature is polished, professional and customer-friendly:

• Focus on providing only the most essential information about who you are and how you can be reached in an effective and unobtrusive way.
• Limit your signature to four lines (the accepted standard), with a maximum of 72 characters per line to optimize how it is displayed in different e-mail applications. Combine different types of information on one line by using pipes (|) to separate the text.
• Typically, you should include only your name, job title, company, primary method of contact and corporate web address. Don't repeat your e-mail address in your signature.
• Write out the URL for your company website rather than using hyperlinked text.
• Create different signatures for different purposes. For example, you might have one version for e-mails you send to vendors that includes your office line and another for client correspondence that provides your cell number.
• Always add a signature to replies, but include fewer details. For example, whereas your primary e-mail signature would most likely include your name, position, company name, contact information and web address, your reply signature might provide only your name, primary form of contact and web URL.
• Don’t include a legal disclaimer unless required to do so. The best practice is not to transmit confidential information in plain text in e-mails because that information could easily be extracted or forwarded.
• Use a signature delimiter to create visual separation between your signature and the body of your e-mail. The standard protocol recognized by most e-mail clients is two hyphens followed by a space and a line break (-- ).
• Don't use HTML formatting, as it can interfere with how your signature is displayed in some e-mail clients.
• Simple, plain text in the same size as the body of your e-mail is best. Employ bold or colored text very sparingly for emphasis, and use only your corporate colors.
• Don't use an image as your signature, and avoid including images in your signature.
• Be sure to test your signature in as many different e-mail clients as you can (including web-based applications like Gmail). Don't forget to also check how your signature looks when forwarded to ensure that all lines wrap correctly.

---