In December 2003, typofonderie.com was relaunched after a major redesign from scratch for the first time in its existence. This new version of the website is a major step who let us able to manage the content online directly and more easily. It was the only way to propose in the future, OpenType families too. This time, rather than doing most of the design himself, Jean François Porchez asked to Jérôme Vogel to do it. So, we contacted him to learn more about the process.

Past typofonderie.com front page (early 2003).

{Alexis Zephir} You’ve completely rebuilt the typofonderie.com website. How did the project start and what was the brief?

{Jérôme Vogel} The original project concerned mainly the Alphabets section, which needed to be restructured and redesigned in order to face the new challenges of the type foundry. We decided that the whole order process had to be simplified, and the pages needed to be reorganized to always give the user the ability to quickly see all the typefaces available, and easily jump from one pack to another. Finally, as the new design was differing more and more from the original one, the project extended to the entire website!

Typical Alphabets section page (2001).

What was your relationship with Jean François Porchez, before, during, and after the project?!

I’m a big fan of Jean François, so of course it’s been a great experience to work with him on this redesign, and working with such a content is very stimulating! I wanted the website to reflect the elegance of the typefaces, without interfering with them. From the beginning we had the same point of view on the design, on how we should proceed, and so on, so it was really a piece of cake.

What software did you use to build the website? Dreamweaver or Golive?

Everything is written by hand using BBedit, a simple yet extremely powerful text editor. I used to work on Dreamweaver, but I just never managed to get anything good from it, despite an expensive 10 cm thick book on how to use it! I always had to rewrite small portions of code, and realized that writing valid tags in an html page did not require any complex tools… So I switched to BBedit. I roughly compose the layout on paper, adjust if needed the images in Photoshop, and then build the structure template in the text editor. I use a local Apache server on MacOSX to quickly preview how it looks, and from then it’s just a try-and-see process between BBedit and the browser to compose the typography and the graphic layout using CSS.

Sounds like two very different jobs to design and to code a website, generally it’s the job of two different people?

I still think it has to be a team job, rather than a one person job, but I’d say that on a conception level, it’s important for a designer to deeply understand the technical constraints of a project in order to create good design. Moreover, from an artistic point of view, knowing how things really work from the inside often stimulates my creativity, because it gives me the ability to play with the very basic components of the medium, and to push forward its capabilities.

You seem interested in type design also, where did you learn that? Did that affect the way you built typofonderie.com website?

Well it’s still a kind of after-dinner personal project, but yes, I’m working on a revival of a late 19th century french text typeface printed by Firmin-Didot. I learnt type design at the ENSAD in Paris, during a class conducted by Jean-François, back in 2001 (that’s how we met, by the way).
Sure, this basic knowledge of what involves the creation of a typeface influenced my work on this project, as I knew what was important to show, and how to display it.

Admin area: Editing a text, here the Apolline introduction text, using Textile to simplify the writing process of correct code and typography.

Back to code! The new website is dynamic, why? How does it work?

Typofonderie.com is a dynamic database driven website. During the page generation process, content is pulled from the database, then structured by the PHP engine and inserted into XHTML templates, and finally output to the browser along with a style sheet. We keep content, structure and design separate, so we can easily change one without affecting the two others. Though I don’t think this separation is necessary at the conception stage, as the design has to be strongly related to the structure, it becomes really important at the production stage, and also for the maintenance of the website.

Why is this separation (design versus content, etc.) not necessary during the conception stage?

I don’t want to bring back the old graphic design demons by saying that “Form follows function”... but I don’t agree neither when I’m told that design is just an interchangeable decorative skin. I guess this dilemma is what makes designing so great! It’s important to stick to the subject, to focus on its functions during the creation process, in order to produce a targeted response. Then personal style will apply without you even noticed.

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.

So, there is an admin side? What are its functionalities?

The whole site is built like a regular content management system (like PHP-Nuke and such), with a public front side and a back side composed of various protected areas. Administration panels allow for the modification of almost everything seen on the public side. For example, all the words and texts from the interface are editable in real time, and one can add a new language, or modify an existing text very easily. Font packs on Typofonderie.com are also highly customizable via specific panels in the back office, and can be grouped together, turned into special offers, or even reserved for special clients. All information is centralized, so when something changes, it changes everywhere without the need for manual updates.

From what experts like Joe Clark or in France Tristan Nitot say, the typofonderie.com website is standards compliant and accessible? What were the implication of that during the design process?

Firstly, it’s a lot simpler to make a fully standards compliant website than it was to produce an old school HTML4 one. Spending hours slicing images into table cells to imitate print layouts was really painful and didn’t make any sense at all… Now with XML, all the designer has to do is apply his design upon the well formatted structure, eliminating the risk to corrupt data with meaningless information. If you need a header, use a header tag! Then if you want it to be set in Georgia, add a header rule in your style sheet. It can’t be simpler. And no matter what device people use, they will still get a header in the end.

“Web standards” don’t seem to be important to me, as 80% of the people on the Internet use MS Internet Explorer (all versions), and that one is not compliant! Don’t you think what’s important is to rely on how most of the people access your content?

Microsoft already made significant efforts to bring IE6 compliant. Of course, there are still a lot of improvements to make (support for PNG, better CSS compatibility, security, etc.), but I think we’re getting close to a good version of IE. On the other hand, people are getting more and more attracted by the Mozilla browsers, as they really offer a better internet experience (tab browsing, bug free architecture, secure environment, PNG transparency effect, full CSS support, etc.). So I feel very optimistic concerning the future of web standards.

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.

Is the website design over now?

Yes, mainly. The order process is fully functional, the CSS compatibility is okay, and no bugs have shown up lately. But we’re still working on the “In Use” page, and will release it very soon.

What are your other current projects?

I just finished another website that uses the same architecture as typofonderie.com: http://pleutil.net , whose topic is not so far from typofonderie, since it talks about French literature. So “après la Lettre, le Mot!”

By Alexis Zephir, (c) 2004. All rights reserved. Many thanks to David Earls for the editing of the English version.