THE ULTIMATE STYLE GUIDE

Legend
This document makes use of the following abbreviations:
MS = Microsoft
IE = Internet Explorer
NN = Netscape Navigator
NC = Netscape Communicator
So, MS IE4 would mean Microsoft Internet Explorer version 4.

You might think that any style guide is just a highly opinionated pile of rubbish, you might think that any guide which tries to teach you how to have "a style" will leave less room for your own artistic expression. This guide is different. It tells you what is considered good and what is considered bad, for sure, but it also tells you why. So when you read the reason for any rule, you can agree with or reject any rule.

On the other hand you might be a person, who believes in everything s/he reads. I hope you won't fall into this particular category, or we will end up with 1,000,000 pages that look exactly like templates from Microsoft FrontPage. Just remember that all you need to design pages are simple facts. When you acquire all the info you need you should be able to make a decision yourself, without a need to be told by uncle Bob what to do.

Now, this particular guide is not sorted in any way, I just talk about aspects of style and so you are recommended to read the guide from top to bottom. Many things will strike you as being too obvious to be worth of mentioning, but remember that people think in peculiar ways and some of us find rather complex issues [in my opinion] to be elementary. Oh, I've been keeping you for too long, so let's move on to the point.

Graphics
There are many style guides available which tell you not to use any graphics at all. They say that there are many people out there who don't have a graphical browser and hence won't be able to surf your pages. However, they do not mention that if you create a page which can be viewed by any user and any browser there is, you will end up with a page that looks like a... text file.

So, I highly recommend you to USE graphics. It is standard, don't worry about all these imaginary people, the only people left who don't have a graphical browser all live in a small Siberian town and they don't even have Internet anyway. If you are worried, or the nature of your information demands you to provide a page everyone can access, then create separate versions of your web-site - one with graphics and another, text-only.

If use of graphics doesn't seem to be such a controversial issue, the amount of graphics definitely is. Yes, a stunning majority of people have SVGA True Color video cards, but a whole lot of people still surf the Net using their 9600 modems. And if that is not enough, ISPs (Internet Service Providers) are not that reliable and often Internet connections crawl down to speeds of 2400 bods (quarter of a kilobyte per second).

So my first strong advise would be - do not use graphics for graphics sake. Just a day ago I was in a situation when I had to spend 10 minutes loading an index page of a web-site, which was just a big (85k) mapped image. Yes, my network was behaving weird, and usually it takes me much less time to load an 85k image, but still, it is a very off-putting experience, because I could not navigate through the site without loading the image. And this is bad. You don't want to put people off right from the start, there will still be time to do it later.

I want to spend some time describing the process of web design. First, you must have all the data ready, so you can think about presenting it. Never start designing without knowing all the data. Yes, I've fallen into the trap several times myself, starting designing a page with only a vague idea of what the page will be about. Later on I found myself rewriting half of the code, drawing new graphics and scraping old. So, it is very, very sensible to have all the data available first. This way your design will speed up considerably.

Second, think of a structure. Now that you have all the data ready, it shouldn't be difficult. It will just break into sections and sub-sections naturally. When thinking of a structure it is helpful to think in HTML and JavaScript, so that you can be sure that the structure you made up can actually be displayed using the current technology.

Third, think of presentation. Elements of the structure are already in your head, so now you only have to add visuals, and if you are a designer, the visuals are already in your head. You can draw the visuals on paper (I prefer this way, because you can make adjustments quicker and I feel more comfortable with a pen than with a mouse when I want to express my thought quickly) or you can design straight on a computer.

Couple of words on design stage. First of all, think of a resolution you want your page to have. Vertical scrolling (up/down) is not a problem, but horizontal scrolling can be a real nuisance. It is reasonable to expect people to have a resolution of 640x480 or more, but you must remember that a browser takes away a part of the physical screen (it has to display navigation bars, scrolling bars, etc.) so what is left from a 640x480 screen is a logical space of 600x320 or so. You must remember that by default browsers like Netscape Navigator and MS Internet Explorer display many toolbars (which are quite useful and hence are almost always switched on) that take up almost half a screen. So if you want to display a navigation menu that can be viewed by user without the need to scroll, you should aim at 600x320 or even less.

My method is to create an image file which is exactly the size of my imaginary page, for example 600x320 and then to design the page, using any graphical effects I want. When I finish designing and I like what I've done, I try to divide the page into as many small images as I can. I also create an image for a background if needed and then I save images with medium or high compression ratio (for .jpg).

