Superfried website Design + dev of this site

That tricky re-design for the Superfried website was long overdue. For the new design it was important to that it should be simple – both in design and usability. The purpose of the site would be to showcase the work, so this should always remain key. With this in mind, everything was stripped back to the bare essentials required. To advise and develop the new site I called on the expertise of our regular collaborators at HiFi.

On the homepage the menu has been placed behind an obvious + button. This helps to keep the page clean and focus attention on the visual content. In addition, it also provides longevity with the ability to add new content and navigation items without the compromise of limited page real estate.

An autoplay video was an obvious choice to create impact and immediately convey the eclectic work of Superfried. Although videos can be heavy and detrimental to page performance, via optimisation the desktop homepage was still hitting the performance targets. For mobile, as expected, this had a more dramatic effect on 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 observed the way users view folio sites, it was clear they are mainly interested in the visuals with copy often overlooked. So for case studies priority was given to the photographic and video content. For the benefit of SEO and those wishing to understand the strategy behind the work, there is a simple, universally recognised info icon button that toggles between the written and visual material. This approach also makes updates simpler, eradicating the time required to consider page layout and balance between information of varying forms. For efficiency and simplicity the same page template was then employed for the profile and services page.

A key aspect for 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 over bearing 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%. Where as 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 changed, there is no database call. This means the site is far quicker and more scalable. There are other advantages too. Since there is no database connected, the risk from hacking and loss of data is eradicated. Secondly, since the pages are no longer re-rendered for each visit, the amount of energy consumed to serve the site is greatly reduced leading to a lower carbon footprint.

Hosting is also a potential area of concern with regards to energy consumption. There are now many green options out there. For this initial release of the site, we have hosted with Netlify since they are experts with static sites. Although not a green host as such, Netlify are very focused on sustainability. As we develop the site further we will investigate completely carbon neutral, static site solutions.