You’d have to be living under a rock not to have noticed the way many websites now are designed to scroll downwards and to even do funky stuff while you scroll. Parallax scrolling (the ‘proper’ term for this trend) originally appeared on the scene in old school video games and recently became a big hit in the world of web design. It basically entails having a foreground that moves faster than the background, creating the illusion of a 3D feel.

Parallax scrolling websites are everywhere...

From giants like Sony ...to social causes like child marriage...yummy restaurants ...sports gear legends like Nike...design firms (e.g. Neotokio and FK-Agency )...and beyond!

Some websites take parallax scrolling a step further. Bagigia ‘zips’ into new territory while blast from the past, Game Boy, includes a ‘scrolling’ game.

Using HTML5 and CSS3, websites with parallax backgrounds have a smooth fluidity to them. But they don’t necessarily result in the best user experience. And so while parallax scrolling is all the hype in web design, it can either go very well, like in the examples above, or terribly wrong. This is why it is extremely important to remember the core elements that build the foundations of effective web design.

StepFeed gets insider insight from Fadi Sabbagha, Founder and CEO of Born Interactive, a fully integrated digital communication firm. Launched in 1996, this multiple award-winning new media agency has offices in Dubai, Riyadh and Beirut and has worked on over 2,000 projects in more than 29 countries. To make the most of parallax scrolling in all its web design glory, never forget the foundations he describes below.

Fadi Sabbagha on the foundations of effective web design.

"Websites’ rendering and navigation should be modeled and shaped based on three constantly evolving dimensions:

,
  • First is SPACE: the device (desktop, tablet, phablet, phone), screen size, pointing type (touch, mouse, etc.).
  • Second is CONTENT: websites should offer relevant and well-structured content.
  • Third is BEHAVIOR: user behavior is evolving and is very diverse depending on the usage context.
,

Responsive web design makes your website design/page adapt to any device from regular screen to tablet, phablet, smart phone, etc. All new sites are now designed as responsive.

When it comes to relevant content, a broad example would be User Generated Content (UGC) in general and peer recommendations and reviews. People find those more relevant than just brand generated content. Regarding well-structured content, this is the best way to have easily scannable content and it’s one of the most important ways to have your website content properly indexed by Google as a search engine. Regarding the behavior : a site that is made to be browsed in special conditions and within limited time would be designed in a way in which the content would be bigger and shorter. A possible example is the different page views options on the usatoday.com website and especially the ‘big page’ view."

Parallax scrolling pros and cons.

Before you jump on the bandwagon, it's key to note the pros and cons of opting for parallax scrolling.

Some of the pros:

,
  • Curiosity killed the cat, and this technique definitely has the power to intrigue people and lure them in to staying on the website longer since they need to scroll down.
  • It gives the website a trendy, innovative and interactive feel.
  • It is eye catching.
  • It is great for story-telling.
,

Some of the cons:

,
  • If Search Engine Optimization (SEO) is very important to you, then this design approach is not ideal. Why? Because the entire website is a single page (i.e. one set of meta information, one URL and one h1 tag).
  • It means longer loading times in most cases (since all the images etc. are on one single page) which might prompt some visitors to run away before they see anything.
  • It is not a match made in heaven if you want to focus on responsive and mobile design.
,,