“Napoleon, apology and satire” / “Napoléon, apologie et satire”

This year, it’s the bicentenary of Napoleon‘s death, the famous French military and political leader of the early 1800s. As such, lots of museums and institutes have conceived exhibitions or virtual content to revisit his life and his influence on the world.

This article is also available on Medium.

Among those different institutions, the Institut de France has decided to create a little virtual retrospective study of the French emperor, entitled “Napoleon, apology and satire”. This educational itinerary makes you ponder upon the good and the bad deeds of Napoleon throughout the exploration of 60 period prints. The collection shows illustrations glorifying the man and caricatures that mock him; the idea with this online exhibit is to show the ambivalence of the character and how various artists could react to various bombastic and at time crazy events of his life.

The website is over there: https://napoleonimages.institutdefrance.fr/.

Note: the website is only available in French.

A screenshot of the website entry page

This website is also designed for teachers and students – part of the contents are educational sheets to better take in all the info and somewhat focus the reader’s exploration on some carefully thought questions.

I had the chance to work on this project as the tech expert and web developer alongside Marie Saby for the UI/UX conception and Les Fées Spéciales for the project organisation and management. It was a really interesting project that was also a nice opportunity to see a rare collection of images up close.

The project taught me several things but most primarily it deepened my knowledge of images tiling and responsive design…

How to tile images to get high-res without bloat issues?

To get a high-definition for the images without overloading the page when it loads, we drew inspiration from the British Museum’s website and used a web-based viewer for zoomable images called OpenSeadragon. The idea is similar to Google Maps: first, you cut your image in multiple (slightly overlapping) parts (or tiles); then, depending on the current level of zoom, you load more or less details in each part. This way, you only get high-res on the parts of the image that you are actually looking at and currently zoomed in on!

By using zoomable tiled images, we can get high-resolution details on a particular part of the illustration without overloading the page with huge images upon loading!

Note: by the way, OpenSeadragon is completely open-source and pretty easy to use, plus it’s very quick to install using npm or bower – so if you’re looking for a basic zoomable-tile lib, I’d really recommend checking it out 😉

Don’t forget that, of course, you will need to preprocess your images in order to create zoomable tiles from each. There are multiple formats for this kind of data – I myself went with the common DZI format that basically consists of one “reference file” that lists all the tiles and their relationships to one another, and then a folder containing all of said tiles. As explained in the OpenSeadragon docs, this DZI computation is doable using open-source free tools like Deepzoom, which is available in various programming languages (Python, PHP, Perl, JavaScript…).

In the end, you get more and more details as you zoom in, seamlessly, but the initial page loading isn’t as expensive as if you were loading a huge image all at once. Plus, mobile phones actually agree to load the page – while they sometimes block content when it’s too heavy.

Because yes – responsive friendliness was the other big side to this project, for me.

Responsive design, aka “the pain of testing your site on hundreds of devices”…

Indeed the other big technical challenge with this project was that the clients wanted the website to work on as many devices as possible: desktop, tablet, mobile phones… So: combine all possible OS with screen resolutions, hardware type and browser, and trust me – you’re in for a sweet ride!

Below is a screenshot of the same carousel page on desktop (top), tablet (bottom left, with a togglable menu bar) and mobile (bottom right):

Designing for various devices requires specific UI and UX, but also code customisations because not all OS, browsers and hardware combo work the same…

Honestly, I spent about a quarter of the entire project time on the responsive design, but I think it was worth it.

Firstly, for the app itself: we managed to get it working on pretty much all the desktops we encountered, same for tablets, and both on Androids and iPhones. We just decided to throw in the towel for older iPhone models that ran on outdated software.

Secondly: I discovered so many peculiarities about all those devices and their specific requirements! I believe this is the sort of things you only learn by doing and thus having hands-on experience of designing for all these target devices now gives me a better understanding of the possibilities and the limitations current web tech offers in that area. In particular, I’m sorry to say that Android behaves so much better than iPhone! Perhaps it’s because I’d used flex gap and display: grid in various places, and this CSS feature is not as widely supported for iOS, but there are several instances where Android would just immediately work while iPhones forced me to modify my code to fit.

