Web Layout & Design

INTERNET GRAPHICS AND WORLD WIDE WEB DESIGN

Please note: This document deals with graphical formats and as such is a reasonably technical account. Some knowledge of file types and computer represented colour is assumed.

Designing graphics for the Internet is an exciting and challenging process, the chance for your work to be viewed and appreciated by literally millions of people is an opportunity not easily disregarded. With this in mind it is important to produce a high standard of design and content to maximize your scope for success. A great WWW site requires more than design skills, HIML coding ability and artistic expertise, it requires a working knowledge of image file fommats and the way colour is presented on the Web. This article attempts to answer some basic questions relating to Internet imaging, which file types are most suitable and how to create good looking fast loading graphics. In the course of this we will touch on the basic principles of design and layout.

Why do some graphics download quickly while others seem to take forever? How can an image that is large on-screen download faster than a relatively small one? The answer is file size. On-screen size has very little to do with file size and so an image which takes up a lot of the screen can very often load faster than a comparatively small one. To appreciate why this is so, you need some understanding of the compression techniques used. The two main graphic file formats used on the Web, GIF and JPEG both treat picture compression in different ways.

Remember, if you like an image that you come across on the World Wide Web and want to keep it or just want to discover its file type, simply right click on the image (in either Netscape Navigator or Intemet Explorer) and select "Save Image as." to save the image or read the "View Image." line that will tell you the file name of the image. Probably the best way to learn about image design is to look at those others have made. The same goes for HTML and Web page design.

THE GIF FILE FORMAT:

GIF (Graphic Image File Format) is for 8-bit (256 colour) images or less. It's file extension is .gif. It normally takes 24 bits of data to describe the colour of each pixel on the screen. Eight bits each for Red, Green and Blue. This can give each of these colours a brightness level between 0 and 255 and by mixing them 16,777,216 colours are possible. Any computer monitor is capable of displaying all these colours, however many computers can not accommodate them as they do not possess a high enough amount of dedicated memory. Every addressable pixel on the screen has to have a corresponding bit' in memory with a value of 0 or 1 indicating that it is off or lit hence the need for increased video memory' when displaying higher colour depths.

If the only graphics you want to produce are fairly simple and contain mostly flat areas of constant colour such as charts and diagrams then 16 colours are enough. 16 colours only require four bits of computer video memory per pixel and as such utilize few resources. More common these days are 8-bit per pixel systems where each individual screen pixel can have values from 0 to 255. By mapping these values to a look-up table of ROM values each requiring 24 bits, it is possible to choose a palette of 256 colours from the total 16,777,216.

Under normal circumstances an 8-bit screen graphic will be represented by a long sequence of numbers between 0 and 255. If you were to examine this sequence of numbers, you might well discover that there are many occasions where the same number is repeated consecutively. This is called a Run. An image with areas of flat colour like a plain black or white will have long Runs of 0's or 255's. Rather than storing hundreds of 0's it is more efficient to simply state the number of times the number is repeated, in effect, the next 144 pixels have a value of 0. This has the obvious advantage of taking up far less file size. This method of compression is called Run Length Encoding and it is the fundamental basis of GIF and many other file formats. This method makes GIF perfect for flat coloured graphics such as buttons, bars, bullets and the like. Any graphic with a flat colour area will compress well with this format.

THE JPEG FILE FORMAT:

The JPEG (Joint Photographic Experts Group) file format works with 24-bit images regardless of whether your monitor can display then correctly. It's file extension is jpeg or jpg. JPEG compresses the picture by intelligently removing information to reduce the file size. This process is called lossy' compression because you are losing picture information to simplify the image. You can choose how much information to throw away with JPEG compression, it is a trade off between quality and file size. With JPEG each image must be dealt with separately as each image will handle a different amount of compression without apparent degradation.

It is possible to produce smaller file sizes with JPEG than with GIF if you are prepared to accept the picture quality loss. As a rule it is better to use the JPEG file format with photographic images.

Just to confuse matters there are two sub-types of GIF and JPEG. They are Interlaced GIF and progressive JPEG. These extensions of the GIF and JPEG file types will be discussed in later editions of Werple World. Suffice to say that they are major advances in Web graphics and are something that all Web artists should be aware of.

CROSS PLATFORM PALETTES:

