Type sites do Web standards

Or, more accurately, “Type sites don’t do Web standards.”

Because of my capacity to forget million-dollar ideas, I only now realized that I had conducted an E-interview with Jean-François Porchez and Jérôme Vogel on their reformulation of JFP’s site into a standards-compliant design.

Now, as I write this, JFP’s site does not validate, but all the errors are due to unencoded ampersands, which mean nothing whatsoever. Nonetheless, the intent is there, as were the results when the site relaunched back in the day (last January).

I enjoyed a chat session with JFP and JV on 2004.01.21, which I am now humbled to present below. Mild copy-editing and HTMLification applied. (Or skip it.)

joeclark

Right. We are gathered here today to discuss the origin, development, and fabulousness of the new Typofonderie.com.

JFP

Eh

Good topic

For that, I can be ready

joeclark

Our guests today are the very French Jean-François Porchez and the possibly-equally-French Jérôme Vogel, type designer and Web designer, respectively.

JV

Very French too indeed

joeclark

Funny, you don’t look at all like the photos in your personal ads!

JV

I had a haircut a few months ago

joeclark

Well, let’s get ’er started. How did you two meet each other, and when did you decide to redo Typofonderie.com, and why?

JV

After reading Designing with Web Standards by Jeffrey Zeldman, I really wanted to get my hands on this stuff, and was looking for some project.

JFP

Or perhaps we should start long before?

JV

Yes, and I remember we had the same point of view on design

JFP

Then, he contacted me in last May or so? to point me a sample of his type presented on his Web site

JV

It was in July, I think

joeclark

So, Jérôme, you are also a type designer?

JFP, why was it necessary to redesign or re-code your site in the first place?

JFP

I was at the time for couple of months searching for people to redesign my Web site

JV

Well, I’m trying to design a type right now…

JFP

QUOI! tu ne travailles pas sur la section Gazette! grr ;-)

JV

In fact, not right now, but these days

JFP

Back: I have the need to have a new tool for handling my future OpenType families, and the actual (old) can’t handle that.

Also, more and more I have seen all the limits of a old Web site started in 1997 and never really rebuilt from scratch by pro (no amateur like me)

joeclark

What system do you use to host the site? Apache? Do you have your own server, or do you use someone else’s server for hosting?

JFP

Because of use of some simple tools like Blogger and TextPattern with the launch of typographe.com

At the time I was on internet-fr.net Windows server on same company

The company need to be in France because of how the secure credit card stuff is handled in France: centralized way

JV

Now the site uses LAMP (Linux, Apache, MySQL, PHP) and we moved to Linux one – all open-source and free Software

The project really took off during last summer, in August I think… yeah, right. that was heavy stuff.

JFP

Then he presented first concept, after long brief during the summer

joeclark

What are the graphic-design changes?

JFP

JV was a perfect guy for me, because he know what is a typeface, typography, good layout and know what code to use to build something smart, easy to navigate

JV

First we had to be not too far from the old design. keep the same logic, and the general look and feel

The whole order process needed to be redesigned and restructured

JFP

Simply because in early days, the idea was just to do the Alphabet section and don’t touch the rest

joeclark

But you probably added some new features and sections in the redesign, right?

joeclark

Also, JFP, apart from hearing about it from me, did you know anything about standards-compliant Web design before?

JV

The big word was ergonomy I think

JFP

old Web site

joeclark

“Ergonomie” means something like “usability,” a related but not identical concept.

JV

Usability, right.

JFP

Yes, from TextPattern stuff and some other blogs, mainly a biased way from my reading of type-related Web sites

also because of some discussions when we rebuilt the ATypI Web site a year before

joeclark

What software or platform did you use to design and build the site, JV? Dreamweaver or suchlike?

Yes, the ATypI site did everything right at the time, a fact nobody picked up on (except me, of course).

JV

Nope. Just BBEdit.

I just hate Dreamweaver

joeclark

Zut alors!

JFP

Me too, but I don’t use better either for JV, GoLive ;-)

joeclark

JFP, what do you mean “mainly a biased way from my reading of type-related Web sites”?

JFP

I found some ideas developed on some blogs about what you referred: Standards-compliant Web design before?

But the main point to me was more: that the content is now different from the design itself

joeclark

Well, what did you use instead of Dreamweaver, JV?

How do you see that as helpful, JFP?

JFP

An Xpress file is not anymore the final thing, hopefully

JV

I think type design and typography has a lot to do with XML, semantic Web, etc. That’s why the two things match so well

I just a simple text edit software: BBedit

I just use

JFP

In schools, in France at least, teachers in typography (not type design) and in what they call multimedia still don’t understand [that] the enjeux of the information design together with structured information and XML and Web standard is the future. perhaps some of my jobs with newspapers, where already similar ideas are used everyday help me to understand that better?

JV

Yes, the idea was to separate design from content, and better I’d say it was to separate content from design and from structure

Database – XHTML – CSS

“France at least, teachers (…)” True. Nobody never heard of XML

JFP

To me it’s not the XML who is important is more the implication behind that ideas

joeclark

Jérôme, you were going to tell me what platform and system you used to develop the site.

But, JFP, do you see the irony that a designer of visual artworks would consider it important to separate visuals from structure?

JFP

!!!

Not at all

As typeface designer, I was not rarely upset by graphic designers who don’t consider text enough (that people will read it after all, not just watch it for the pleasure of good design)

The irony I prefer is more that some good design (some who appear on design annuals) are less legible and readable that bad design for readers

JV

I work on my Titanium G4, Mac OS X Panther, Apache + MySQL 4 + PHP 4. And like I said, I just use BBedit to do the coding.

joeclark

So you wrote the whole thing by hand?

JV

Yes, I did.

joeclark

