Parallax-DesignOne of the hottest new trends in web design has its roots in the Nintendo era of side scrolling technology.  We're talking, of course, about parallax design, also known as parallax scrolling.  The concept is simple—make certain layers of the background move at different speeds to create a three dimensional effect on a two dimensional plane.  This is how video game designers captured the youth of the world by creating realistic looking worlds that have now progressed beyond our wildest dreams.

What is Parallax Design?

The term “parallax” comes from the Greek word, “parallaxis,” meaning “alteration.”  By altering the way different background images move and appear, the illusion of depth is attained, thereby altering our perception of the website.  Simply put, as you scroll down through the site, different elements of the background will quickly pop up into view and then fade away. 

Of course, that's just the most basic and common application of parallax design, but it tends to yield the best results when used sparingly—this is definitely a case of “less is more.”  When you have too many moving parts, it can be a bit confusing, but with just the right amount, parallax design can prove both stunning and impressive to your viewers.

How it Parallax Design Attained?

Parallax design is possible with websites now thanks to CSS3 and HTML5.  If you're a coder, you already know what those are and if you're not a coder, you'll have to hire one in order to build you a parallax website, so you don't have to worry about it.  Essentially, these allow you to create more advanced websites with better technology, thereby improving their look and storytelling performance.

Benefits of Parallax Design

When done correctly, parallax design will create a memorable site that is highly attractive and interactive.  When done poorly, parallax design can come off confusing and gimmicky.  Still, the benefits of parallax design make it a tempting try for web designers:

  • Parallax design wows your viewers and creates the “oh, that's pretty cool” effect
  • Animation and movement is more eye-catching and less boring
  • Viewers scroll through the entire page because of they want to see how the rest looks, thereby keeping them engaged longer
  • Your Call to Action can be more prominent because it is in motion and thus, more noticeable
  • Your website simply looks more impressive, authoritative and up to date, thereby giving you instant credibility with the viewer

Downside to Parallax Design

While we did mention that when done poorly, parallax design has some serious drawbacks, but unfortunately, there are a few more that are unavoidable, even when parallax is done correctly.  The main issue here is that parallax sites have one long, scrollable home page that has tons of moving parts.  As you can probably already guess, this means slow loading times, something many consumers would rather just click away from rather than wait for the site to load.

This also means that viewers who just want their information “above the fold” are more likely to leave the site, simply because they don't want to scroll.  They see the long loading time, nothing popping up on the page and simply click back to the SERP.   There are a few other problems as well:

  • Your SEO score goes down because your single-page website only has on URL, on h1 tag and one set of meta data
  • Since you also have less copy and more pictures and graphics, your keyword scores go down as well, another vital blow to your SEO
  • Parallax design is not responsive and can't be optimized for mobile phones, meaning only laptops and desktops can properly view the site as intended—mobile devices such as phones and tablets will experience a different view on the site
  • You can't internal link on the site, which some people like since it simplifies the contact information, but this is bad for SEO and allows limited information to be put forth

How to Get the Most Out of Your Parallax Design Site

With that said, there are some things that you can do to minimize the downsides of parallax design and reap more of the benefits such as increased engagement and heightened sense of awe with the brand:

  • KISS – keep it simple stupid.  The more complicated you make the site, the more trouble you are going to run into with parallax design
  • Parallax design sites work best when you are telling a story, mainly using visuals instead of long copy (short phrases and descriptions are fine)
  • The more fun and cool it looks, the more effective it is
  • Don't forget your calls to action as they need to be prominent throughout (since people might scroll by them)

This guest article is written by Dan Mill from LiveCity.com. If you’re looking to create a website for free for your small and medium sized business, don’t forget to get in touch with him to land the best deal.