But perhaps this was just my experience of it? I’ll admit mobile dev is not (yet?) my forte, so I might be unaware of nice tips and tricks. If you have some, feel free to post them in the comments so I can learn even more on this topic! 😉

Conclusion

This collaboration with the Institut de France, Marie and Les Fées Spéciales was extremely beneficial: it let me play around with some beautiful images, read up on Napoleon and the influence he had on his contemporaries, improve my skills in web dev and more particularly responsive design, and it even nurtured my interest for UI and UX.

Also, big thanks to Maud and Catherine for their professionalism and overall kindness all through this job!

I’m really glad I could be a part of this adventure and I sincerely hope it will engage people – teachers, students and broader audiences alike!

Cette année, nous fêtons le bicentenaire de la mort de Napoléon Ier, le célèbre chef militaire et politique français du début du 19e siècle. C’est pourquoi nombre de musées et instituts ont conçu des expositions ou des parcours virtuels qui revisitent sa vie et l’influence qu’il a eu sur le reste du monde.

Parmi ces différentes institutions, l’Institut de France a décidé de créer une rétrospective en ligne de l’empereur français, intitulée “Napoléon, apologie et satire”. Ce parcours pédagogique nous fait réfléchir aux bonnes et mauvaises actions de Napoléon au travers de 60 illustrations d’époque. La collection présente des illustrations à la gloire de l’homme mais aussi des caricatures qui le moquent ; l’idée de cette exposition virtuelle est de montrer l’ambivalence du personnage et comment divers artistes ont pu réagir aux évènements grandiloquents, parfois même délirants, de sa vie.

Le site est disponible ici : https://napoleonimages.institutdefrance.fr/.

Une capture d’écran de la page d’accueil du site

Ce site est aussi conçu pour les enseignants et les élèves – une partie du contenu est constituée de fiches pédagogiques pour mieux appréhender toute cette information et guider l’exploration du lecteur à l’aide de quelques questions bien pensées.

J’ai eu la chance de travailler sur ce projet en tant qu’expert technique et développeur web aux côtés de Marie Saby pour la direction artistique et la conception UI/UX, et des Fées Spéciales pour l’organisation et la gestion. Ce projet était passionnant et m’a également permis de voir de près une collection d’images rare.

Ce projet m’a appris beaucoup de choses ; j’ai tout particulièrement approfondi mes connaissances des images “pavées” (“tiled”) et du design responsif…

Comment découper des images pour obtenir une haute définition sans problèmes de performance ?

Pour avoir des images en haute définition sans surcharger la page au chargement, nous nous sommes inspirés du site du British Museum et nous avons utilisé un outil web de visualisation d’images zoomables, OpenSeadragon. L’idée est similaire à Google Maps : d’abord, on découpe les images en plusieurs parties (des tuiles) qui se superposent légèrement ; ensuite, on affiche plus ou moins de détails dans chaque partie selon le niveau actuel de zoom. De cette façon, on obtient une haute définition sur les parties de l’image que l’on regarde actuellement, sur lesquelles on a zoomé !

En utilisant des images zoomables “tilées”, on obtient un haut niveau de détails spécifiquement sur les parties de l’image que l’on regarde sans surcharger la page au chargement avec des images immenses !

Note : au fait, OpenSeadragon est totalement open-source et assez facile d’utilisation. Le package est aussi très rapide à installer avec npm ou bower – donc si vous cherchez une lib pour des tuiles zoomables, je vous recommande vivement d’y jeter un oeil 😉

