More Images

 iPad parallax scrolling HTML5 website for One Potato  iPad parallax scrolling HTML5 website for One Potato  iPad parallax scrolling HTML5 website for One Potato  iPad parallax scrolling HTML5 website for One Potato  iPad parallax scrolling HTML5 website for One Potato

One Potato iPad parallax website

Client: One Potato
Launch date: 07/09/2012

The iPad parallax problems solved here use HTML5 touch-scroll technology developed in-house at Aerian Studios. This is a world first for smooth parallax on an iPad which can be scrolled with touch gestures. The smoothness of the parallax is thanks to our application of hardware accelerated rendering. The site uses tilt-o-vision which is essentially an animation that you can control by tilting your tablet device. Click on any of the tilt-o-vision images on a desktop and you get an animation, but on a tablet or iPad you get the same animation but controlled by tilting your device.

It was essential that the parallax scrolling be optimised for ipad as this was how many of their clients will view the site. One Potato specialise in making images that capture unique and unusual ideas. Any online showcase for their work needed the same playfulness and wow factor as the images they produce. We wanted the site to be high technology but not in your face about it.

Our code for dealing with scrolling on touch devices powers the 5 levels of parallax in the site. The site is built with semantic HTML5 markup so that it works well and satisfyingly for users without javascript and for search engines and screen readers. While this site was optimised for tablet users, we are hoping to deliver an optimised site for mobiles in phase two.

The challenges with parallax scrolled sites are to make the design work when everything is not fixed in place and also to create a design that can flow and isn't constrained by the usual web design rules. We spent a lot of time and effort getting a design that flowed while remaining intuitive for the user.