One Page Love Logo
  • Need Hosting? We highly recommend Bluehost
  • Reviewed: May 19, 2015
  • Template? No, this is a custom built website
  • Built by: Zazzle Media
One Page Website Hosting Reviews
Need Hosting? We reviewed and compared the best One Page Website Hosting options for you.
One Page Website Review

A Waste-less Journey

'A Waste-less Journey' is an informational One Pager commissioned by to bring awareness to food waste. The Single Page website takes you on an interactive visual journey from the supermarket to the kitchen presenting facts and tips along the way. The animation happens as you scroll with the use of the awesome Skrollr.js plugin. Quite a nice touch when the clock fast forwards while the chicken in the oven:) Cheers for the excellent build notes below, sure our readers will find this helpful. If you're keen to learn how to achieve a similar effect in your One Page website, check out the Skrollr Workshop we're promoting.
We built this piece to raise awareness about the large amount of food that is regularly wasted in the UK and throughout the world. We chose to present it as a visual journey from the supermarket to the kitchen.

The piece features the Skrollr framework to serve a parallax background that provides a clean, simple, and animated background but also maintains the focus on the main journey. We also utilised SVG’s as much as possible to reduce the load of the piece and for scalability on both mobile and tablets. We also used Sass to easily and efficiently maintain the CSS elements within the project.

We had some issues when working with the mobile aspect of the piece. Rather than continue using the portrait orientation as we originally planned, we decided to force landscape orientation on mobile and tablet. By forcing landscape orientation, we were able to show the user the full kitchen scene and the animations that happen within it. This also made it much more user-friendly when taking the CTAs and additional content into consideration.

Another main issue that we faced was that as this originally a vertical scrolling piece that took the user on a horizontal journey, we built a layer of functionality that (on mobile and tablet) allows the user to swipe both horizontally or vertically. We found this helped users who were slightly confused when they were swiping vertically but moving through the piece horizontally. As the skrollr framework doesn’t actually support this, we were pleased with the results.

Overall, we took a number of learnings form the project and we’re happy with the outcome. Our only concerns that we have is that the piece may not perform as well on low-end devices as it does on an iPhone 6 for example. However, when considering the number of animated elements, we’re still proud of what we’ve achieved when used across desktop, tablet, and mobile.
Categories: Informational
Rob Hope

This original One Page website was reviewed by Rob Hope

I founded One Page Love back in 2008. It's come a long way but I want to continuously add value to your experience. Please tweet or email me with any questions or suggestions.