Another area that Web artists must be aware of is colour palettes. Most people assume that both Windows and Mac systems use the same palette, this is not the case. Windows reserves' the whole 16 VGA colours plus another 4 SVGA ones while the MAC palette has two colours that are fixed and can't be changed - black and white. The reasons for reserving or fixing these colours is that both operating systems need to be able to control the way that interface elements are presented and so they use special colours to make sure that the interface is always readable.

In regards to the different pallets of the two systems, the main thing to remember when designing graphics for the Web is that you should use a common palette. This is a palette that contains only the 216 shared colours of the MAC and PC. If you would like to get this palette, it is available, along with more in-depth information, from Adobe:

http://www.adobe.com/newsfeatures/palette/main.html

When creating pages for the World Wide Web there are many considerations that must be addressed. Aside from design and layout issues, the chief concern is, as always, file size.

FILE SIZE

It is a hard thing to advise on file sizes for Internet graphics due to the variable nature of images, however an individual file size range from lk to no greater than 40k should be seen as being your aim. I would advise against using many images that are 40k due to what can become prolonged download times. Here is a rough outline of Images-file size.

- Bars and horizontal separators should be around 1-6k.
- Buttons and bullets should fall in the range of around 1-5k.
- Banner headings should be between 1-10k.
- Pictures and Special Images should be between 1-30k.

These figures are simply guides and your images may well be larger than this, bear in mind that people don't like having to wait and they are likely to ignore your lovely graphics and zoom ahead instead of tarrying for that image you spent hours on.

WHICH SOFTWARE?

People often ask me what is the best imaging program for the Web, to which I answer "There isn't one". This is not an offhand comment rather it is a statement of fact. The programs that are available and powerful enough are difficult to learn, somewhat clumsy to use and entirely too expensive for most people. The better low-end image manipulation programs include : Paint Shop Pro, Lview Pro and Graphic Workshop. These programs are all available for download over from their respective sites and can be registered on-line.

If you are looking for serious image manipulation software and are willing to pay the high price that these items attract then may I suggest that you turn your attention to a standard of the design world - Photoshop from Adobe. To my mind this is the only program you will ever need in order to produce beautiful images for the Web or for print. Photoshop is so well regarded that a number of companies produce what are called plug-in's to add to Photoshop's already stunning versatility. The program itself retails for $1,295 making it a serious investment but one that will return many hours of pleasure (not to mention frustration!). Photoshop is available from all good software outlets, the Adobe recommended Melbourne reseller is Software Express who can be reached on - (03) 9663 6580.

Another product that is worth looking out for is Ulead's Photoimpact range of software. The main product in this range is a photomanipulation tool called "Photoimpact". This software is full featured and well crafted for the novice graphic designer. The full range of Ulead products is covered on their Web site: http://www.ulead.com. The Australian importers are: Lako Vision, phone: (03) 9525-3899 or check their Web site at http://www.lakovision.com.au. The price is a much more affordable $195.00 which makes this one of the must have products for anyone who needs to produce good quality Web friendly images.

Layout of WWW pages is a very individual thing. The style of your site depends very much on the image that you are trying to portray. If you are a corporation, then you will want something professional perhaps a smart white background with very subtle drop shadows. Perhaps you are an individual who wants nothing more than a hip home page, in this case you can let your mind run away with you and design something that is not so much a functional site but more something very good to look at.

Whatever purpose you have in mind you can achieve it with relative ease if you bear in mind the limitations of the medium. Always remember file size and cross platform colour integrity, are the two most important variables in Web design.

The best way to learn about on-line design is to visit well crafted sites. Some of what I consider to be stand out sites are:

- http://www.envirolink.org
- http://www.nationalgeographic.com
- http:/lwww.mca.com.au
- http://www.mtv.com/mainl.html
- http://leary.com

Drop by these sites and study the way that design elements have been used. All of these sites have been professionally designed and it shows in there perfect mix of high quality graphics and animation.

THE MOST IMPORTANT ELEMENT

Having described how a site must have a certain level of presentation and layout style, I would now like to mention the single most important aspect of good Web page design. High quality graphical presentation and solid layout are all well and good, but they mean very little without relevant, substantial content.

A Web page must be more than a pretty document with links to other pretty documents. The content itself is limited only by your interests, however stay on topic and link to areas of relevance to your page. If your page is just a glorified list of links people will soon learn to go directly to the linked page and bypass yours altogether. Here are the four most important aspects to remember when creating Web pages:

RELEVANCE

