A Tale of Two Pages: It Was The Best Of Times, It Was The Worst Of Times…

The cover of Tanya’s book (© Tanya Hill, 2009)

Over the past few months, I’ve spent quite a lot of my time designing and building Web pages to try to improve my knowledge, learn Web-standards HTML and CSS, and see how far I could push readability. I became immersed in learning ways to overcome the serious limitations which still exist on the Web.

However, now I have time on my hands I have been undertaking a project for my artist wife Tanya, who has been studying and painting the native wetland birds on the Hawaiian island of Kauai. She has an exhibition scheduled for next year, and we’d like to publish a book to coincide with it. For more on the wetland birds, see Tanya’s blog.

So I’ve found myself back in old territory – creating what I hope will be a high-quality, heavily-illustrated, printed book.

The highly-endangered Hawaiian gallinule: Courting in the reeds
(© Tanya Hill, 2009)

It has been a really enlightening experience to be able to compare the two processes – printed-page design, and Web page design.

To paraphrase Charles Dickens (From A Tale of Two Cities), as far as producing print is concerned, this is The Best of Times… The publishing tools available to the print designer are outstanding, highly-evolved, easy to learn and use. Many of the problems which used to beset print production in the past are long gone – for example, color matching, now taken care of by the systems themselves. Once set up, you can forget it.

When it comes to creating Web content, I believe this is still The Worst of Times. No-one has yet produced the right Web authoring tool, because the geeks – and not the “creative professionals” are in control. Oh, I know that’s a gross over-simplification. Many creative professionals have forced themselves to learn Web technology, and many geeks are also creative.

But the process of visual design and great typography on the Web is still far too hard.

After some thought, I picked Adobe’s InDesign publishing software to design, lay out and typeset the pages. In the past, I’ve mostly used Microsoft Publisher, since I worked at the company and it was installed as part of Microsoft Office.

However, this time I’m working with many large high-resolution scanned images, cropped and cleaned up in Adobe Photoshop. And I have to be sure that the color-matching is correct all the way through the process. Adobe Bridge allows you to synchronize color handling across all your Creative Suite applications. Hence InDesign seemed like the logical choice…

The scans are done by ArtScans in California, who have been doing terrific work for us for years, creating scans of Tanya’s artwork we use to produce high-quality prints for sale. The scan files come to us with an embedded ArtScans color profile, which Photoshop picks up and uses. Some of the scans are 530Mb or more in size.

The InDesign process is simple. Choose your page size, margins etc. Flow in the text. Choose typefaces and sizes for body text, headings etc. Place the pictures. Proof the results on an ink-jet printer. Create a package with all the files and send it to the printer. Of course there are lots of details to take of – but it’s all really straightforward.

Heading stack, drop capital, nice font! Oh, to be able to do this easily on the Web!

Key parts of the visual effect you create are the typefaces you choose, and of course there are tens of thousands from which to pick. I got creative and built a “heading stack” which uses three different sizes of the same typeface, creatively linespaced into a kind of “vertical kerning”.

What a delight the whole process is, compared with the brutality, crudeness and downright missing functionality of Web authoring.

Take the fonts, for instance. I picked Papyrus, because I felt it suited the artistic nature of the content. No problem. And because InDesign is a professional’s tool, it knows that I have no true bold or italic versions of this font on my system – so it won’t let me choose them, and thus won’t create horrible, computer-skewed or emboldened bastardized versions. (Italic text is NOT slanted Roman!)

I couldn’t use Papyrus on the Web – not unless I wanted to either limit myself to users running Internet Explorer and hence with Embedded OpenType support, or create my text as bitmaps – ugh!

Try to create the heading stack and be sure it will display correctly on any Web browser? Unless you create a bitmap, you couldn’t. And of course people viewing the bitmap on different-resolution displays would get different sizes. Using Zoom to scale it would look awful, and so on and on and on…

Publishing is a highly-creative process. Creative writing. Creative editing. Creative Design and layout. Creative Typography. At least print publishing is. Web publishing tries to be, but you keep running up against the limitations of the medium.

It won’t last forever. It will get better. Print’s had 550 years to evolve. The Web hasn’t even had two decades. But the sooner we solve the problem of fonts on the Web – and the sooner someone builds a great Web design tool for creative people who don’t want to learn to be software engineers, the better…

Let’s get a standard set of markup and CSS defined. Let’s have all browsers support it and display it in the same way. Let’s get adaptive layout in place so the content looks its best on whatever display it’s viewed.

It’s not rocket science. But until it’s done the Web won’t be a real publishing platform.

Red-footed booby (© Tanya Hill, 2009)

9 thoughts on “A Tale of Two Pages: It Was The Best Of Times, It Was The Worst Of Times…

  1. Roger

    First, there's the "font mangling" method described at IDPF.org that allows fonts to be embedded into ePubs.And second, several ePub-friendly ereaders have appeared, Bookworm and FBReader, which seem to place greater weight on reading and rendering issues.Do you think that ebooks — even ones on ereaders that share rendering engines with browsers, like Bookworm — will make more headway on this whole matter than the web in general?Thanks,Roger Sperbergfirstinitial nospace lastname gmailTwitter RogerSPress

  2. Bill Hill

    Yes, Roger, I do think eBook will make more headway on this. I am not so sure about the ones that share rendering engines with browsers.There's such poor predictability about what different rendering engines in different browsers will do that you can't depend on them as a publishing platform, unless you're prepared to relinquish control in ways that will give at least a proportion of your readers a sub-standard experience.This is a very timely comment, since I've experimenting over the past couple of days with an illustrated book (the one I talked about in this post) and trying to turn out an HTML version.Looking at the results of this on different browsers was what crystallized this opinion.I hope to add a post about this, with screen shots, perhaps later today.

  3. Roger

    Bill Jansson has some interesting observations about Webkit and Gecko I will try to get to you.From what I gather, you ought to be interested in what you'll find when you compare Safari on Mac with Safari on Win.And when you do, I'd be very interested to see your conclusions.Thanks,Rogerfirstinitial nospace lastname gmailTwitter: RogerSPress

  4. Bill Hill

    Me, too. Not suitable for everything, but perfect in the right place.Ironic that Vincent Connare, who made the "Papyrus spanking" poster, is the guy who created – Comic Sans…

  5. kaolin fire

    A friend pointed me here–I had to jump in with some Papyrus snobbery myself (but yes, it has its place–and I love the poster).for web, sifr is the general answer for getting the font you want in the place you want–for folks that want them (i.e. don't have flash disabled).http://www.wakeuplater.com/website-building/use-your-own-fonts-a-simple-sifr-guide.aspxOne thing to be said about the web, though, is it's going for interoperability and varied presentation; so you can't be too married to pixel-perfection. But giving a touch of lee-way it's generally not too hard to get things near-identical across an 'expected' set of conditions–the hard part is graceful degradation.Most of us "geeks" would love for there to be better tools in place to whip something up, but it's not an easy problem (and I mean that as an extreme understatement).


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