Web Design Foundations

by Guest Writer

PREFACE: I ran across this article while cleaning out some of the archive directories at Graphic-Design.com -- and it immediately caught my attention. So much of the insight and wisdom herein is still very true today. So, I decided to drop it into today's website template. Joe Gillespie sent me this article in 1996, shortly after launching his 'Web Design' web site. It was the early years of the internet's graphical interface, and Joe was one of us who would see where it was all going. As always, I look forward to your comments!

Joe Gillespie thus wrote:

OK, SO ANY KID CAN PRODUCE A WEB PAGE. You know how quick they are at picking things up. I have a friend with a 12 year old daughter who is already making a lot of money from producing web sites for local organisations and small businesses. Obviously the girl is delighted with the extra pocket money and her father glows with pride. The pages she produces are amazing considering her age and technically faultless.

But there is something missing!

It is testimony to the accessibility of web page technology that anyone with a reasonable computer and text editor can write HTML after a few hours, and they do, by the millions. And it is wonderful that they can do so. But there is a lot more to creating web pages that the ability to write HTML.

The key to the whole thing is effective communication, and that is a skill not found in abundance on the Web. A good communicator has to not only formulate the message in the first place, but to deliver it in a comprehensible manner and be confident that the audience will understand it. It is a matter of knowing what to say, what not to say, and knowing how to say it.

Apart from the common mistake of over-dressing web pages visually with 'kewl' animated GIFs and other web page cliche razzamatazz, the elements that perpetrators believe are making their pages appealing are having exactly the opposite effect. Apart from being distracting and camouflaging any message they might have, they are wasting bandwidth, causing pages to load and display slower and generally leaving the viewer with a disposition of 'won't go back there again'.

The difference between a page produced by a programmer and a graphic designer will be marked. The programmer will be happy to have produced a page that is technically correct and the designer will be happy to have one that looks good. But it takes both skills to produce an effective web page - just as it takes an engineer and a stylist to produce a successful car or a builder and an architect to create a stunning building that works.

Programmers prefer to work from the ground up in a text based HTML editor crafting every line of code for functionality and efficiency. Designers will often prefer to work with a WYSIWYG web page editor being more concerned with the layout and colours.

The programmer will often make visual statements that could be considered trite and push the envelope of technology with the latest plug-ins in an attempt to impress. The designer, on the other hand, may use huge graphic files trying to emulate a DTP page design.

In trying hard to be right, in their terms, they are both being wrong!

So what are the rights and wrongs of web page design?
      Is there even such a concept?

Most importantly, it is wrong to expect that what you seen on your computer screen is what your audience are going to see. Computers, monitors and web browsers come in many flavours.

Computers can be divided into three main types, Windows PCs, Macintosh and UNIX boxes. There are many subdivisions within each of these three categories, but we will ignore the more subtle points for the minute.

PCs vary enormously in terms of processing power and display capabilities, they are, after all, business machines generally used for manipulating text and figures. A typical modern PC will be running in 256 colour mode on a 14 inch screen with a resolution of 800 x 600 pixels - SVGA. More highly specified models might have 17" screens running with more colours but the accuracy or consistency of these colours is generally of secondary importance to cost for the type of work expected of them.

Except for specialist graphics workstations, UNIX machines will not have elaborate display capabilities. They are high powered number-crunchers and will often have less sophisticated graphics than an ordinary PC.

The Apple Macintosh is the computer most favoured in the graphics industry and generally has a higher specification for display accuracy, and in particular, a consistency from screen to print. Since the first colour Macs appeared in the mid eighties, they have had something called gamma compensation built in to their video circuitry. This has the effect of lightening mid-tones so that what you seen on the screen approximates the output you get from lithographic printing. The Mac has a default gamma factor of 1.8. Other graphics computers like Silicon Graphics machines have a similar gamma compensation factor.

The monitors typically used on PCs have no such gamma correction and mid tones appear relatively darker. PC monitors have evolved from television tube technology, but in the television industry, the gamma compensation is introduced at the broadcast end and has a value of 2.2.