Technicalities of Graphics
A few words should be said about image compression. As you know there are basically two formats that browsers recognise uniformly - GIF and JPG. First was created a long time ago to exchange graphical information between BBS users (well, if you don't know what a BBS is... it is like a very, very low-scale version of Internet). When it was created 256 colour graphics (8bit graphics) was still considered extremely good. This left an impact on GIF format - today it is impossible to have colour depth of more than 8bit in a GIF file. However, because modems were so slow at the time, GIF files do not contain a raw image but rather a compressed version (LZW algorithm, if you have to know) of a graphical data. LZW compression does not lead to loss of quality, a compressed GIF file contains exactly the same picture as an uncompressed BMP or RAW file does.

You might wonder how it is possible to compress data and in order to make your GIF file as small as possible. Then you have to know how LZW works. Here is an example: suppose you have to compress the following string - "11111111110000". The program analyses the string and sees that there is a long sequence of the same digit (1). It marks the beginning of the sequence with a special symbol (say, "A") which means that a compressed data is to follow and then stores the number of re-occurrences of the symbol "1" (ten times) and the symbol itself. It repeats the process with re-occurrences of a sequence of "0"s. So the result will look like "A 10 1 4 0 A" which can be read as: compression starts, sequence of ten "1"s, sequence of four "0"s, compression ends. This might look complicated and possibly not important, but there is one issue that comes out of it.

If you understood how a compression works, you might've understood that this sort of compression is linear, it works at it's best when pixels are of the same colour horizontally, not vertically. So, if you want to create a GIF file that is as small as possible, you can work around with the file to make sure it is best suited for effective compression. It is not extremely important though, it's for control freaks.

Now, I don't want to lose you, but there is another less technical but still a major issue when dealing with GIF files. Some web designers recommend to use images that use no more than 8bit of colour depth (256 colours). A very popular topic among designers seems to be the "safe colours", or a standard NN palette of 212 colours that are the same for any computer running the NN. If you use colours any different from the "safe colours" palette, you put yourself into the hands of browser, which tries to do its best in displaying your picture using the palette it has.

It is quite a complex issue and chances are, NN and any other browsers would soon get rid of the problem (especially if a new Windows OS would have 16bit or 24bit colour depth as default), but what you definitely have to know is what the colours are and what a browser does if it encounters any strange colours. For more information on the "safe palette" read an article "Getting rid of dithering" in our prof design section.

So, how does a browser deal with an unknown colour? You should know already that most of the spectrum of visible light can be represented by three basic colours: Red, Green and Blue (hence term RGB). Different combinations of these colours result in the whole range of different colours. So you might think that there should be no problem in displaying a picture with an infinite colour depth. But the main problem lies in memory and speed problems. When you create a picture that uses 65,536 colours (16bit) each colour has to be indexed and stored somewhere in fast memory for quick access. If you remember the fact that there are usually 640x480 (=307,200) pixels on screen and each needs 2 bytes (16 bit, each byte is 8 bit) of memory this means that a 640x480x16bit images takes up 640kb of memory.

So, some video cards or monitors are simply not powerful enough to display images in the same colour depth as you've written them. I personally don't know too many people who run their operating system in 256 colours, but I've read just recently that there are many users who apparently don't know how/don't care to/simply can't switch to colour resolution of more than 8bit. If you think that some of your users might be running systems that can display no more than 256 colours, you get into a big problem, because a browser would try and display your 16.7 million colours images using only 212 colours (other 44 being reserved for OS purposes). So how does a browser do it?

Now, let's say for example, that a browser can display only two colours - black and white. And let's say that you have an image that is mostly grey. What browser does is called dithering, or colour diffusion. It tries displaying black and white in a sequence (apttern) so that a resulting image consists only of black and white colours but looks grey. This is exactly the same technology used by b&w laser printers to display graphics. Dithering works fine with photographic images, but it gets into all sort of weirdness when trying to display a solid colour.

Well, even if you didn't understand a word of what I said, I will try to summarize it all for you. If you create an image that has a colour depth of more than 8bit and if user runs a system that supports only 8bit colours (or indeed if you wish to save your image into a GIF file, which can have a maximum of 256 colours) there are two ways in which the number of colours can be reduced: 1) colour dithering, that uses complex patterns of available colours so that an image resembles original; 2) colour replacement, that simply replaces all similar colours (say tones of blue) with a base colour (say blue or light-blue). First method works well with digital pictures that have many colours and are very complex. Second works best with pictures that use small number of colours but these colours are such that they cannot be displayed exactly on a browser.

Browsers usually use dithering to display any images that have a higher colour resolution than can be displayed and there is no way to tell a browser not to use colour dithering. If you are conscious of the issue, it is best to reduce the number of colours on your own system, so that browser does not need to do anything to your original image. To make sure your picture will not need any modification from your browser, you should use the browser safe colours.

Now, lets return to image compression. But this time I want to tell you how JPG images are compressed. JPG was created especially to hold very high-quality digital graphics. However, because a high-quality digital photo would take something like half of your hard disk, JPG uses special image compression algorithm that is very similar to dithering. What it tries to do is to replace colours with similar ones, so that the whole image can be compressed more effectively. The result is stunning - you can reduce the size of your image drastically, with losing just a bit of quality (especially if your images are large). Play with the compression setting to see the difference.

There are many compression utilities which try and help you reduce the size of your image without losing quality. I was told that Adobe PhotoShop does not handle image compression too well and that there are much better programs to compress your .jpg or .gif files. You can go to www.shareware.com and search for "image compression" to see which shareware or freeware is available. Also if you work with Adobe PhotoShop, you should know that it stores a small thumbnail (preview) image in all .jpg files that "costs" you another 5-10k of disk space. You can switch it off in preferences (see manual or PhotoShop help on the subject).

Finally, remember that .gif files are better than .jpg if the image is very small or if you don't want .jpg compression (as I said before, this works well with big photographic images, but when images are small, or use only a small number of colours (e.g. cartoons) the .jpg compression dithers colours and instead of solid colours there will be patterns of colours).

Image sizes
As a general rule you should try not to have images larger than 7k, especially if images are functional, e.g. they contain image maps, are themselves buttons or give vital information. Also remember that sometimes simple text looks as cool and "stylish" as graphics. Clever designer is able to create a page that looks just like a big picture, incorporating graphics into text seamlessly, and loads ten times faster. Now, I believe that you are a clever designer, so play with this idea for a while to get hang of it and use it.

The last thing I have to say about graphics is colour resolution. It doesn't seem to be a big problem, most users have video cards powerful enough to display True Color 24-bit graphics. But what you have to remember, is that images grow in size proportionally as you use more and more colours (I don't want to get into details here, but index information for all the colours used has to be stored together with an image and each pixel needs an increasing number of bits to store colour data) so less colours means smaller size. Also, I think that you should probably aim at 16bit (High Colour) resolution, because there are many people who prefer to have a high screen resolution and are prepared to lose some of the colour depth.

