Resolution

by Joe Gillespie — Sep 1, 1999

You will appreciate how in print, the resolution of an image is related to the quality of the paper. For newsprint you will use coarse (80 LPI) screens and for high quality litho or gravure, fine (180 LPI) screens. Type is rendered at something like 2400 dots per inch on an imagesetter.

On any computer screen, there is only one resolution for images and type alike - 72 pixels per inch. The size of the pixels may vary slightly from one monitor to another and even the size of the inches, but the 72 PPI resolution of a Web page represents the borderline between having visible individual pixels on the screen and their blending into one another to form a smooth image. This too comes down to simple economics and cost effectiveness. Designing for low resolution requires more than a little effort on the part of the designer.

WYSIWYG

What-You-See-Is-What-You Get may be appropriate to print design, and to a large extent to television or cinema design, but it is a fallacy in Web design terms. Any competent print designer will know, with a reasonable amount of certainty, how a particular piece of artwork will look when printed.

Predicting the final look of a Web page is much more difficult considering the plethora of different browsers, computer platforms and monitors. The best that can be expected is that it will be somewhere between 'this' and 'that'. I won't attempt to qualify what 'this' and 'that' means, suffice it to say that they are two brackets between which is an area of acceptability.

Most problems arise when the designer's set of brackets don't match the readers'. Being able to identify your readers and their browsing situations helps considerably in this bracket matching.

Static/Dynamic

When you design a print page, all the elements stay put. Except under the most disastrous circumstances, the positioning and relationship between images and type is constant.

On a Web page, it changes from one reader's machine to the next beyond your control. The only way round this is to make an image of the whole page, which is not unheard of, but is a very poor solution in terms of bandwidth and loading time - not to mention the fact that the text cannot be indexed or searched.

Interactivity

This is something of little concern to most print designers. The nearest they will get to this concept is a Table of Contents or bibliographical reference yet navigation is an art in itself.

There are two concepts here, linear - as in a novel or movie - and random access - as in an encyclopaedia or interactive CD-ROM. Simple linear or random access is not too much of a challenge but as a site becomes more complex, navigation can become a nightmare.

This WPDFD site started out as completely random access driven from the home page menu. Then people wrote to me saying that they were reading the site from cover to cover in a linear manner, so I had to add a 'Next' button to each page as well as a 'Menu' button and a Table of Contents and a Search engine.

To finish off, here is a short and incomplete list of things that can't be done in print and Web design.

Some things you can't do in print:

Hypertext Linking

Undoubtedly the main advantage of a Web page over conventional print.

Animation

Used sensibly, animation can give added functionality and interest to a Web page.

Scripting

You can add a degree of intelligence behind a Web page that is impossible in static print. JavaScript is understood by most browsers now but many graphic designers won't want to dabble in what seems to be a programmer's job - but they should understand the possibilities if not the finer details.

Interactivity

Click here, something happens. It could be the submission of a form, a jump to another related site, the purchase of a case of wine - another reason why the Web is gaining such momentum over traditional print.

Some things you can't do on Web pages:

Precision layouts

As mentioned above, that's not what Web design is about. Learn to design flexibly for the medium.

Small type

Small type (below 9 point) doesn't work on a Web page, but then there are no paper size restrictions, you have all the space you want so it's not a problem. If you want to make a section of type less important, use color.

Large pictures

Double page spreads with bled-off halftones are not part of the Web design vocabulary. Small images properly optimised for the Web are the way to go.

Metallic inks and spot varnishes

If you want to add luxury elements to a Web page, you will have to find another way. White space is cheap in any color.

Overlapping elements

If you see text overlapping an image on a Web page, it is probably unintentional. There is no reliable way to overlap text over images that will work in all browsers. DHTML and Cascading Style sheets allow the use of layers, but only work in version 4 browsers and above, and not consistently even at that.

Scratch and Sniff

