Nice subtle parallax effects as you scroll through this long responsive One Page portfolio for UK-based creative agency,’RetroFuzz’. The intro video background is brilliant giving us an immediate professional first impression. Much love for the detailed build notes, very interesting.
Creative agency RetroFuzz wanted to build a website that mirrored and showcased the quality of its client work. Choosing a One Page design, the website combines images, video and text for an enjoyable user experience. During the build, there were some hurdles to overcome such as optimising the parallax of the large ‘Work We’ve Done’ images, through a combination of JavaScript and CSS3. That amount of browser repainting and rendering means it could have been an ugly feature of the website if it was implemented poorly. But it was well worth it when a client said it’s the ”smoothest they’ve ever seen".
A one-page-site specific challenge was ensuring that the correct metadata was displayed when people shared job-listing URLs, as well as showing the correct job listing as expanded and focused when the job URL is visited. This was done with plain JavaScript and utilising the browser history API for focusing.
Loading of assets was another concern, as there is a large amount of rich content on the site, including videos, pictures etc., so the page load had the potential to be huge.This was optimised by generating sprite sheets wherever possible, and these were automatically generated as part of the build task. Gulp is used as a task runner, with some additional plugins bolted on. All scripts are also compiled into a single file and minified, reducing network requests and the size of data to be transferred.
Image and video content goes through lazy loading, so that things are being requested just before they are visible to the user, saving huge amounts of data transfer from the initial page load. This was managed using JavaScript, and by doing this the initial load is on target with the average page weight of 2MB, which considering the amount of imagery on the site is no mean feat.