Oh, I completely forgot about one more thing - progressive image loading. It was a hype a couple of years ago, because made the process of image loading "feel" faster. You probably know what it is, but if you don't - it's a method that lets an image to be loaded progressively, meaning that at first a very low-resolution version is loaded (so that you rarely can make any sense of the image at all) and as the data continues to flow, more and more detail is added, creating an effect of adjusting binoculars that finally get focused on an object. If you're interested in the subject, there are many shareware and commercial programs available that convert your images into progressive images, also some new versions of graphics packages let you create progressive images (e.g. Photoshop 4). I am not completely sure of the method used to store progressive images, so if you can enlighten me, please do so.

Links
Links are a big, big trap to any designer. Yes, the biggest advantage of HTML is the ability to create links, but this leads some designers [or site owners] to believe that to create a good page you don't need anything else. I've seen thousands of pages and most of them are nothing more than just a list of links to other pages, without anything more than "Hi! My name is John and this is my page" as an original information. Many web surfers get into deep depressions because of this and web psychiatrists prescribe many remedies and getting a lot of money because of this "Infinite Link Syndrome". Please help us all stop the disease and provide some worthy information on your page. Links should be merely used to provide extra information or for reference.

Oh, also try to keep your links up-to-date. It is most annoying to click on a link (yes, I know, I should not say "click" because that would be unfair for all those of you people who have no mouse, but alas, I just have to rely on your intelligence here) and find out the owner moved to another place a decade ago. Another thing to do is provide a good description of a site you link to. If someone accesses your page, chances are s/he is interested in your page, hence your opinions about other pages. So don't simply say "This page has some info on Greek political thought", give some more insight and don't be afraid of giving your honest opinion, you will be praised by surfers later on.