Is anyone besides myself going to care about what I'm doing? Will it be meaningful to those who use it? If this is a low-maintenance project, will it maintain its relevance over time?

REPETITION

Has what I'm doing, been done before? Am I reinventing the wheel? Is anyone else doing this?

RELEASE

How are others going to find out about my work? How can I distribute it effectively to those who need it most?

REPAIR

Maintenance. Information decays, due to the volatile state of the universe. The bigger your database, the more time you'll have to spend keeping it up to date.

The following list of links will help you to develop a sense of what is expected of you as an author of Web sites. Hopefully the sites listed below will assist you in your endeavor to create a memorable and successful site.

This site offers tips on what not to do:
http://www.earth.com/bad-style/

Information on the top ten things that people overuse or use incorrectly from the good people at Sun Microsystems.
http://www.sun.com/960416/columns/alertbox/index.html

Here is a site dedicated to assisting people to create impressive pages. This site deals with everything from how to choose a background right through to how to write "correct" HTML.
http://www.clever.net/gomer/tips.htm

This site is a slightly more comical look at page design, with some good pointers.
http://www.tlc-systems.com/webtips.htm

Here is a fairly thorough site of page design. It deals with everything from HTML to transparent Gifs. Interestingly enough, this site was voted bottom 95% of the Web!
http://members.aol.com/jolene7369/html/webnf.html

As you can see there are a lot of places to look for design tips. These sites are just a drop in the vast ocean of advice that can be found on the Web. In fact, perhaps the most common home sites are sites that offer information on how to create good sites! There's something to be learnt from that I think.

NET TIP - GETTING YOUR SITE SEEN

Finally, all the long hours of work and learning have paid off. The site has been loaded onto the server and is looking fantastic. You sit back and browse over your handiwork, the graphics look stunning, the layout is heaven sent and the HTML is bullet proof. Your business now has a web presence, a site that can be seen by literally millions of people, people who want to buy your products or avail themselves of your service. Ready to burn the midnight oil filling orders and shipping your goods all over the globe. Checking your web counter you almost fall over when you see that it reads the same figure as it did last week. No one has looked at your site! No one knows that you have fabulous things to offer! How can this be after all your hard work?

The reality of web sites is that you must make certain that you follow up every detail. The fact that you have created a stunning site with massive potential means very little if nobody knows that it exists. The simplest way to announce your presence to the world is by registering with one or more of the search engines that service the web.

To register with services such as Yahoo, Lycos, Alta Vista, Web Crawler and the like it is a simple matter of going to the relevant page and finding the particular area that allows you to register your site. Here are the locations of each of the registration pages for the major search engines:

YAHOO - http://www.yahoo.com

On the main page, scroll to the bottom of the page and select - "How To Include Your Site". This will take you to the "Add To Yahoo" page. Follow the instructions to add your URL (Uniform Resource Locator) to the search engine database. Yahoo is now offering a new service called "Web Launch", this service places a rotating banner add on the search page however, at a cost of $1000 per week it's something only the corporate players could afford.

LYCOS - http://www.lycos.com

"Add Your Site To Lycos" is one of the navigation selections available from the main page of lycos. Again, it's simply a matter of following the link to the registration page and then supplying the correct information.

ALTA VISTA - http://www.altavista.yellowpages.com.au/

This is the Australian mirror site of one of the most comprehensive search engines on the Internet. The link for registration with Alta-Vista is on the main page as part of the site's text navigation area.

WEB CRAWLER - http://www.webcrawler.com

The "Add URL" button appears on the top of the main page for this search engine. Click it and you will be taken to the relevant page. This site allows you to add 10 URLs at the same time and also features links to a web promotional page called (imaginatively enough) "Web promote'', the URL for this promotions page is:
http://www.webpromote.com/wc2laa.shtml

These four are just a small sampling of the vast number of Internet search engines with which you can register your site. The more engines you register with the greater the chance that you will be seen however, bear in mind that registration with a lot of search engines is not instant and can take up to a month. The vast majority of these sites have detailed instructions on how to register and some, such as Yahoo, even include a "Beginner's Guide to URLs" page.

Now that you have created your site, uploaded it to the server and registered it with several of the bigger search engines you will find that you are inundated with orders from around the globe all wanting your wonderful product, at least, that's the way it's meant to go!

Click here to go back to my Home Page

Please me and let me know if I can add another bit of info you would like to see.

This page has been accessed times.

Last revised: Sunday, 16 March 1997