Authoring Web-Standards Pages: Like Setting Type in the Days of Gutenberg…

I’ve just spent the last few days working to build a set of Web pages which are authored to W3C standards (HTML 4.01 and CSS 2.1) They’re now up on my website:

http://www.billhillsite.com/

I’ve done some HTML authoring before, of course. But I always stayed away from anything but the simplest hand-coding. When I wanted to do something more complex (typographically speaking), I’d fire up a publishing tool, which would let me do things in a visual way and then translate what I’d done into code.

This time – at least at first – I didn’t really care about the code itself. I was creating the pages in order to show off how Embedded OpenType (EOT) font embedding could be used to really enhance readability on the Web, by allowing Web designers to use high-quality commercial fonts on their pages, even though readers would not have those fonts installed.

It worked like a charm – at least as far as my goals of showing off the technology were concerned. I even apologized for the code when I posted the pages, and explained that they were merely a vehicle to show EOT actually working.

I wanted to post the pages quickly, to coincide with an announcement by font vendor Ascender Corporation that it was supporting Embedded OpenType (EOT) and launching a new website:

http://fontembedding.com/

I’d have liked to have posted a Web-standards set of pages, too, but there just wasn’t time. My colleague Chris Wilson tried to warn me. He even coded up the first page. But we couldn’t get them done in time for the announcement, so I decided to go with what I had.

Reactions were wildly different. One or two people were really helpful – one offered to give up some of his time to convert the pages to cleaner Standards-compatible code. But some were downright rude. Don’t they get it? If you disagree with someone, but you’re civil about it, there’s a good chance they’ll listen to your argument.

Anyway, I’d already decided that I needed a set of identical Web-standards pages up there. While the offer to make them for me was very generous, it wouldn’t do much to improve my personal level of understanding. So I thought it was time to get my hands dirty. I bought a pile of HTML and CSS books, then set about deconstructing Chris’s page until I’d figured out how it worked. (If you want to learn how to paint, the best way is to study the work of a master…)

You can’t use any really visual tool to do this work – they all end up inserting chunks of their own code, which is inefficient and impossible to understand.

Chris recommended I use Notepad, the basic text editor that comes with Windows. I also tried FrontPage, which worked fine as long as you stuck to the HTML view. I found life a lot easier with line numbers, so Chris told me to try Notepad++, and that’s what I ended up using.

It’s a good tool, and it’s available free on:

http://notepad-plus.sourceforge.net/uk/site.htm

Chris’s other suggestion was to use Visual Studio, but that’s way too heavy-duty for me – I am only an egg (from Robert Heinlein: Stranger in a Strange Land – See BOOKS I RECOMMEND).

My first page was a struggle, as you’d expect. But it was a great feeling when I finally got it to do what I wanted. It was even better when the W3Cs HTML validator service passed it (after I’d tidied up – it caught a couple of orphaned opening and closing tags first time around).

After that, my coding for each of the subsequent pages got steadily quicker.

I think Web standards are great. I’ve been a big supporter inside Microsoft. They still need to be evolved to support really great typography, because the Web is without doubt the publishing medium that will replace paper, and should be capable of doing anything you can do with paper (especially as screens get better).

My experience with authoring standards-compatible pages by hand – and the fact that there isn’t any other acceptable way – really got me thinking.

We’re back in the days of Gutenberg. In those days, all text had to be set by hand. It was a job for the real expert – not something any regular person could ever do. One of the world’s great type designers, Herman Zapf, told a conference a few years ago that no-one has ever yet succeeded, despite all the technology developed since, in setting type as well as Gutenberg.

The key to Gutenberg’s setting was that he used many more ligatures than are in common use today. A ligature (from the Latin root meaning to bind) is a special character which creates a new composite binding together two or more letters in order to make them fit better together. The most common examples are ff, fi, ffl, ffi, etc.

Most typefaces today have only a handful of ligatures. But Gutenberg cast many additional ones which ensured a tight and aesthetically pleasing fit of groups of two, three, four or more letters.

We see character sets in typefaces being extended all the time to support more languages. OpenType has given us the ability to create many more ligatures. But we’re not yet using that capability to its full potential.

