This section will introduce some aspects of web sites that will clear up the murky waters of creating attractive web pages for your homepage.

My Personal Web Space

Web Design for the uninitiated: Avoiding Common Pitfalls
I have seen many websites which though have good content, fail to impress people because of poor designing. This is more specifically true of personal websites, and small companies who do not want to spend much on the website. They are soon lost to oblivion of the web. Following are some generic tips that can help you improve your website.

You could also read the other two articles about the "Physiognomy of the website" and "Basic Color Theory" for more understanding of Basic Designing aspects.

HTML

  1. HTML stands for Hyper Text Markup Language
  2. An HTML file is a text file containing small markup tags
  3. The markup tags tell the Web browser how to display the page
  4. An HTML file must have an htm or html file extension
  5. An HTML file can be created using a simple text editor
  6. HTML tags are regulated by web standards.
  7. The Web standards are not made up by Netscape or Microsoft.
  8. The rule-making body of the Web is the W3C.
  9. W3C stands for the World Wide Web Consortium.
  10. W3C puts together specifications for Web standards.
  11. The most essential Web standards are HTML, CSS and XML.

Make sure you follow all the HTML standards. Sometimes it seems like the extra work is an exercise in redundancy, but remember that not everyone has the same browser as you do, and different browsers might interpret things differently...the more exactly you spell out the content, the better the browser will be able to display it. Some common HTML omissions are:

  1. <HTML>, <HEAD> and <TITLE> tags
  2. HEIGHT and WIDTH attributes for <IMG> tags
  3. ALT attributes with alternate text for <IMG> tags
  4. Ending tags for <HEAD>, <BODY>, <P>, and <CENTER> tags
  5. Proper codes for extended characters

There are also some technical reasons why you should try to be fully HTML-compliant, as some browsers are more efficient when the proper HTML code is used. As an example, newer releases of Mozilla and Microsoft browsers will insert placeholders for images if you have specified the HEIGHT and WIDTH tags (as the HTML standard specifies). This allows the browser to display the rest of the page even if the images have not fully loaded. Many people also browse without loading images (because of the faster download times)...this will allow you to reach those people as well.

You can also tidy up your HTML that you might have created using MS Word with HTML Tidy (this is the UI version TidyUI) you can get the latest version from tidy.sourceforge.net go to executable binaries, and follow the instructions on the page.

It will clean up your source code, it is pretty simple to use, open the html page [make sure the browser button is not depressed], and click on tidy, click the browser button to preview it. If you like what you see, click the browser button again and only then press the replace button and then hit save (looks like a small bug in that software hitting replace when the browser button is pressed does not work). You could conversely download a full web IDE tsWebEditor it has Tidy integrated in it, and since it is open source it is free. On a different note I use Dreamweaver, it is expensive software, and would not justify itself for you. [Note: I like Dreamweaver, and I know it has shortcomings, but they are not big enough that I cant work around it, I love it cause I can create templates and work on them as a base for my entire site, but the new 2004 version does help with designing with CSS, which I am trying for the next design of this site]

Now that bit of geek relief is out of the way. Lets start by saying you don’t just code web pages, you design them, and as such it becomes subjective, and not everyone is going to agree with you. I don’t want to say those who use them are wrong in doing so in their aspect. I just want to point out my views on them. Everything has its place, but try to use tools when they enhance what you're trying to get across, instead of just downloading things and throwing them in because they look neat.

Color: your worst enemy

Or your best friend; A friend of mine showed me his website the other day, and I made him change the whole color schema. He had light blue over dark blue that starts to feel as if it is vibrating; you need to remember that contrasting colors are easier to read. In fact there are studies that have shown that black on white is the best contrast for readability. Some colors are harder to read than others. And there is no way I would forgive yellow text on white background.

Another thing to note is that colors in your site should match each other; you wouldn’t put on a blue shirt with a red pant would you (not a good example but hey I am fashion challenged myself). The best sites are ones whose colors can complement each other and enhance the content, rather than overshadow it. [More about » basic color theory]

Try to avoid too many colors; it can tend to overshadow everything and take the focus away from your content. Well they also look garish - think of the suit David Arquette was wearing once on the tonight show.

Avoid clichés

Try to avoid things that have been done a million times before, they are passé. These might include:

  1. Page counters
  2. JavaScript text scrolling
  3. Excessive animated. GIF’s
  4. Under construction signs
  5. Page fade-ins, etc.

If your site gets a lot of traffic, a counter comes off as being egotistical, and if your site doesn't, well... Do you really want the whole world to see that?

JavaScript scrolling and page fading have been done so many times, that they serve nothing other than showing a lack of innovativeness. And to boot it all, they don’t really work in all the browsers out there. One can even turn JavaScript’s off in their browser. I never rely on JavaScript to render my layout.

As far as under construction signs go, they can be quite a turndown. In my exclusive sub-site section, I have to make changes in 4 additional pages/configuration files if I add one additional photo gallery to it, but it feels better than having to look at a under construction link. And isn't that the whole idea of the World Wide Web...that it is constantly changing and under construction?

If you see an image you like, try to make your own...if you see an interesting layout, try to use it as a reference. This way you'll have a fresh, original site instead of a page full of backgrounds, animations and JavaScript functions from an overused library...and your site will stand out from the rest.

Layouts and sections

On a piece of paper (or computer its really your choice really, I use Adobe Photoshop ™), create a basic layout for your web page into sections, and then follow it in all your web pages.