Bien sûr, n’oubliez pas de pré-traiter vos images pour créer des tuiles zoomables avec chaque. Il existe plusieurs formats pour ce type de données – pour ma part, j’ai utilisé le format usuel DZI qui consiste en un fichier “de référence” qui liste toutes les tuiles et leurs relations, et un dossier contenant toutes les-dites tuiles. Comme expliqué dans la doc de OpenSeadragon, on peut calculer ce DZI à l’aide d’outils gratuits et open-source comme Deepzoom qui est disponible dans de nombreux langages (Python, PHP, Perl, JavaScript…).

Au final, on obtient un haut niveau de détails sur la zone que l’on étudie, de manière fluide, mais le chargement initial de la page n’est pas aussi coûteux que si on récupérait une immense image tout d’un coup. Cela assure aussi que les téléphones chargent effectivement la page – car ils bloquent parfois le contenu qui est trop lourd.

Car oui – l’autre partie majeure de ce projet pour moi était la gestion du design responsif.

Le design responsif, ou “la douleur de tester son site sur des centaines d’appareils”…

En effet, il y avait un autre défi technique sur ce projet : les clients voulaient que le site soit accessible sur le plus grand nombre d’appareils possibles : desktops, tablettes, téléphones… Et pour sûr – quand on combine toutes les possibilités d’OS avec les résolutions d’écrans, le type de hardware et le navigateur, on commence à s’amuser !

Ci-dessous, voici une capture d’écran de la même page de carrousel sur ordinateur (en haut), tablette (en bas à gauche, avec une barre de menu repliable) et sur téléphone (en bas à droite) :

Concevoir un site pour différents appareils nécessite des UI et UX spécifiques mais aussi des modifications particulières dans le code car toutes les combinaisons d’OS, navigateurs et hardware ne fonctionnent pas de la même manière…

Honnêtement, j’ai passé environ un quart du temps total du projet sur le design responsif, mais je crois que ça en valait la peine.

D’abord, pour l’app elle-même : nous avons réussi à la faire fonctionner sur à peu près tous les desktops que nous avons testés, idem pour les tablettes, et aussi bien sur Android que sur iPhone. Nous avons seulement laissé de côté les iPhones plus anciens qui utilisaient un OS daté.

Ensuite : j’ai découvert tout un tas de particularités pour ces appareils et leurs besoins spécifiques ! Je crois que c’est le type de choses que l’on apprend surtout par l’exemple ; avoir une expérience personnelle de la programmation pour tous ces appareils me permet aujourd’hui de bien mieux évaluer les possibilités et les limites offertes par les technologies web dans ce domaine. En particulier, je dois bien avouer que les Androids sont beaucoup plus simples à contenter que les iPhones ! Peut-être est-ce parce que j’utilisais du gap flex et du display: grid à plusieurs endroits, et que cette fonctionnalité CSS n’est pas aussi largement supportée sur iOS, mais il y a eu plusieurs cas où un Android n’avait aucun souci alors que les iPhones demandaient des modifications de mon code pour fonctionner correctement.

Mais c’est peut-être seulement mon expérience ? J’admets ne pas être spécialiste (pour l’instant ?) de la programmation mobile, alors je ne suis possiblement pas au courant de certains trucs et astuces. Si vous avez des conseils, n’hésitez pas à les mettre en commentaire pour m’en apprendre encore plus sur le sujet ! 😉

Conclusion

Cette collaboration avec l’Institut de France, Marie et Les Fées Spéciales était extrêmement bénéfique : c’était l’occasion de travailler avec de belles images, d’en découvrir plus sur Napoléon et sur l’impact qu’il a eu sur ses contemporains, d’améliorer mes compétences en dev web et même de nourrir mon intérêt pour l’UI et la UX.

Et bien sûr, un grand merci à Maud et Catherine pour leur professionnalisme et leur gentillesse tout au long de ce projet !

Je suis vraiment ravie d’avoir fait partie de cette aventure et j’espère sincèrement que le site intéressera – aussi bien les enseignants que les élèves et d’autres publics !

Leave a Reply

Your email address will not be published. Required fields are marked *