Hand-coding standards-compatible Web pages is just like setting type by hand. If I want a true apostrophe, for instance, I have to type ” ’ “, or paste it in. True double or single quotes, em-dashes – they all have to be hand-coded.

How sick is that?

Hand-setting of type was a huge bottleneck in the printing process. It took about 400 years (until Victorian times) before machines like the Linotype and Monotype typecasters were able to take over most of the load.

Of course, access to machines like that was pretty much limited to professional publishing concerns.

The typewriter made it possible for almost anyone to put print on paper – pretty ugly, limited, monospaced print, it’s true, but it was great leap forward.

Since the advent of the personal computer in the 1970s we’ve seen steady progress in the quality of printed material ordinary non-experts can produce. Dot-matrix and daisy-wheel printers have been replaced by laser and inkjet printers. Regular word-processing software like Microsoft Word can turn out very professional documents. The desktop publishing revolution of the 1980s brought software which can do just about anything you want. And you don’t have to be an expert to use any of these – templates and default settings will give you professional results.

And here we are with the Web. It’s the most important publishing medium in human history. Because for the first time it democratizes both the production AND distribution of high-quality content. And you can read it on a screen, keep it up to date, re-purpose it, etc.

But it’s clear to me that we’re still missing a huge piece of technology: an authoring tool which can be used by anyone without expert knowledge( i.e. the ability to hand-code) which produces standards-compatible, professional-quality Web pages.

That’s the Desktop Publishing revolution of the 21st Century, and it’s still waiting to happen…

Advertisements