Browser specific
Another headache of every designer is marketing strategies of BIG GUYS. They seem so concerned with getting money, they forget about us, consumers. Now, I would give all my future earnings to someone who will actually put consumer first, but that's never going to happen. So we have to put up with all the extra-added-benefit-of-new-functions which are not anything more than a marketing gloss to get more users, because given the today's redistribution of force no designer would dare to produce a page that's incompatible with either MS IE or NN. That's a big no-no! If you do it, expect hate mail from the group you left out and praise from fans of the product you've chosen to support. So, never use any features that are not supported in both browsers. However, you can use the extra-added-benefit (here we go again) if it won't damage the way page looks on another browser.

Now, you may ask how on Earth do you find out the browser-specific features? Well, there are two answers, one is simple another is weird. If you want to find out about non-standard Netscape browser features, just go to www.netscape.com and search for a document, it should be quite straightforward. If, on the other hand, you are looking for non-standard features in Internet Explorer, I sincerely don't know. I've tried to dig up any info on microsoft.com web page, but to no aval. All I was able to see was "An extremely power, easy-to-use interface... good for both novice and expert... beats Netscape... blah-blah-we-are-the-best-and-we-don't-care-if-you-want-something". Do you sometimes get a feeling that the whole microsoft.com looks just like a never-ending commercial? Now, I must admit, I am even more afraid of their web site than of them. I might just be stupid and if someone points me to the information I need, I would be happy to display the URL here. Finally there are third-party documents you can try to get hold of, try searching the web for them. The one I use is called HTMLib and is basically a .hlp file that has a lot of information in it. The version I have is quite old, so it doesn't list any HTML4 additions or new IE4 or NN4(NC) features.

Navigation
I don't want to get too much into this one, but there are couple of rules worth mentioning. If your page contains frames, the "Back" button on some browsers would not work correctly. I don't know what these browsers are, because both MS IE and NN seem to be working perfectly ok, but it is still a good idea to have a navigation bar in one of your frames. You could actually create your own "Back" button, but I don't think it's that useful. The best way to have several stationary links on your navigation bar (e.g. sections like "Web Design", "Graphics", "Links") and possibly include "Next" and "Previous" buttons if needed.

It is also a good idea to show user where s/he is now. Usually it is done by displaying the header at the top of the page, but there are many different ways you can do this. There is one method that is getting more and more popular among designers:

Option1 >Option2< Option3 Option4

Looks
I am not going to say anything at all helpful in this section, apart from one advice which you would never need if you are any good at design. Think about the colours. I've seen dozens of pages that have the weirdest colour combinations. Red on yellow might strike you as an unusual combination, but you should try and think why does it seem unusual, maybe the reason is that it is impossible or difficult as hell to read a red text on yellow background.

If your page presents a user with lengthy text files, you should either use standard colours (black on white, maybe white on black) or let the browser display the page in a default colour combination (which seems to be black on white for most browsers). Also remember that not every monitor is the same as another. Saturation, luminosity and hue differs from monitor to monitor and monitors that are getting older usually cannot display light colours.

So, you might ask, how could you be sure your colour scheme looks ok on all the monitors? Well, the rule is to contrast the colour of text with the colour of background and not to use too many colours that make your page look like web on acid. The best way to check if your colour scheme is correct is to test your page on as many computers as you possibly can. Also try to play with your Brightness and Contrast controls and see whether text and images are still recognisable. A last resort is to ask users to send you an e-mail if they have difficulty in reading your page.

Jargon
I've seen several texts on the usage of jargon and other words and I cannot say I agree with them. I think you understand which words will be out of style on your page, which words are overused and so on. Some guides tell you not to use "click" (Personal Computer Political Correctness, no doubt) because some people don't have a mouse, but this is just nonsense. Then you should not use phrases like "press a key" because some of your users might have a touch pad and thus cannot press a key. Theses guides go on saying that "Here is..." or "cool" are also bad and overused and should be avoided. But hey, these guides assume that you have an intelligence of amoeba and do not even try to explain why.

Believe me, if you know the subject you write about and you can easily associate yourself with your users, you will have no problems in getting the language right. And you just might have to use words like "cool" and "hot" to attract the right public. The bigger problem, that is not dealt with in style guides, is a problem of high expectations. As you advance in your knowledge of, say, French Revolution, you start regarding many things as being too obvious and elementary to include them in your work, so you make a mistake of expecting more from a user than s/he might know.

