Factor-X

by Joe Gillespie — Aug 1, 2003

by Joe Gillespie

Factor-X

Like myself, many designers who have been working with print for years have turned their attention to the Web. It's not so much that print has died, there is just as much of it as ever, but the Web is seen as a new direction and a fresh challenge.

Well, truth be told, it usually goes more like this:-

Client: "Can you do me a Web site?"

Designer: "Yes, of course!"

Then they get Quark XPress to repurpose an existing design as a Web site or delve into Photoshop and slice a scanned-in brochure into a mosaic of GIFs and JPEGs.

It's not surprising really. Designers have picked up a lot of skills along the way and don't feel that they need to start from scratch. Fundamental design and typographic skills are useful no matter what you do but, in the end, you have to work with the medium not against it. Even in print design, the constraints of designing for litho and flexography are worlds apart. If the designer isn't aware of the differences, they can make very costly and embarrassing mistakes.

Had I gone straight from print design into Web design, I would probably have fallen into the trap. Luckily, I didn't. I went from print design into multimedia design (television and CD-ROM) and discovered the problems and constraints associated with designing for low resolution and the unpredictability of other's output devices.

When the "Can you do me a Web site?" question eventually came, I was already well versed in screen-based interactive media. The possibilities for Web design were very limited in 1994 anyway.

The first major realisation that hits a print designer when moving to the Web is that page sizes are not fixed. A print design stays in its originally designed size and proportion forever. Web pages are not only variable in size but just about everything else on them can change depending on the viewer's operating system, display device and browser. The layout will change, the type font and size might change and even the colours won't necessarily be the same.

There are two things you can do in this situation:

  1. Try to nail everything down so that it becomes rigid and static and let the scrollbars take up the slack.
  2. Create flexible designs that flow with the page.

In Chinese philosophy there is a saying, "The tree that sways with the wind never breaks." That is also good advice for a Web designer. If you try to make a page totally fixed in size and proportion, it will break – more likely sooner than later.

How it all started

Let's take a step back from all this and look at what a Web page is all about. When HTML was first introduced, it didn't just appear out of the blue. It was a simplification and distillation of a more broadly based markup language called SGML (Standard Generalized Markup Language) that predates the Internet as we know it. Its purpose was to set standards for documents passed around in government and academic circles. These manuscripts could get very long and complicated and if everybody just did their own thing, made it very difficult to separate content from waffle.

Anyway, HTML took the basic principles of SGML, reduced the number of structural tags and allowed documents to be authored for online delivery with relative ease. More crucially, it added the concept of hypertext linking – which isn't quite so easy with paper documents.

So, HTML was about textural 'documents' – it still is and it's all very basic. A 'document' produced on an ordinary, old-fashioned typewriter is every bit as valid as one done in a modern word processor. The differences are merely cosmetic.

With HTML, you get a few sizes of headlines representing different degrees of emphasis, a few ways to do indents and bullet points, a mechanism for displaying tables of data – oh yes, you can add a few pictures if you really must! That's about it.

Early Web documents defaulted to black text on a pale grey page. Black on white is too harsh on a screen. As the Web (and HTML) evolved, people wanted a bit more. The dull documents were 'prettied-up' to make them more palatable to a more general audience. Again the differences were cosmetic.

Eventually, someone said, "Hey, wouldn't it be cool if some text could blink on and off like a neon sign? That would really grab attention!" and blinking text we got – in Netscape anyway!

Those three little words, "In Netscape anyway", are painfully significant because they introduce the concept that all things are not equal. The guys at Microsoft had their own ideas of what would be 'cool' and the two main browsers forked-off in their own separate directions. Then the problems really began!

If we return to the concept of 'documents' we find that, apart from a few high profile company reports, 'documents' are not generally 'graphic designed'. It is enough that they are logically presented, make good use of language and are neat and easy to read.

Some examples of 'documents':-

  • Extended letters
  • Reports
  • Theses
  • Transcripts
  • Scientific papers

It doesn't really matter what size or colour of paper they are on as long as they are practical.

These are NOT 'documents' and usually do involve graphic design:-

  • Magazines and newspapers
  • Brochures and catalogs
  • Advertisements and posters
  • Packaging

The crucial difference here is that a 'document' has no value other than its content. The items in the 'NOT documents' list do. A newspaper or magazine has content, yes, but it's in competition with other periodicals and the presentation makes a significant difference to how many people buy it. Brochure and catalogs have content but they also have to help sell the products within. For the sake of argument, let's distil all these above-and-beyond-content values into an essence called 'Factor-X'.

Like the air we breathe, this Factor-X is not always immediately apparent, yet it is most definitely there. Some people are not aware of it at all. The same people think that clothes are to keep them warm and decent and are oblivious to the fact that others will make conscious (or unconscious) judgements about them based upon what they wear. They don't know that some colours just don't go together and that fashion statements have to be made in the correct context.

Factor-X is something that is added to pure information by designers and marketing people. Sometimes it is obvious, but it's probably better that it isn't. 'Hard sell' usually provokes stubborn resistance but the preferable, more subtle approach requires a more skilled communicator. Almost anybody can decorate or embellish a page but that's not at all the same as incorporating 'Factor-X'!

The BIG problem

The underlying concept of HTML-based Web pages fails to recognise that the document-centric approach is not always appropriate to the way the Web is used today. Admittedly, the use of CSS can improve layout possibilities considerably and the move to following unambiguous Web standard rather than accommodating a plethora of browser quirks helps to level the playing field. If you are producing 'documents' (with or without cosmetics), you will be quite happy. CSS will more than meet your needs.

On the other hand, if you are trying to introduce this Factor-X, which the document producers don't have to worry about, you can become extremely frustrated by the lack of facilities in CSS and indeed, the difficult of implementing the ones provided.

A simple example; if you put a h2 heading above a block of text and the integral line spacing varies a little, it doesn't matter too much. Try to put a h2 heading beside a column of text and you will find it nigh impossible to get the type to align along the top – in more than one browser anyway. That's why I don't use HTML headings for this layout, as the purists would prefer. I can get the sub headings and text blocks to align perfectly, using CSS, but this page doesn't conform to the ideal of a 'document'. The page validates just fine, I've done nothing 'illegal' from that point of view but this page won't work on cellphones, PDAs or Web-enabled microwave ovens. I have not totally separated content and presentation because the presentation (with its Factor-X) takes precedence over the remote chance that someone wants to read it on a mobile device. For other Web sites, this situation could be completely different. Some will work as documents, some won't. What is important is that they work for the intended audience.

The moral of this story is that you shouldn't take print designs and try to impose them upon the Web; it's just not going to work.

Neither do you have to conform totally to this strangulating 'document' paradigm. You have a set of tools and a palette of techniques. There are rules, but should you wish to bend them creatively, as opposed to break them completely, go ahead. Sure the purists will moan – but then they don't care about Factor-X.

Ignorance is bliss!

Next month we will look at how HTML has gone as far as it can go and why you should be investigating XHTML!

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float