17 thoughts on “Authoring Web-Standards Pages: Like Setting Type in the Days of Gutenberg…

  1. Richard Fink

    Bill,You are absolutely correct. Once upon a time, the web was for “everybody”.A lot of ugly pages, but a lot of energy.The mix of CSS, HTML and Javascript and cross-browser knowledge that one now needs to master is overwhelming.And there is, as yet, no tool that makes it all manageable to the untrained and uninitiated.Not Adobe Dreamweaver, not MS Expression Web, nothing.Without places like Worpress.org and blogger, we’d all be in real pickle.

    Reply
  2. joeclark

    Quotation marks and dashes manifestly do not have to be escaped when using Unicode, which, axiomatically, you will be using.Dreamweaver is adequate in creating valid HTML.Everything from the blinding white-on-black type on your blog to your willingness to alienate the developers you’re trying to win over by releasing half-arsed HTML lead me to believe that this is going to be a very tough road ahead for you, Bill. Remember: You have to sell us, not the other way around.I am certainly not expecting valid and semantic code from your eventual page, which you insistently believe has to look like a magazine layout.

    Reply
  3. Bill Hill

    Joe, a few comments in response…On Quotations and dashes, I just copied what Chris had done. Calling Dreamweaver’s HTML “adequate” sounds like pretty faint praise to me. And – since you know about Unicode and escapes – you’re clearly not a regular Joe or Jane who doesn’t want to learn to code but just wants to be able to post decent content. You’re a member of an elite, and your comments reflect that. I’m not saying that knowledgable elites are bad. I’m just saying we need tools the rest of us can use.Now, about the “blinding black on white type” and the “insistence it has to look like a magazine layout”.Scientific studies carried out over, oh I guess about 80 years, first in print, then in relation to the screen, have shown that the higher the contrast, the more readable the text. People prefer black-on-white to white-on-black. The only reason I use black-on-white in this blog is that the Blogger layout capabilities are so poor there’s miles of wasted space either side on most displays, and because there’s no content in it, it is indeed to much white…You’ve got things completely backwards in relation to my “insistence on magazine-style layout”.The driving factor is human vision, and the fovea, which needs – not wants, needs – to read type that’s between 9 and 13 points at normal reading distance, in a column width of between 55 and 65 characters.Magazine and newspaper layout are the way they are because they evolved to suit human vision, not because they have some “outdated design aesthetic”, as you seem to be suggesting.I’ve done a lot of my own research into reading over the 40 years I’ve worked with text. And my colleague Kevin Larson (a PhD in cognitive psychology) has been running a program of readability research by independent university teams for a number of years now.There’s a good scientific basis for what we do.

    Reply
  4. Richard Fink

    @joeBought your book and I check your blog. And I agree with you on most issues but I gotta tell you, you seem especially grumpy lately.Based on your comments, I’m convinced that the skill set of the “developers (Bill) is trying to win over” is much, much, much lower than you think.The average Joe (sorry), out there making web pages is not a composite of Eric Meyer, Dean Edwards and Lynda Weinmann.I know web professionals who are superb back-end programmers but still haven’t learned CSS and still fall back on tables and font-tags. In a pinch, you use what you know. And it renders fine, and the message gets through. Don’t shoot!(As a hobbyist musician, Bill probably deals with this all the time – the impulse to fall back on the same riffs, same chords, same tunes that you’ve played a million times. It’s very hard and very time consuming to break out of that. It’s a phenomenon of sorts and I’ll bet the French probably have a word for it. They always do.)Too much emphasis on semantic and valid markup bothers me because it puts style before substance.I keep having a vision of a web site for some hate-spewing American Nazi Party sort of organization with the W3C Validation logo prominently displayed on the home page.Hey, never mind the part about throwing Jews into ovens: The HTML Validates!! Cool!On the other hand, since what seems to have unleashed your wrath is Bill’s post on the IE blog about Web Fonts – and fonts in general is an issue I know you care about because, well, because I read your stuff – you are absolutely right in saying that a better job needs to be done to “sell” the idea to those who make web pages and, concurrently, to those who make fonts.There are a lot of barriers to overcome before we see widespread use of EOT or whatever format ends up being adopted.Direct linking to TTF’s is just not going to happen.But EOT and IE’s support for it, at least offers a begining.

    Reply
  5. joeclark

    Bill, screens aren’t pages and won’t be in our lifetimes. To paraphrase my dear friend David Berlow, the Resolution Fairy is not going to drop by one day and give us all 320 ppi screens.People don’t like pure-white-on-pure-black text online. Nor do people want their Web sites to display multiple columns of text for the same articles. The International Herald Tribune tried it circa 2000 and, while interesting, it isn’t what people want. Nor do people want horizontal scrolling in any guise or for any reason.Hence, no, Bill, this is not a case where your years of research are applicable. I say that as someone who reads research papers over coffee in the morning and is trying to set up a research project. Sometimes a cigar does not need a Ph.D. thesis telling us it’s a cigarillo.It is indeed true that average people shouldn’t have to worry about Unicode or anything like it. If you were really committed to that thesis, your employer wouldn’t make it punishingly difficult to type real quotation marks and dashes in its operating system.It is absurd to claim, as you do here, that because you don’t know anything about making a real Web page everyone else will be condemned to the equivalent of setting metal type by hand.The fact you think Notepad is an adequate HTML editor tells us a lot. The average people you want us to feel for will not be hand-coding pages. This isn’t your forte, and you shouldn’t be hand-coding either. At some other time we can have a discussion as to why a senior Microsoft researcher has no Microsoft software at hand, even secret or prerelease software, that can lay out a page for him in valid, semantic HTML.

    Reply
  6. Richard Fink

    @BillMozilla has now followed Apple’s lead and is supporting direct linking to TTF files in FireFox 3.1 Beta 1 via the CSS @font-face rule.No support for EOT.I know you may not be at liberty to speak freely, but it looks like font embedding for the web is coming one way or the other – the issue is being forced.Having done a lot of research about the legal and technical issues, I’m wondering:Where do YOU see this all headed?

    Reply
  7. Bill Hill

    Hi Richard:The W3C is just about to set up a Working Group on Embedded OpenType, so there’s some hope it can become a standard. We’re making it as easy as possible for other browsers to implement it.

    Reply
  8. Richard Fink

    Bill,As you’ll see, I’ve done some work based on your blogozine. This was posted on Chris Wilson’s blog @you and Chris. Repeating it here slightly edited:After re-reading Bill’s previous post and looking closely at his online book and new blogozine, and in keeping with web fonts and web readability in general, I want to alert you to a new product called ZoomPerfect. ZoomPerfect uses IE’s own built-in javascript capabilities to turn IE’s Text Size menu into a true Text Zoom and/or Style Switcher. (Solving the accessibility issue you mention on Page 8 of the Blogozine.) You, the web designer, control the sizing increments, you decide exactly what text on the page gets sized and resized, and more. It’s a completely new approach to the problem – an approach that more sensibly balances the interests of the web-designer with the user’s need to have some control over the size of text.In short, ZoomPerfect solves the IE Text Size “Bug” that has been, for years, presumed to be unsolvable. IE Resizes Pixels. Finally.As some pudding for proof, I’ve taken THIS page from (Chris’s) blog and applied ZoomPerfect to it.Try making changes to the Text Size menu and see what happens.Available here.The demo uses ZoomPerfect in Style-Switch mode. Style Switch mode swaps CSS style rules depending upon the user’s selection in the Text Size menu. (It can also react to Zoom, too, but does nothing in this demo.) Unlike other style-switcher methods, ZP uses only a single .css file. (You can view the contents of the cwilso.css style sheet in html form, here.) As a little bonus, I was also able to prevent IE from making a needless call to the server for the ie.css file by including the rules from that file in the ZP style sheet and wrapping the link tag to ie.css in a noscript tag, just in case javascript is disabled. (View source will reveal.)In this sample demo, ZP is used to: 1) prevent text from ever getting unreadably small as it does at Smaller and Smallest; 2) produce a smoother size/resize at Larger or Largest without any bolding or other ungainliness; 3) tweak some line-heights and set a slightly larger base font-size. (Couldn’t resist #3, on my Dell laptop at 800×1220 your site is murder to read.)Here is another demo from your online book:The page is set in a “fixed” font-size of 12pt (or 16px) which breaks the Text Size menu in IE. The results from the other size-changing alternative, IE’s Page Zoom, are horrendous. In this case ZP is working in Text Zoom mode to bump up the font-size in 1px increments. Somewhat like what you see in the larger-type books that are quite popular. Getting ZoomPerfect and css3-multi-column.js and hyphenator.js to work together harmoniously was a bear, but as a quick and dirty proof of concept, not bad I think. (BTW, hyphenator.js blows me away. It re-hyphenates when the size of the font changes, on the fly, amazing. That guy deserves an award.)Ver 1.0 of ZP works for IE6, IE7, and IE8 and is to be released concurrently or slightly before the release of IE8. It’s in preview now.Any feedback you might have to share, of course, greatly appreciated: comments@zoomperfect.com

    Reply
  9. romy klessen

    This will be a long post; but I hope not out of line — as we are talking about reading…I’ve been enthralled since childhood with print media and I consider the tactile aspect of holding a book in one’s hand to be unmatched. Yet I do the majority of my reading these days onscreen; so do my colleagues and students; and even tho’ I love print, I also do not need any more books than I already have (rooms full) and do not need to permanently _possess_ the printed word to get value out of it. New media reading off a server isn’t the future — it’s the present. My experiences are anecdotal — but that doesn’t make their value negligible.A hybrid approach to reading onscreen is really needed. Even tho’ some of us live in the Land of Type, millions of readers just don’t care — because they’ve never had exposure/experiences to enable them to literally see what a difference it makes. In print, I’ve seen that column measure, and letterspacing, and linespacing, and H&Js, and proper punctuation have as much to do with readability as the _shape_ of letterforms, and this is equally true on a display. Poor spatial planning will corrupt even a Renaissance master face.Then there are others already so entrenched in web culture that they balk at our insistence that tried-and-true print reading research be foundational to its digital adaptation — which is ridiculous — especially given the explosion of computer adoption among our literate elders, who had read on paper for 50-60 years before ever going online. Everything we know about the relationship between eye-span and line length is valid online. If the layout is built well, no one should ever have to scroll horizontally. That’s just carelessness and poor planning, not a reason to banish column structure!Perception of contrast between type and ground varies with ambient light conditions, and even tho’ I prefer dark type on eggshell in print by lamplight, when onscreen, I read back-lit, text-only docs most efficiently in light yellow lettering on charcoal.As much as typographical quality has been a stumbling block, our other “issue” is both simple and complex. We have no flexible, functional way to “flow” text online from box to box and page to page as we have had in print prep since PageMaker was born and we were doing layouts on toaster-sized Macs. Not only should we who create the media be able to flow our text content and inline images into multi-column pages, our readers should be able to choose for themselves whether they prefer to read in narrower or wider text blocks and on a screen in either portrait or landscape orientation at the touch of a button (as is almost the reality on slate-model tablets). We have got to get past the notion that any of us can/should definitively know/determine optimal reading criteria for others. I want one column on my Palm TX and two columns on my tablet PC in portrait orientation, and three columns on my “widescreen” MacBook Pro. And why should I not have that option? And why shouldn’t everyone else, likewise? I want extra-small Garamond Condensed for reading when my eyes are not tired, and I want large Calibri when they are.Tho’ I work primarily on Macs, I have cross-platform experience and I have been an early adopter of many handheld computers, pocket PCs, e-reading devices, PDAs, tablet PCs, etc. — forging ever-forward in search of better onscreen reading experiences for myself and for my students. For example, there is truly no excuse for many textbooks to be printed behemoths anymore when secure PDFs have been viable for years. While recycling is essential, the planet will be better served by what I call “transient media” (periodicals, newspapers, time-stamped ads) being delivered and read largely online.I am a Graphics instructor with a 15-year history teaching print layout and design, and years in print production before that. I’m “mid-level capable” with HTML/Dreamweaver/CSS, and I have experience designing typefaces and building fonts, but not commercially.I believe the day will come soon when print-equivalent onscreen res will be available in a form factor and at a price-point that most people are able/willing to adopt. 150 ppi isn’t far-fetched, and given adequate pixel depth, that’s _plenty_ detail for efficient, comfortable onscreen reading and image display, with decent typography and layout, and “zoom-able” navigation from thumbnails to pages.

    Reply
  10. Richard Fink

    romy, ditto for meScrolling doesn’t exist because scrolling is good or right.It exists because there so far has been no other practical alternative for content that flows “out of the box”, so to speak.But it is being regarded as a law of nature. And we know it is not.As I read Bill’s online attempt at a magazine-like columned format complete with hyphenation and a really good font, by page two I found myself saying, “You know, this is really easier to read.”I’m convinced I would not have enjoyed reading it as much without the advanced typesetting and formatting.Now that we can at least do a fair approximation of this, can some valid research get done?I hope so.

    Reply
  11. Richard Fink

    @bill and allZeldman.com just did a post on the minutes of the Web Fonts working group meeting at the W3C.I chimed in as well:Real Type on the WebGetting nowhere fast is how I see it.At least, I think I finally understand where the Mozilla guys and Wium-Lie are coming from.Simply put: They don’t want to be IP licensing cops and that, I can understand.But as a legal matter I think it might not be tenable.The next time David Boies or Lawrence Lessig and I get together, I’ll ask their opinion.But jokes aside, that’s the level of legal input that was missing from that meeting.

    Reply
  12. Prof. Powell

    Bill,FYI the EOT generation at FontEmbedding.com http://www.fontembedding.com/eot/create.aspx is busted (has been for at least 2 weeks). I’ve been fighting getting an EOT demo going since WEFT is busted on any new Microsoft OS like Vista or even patched up XPs and I hate to get some old VM out just to do a demo. The reason…demos for my book HTML: The Complete Reference trying to show all browsers in play. Have had EOT in since edition 2 but having no fun right now…anyway hope you can help since you seem the only human reachable related to that project.Keep up the promotion any of the WebFont efforts are tremendous compared to SiFR that is a big mess if you actually use it…too many little bugs.

    Reply
  13. John

    I have been reading various posts by you and would like to get in touch with you to propose a colloberation and share some ideas about a readable web. Didnt find your emailadress…May you contact me ?John Myrstadjohn.ivar.myrstad at gmail.com

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s