Parallax Design – Trendy or Tired?

Can you call something from the 1980s a “latest trend”? Despite the fact that the design world has rediscovered the parallax technique, to video game developers, you’re behind the times!

Parallax web site design is hailed as the latest trend, but it’s certainly not a new one.

Do me a favor and boot up your old console system and play around with the moving screen of your favorite 2D arcade games. That’s parallax design! Apart from motion effects and large backgrounds, designers have also embedded video as backgrounds to make it more interesting.

The pressure is on for designers to come up with something new all of the time.  Lately, designers are pushing forward to keep viewers engaged as they move from the era of Web 2.0 into the expected interactive design of Web 3.0. Is revisiting an old technique bringing new life to interactive design or is it a desperate grasp for anything different?

What is Parallax Web Design?

Parallax (specifically ‘Motion Parallax’) is defined as “a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines” according to Wikipedia.

If you’re not sure how to translate that, I’ll give you an example. Take a window view from a moving car with distant scenery. The objects that are closer to you move faster and the farthest objects, comparatively, move slower. Designers mimic this illusion by creating layers of moving objects which moved at different speeds.

To bring it back to video games, parallax scrolling was used as a special scrolling technique in computer graphics where the background images near the player’s camera moved slower than foreground images. This created an illusion of depth in 2D video games and added to the immersion!

Where to start?

I won’t claim to know everything about parallax besides the basics, but they’re numerous tutorials with scripts and codes out there to get you started.

I compiled a list of my favorite educational sources for designers willing to learn about parallax design. Here’s my short list of a few tutorial links which have demos, downloads, and step-by-step integration process. Feel free to share if you’ve found more that I can add to this list!

How to Create a Scrolling Parallax Website

This tutorial explains the process of making a relatively simple parallax scrolling website by letting you play around with a template. The idea is for you to experiment and improve it. It also introduces you to the basics and shows you a few prime examples of what parallax websites are capable of. An all around solid tutorial!

jQuery.ScrollTo

Inspired by an article about scrolling with jQuery, Ariel Fleshler created a customizable plug-in for scrolling elements. While this blog isn’t updated any longer, this brief tutorial is still an educational experience! However, don’t worry about the plug-in as Ariel assures that its development and still updated.

 jQuery Vertical Parallax Background

I like about this tutorial since it lays out in an easy way how to make a website background have a parallax effect as you scroll down the page. Using CSS and jQuery, this tutorial walks you through setting up the speed for each piece of the background and explains why you do it.

Parallax.js

A parallax engine that reacts to the orientation of a smart device or if you are on a desktop, will react to your cursor! While not a strict tutorial, the amount of work that went into this plug-in is displayed with an in-depth explanation of what you need to change if you want to make this plug-in your own.

Check out the results of the collaboration of Matthew Wagerfield and Claudio Guglieri and play with the demo!

Stellar.js

Stellar.js is a jQuery plug-in that provides parallax scrolling effects to any scrolling element. Mark recommends that if you plan on using this plug-in for mobile, only use parallax elements, and not a background. It will come off as a cleaner user experience.

Don’t jump the gun yet!

Before you start designing a parallax site, you need to consider the site’s potency in terms of SEO. Let’s face it, designers are suckers for aesthetics!

Businesses are always looking at the bottom line when they have a website – where will it rank in search engines? To get a site with optimal search engine ranking, it has to be SEO friendly, which is extremely difficult with parallax sites. With next to nothing content, getting keywords on the page is a hassle!

Another problem is large images and videos increase the loading time of a webpage.

Unfortunately as more people move to mobile platforms, the more important your loading time becomes. If your page takes longer than a few seconds to load, people will click away from your site. And Google and other search engines don’t like this.

Finally, parallax designs are not ‘responsive’, hence not mobile friendly. Consider what you can do to make your design work on multiple platforms!

Your alternative

Don’t make your entire website parallax design. Consider restricting it to either the landing page or a particular page within the site. For instance, a great place to have parallax is a new product/feature launch.

For example, you design a how-it-works page for a product like a smart phone with new features. This type of page needs less text to explain it and as a result, parallax is perfect to use. Further on the page you have a call to action button which will redirect the user to a details page. That next page should have all the relevant text filled with keywords and relevant content.

For mobile users, you’ll need to bite the bullet and create separate non-parallax based pages and redirect them there.

Conclusion

What used be done in Flash can now be done with a couple scripts and CSS3 (to a certain extent). Sites featuring several photos of their product should head this direction. Industries like automotive, electronic gadgets, appliances etc. would benefit most from this design style.

Parallax design is certainly different than the majority of web design techniques, but I’m not convinced that it is a trend that’s here to stay. Yes it’s a cool feature, but the fact that it doesn’t work well on mobile devices is going to hurt it in the long run!