Using Parallax Scrolling the Right Way

Parallax scrolling is without a doubt one of the hottest trends in web design these days. The ability to make the background move at a slower rate that the foreground as the visitor scrolls down the page gives even flat designed sites a nice element of depth to make the site really stand out.But not everyone is a fan of parallax design. Despite there being a number of tutorials available on the web, some designers stay away from it because of the complexity involved in getting everything to look just right. However even those up to the challenge have voiced their concerns about parallax scrolling; but those concerns are exactly what we aim to tackle in this article.

Mobile concerns

For the most part, parallax scrolling is not mobile friendly; and considering that more than a quarter of all Internet traffic comes from a mobile device this could leave a good chunk of a site's traffic out in the cold. That is, if the designer doesn't plan for mobile use. Some designers have had success with getting different JavaScript libraries and plugins to work on iOS devices, but to ensure that the site is available to all visitors no matter what device they are on there has to be a mobile first strategy. The site should be responsive and redirect users who are visiting on a smartphone or tablet to a site that will give them a good experience.

What about SEO?

Sites built using parallax scrolling are actually one-page sites and the search engines aren't always that friendly to websites that have only a single URL. Not only that, but these site can increase load times for the website and they rely more on visual effects which reduces the amount of textual content on the site. From the looks of it, using this technique should tank any SEO efforts. Of course if you dig a bit deeper you see that using parallax scrolling doesn't mean a site is destined to be ignored by the search engines. Like any other site, you have to plan the SEO of a parallax site from the very beginning. Additional content can be added to the site, and linked to from the parallax page just like Spotify does. Their homepage employs parallax scrolling but then branches off to other content. Or consider using parallax scrolling somewhere else on the site, it doesn't have to be reserved for the home page alone but can be used anywhere you want to tell a story. Consider this as well, if you design a great page that uses parallax scrolling to tell a great story odds are you are going to get quite a few people linking to it; and no one is arguing that natural links are bad for SEO.

Too trendy

Like any other popular trend, there are those who talk smack about parallax scrolling because they feel it is overused. However, that's like telling people to go back to skeuomorphic design because there are just too many flat sites out there. Parallax scrolling is popular because it is fun for visitors, so denying an audience this trend for fear of following the crowd is just plain foolish if your goals are to bring visitors to your site. There is also the school of thought that states that like all trends, parallax scrolling will soon be yesterday's news. Since these sites do require a good amount of time to build if you intend on doing things the right way, it might not be worth the effort to put something up that will soon fall out of favor, right? However, if designers all thought this way we would still be looking at websites that displayed animated gifs scattered across a horrific repeating background image. Trends are what drives the web forward, without them no progress is made. The simple truth is that parallax scrolling has the ability to really make a site stand out. Start out small and master the basics first and once you are ready to build a site that uses this technique, make sure you have everything planned out and working before you implement the animations. Sites that use parallax scrolling the right way have the ability to really engage their visitors unlike most other design techniques; that is if it is used wisely.