One print technology that is unlikely to appear on the Web for some time. There is a fortune to be made for anyone who can produce such a plug-in!

Adobe GoLive 4

Adobe GoLive was originally launched as GoLive CyberStudio by a German software company and was bought by Adobe to boost their presence in the Web design arena. Adobe's PageMill was one of the first WYSIWYG Web page editors but has been left behind by newer and more sophisticated editors.

The original GoLive CyberStudio for Macintosh was a very elegant piece of software and had many rave reviews. Its drag and drop iconic approach was simple and the HTML it generated was much cleaner than PageMill's. For me, the one thing that let it down was speed. In flipping between layout, HTML and preview modes, it would take several seconds to redraw the screen, something than my old Claris HomePage would do instantaneously.

So now, Adobe have adopted GoLive adding many new features - and a Windows version. Pitched squarely against Macromedia's DreamWeaver. GoLive shares many leading edge features including DHTML, Cascading Style Sheets, site management and FTPing. On the face of it, it's pretty much a case of swings and roundabouts with GoLive winning out in some areas, like QuickTime support, and DreamWeaver winning in others - most notably Flash and ShockWave support. There is no obvious 'best' and one package will suit certain users more than the other.

Although the end results are much the same, GoLive employs a different methodology from DreamWeaver. On first impressions, I found DreamWeaver to be more intuitive than GoLive - I could figure out how to use it without opening the manual. The GoLive manual is very good, and nearly twice as thick as the DreamWeaver one - but you definitely need it as many operations are not at all obvious.

GoLive uses multi-tabbed palettes of icons many of which are cryptic and were it not for the 'tool tips' or quick reference card, would be indecipherable. Rather than use an 'Insert' menu like other programs, these icons have to be dragged onto the page and then highlighted so that their properties can be edited with an inspector palette. I just wish there was an option to have just the words instead of the icons, it would be more immediate and would take up less desk space. As it is, the icons need textual description anyway so they are essentially redundant.

Another problem is I have is with the colour palettes. There are eight different ones offering RGB, CYMK, Mac/Windows Palette, Web Safe palette etc. but none of them are as good as the standard Apple colour pickers on the Mac. Windows users might not be familiar with a standard 'system level' color picker but the Apple RGB color picker can optionally click to Web safe colours, Adobe's sliders can't even be dragged to a Web safe colour easily as they work in tenths of a percent with the vital values missing, they need to be typed-in manually.

GoLive can generate the code for rollovers and such by just choosing the over, out and click states of the button. If you don't need to tweak the code, this is fine, but those who do might find the code generated difficult to follow as it is poorly formatted and there is a lot of it.

I'm still not happy about the speed. It has improved over the original CyberStudio, or maybe it's just that I have a faster machine now, but switching between 'source' and 'layout' still brings up a couple of seconds of the watch cursor. I can't think of any other program that I use where waiting is so obvious.

On the positive side, GoLive's HTML presentation is excellent with nicely indented and color coded lines of source code. The syntax checking is done on a browser's capability basis rather than by strict HTML specifications, which makes more sense considering the lack of adherence to standards by Netscape and Explorer. Coding incompatibilities in both browsers from versions 2 to 4 are pointed out.

The object inspector palettes are well laid-out and 'snap' to the edge of the screen making it easier to work within a restricted monitor space. Like many multi-palette programs today, a dual monitor set-up definitely helps to alleviate screen clutter.

Given a bit more time, I could grow to like GoLive. Niggles aside, it has that Adobe 'quality' feel to it and must surely tie with DreamWeaver for the top Web page editor award.

Adobe GoLive 4
Features red bar95%
Ease of Use yellow bar85%
Value for Money green bar90%
'Must Have' Factor blue bar95%
Manufacturer Adobe
Price $299 for Windows or Mac. Upgrades $99.
Summary Top notch Web page editor.
Del.icio.us Digg Technorati Blinklist Furl reddit Design Float