E-commerce Web Design: Parallax Scrolling

As the internet experience matures web designers are turning to higher-level aesthetics for their e-commerce web design, and to do so they’re adapting a technique from ‘80s video games: parallax scrolling.

Parallax as a phenomenon refers to the apparent difference in the position of an object when viewed from two different lines of sight, and in humans, as in many others animals, is responsible for depth perception.

In web design parallax scrolling refers to the effect of having different layers move at different speeds in relation to the viewer, like the way the different layers move in Github’s creative 404 landing page when you mouse over them. Parallax scrolling first gained traction in the design community after Nike featured the scheme in its recent Better World site redesign, and since then thousands of websites have sprung up in the same vein. The question remains however, will parallax just be the lens flare of web2.5, or will the effect demonstrate the lasting power to become a web-design staple.

The aesthetic gains of parallax scrolling are obvious, the designs are eye-catching and attention grabbing and can lead to a significant increase in the time users spent on a website. In addition, parallax scrolling adds an interactive dimension simply unmatched by standard web designs, an especially attractive attribute for companies that need to showcase a product in a memorable way, like Nike did in their Air Jordan 2012 site.

Additionally, parallax scrolling gives developers more control over user’s vision paths making it easy to highlight certain information or draw a visitor’s attention to a specific area on the page. The design also creates a funnel effect whereby users are lead directly to your most vital call to action buttons simply by following the narrative.

Making a website that features parallax scrolling isn’t all roses, however. The effect is simply a hassle to create; you could code it (with much difficulty) using JavaScript/jQuery but it may load slowly or scroll choppily – both virtual death sentences for websites. Or you could code it in CSS3 but you’d still need to rely on JavaScript to handle the varying scroll speeds, and even more important, CSS3 isn’t yet supported on all major browsers and mobile devices. Furthermore, since parallax design displays content as one page your site is essentially limited to one title tag and one meta description which can lead to serious a SEO dropoff.

So will parallax scrolling become a design staple? The answer is we still don’t know. In the meantime though, parallax scrolling has its place in web design, namely for artsy pages trying to outshine their competition and e-commerce sites large enough to overcome any SEO difficulties the tech proposes.