A fine-tuned website for Hangar

Hangar is a highly esteemed design and branding agency renowned for its exceptional typography and unparalleled attention to detail. The team at Hangar has a keen eye for design and is committed to delivering top-notch services to its clients. Working closely on a daily basis, Vioside provides web development services to Hangar’s clients, matching the expected level of detail and quality. This service extended to the development of Hangar’s own website. Their website has been rebuilt from the ground up with a new level of exceptional design.

Maintaining a close working relationship has facilitated communication, enabling a deep integration between design and development. This website exemplifies the phrase, “Design is how it works”. With detailed use of the CSS grid system, the website has been constructed with a level of design and typography usually reserved for magazines.

Technology: SCSS, Twig, and JavaScript

Our technological approach was threefold, involving SCSS, Twig, and JavaScript - a trifecta that enabled us to build a responsive, dynamic, and engaging website. SCSS was used to build up how the website looks, and this technology helped us in writing cleaner and more maintainable CSS code. While we still try to keep things simple and clear using regular CSS classes, SCSS allows us to create reusable chunks of CSS with extra power. Twig is the templating engine used by Craft. It enables us to inject content added on the CMS by the client in a simple way, making markup as clean as possible. JavaScript brought interactivity to the website, enhancing the user experience by adding certain dynamic and visual updates while the user is (for example) smooth scrolling.

One of the standout features of the website is the use of the CSS Grid. This modern layout system enabled us to create complex and responsive designs with precision, ensuring the website’s layout adapts smoothly across different devices and screen sizes. This also enabled us to ground ourselves with the designs, which were also built using the grid system, thus ensuring that the end result reflects the design as accurately as possible.

Great typography is key for any website, and it was especially important for this one. We needed to find a way to match the typography with the grid system to proportionally match the layout, while still catering for responsiveness. Our method guarantees that the website’s text scales proportionally, maintaining readability and visual appeal on any device, thus boosting the site’s accessibility and user experience.

Performance Optimisation

Performance optimisation was a critical component of our development process, focusing on speed and efficiency to enhance the overall user experience.

• Page Insight Ratings: The website underwent extensive performance testing, achieving outstanding ratings on various page insight metrics.
• Lazy Loading and Adapting image sizes: We implemented lazy loading for images to reduce initial load times and ensured that images are optimally sized for different devices, further enhancing the site’s speed and responsiveness.
• Seamless Vimeo Integration: Integrating Vimeo presented a unique challenge. We overcame this by implementing lazy loading for Vimeo videos, which loads as the user scrolls, coupled with blurred image placeholders to avoid empty spaces during loading times.
• WebP Images: The WebP image format, known for its superior compression and quality, contributed significantly to the website’s swift load times and overall performance.

Conclusion

Working with the amazing designers from Hangar was a great experience through and through. From having an open line of communication with constant feedback, to having detailed and pixel perfect designs allowed us to build a website which shines. This project stands as a testament to our dedication to creating custom, high-performing websites that resonate with our clients’ brand identities.