Parallax and Mobification


Parallax Scrolling and Mobification. Is there a connection?

SAVAS Solomo Strategy

The recent few posts from the SAVAS blog stable have been more about the latest trends in web development such as Mobification, the use of HTML5 and the convenience of Responsive Web Design. It is now time to discuss about the next big thing in web development techniques, the Parallax Scrolling.

Parallax Scrolling is one of the fastest trending web development techniques of the modern digital world. We keep getting asked a lot of questions pertaining to this technique from most of our clients and prospects alike. This blog post is more to answer all those questions collectively and to share our views on the pros and cons of this new technique.

What is Parallax?

First of all let’s know what Parallax Scrolling is all about. Let’s start with understanding the meaning of the term Parallax. As found in English dictionaries, Parallax means ‘the effect whereby the position or direction of an object appears to differ when viewed from different positions’. We define it a bit differently going by our ‘keep it simple’ principle. According to us, Parallax in digital media terms is ‘when two or more images are moved on the same axis at different speeds’. Therefore, it is an effect that gives the user a feeling of seeing objects at different distances. Applying this to the digital screen, the user will be seeing the objects at different depths that will give the user a 3 dimensional effect. This technology or technique was vastly used in the video game development up until now. The reason for the rush in web development adaptation is simple, giving the user a fantastic and long lasting experience whilst on the website and it indeed worked wonders on the UI and UX factor. There are a few websites that will give access to the best Parallax Scrolling websites on the internet through which you can get a glimpse on how it works.

Why would you need it?

As mentioned above, the Parallax effect gives the user a unique experience. It is also an experience that will differentiate your website from the rest of the websites out there as of now (this can change if more and more sites start using parallax). The parallax scrolling can be useful if your content is woven around a story board concept. When I say story, it is the way in which the website shares information about what the website is all about. Since Parallax is more of a visual effect, it becomes very important that we build content that is image rich and has a starting point from where the story starts and an ending point till where the story ends. A good example for a story board concept is the ‘Saucony’ website. The parallax scrolling is very effective in terms of making the user go through a unique experience without having to watch a video.

Who would need it?

Having a storyline is important to get the best out of the Parallax scrolling effect, but not always. You can also have a list of your product line or even talk about the product features as well. All that is important is to have rich and enticing images with the highest resolution possible, something like the ‘Bagigia’ website. In this website, the images and the colour contrast is so rich that the user is taken to a new world even if it is for a moment. The leather textured background to start with and then moving on to focusing on the features of the product and then finally to the concept behind the product. Even the product colour chosen for the home page is very bold and attractive, just enough to stand out and grab attention. Therefore to answer the question as to who would need it, I would say pretty much anybody who has a website can make a use of it. All that one has to make sure is to know how well to utilize the Parallax scrolling effect effectively.

Parallax and Mobification

Mobification as mentioned in one of our previous blogs is all about making the website and all its associated assets mobile friendly. Parallax scrolling in its current state is not mobile friendly. The best example would be the ‘iutopi’ website that has a parallax effect when accessed from the traditional desktop / laptop and looses it completely on the mobile device. The effect is amazing on the regular screen and is no more than a simple slide deck on the mobile screen. Most of the popular Parallax sites use a separate website for mobile devices and therefore do not have the problem like ‘iutopi’. Does that mean that combining Parallax and Mobification is not advisable? As for the current scenario, Yes! Let’s understand why.

Talking about Parallax effect and not talking about the recent IOS 7 is not possible. Apple came up with the Parallax effect on mobile devices for the very first time and had a very good acceptance rate among its users. There are a few who feel uncomfortable blaming it on a sea sickness kind of issue but overall it was a success according to Apple. Why does the parallax effect work on IOS and not on other devices? The parallax effect on the IOS7 is system driven at the device level wherein the website parallax effect is from the site design itself. There are multiple issues in mobifying a Parallax Scrolling Website, lets understand a few of them.

  1. The images used for creating the Parallax effect have to be pixel rich and colourful and that makes it heavy. Now it’s not just one or two images that will be needed to create the parallax effect, the designer might need multiples and even tens in some cases based on the design. This will make the website heavy and as a result will take more time to load given the current internet bandwidth that the users get on smart phones.

  2. The design adopted for Parallax scrolling cannot be broken down further to enable Responsive Web Design and this will make the content appear as miniatures on the small screens and therefore might not give the desired results in communicating the message to the visitors.

  3. Parallax scrolling has to have a long page design in order to create the effect and scrolling using a mouse scroller wheel is easy on mouse enabled devices compared to the smart phones where the user will be pushing the screen up using their thumb. This might not go well with the user and opt to close and move on in some instances.

  4. The thumb whilst scrolling on the other hand can also create a blind-spot on the screen hampering the overall visual experience that the designer has intended to give the user. However, the scrolling effort and the blind spot issue can be ignored if we have scroller enabled smart phones available in the market. This does not seem likely in the near future atleast. And even if we have one, it will take a considerable amount of time for a majority of the audience to have one.

Let me conclude this blog by saying, Parallax is here to make a difference and sure to evolve. The efforts are already on to make Parallax and Mobification coexist. But, if there is someone who has already found the means to bridge this chasm, do tell us and we can continue the thread and educate the masses. Until then, Happy Reading and solution hunting!


Prrashanth SAVAS author

About the Author

Prrashanth H Nagaraj is the Founder and Managing Director of SAVASInc. He comes with around 16 years of professional experience across multiple industries such as Engineering, Banking, Insurance, IT, ITES and Digital Media. He is graduated in B. Eng. from University of Mysore and has a MBA degree, specialized in International Business from the University of the West of England, UK.