Superfried website Design + dev of this site

That tricky website redesign for creative agency Superfried was long overdue. For the new webpage layouts, it needed to remain simple. With this in mind, particular attention to detail was directed toward the user interface design and enhanced performance via efficiency. The purpose of the site would be to showcase the work, which should always remain key, so everything was stripped back to the bare essentials required. To advise on the build of the new site, I called on the web development services of our regular collaborators at digital agency HiFi.

On the homepage, the menu has been placed behind an obvious plus sign + button. This ensures the webpage layouts remain uncluttered, enhancing the user interface design and focusing user attention on the visual content. This design strategy also allows for additional navigation content without the compromise of limited screen real estate.

An autoplay, portfolio showreel was an obvious choice to create design impact and immediately convey the eclectic design output of Superfried. Although video content can be heavy and detrimental to webpage performance, via optimisation using Handbrake, the desktop homepage was still hitting the performance targets. For mobile, as expected, this had a more dramatic effect on webpage performance. To counteract this, for mobile devices, autoplay video will be dropped in favour of a lighter image carousel in the next development phase.

Having analysed user behaviour on portfolio sites, it was clear that they are more focused on visual content, with copy often overlooked. Consequently, for case studies, priority was given to the photographic and video content. For the benefit of SEO and those wishing to understand the design strategy behind the creative solutions, there is a simple, universally recognised info icon button to toggle between the written and visual content. This design strategy simplifies updates by eradicating the time required to consider the composition and balance of differing content on webpage layouts. For efficiency and simplicity, the same webpage design template was then employed for the profile and services webpage designs.

A key aspect of the website was that it should be fast and efficient. As a folio site, it would be image and video-heavy. With this in mind, a keen focus was placed on optimisation. Rather than full-screen images, a max width was employed. It was also felt that full screen can become overbearing on larger monitors. Images were also cropped close to the actual size required. For compression, in addition to standard web optimisation in Photoshop, all imagery was run through jpeg mini for further lossless compression of up to 80%. Whereas for video content, all files were rendered using two-pass encoding. The site was then tested through Lighthouse on Google Developer Tools to locate further opportunities to enhance performance on both mobile and desktop.

Functionality and speed are essential, but as a folio site, this should not be to the detriment of the design. It was here that HiFi proposed a system called Turbo that allowed them to give the site a more 'appy' feel with smooth page transitions whilst also improving speed and performance. Not often that refinement leads to a faster site.

With efficiency still key, since the site did not require a search facility, HiFi proposed adopting a static hosting approach. With a standard website, each time it is visited, the database will call in content from the server to render the pages. With static hosting, the pages are pre-built every time they are updated, there is no database call. This means logically the site should be quicker. There are other advantages too. Since there is no database connected, the risk of hacking and loss of data is greatly reduced. Secondly, since the pages are no longer re-rendered for each visit, in theory, there should be a reduction in the amount of energy consumed to serve the site, potentially leading to a lower carbon footprint.However, although confirmed to be true by multiple sources, to date I have been unable to find a scientific study to back up the theory.

Hosting is also a potential area of concern with regard to energy consumption. With this in mind, the back-end and image content for the site are hosted by Umbhost. Umbhost state that its data centres are 100% powered by renewable energy, although I have been unable to verify this. To serve the static site, we opted for Netlify since they are experts in this technology. Although not a green host as such, Netlify state that they are focused on sustainability. As we develop the site further, we will investigate completely carbon-neutral, static site solutions.