Refonte
Past typofonderie.com front page (early 2003).
{Alexis Zephir} Vous avez complètement refait le site typofonderie.com. Comment le projet a-t-il commencé et quel était le cahier des charges?
{Jérôme Vogel} Le projet initial concernait principalement la section Alphabets, qui avait besoin d’être restructurée et redessinée, afin d’accompagner l’évolution de la fonderie. Nous avons décidé que toute la procédure d’achat en ligne devait être simplifiée, et qu’il fallait réorganiser les pages de manière à offrir à l’utilisateur une vision d’ensemble des familles de caractères ainsi qu’un accès immédiat aux fontes elles-mêmes. En fin de compte, alors que le nouveau design différait de plus en plus de l’original, le projet s’est étendu à l’ensemble du site!
Typical Alphabets section page (2001).
Quelle a été votre relation avec Jean-François Porchez avant, pendant et après le projet?!
Je suis un grand fan de Jean-François, cela a donc été une belle expérience de travailler avec lui sur cette refonte, d’autant qu’un tel contenu est très stimulant! Je voulais que le site reflète l’élégance des caractères sans interférer avec eux. Depuis le départ nous avions le même point de vue sur le graphisme, et la manière de procéder, donc c’est vraiment allé tout seul.
Quel logiciel avez-vous utilisé pour réaliser le site? Dreamweaver ou Golive?
Tout est écrit à la main dans BBedit, un éditeur de texte simple mais extrêmement puissant. J’ai déjà eu l’occasion de travailler sur Dreamweaver, mais je n’ai jamais pu en tirer rien de bon, malgré un manuel de 10 cm d’épaisseur chèrement payé! Je devais systématiquement réécrire certaines portions de code, et j’ai réalisé qu’il ne fallait pas d’outils compliqués pour baliser correctement une page HTML… Je suis donc passé sur BBedit. J’esquisse la mise en page sur papier, ajuste au besoin les images dans Photoshop, puis construis finalement le gabarit de la structure dans l’éditeur de texte. J’utilise un serveur local Apache sous Mac OSX pour prévisualiser et à partir de là, c’est un va-et-vient entre l’éditeur et le navigateur pour composer la typographie et la mise en forme, en utilisant les CSS.
Le graphisme et le développement semblent deux métiers différents, généralement c’est le travail de deux personnes distinctes, non?
Je continue à penser que ce doit être un travail d’équipe, mais je dirais qu’au niveau de la conception, c’est important pour un designer de bien comprendre les contraintes techniques d’un projet afin d’être à même de créer un design adéquat. Plus encore, d’un point de vue artistique, savoir comment les choses fonctionnent réellement de l’intérieur stimule souvent ma créativité, parce que cela me donne la possibilité de jouer avec les composants élémentaires du médium, et de pousser ses capacités.
Vous semblez également intéressé par le dessin de caractères, où l’avez-vous appris? Cela a-t-il eu un impact sur la manière dont vous avez travaillé sur typofonderie.com?
Oui, je travaille à mes heures perdues sur le “revival” d’un caractère de la fin du XIXe imprimé par Firmin-Didot. J’ai appris le dessin de caractères à l’ENSAD à Paris, dans un cours de Jean-François, c’était en 2001 (c’est d’ailleurs comme ça que nous nous sommes rencontrés).
Cette connaissance basique de ce qu’implique la création d’un caractère a bien sûr influencé mon travail sur ce projet, dans la mesure où je savais ce qu’il est important de montrer et comment le faire.
Admin area: Editing a text, here the Apolline introduction text, using Textile to simplify the writing process of correct code and typography.
Retour au code! Le nouveau site est dynamique, pourquoi? Comment cela fonctionne-t-il?
Typofonderie.com est un site dynamique construit sur une base de données. Pendant le processus de génération de la page, le contenu est extrait de la base, avant d’être structuré par le moteur PHP, inséré dans des gabarits HTML, et finalement délivré au navigateur accompagné d’une feuille de style. Le contenu, la structure et le design sont séparés de manière à ce que l’un puisse aisément être modifié sans affecter les deux autres. Bien que je ne sois pas convaincu que cette séparation soit pertinente à l’étape de la conception, où le design doit être intimement lié à la structure, cela devient vraiment important lors de la production, ainsi que pour la maintenance du site.
Pourquoi cette séparation (forme vs contenu, etc.) n’est-elle pas nécessaire pendant la conception?
Je ne veux pas réveiller les vieux démons du graphisme en affirmant “Form follows fonction”... mais je ne suis pas d’accord non plus quand j’entends dire que le design est juste une couche décorative et amovible. Je suppose que c’est ce dilemme qui fait tout l’intérêt du métier de graphiste! C’est important de coller au sujet, de se concentrer sur l’aspect fonctionnel pendant le processus de création, pour être à même de produire une réponse adaptée. Le style, ensuite, s’affirme tout seul, sans qu’on ait besoin de le chercher.
Admin area: Editing a font family elements. You can easily add any weight or option for any families. Then, all changes appear through all the website.
Il y a donc une partie administrateur? Quelles en sont les fonctionalités?
L’intégralité du site est construite comme un système de gestion de contenu classique (type PHP-Nuke), avec une façade publique et des coulisses composées de diverses parties protégées. Les panneaux d’administration permettent de modifier pratiquement tout ce qui se trouve côté public. Par exemple, tous les mots et tous les textes de l’interface sont éditables en temps réel, et l’on peut ajouter une traduction dans une autre langue ou modifier un texte existant très facilement. Les packs de fontes sont également paramétrables via des panneaux spécifiques côté admin, et peuvent être groupés, transformés en offre spéciale ou même réservés à certains clients. Toute l’information est centralisée, de sorte que quand quelque chose change, cela change partout sans qu’il soit besoin de faire des mises à jour manuelles.
Selon le point de vue d’experts comme Joe Clark ou en France Tristan Nitot, le site typofonderie.com est compatible avec les standards du web? Quelles ont été les implications durant le processus de design?
D’abord, il est beaucoup plus facile de réaliser un site qui réponde complètement aux standards que ça ne l’était d’en produire un en HTML4. Passer des heures à répartir les images dans des cellules de tableaux pour imiter la mise en page papier était vraiment laborieux et n’avait aucun sens… Maintenant avec le XML, tout ce que le designer a à faire, c’est d’appliquer son graphisme sur la structure correctement formatée, ce qui élimine le risque d’altérer les données avec de l’information insignifiante. Si vous avez besoin d’un titre, utilisez une balise de titre! Puis si vous voulez le mettre en Georgia, ajoutez une règle de titre dans votre feuille de style. Rien de plus simple. Et peu importe la manière dont les gens accèdent au contenu, ils auront bien un titre à la fin.
Les “standards du web” ne me paraissent pas essentiels à partir du moment où 80% des gens sur Internet utilisent MS Internet Explorer (toutes version confondues), qui n’est pas compatible! Ne croyez-vous pas qu’il soit important de tenir compte de la manière dont les gens accèdent au contenu?
Microsoft a déjà fait des efforts significatifs pour rendre IE6 compatible. Bien sûr, beaucoup d’améliorations restent à faire, (support du PNG, meilleur compatibilité CSS, securité, etc.), mais je pense qu’on n’est pas loin d’une bonne version d’IE. D’un autre côté, les internautes sont de plus en plus attirés par les navigateurs Mozilla, qui offrent vraiment une meilleure qualité de navigation (onglets, architecture saine et sans bug, haut niveau de sécurité, support des transparences PNG, parfaite intégration des CSS, etc.). Je suis donc vraiment optimiste en ce qui concerne l’avenir des standards du web.
Admin area: Gazette article editing page (Parisine, a Parisian type). Using very simple code, you easily put a text on particularly part of the page, such the pale yellow area or the main right column, same for images.
Est-ce que la refonte du site est achevée à présent?
Oui, pour l’essentiel. La procédure de commande est complètement opérationnelle, la compatibilité aux CSS est effective, et aucun bug ne s’est déclaré dernièrement. Mais nous travaille encore sur la page “In Use”, que sera bientôt terminée.
D’autres projets en cours?
Je viens de terminer un autre site dont l’architecture est similaire à celle de typofonderie.com: pleutil.net et dont l’objet n’est pas très éloigné puisqu’il s’agit d’un site de littérature française… Après la Lettre, le Mot!
