Overview
Back in November 2008 I worked alongside Julian Harris at EMC Conchango working with Shop Direct on a large e-Commerce platform for nine brands served by one unified ATG platform. Typical sites included Littlewoods, Very, Marshal Ward, Kays Choice, Great Universal to name a few. Fifteen years later, we’re working together again on Future Provenance.
Julian asked me to quote for developing their company website with a detailed list of specifications and requirements and I was more than happy to take this project on. This is where the story begins…
Clear design direction
Future Provenance ran a user experience design process to cover site structure, navigation, and web page design. They used Figma to outline their vision for the entire website’s design, ensuring a cohesive look for both desktop and mobile devices. Having previously utilised Figma for other design projects, I found it to be an excellent tool for collaboration, allowing us to exchange design ideas and feedback effectively. This setup facilitated a smooth workflow during the design and development phases of the project.
Technical choices were made
I led the development process to determine the best approaches for creating a responsive website that is fast, maintainable, and fully accessible. I chose to utilise Eleventy (11ty), a static site generator, along with GitHub for code storage and version control. For the build pipeline, I integrated Netlify, while Contentful served as the headless content management system, providing a robust and efficient solution for the project.
Challenges to overcome
Like every project, some project requirements can cause challenges which keeps things interesting and challenging at the same time. A few of those challenges were:
Project images and carousel placement
The design team wanted the ability to add project images and project carousels and then have flexibility in positioning them how they like. Normally I would have an area dedicated in the CMS for adding a project carousel and then a series of images thereafter.
With an improved content model and work on the frontend, I was able to get around this limitation and make it flexible enough to move images or carousels to any location for each project.
Instagram API feed
Connecting to an API is a fairly straight forward process. Once I’d setup connectivity between Instagram and Facebook I was able to pull data via ‘Instagram’s Basic Display’ and show Instagram posts on the frontend in a format I could control from the API feed.
One of the problems with this is that each time a user visits the site we need to connect to the API and serve content to the frontend. Connecting to an API can have limitations and also be costly. To work around this issue I was able to use a combination of ‘Eleventy Fetch’ and ‘Eleventy Image’.
With ‘Eleventy Fetch’ I was able to cache a JSON file from an API for a set duration. With ‘Eleventy Image’ I was able to save the related images into a folder in our file system, format the images into next generation image formats like AVIF, WebC etc and serve those from cache.
With this setup, we no longer need to connect to the API at each request, we also convert our images into various formats for browsers that support them, we also get an added performance boost, and a great way in handling our Instagram API connectivity.
Cookie management and GDPR regulations
After creating a Google Analytics and Tag Manager account, the hard part was making sure cookies were not being initiated until a user consents to using them. Having already applied them to the Ministry of Defence Service Manual, I had a good idea on how to apply them to the Future Provenance website. Fortunately for me I was able to use and implement this successfully with a nice user-experience.
Performance and speed considerations
One of the selling points for me was emphasis on performance and speed when using a headless CMS approach and next generation formats for serving images. Also the application of minifying styles, scripts and HTML using automated tasks also play a big part of ensuring we obtain the best possible performance for users experiencing the website.
Inclusivity for all
Optimising for accessibility is crucial in making any service more inclusive and user friendly, one of those tests included High Contrast Mode. Users with visual impairments rely on high contrast settings to access and navigate content more comfortably, by optimising the service this enhances the readability and clarity of the service. In general the website looked good in High Contrast Mode, but a few improvements made for a really nice user experience for people with visual impairments.
Another important part of accessibility is being able to navigate the website solely with a keyboard. Some users have motor impairments that prevent them from using a mouse. Screen reader users often rely on keyboard navigation to access all interactive elements and content on a website.
There are even some power users that prefer using the keyboard for its efficiency and speed. Not only is this a fundamental requirement for web accessibility it also provides equal access to all users. Manual and automated tests were carried out to ensure all users regardless of their abilities were able to access everything effectively and know exactly what elements are in focus throughout this process.
Content management using a headless CMS
Future Provenance had a clear set of user needs when managing content for every part of the website, and this flexibility was carefully configured and made available to them. After a little research and experience already using Contentful, I felt it was a perfect fit for managing every aspect of their website. Contentful also has the ability to serve a collection of next generation image formats on the fly, one of which includes the new AVIF format for a massive improvement in file size reduction for browsers that leverage it.
What’s next
One of the next features Future Provenance want in the next phase is multi-language support, specifically ‘Arabic’. Contentful supports multi-language sites and toggling between multiple languages for ease in adding alternative content, which is a great start into adding this feature. Obviously work is required in the frontend to switch between languages in addition to other considerations, so I’m really looking forward to integrating this functionality in the coming months.
The results
I crafted a fully accessible website for Future Provenance, enabling them to effortlessly manage all their website content with speed and efficiency.