Last year when our dear friend and collaborator passed away, we decided to do a tribute to him and his work. There was a lot of information about Arnaud Mercier on the web, but there was no place to see all of his work in one place. We wanted to gather all of his designs to show the breadth of his work and give people a chance to get to know the designer a bit more on a personal level.
How do we present the work of someone who had so much to say? Do we create a portfolio website and present only the best work? We could, but with Arnaud, his explorations and specifications, all of which unseen to most, are just as interesting as the final work itself. We decided to show everything.
How do we show an incredibly large body of work across so many different formats? Given the fleeting nature of the web, much of the work was outdated or simply didn’t exist anymore. Internet technology moves so fast, that often times the work simply couldn’t be viewed because the technology used is obsolete. We decided to shoot and act questions later…
Building an Archive
From thousands of images scattered across hard drives, computers and websites all over the web, David Lamothe started on the long journey of gathering all of Arnaud’s work—commissions, contributions, propositions, explorations, photography and personal projects—and catalogue it in one place. An exhaustive journey to say the least. Thank goodness for the Way Back Machine from the Internet Archive project.
Once gathered, we saw an opportunity to show the progression of his work. That, even though his style changed, screen requirements evolved and technologies expired, there were certain principles that were maintained throughout his entire body of work.
Presenting the Work
The idea of a Timeline was agreed upon. This idea would limit the ability to search or navigate his projects individually, but we felt that experiencing the work as a whole and seeing its progression was more important.
We decided to do a lazy loading (very) long stroll making it easy to see his development, while offering a lightbox view showing the exactness of his work in full resolution. Given the amount of images to be presented, we knew this would be a challenging model but we saw no other way to create the unified experience we were hoping for.
To make things even more complex, we decided to make it a responsive website so that it worked on desktops, tablets and mobile devices. And to really torture ourselves, we decided to support retina displays, even on desktops. These two requirements forced us to create 16 versions of each image. In the end, we had over 2000 images to produce, 16 of each, for a total of 32,000 images. Yikes!
Given that the images came from various places and periods of time, they were different sizes (remember creating websites within a 640×480 environment?) and had different browser templates. We decided to use a masonry approach to support all the different sizes and stripe out all the browser templates in exchange for a more modern, timeless template.
- 2000+ images
- Responsive design
- Retina display
- Support any image size
- Replace browser template
Clearly this couldn’t be done manually … time for the Automator! After a week of developing automation tasks, we were anxious to know if it would work. Luckily it did, creating nearly 3GB worth of images (oh la la) and making David Lamothe an automating wizard (bravo).
From Prototype to Realization
Interface Development of the prototype was coming along, bringing together responsiveness, retina, masonry, lazy loading and lightbox overlays in one web page. Not an easy task. But come together it did through the mastery of Antoine Doury.
Now it was time to inject content into the interface. Do we create a CMS or make a static website? We decided against a CMS because the website wasn’t meant to change and it would be laborious to upload 3GB of images. However a static website would also be laborious and open the door for manual errors. Not to mention that a static page containing the code for all those images would be a nightmare to load.
We contemplated using our file browser software Subfolio, however in the end, we used Statamic, an application developed by teammate Mubashar Iqbal (who also developed Subfolio). Statamic is similar to Subfolio in the fact that it creates a static website based off files and folders but offers more flexible features for developing actual websites (rather than file browsers).
Solving Performance Issues
Everything came together seamlessly with one very important problem – performance. Statamic wasn’t the problem and nor was the frontend as everything was compressed as much as it could. The issue was the shear number of images and the fact that they were all saved at 24-bit PNGs. What to do? The deadline was upon us and the website was a simply unviewable. And since we were automating the creation of images, it was not like we could make image-level compression decisions…
Teammate Luis Lavena suggested the use of a CDN using Amazon CloudFront, which would at least solve latency issues. Within minutes, he had it up and running. This seemed to make the website more usable, but we couldn’t get around the fact that the images themselves were the problem. Starting with the timeline listing images, we started the laborious task for recompressing certain images with acceptable results.
A Successful Launch
Although still image heavy (how can it not be), the website was useable and it was ready to launch, unfortunately a day late. With a Tweet the website was public and we are happy to see that it has been well received. In the two days since launch, the website has gotten over 10,000 visitors and things seem to be holding up with no complaints (so far).
Check out the project at arnaud.area17.com.
We will continue to recompress images within the lightbox view in addition to adding a few leftover projects and info text for each project. Also, even though the website is officially “progressive” it is still quite unusable on tablets and mobile devices. Simply because these devices cannot cache this amount of data. But we have a few ideas on how to make it work and we hope to have them in place soon.
David Lamothe, Art Direction
Antoine Doury, Interface Development
Mubashar Iqbal, Statamic Implementation
George Eid, Creative Direction, Copywriting
Kemp Attwood, Research
With the support of Dominique Deriaz, Andrew Ackermann, Luis Lavena, Martin Rettenbacher, Audrey Templier, Arnaud Alves, Violenn Simon, Elise Agostini, Sarah Wilke, Meryem Kettani and the entire AREA 17 team.