Now, JFP, do you consider the concept of “valid HTML” difficult to understand and explain? A lot of people do.

JV, what were some of the problems you had in achieving valid code with your desired layout?

JFP

Quite impressive for a guy who came from the major school in France for Graphic Design with a big G

JV

But I used a lot the open-source libraries found on the net

JFP

This school is a good example of Web site ;-)

JV

Browser compatibility was a major issue

Well, like everyone involved in designing with standards, I spent nights trying to make this damned Explorer to print like I was telling him to do!

Mozilla and Safari were just perfect.

Well, the problem with Explorer is that it does things its own way. Whereas Mozilla behaves kind of the same way

JFP

Examples of things who are not correct at all in Explorer and why (from your point of view)

JV

Mozilla and Safari

JV

Much: margins, paddings, nested divs, etc.

joeclark

How much extra work did you have to do, JV, to accommodate Explorer bugs?

How much extra time did it take?

And did the site work fine in IE for Macintosh right away?

JV

IE 5+. Yes. but on IE 5.00 Mac OS 9, it sucks

Grr

joeclark

Why so?

JFP

1. if you don’t understand the enjeux of the separation of content/design, it’s difficult to understand why a standard can be important. Meaning people who rely mainly on Flash Web sites…
2. Then, when you get to explain that part, the valid HTML is easy to explain

JV

In fact, a lot of problems came from my CSS code. The problem came from the difference in the browsers in the way they handled my bugs

Haha. So coding IE + Mozilla is a good way to learn

JV

From my point of view, the great idea behind this separation content/structure, is the ability to output one content on Different devices and different media

joeclark

And what devices and media are you thinking of?

JFP

Valid HTML mean “standards.” Who help to bring a structured content same way in various end-user support, whatsoever they are or what he was (old, young, “blind”)

JV

Devices? phone, PDA, screen, E-book, etc.

Media? 2D screen, 3D environment, text, voice, etc.

Standards: XML, XHTML, CSS, XSLT, SMIL, etc.

JFP

At my level, type design, standards are a key. without them, because a font can be used on a way you can’t imagine, the user can be annoyed by your own way to create something.

To me, the Microsoft stuff (to don’t follow standard) is a marketing problem, a money/market problem.

JV

They follow their own standards

JV

Yes, it was time-consuming.

We’re good on IE 5+ on Mac OS X, but still not on IE 5.00 Mac OS 9

JFP

We are still working on workarounds to make accessible some part of the Web site for Explorer users on Mac OS 9.

State of validation of type sites, 2004

The Web, as we are all too aware, is not print. You can make printed artworks look any way you want. Though typography and graphic design are replete with rules of thumb concerning legibility and readability, ultimately you may do whatever you wish, since there are no preset standards. Online, you’re using a structured document format (HTML) that does indeed have preset standards. Further, the majority of your visitors will experience your site through a technical device (like a browser) or several of them (like a browser and a printer, or a browser, screen reader, and Braille display). This isn’t like laying down ink on paper for the human visual system to process. There’s a lot of other processing going on beforehand, and we’ve got rules to follow there.

This distinction implies that you, the developer of a typographic Web site, have a few new responsibilities. It’s technically possible to act as though Web pages are printed pages and just slap up a GIF or a set of nested frames or even something in Flash, but the entire point of standards compliance is that you should not do so – unless of course your method actually complies with the standards.

The fact that typography is a visual medium has little to do with anything. HTML is largely unconnected to any specific output method. Nonetheless, if you bother to style your Web site, you thereby place it in the realm of visual media. (I think if you just posted HTML without a stylesheet, you could claim to be indifferent to medium. And if you want to be the first to post HTML with only non-visual CSS, well, that would be another story.)

You may be talking about type, or even showcasing or selling fonts, but this isn’t significantly different from talking about TV shows or showcasing or selling your knickknacks on eBay. Whatever your content, you have a responsibility to provide compliant markup.

It is a seemingly contradictory philosophy, but if you believe in the accessibility and universality of the Web, you must eventually come to agree that the topic of your site does not insulate the site from the need for standards compliance. If I didn’t believe in pervasive accessibility, I wouldn’t have pushed for captioned music videos way the hell back in 1989, for example.

Is anybody doing it right?

I know of three examples of (reasonably-)standards-compliant typographic Web sites created by people who care. You need the latter to achieve the former.

1. Typofonderie (but not really the related Porchez)
2. ATypI (originally very solid, now with a bit of cleaning up to do)
3. Veer (fixable with a better DTD and a few Flash-validating methods; also hobbled by their CMS)

They all have problems, but they’re well over nine-tenths of the way to compliance and their creators are at least making an effort. It is that last fact that persuades me to overlook current validation errors, or at least to view them as transitory.

But what is the state of other popular sites?

Typographi.ca

321 errors (a bit odd given how close to standards compliance Movable Type is); not even a print stylesheet.

Speak Up

Won’t validate with its defined UTF-8 character set; forcing Latin-1 results in 522 errors. I’ve had this same problem before, but I fixed it. In any event, Armin is not interested:

Joe, I have no response. The thought of being WCAG-compliant didn’t cross my mind. I have no strong feelings neither pro nor con towards compliance. So, yeah.

Typophile

No DOCTYPE, but flunks with a mere 37 errors (fixable with better Flash handling). The more relevant page to check is that of the discussion fora, which again have a character-encoding problem but result in 192 errors with a forced Latin-1 character encoding.

Microsoft Typography

Nothing from Microsoft validates and ever will in our lifetimes. No DOCTYPE, but a mere 33 errors when HTML 4.01 is assumed.

So, to be consistent here, I’d say a couple of these sites are probably no worse than the three I think are trying hard. All I’m asking is for them to understand the medium and play by its rules.