Parallax web design: the good, the bad, and the ugly

Parallax scrolling seems to be the new hotness in web design these days. Scratch that; it is the new hotness—have a look at Google Trends, for example.

So what does parallax web design actually mean? Well, it’s an umbrella term for sites in which some elements move slower than others (or not at all) when the user scrolls the page, giving an illusion of depth for 2D graphics. It’s a neat idea, first popularised by videogames in the 1980s.

Why would you want to use parallax design? Well, besides mouse clicking, scrolling is something every web user does hundreds, if not thousands of times per day. There is nothing wrong with making that action a little bit more appealing and visually interesting. For sites that rely on graphics as the primary content (as opposed to text), it’s a natural fit. For interactive brochures, infographics, zeitgeists et cetera, it adds visual flair and can really make content pop, so to speak.

However, parallax design should not be used everywhere. It isn’t possible, at least for now, to implement a parallax site using only CSS and HTML—you’ll need at least some JavaScript. By itself, this isn’t a big deal, but if you’re already running a resource-heavy site, adding more JavaScript only to add a depth effect is something you may wish to reconsider. The longer a web page takes to load, the higher the abandonment rate. It’s that simple. If your site chugs as it is, don’t even think about parallax.

So parallax design has its pros and its cons—what about the ugly stuff? Well, let’s start by stating the obvious. Even though we all use the scroll wheel on our mouses without thinking much about it, the vast majority of website visitors only ever look above the fold. By some accounts, only 20 per cent of users scroll past the initially viewable area. Thats a significant majority, and something that all web designers should take into account when creating even the most simple of sites. Put bluntly, people don’t want to scroll down on a page. Parallax sites, on the other hand, are intended to be scrolled so that users can appreciate the depth effects. Unfortunately, this has led to many websites breaking what is the golden rule of the web: content is always king. Instead of placing the most important content in pride of place above the fold, thereby enticing users to scroll down and consume more, content is deliberately spaced out and the vertical length arbitrarily increased so that parallax effects can be experienced by as many people as possible. That’s designing for the sake of designing, as opposed to designing for the purpose of enhancing the most important thing—the content.

Not all sites that incorporate parallax effects in their design do so poorly. There are numerous sites that use such effects whilst keeping content front and center where it belongs. I’m just worried that if everyone jumps on this design craze without giving it any thought, we’ll end up looking back on 2010s/2020s web design wondering what the hell we were thinking.