Your sections might include the title bar/image, the navigation menu, the content text and an optional side bar with content or links.

If you apply this and use it uniformly, it will bring a semblance to your web site, which will make browsing your website easy. Suppose you put the links once on right, and then on the left next. The person who browses through your website will constantly have to look for the navigation menu and will soon get irritated, in-lieu if you always have it in a certain place, they will know where to look for it and be comforted by the uniformity.

One easy way to do this is to create a template, a web page with all the sections mapped out and text pace holders for your content. Then take this template page and change only the stuff that is going to change from one page to another. This way your navigation section, your title section will all remain in the same area. I use a nifty utility in Dreamweaver, which helps me to maintain my stuff more easily, but before I had Dreamweaver, I used to create a template page and use it as a base to create my other pages.

Sections will also allow you to form your text into a clear and precise flow, which is easier to read than a chaotic flow created by the free flow of text on a web page.

Cluttering up your website should be avoided at all costs. Sections can help bring coherence to your site.

Anti-alias

Anti-aliasing is to smoothen the edges of the image by blurring the colors in the edge. Almost all graphic programs bundle anti-alias tools. This is significantly apparent in the text in the images, if you do not anti-alias the text, it will come out with jagged edges.

The reason for such pixilated images is that the computer displays images in pixels. So pixilation occurs when you reduce the number of color displayed in an image.

Images

There are different formats of images that you would come across on a website, the four most common of these are.

BMP: BitMaP

The image is stored in an uncompressed bit mapping; each pixel is stored with its color information, in a serial format. The files size is huge, and you should avoid using them.

GIF: Graphics Interchange Format

Format uses non-lossy compression, with a palette of 256 max colors. This can have a single color area set as transparent; the rest of the image can be matted [anti-aliased] with a color at the transparency border. [An image, matted black on a white background, will have a few black pixels to smoothen the edges]. This is most used, when the transparency of your image has to smoothly transfer from a certain color to transparent, it will use the matte color to do the same.

GIF is the only image Format at the moment that supports animation; it does so by displaying each individual image at set period of time interval. So an animated GIF is technically a collection of images bunched into one GIF image, each frame of the animation represented by one image of the collection. GIF can further reduce the size of the total image, by creating a base image or key frame, and only storing the pixels that are different from the current frame to the next in the next image frame. The more key frames in the GIF, the better the quality of the animation, and higher the file size.

JPEG: Joint Photographic Experts Group

As the name suggests, it is the best format to display photographs, as it can have millions of colors, and has a better compression ratio than the other formats. JPEG uses a lossy compression format though. Which means, re-editing a jpeg will result in reducing the quality of the image. JPEG does not support transparency.

PNG: Portable Network Graphics

PNG is a result of the inability of GIF to have large color variations, and JPEG to have transparency. PNG has a non-lossy compression format, with max colors in millions, it also supports alpha transparency, which for you means, an image which can have its transparency changing from a solid color to semi transparent to completely transparent. Sounds like a dream come true? The only problem with PNG is that it is not well supported by the current browsers [2004], and even the browsers that display PNG do not completely support its format, and the image does get displayed incorrectly, this is especially true for the colors and the transparency.

A dozen tips for handling images for your website.

  1. Lesser the number of colors, smaller the size of the file.
  2. For photo quality pictures save in JPEG format and save flat colored pictures in GIF format.
  3. 'Crop' & 'Resize' are two golden tools for the web developer.
  4. Always optimize your images before uploading them. This service is provided free of charge at: www.spinwave.com/crunchers.html, Adobe Photoshop lets you compare the optimized versions side by side.
  5. Always check the 'Interlace' option while saving your picture in GIF or PNG format. If this is not done, the picture will be displayed in the user's system only when it is fully downloaded. An interlaced graphic is displayed in bits & pieces as it is being loaded, giving the user an opportunity to see what is being downloaded.
  6. Check the 'Progressive' option while saving in JPEG format. This makes the JPEG picture display in the browser as it is being downloaded, from top to bottom.
  7. While saving your pictures to JPEG, first play with different compression settings to get the best standoff between quality & size.
  8. Never save your original pictures in JPEG format. JPEG uses lossy compression technique. Suppose if you have set the JPEG quality level to 90% in your paint application, & if you (for editing reasons) open save & close that picture 10 times, the total loss to picture quality will be high. Every time you would have lost 10% of your picture progressively. TIFF on the other hand saves it in an uncompressed format.
  9. When you are using GIF or PNG, check the graphic in different browsers. Some GIFs are not properly displayed in Netscape, while support for PNG is minimal in both the major browsers.
  10. If possible, try to confine the number of colors to the 216 web-safe palette.
  11. You can create your own custom palette & use it throughout you web site to bring about consistency among your pages.

Use thumbnails when you have to display many pictures. Put each of these thumbnails as a link, so that clicking on it loads the actual picture.

Final notes

Designs are subjective, no single person is going to agree 100% with you, don’t get bogged down by too many viewpoints. The saying holds true

“too many cooks spoil the broth”.

Remember, the colors, the layout design, the images used, and the text format, has to be intone with the content and intention of the website. A personal website has more freedom for design than a commercial website.

Everything has its place and there is a place for everything. A web page can be designed just as well as a nice brochure.

Squares are good, but curves are dynamic.

Images are good, but text is better.

Design is nothing, if the content is nothing.

Start with the content, and the design will follow.

IE is not the only browser.

The 56k modem is still the reigning king.

A organized website is a indication
of a organized organization.
A cluttered website on the other hand...