DON’T WORRY! OPTIMISM/TO A PUP/THAT’S OKAY!

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.

The foregoing posting appeared on Joe Clark’s personal Weblog on 2004.05.30 15:27. This presentation was designed for printing and omits components that make sense only onscreen. (If you are seeing this on a screen, then the page stylesheet was not loaded or not loaded properly.) The permanent link is:
http://blog.fawny.org/2004/05/30/valid-type/

Values you enter are stored and may be published.

  

Search for very early blog entries, and for anything else on fawny.org:

  

Information

Other reading

Popular topics

Photographs to look atTypography; graphic design; the death of design criticismLeslievilleTTCCanadian EnglishAccessibility

Archives by date

Just add /year/month/day/ to the end of site’s URL, blog.fawny.org. You can add just /year/month/, or just /year/, if you wish. Years are four-digit, month and day two-digit (with padding zero below 10). For example:

Very old archives are still available.

Archives by category

Copyright © 2004–2016

You enjoy fawny.blog