The uncorrected gamma on a PC has more ramifications that just mid-tone values. Each of the three guns in a cathode ray tube has its own gamma curve and ideally they should all track one another other. Unfortunately, the lack of gamma correction means that colours shift dramatically for values of red, green and blue that are not close to zero or 255. A dark blue colour on one PC monitor might well be seen as purple, maroon or black on others

In recognition of the considerable differences of images displayed on various computer types, the World Wide Web Consortium (W3C) have recommended a gamma of 2.2 for web page production. A graphics file created to this specification will appear slightly light on a Macintosh or SGI computer and slightly dark or a PC - a reasonable compromise.

Ideally, a web page designer should have a variety of computer types at his or her disposal to check that images are satisfactory across all platforms. The Mac has the ability to toggle between corrected and uncorrected gamma through the 'Monitors' control panel. PCs don't generally have any way of doing this although PC designers who use Adobe Photoshop do have a gamma compensation facility within the Monitor Setup menu. This only effects images within the Photoshop environment and not globally as it does on the Mac. Using it does ensure a better viewing experience all round.

The other major issue between Macs and PCs, is in the screen resolution. Macs have traditionally had a screen resolution of 72 pixels per inch (PPI) - a pixel being the same size as a typographical point. So a 12 point typeface on a Mac screen is the same as a 12 point character printed on a page - this is true WYSIWYG.

Windows uses a 'logical inch' which is, in reality, one and a third inches giving an equivalent to 96 pixels per inch. The result is that 12 point type on the Mac screen is roughly equivalent in size to 9 point type on a PC monitor.

Because type sizes on web pages are not specified in point sizes, but with plus or minus factors away from 'normal', this is not an issue. What it does mean to the web page designer is that s/he cannot depend on the size of text being used by the reader, it can vary considerably. Windows has an further option for 'Large Fonts' or 'Small Fonts' that makes the interface more readable at differing screen resolutions and further complicates the issue.

So, on a web page, the graphics are a fixed size, but the text can grow or shrink depending on the reader's set-up. Large text takes up more room and will flow differently from smaller sizes so the page has to be designed with a certain elasticity allowance. It is therefore very wrong to try to produce a 'hard' design as you would do on a printed page. Rather than let the text and pictures find arbitrary positions on the screen, tables can be used as containers that keep graphics and text in the correct relative positions regardless of the reader's text size settings.

It is imperative that the person creating a web page understands the concept of a 'soft' layout and the plethora of different viewing environments likely to be encountered. A web page, just like an oil painting, a wood engraving or television title sequence, is a medium that has it's own unique characteristics and has to be treated sympathetically.

Joe Gillespie
      Pixel Productions Multimedia Design, London UK
      ©1997 Joe Gillespie

Joe Gillespie's site, Web Page Design for Designers covers many of the issues involved in crafting a web page, but from a design perspective, HTML or programming is hardly mentioned. He had originally intended it to be a tutorial to help 'print' designers adapt to the new medium with explanations of the difference of designing for a 'soft' screen and a 'hard' page. It has now grown far beyond that and contains a wealth of information, resources and links that will be invaluable to anyone involved in the creation of web pages.

www.wpdfd.com - In 1996, Joe launched Web Page Design for Designers, which is now the premier resource for Web designers on the Web, with top Google ranking.
www.minifonts.com - MiniFonts.com was formed in 2001 to produce and market 'pixel' fonts for Web and interface designers – including his now ubiquitous Mini 7 font.
www.joegillespie.co.uk - cool links from Joe's site

thanks for reading

Fred Showker

Don't forget ... we encourage you to share your discoveries with other readers. Just send and email, contribute your own article, join the Design Cafe forums, or follow DTG on Facebook!

27th Anniversary for DTG Magazine


On August 9th, custom writing paper said:

I recommend using book since the book really gives you a solid understanding not only in XHTML necessary to build a website, but the steps to designing and structuring the layout as well. Really excellent.

On August 11th, Printing Samples said:

An excellent piece of learning to ponder on especially for graphic designers. It is basically the detailed information on the web design foundation an aspiring and professional designer must know to be effective in their field. Thanks for sharing!