It is better to assume a less-than-average knowledge level of your user, but not to insult the user by making her/him think that you hold her/him for an idiot. Avoiding jargon might be a good idea, but this makes a text very artificial and not true to reality, it is much better to use jargon but provide optional definitions for those who might not be accustomed to it. Dividing text into basic and complex areas can also be a good idea, so that beginners would not lose a feel of the whole text if they skip a paragraph or a chapter and more advanced users don't feel cheated.

It is also likely that there are many people who know more about the issue than you do. Chances are, if you've created a page on a topic, you would not be against improving your knowledge, so give a couple of hints throughout saying: "Yeah, I know I'm not God. I might be wrong here and there and if you want to comment or argue a point, feel free to do so". But do not overplay the "I'm not God" theme, because you have to show the beginners that you are confident in what you are saying.

Playing a Baddie
I've seen several pages that ask a user to say how good the page is, and if you choose something like zero, it insults you or sometimes starts a JavaScript bomb, which is a very stupid practice. If you ask for evaluation, you should be ready to face the consequences. If you think your page is the best thing on Earth after sexual intercourse, you might find it hard to accept that your page does not score. If you want an evaluation of your page, it is better to ask people to comment in their own words and not to ask them to give it a mark.

On a more general note, never offend your user. Yeah, I know it is very easy to offend someone these days if you try to be witty or even sincere, but at least do not offend people because of your ill-sized ego. And remember that making JavaScript bombs is actually illegal and you might get into all sorts of problems.

Oh, that page is so cool!
Well, you should be aiming at something like that. To make sure people remember your page it should be unique. The one and only. Yes, there are 1,000 pages that have information on Adobe Photoshop, but yours brings something new - your own plug-ins, insights and latest reviews. And as soon as user enters your page s/he should start feeling your uniqueness. Well, it's all very good to theorise, but it might be the most difficult part in designing your page. You might be so busy creating an interface, finding data and coding HTML, so that you will forget about it altogether.

Remember that we live in the age of images. Everybody from the president of the USA to your local supermarket work on their image. You have to do the same. Logos, catchy phrases (it seems that questions are the latest hype - "Where do you want to get, anyway?" is still not taken, I guess), recognisable style in graphical elements... the list goes on and on. Of course your image should not be taken completely off the wall.

Because this is such a complex issue (people study the subject at universities) I do not think I can help you any more than to recommend finding some books on design in your local library.

Conventions
You might have been wondering why I included a citation at the beginning of the guide. Well, wonder no more - this sections deals with traditions of web design. I think you won't be wrong in thinking that you do not need to be bond by any traditions, especially if you are a relative outsider to an Internet community (as I am). Traditions compete with your freedom of expression, but most of the time they are not without sense. I personally could not care less about the net etiquette or netiquette (DO NOT TYPE IN CAPS, IT'S LIKE SHOUTING). But most traditions have a strong reason behind them. It is good to know what traditions are, but as it is usual in the world of computers, traditions change almost daily. You simply have to hang out with the right people to get accustomed to their traditions. Reading computer magazines helps a lot as also subscribing to a mailing list for web designers or any Internet newsgroups.

So, I would not try to persuade you to abuse the convention, because such an abuse can bring a needed originality to your page [see previous section], but nevertheless it pays to be accustomed to traditions (even if only to know what to abuse). A good technique is not to use "emoticons" (e.g. ;) or 8-() ). If you use an emoticon (or even if you know what the word means) many people would think you are a computer geek who cannot express emotions in plain words.

On the other hand, if you do not use emoticons, some net residents, who regard their netiquette as being just short of The Bible, might think you are an outsider ("He does not use ;-). He must be new to the Net!") and won't take you seriously. But of course, the choice is yours. If you decide to accept netiquette, make sure you do not "overuse" it. If you want to use emoticons, go on, but do not use them too often. This will make you look like a wannabe and most people hate them.

Outro
Well, I guess that's all I wanted to say. As you see, this guide did not deal with any technicalities at all. I hope you did not waste your time reading it and I hope you don't think that if this part does not list any HTML code it is less useful than any other part of the webIGN. Any comments or additions are welcome (well, as you see, I use my own recommendations).

[ to profdesign | to main page ]

©1998 rd design. All Rights Reserved.