General HTML Resources and References

Moving into Advanced Web Page Design (Cautionary note)

1. More code and more features slow down age loading time. If you aren't careful, an elaborate page design might take so long to load that site value decreases. Fancy effects aren't always necessary
2. Keep page sizes small. Split long web pages into sub-pages whenever possible. As pages get longer, editing and improving pages is more cumbersome. Loading time is longer. In short, long single pages are bad design.
3. Aim for variety and activity in Web page design. (Yes, I need work on that, but I still haven't gotten around to finishing the original content posting plan. I'm not a professional.)

HTML Manual Coding

Netscape composer is limited to creating basic HTML features.  Adding more advanced code can create conflicts and page failures unless you can see what is actually happening in the underlying code.

There are two easy ways to access page source code. You can view any web page source code by clicking "view" then "page source" inside Netscape. If you want to edit code on your own pages, open your page inside Netscape Composer (click "file - open page" and enter the page source name). Then click "edit" and "HTML Source" to access the code. Now you can manually insert HTML code (frames, other advanced features, or comments to help you remember what you did.) The same procedure allows you to add JAVA programs, CGI script, or other active features.  (You may want to check out Dave Raggett's 10 Minute Guide to HTML to as an aid to understanding the code.)

All manual coding should be formatted with indents and carriage returns to make it easier to follow what you did.  Comments, enclosed by a <!-- put comment here --> should be inserted to clarify the page design. Multiple advanced features without formatting or comments can make troubleshooting difficult.

HTML Frames

HTML frames allow you to break up a web page into sub-sections. Each sub-section is actually an independent web page inserted into the space defined by the frame layout. Use frame sets with care; they can be annoying if used improperly. Used properly, they are tools for providing a unified identity for a site or an aid for internal site organization.
 
• Builder.com offers a web page, "Fun with Frames" that covers most aspects of how to code and use frames in web page design.
• When a page which is displayed inside a frameset calls a link to another web site, courtesy demands that you avoid displaying another site's work inside your  frameset.  The simplest way to address this courtesy is to redirect all off-site call to a fresh browser window.  The new window leaves the frameset behind and prevents accidentally misrepresenting off-site content as your own. (You don't need to do this through direct code edits. When you create a link in an HTML editor, just call the extra HTML function under the links edit function. Once inside the extra HTML window, paste TARGET="new" phrase into the blank window. Be sure to OK the change as you leave the link editor.)
• Page call redirection errors and other problems within frames can be particularly annoying. Test all view features after you post a page for call errors.
• Always provide an alternate display for "frame challenged" site visitors. If a visitor's browsers cannot read frame sets; they get a blank view. This can be confusing unless a non-frame alternate view explanation is provided.  (If you select "view page source" from the view menu on your browser, you can see how I did this for the main frameset controlling this site. If you read the code, you will see material after the frameset definition that is only visible to people that cannot view frame sets through their particular browser.)

HTML Style Sheets

Graphics in HTML design

Every web page is better with images and illustrations. Just remember that every image slows down the rate of page loading.  The bigger or finer the image detail, the slower it loads. Inserting a graphic is as easy as clicking insert, image and browsing on your disk for the file name of the image you want to insert. (Don't forget to keep any images you want to use in the same folder or a subfolder of the web page set you are building.

If you do not understand the options given for simple graphic insertion, try the graphics tutorials on Char's Delphi web site. It provides a basic outline of concepts. Then move on to review the notes and links below to learn about more useful tools and principles  that help in graphics design. (My site tends to violate some of the following guidelines. Hey, the web is a place for freedom of expression!)

Layout Suggestions

Save time; begin by learning what not to do by visiting Jakob Nielson's "Top Ten Mistakes in web Design."  This is a pretty important first step; you may find later that  "living" with early design errors is necessary because it takes too much time to go back and rework your mistakes.

Remember, "Less is more!"  Information is the core reason for visiting a site, but attention span is short on the Web.  Each layer of a site should be organized and linked for easy and quick use. Avoid adding those fun bell-and-whistle details; they slows page loads and risk loosing a visitor. Layout and graphics can ease viewing and build interest, but never add more than is necessary to accomplish your purpose. (See Jakob Nielson's How Users Read on the Web for more details on this ideal.)

My site fractures these ideals (sad to say), so I'll summarize layout design concerns with advice given me by a succesful professional web page designer:

Comments by a professional graphics designer (Jeff Kaiser):

"Most people want a clean, fast, and easily navigable site.  I suggest using small image sizes (not necessarily "AREA", but file size.)   Over a slow modem (I usually try to use a 33.6 modem as the target user) a large image (300k) just takes too long to download. Even pages (image plus text) that exceed 50 KB can be a liability.  Most people don't have the patience to sit and wait for an image, they move on. (TG Note: As an example of effective sizing, the pages on Yahoo are heavily visited, but are all much less than 50 kb in download size.)

One thing you can do to decrease image sizes is ALWAYS...yes, ALWAYS use a resolution of 72 dpi.  Also, when you save images (in photoshop for instance) make sure you compress them as JPEG or GIF format.  JPEG for images that have a lot of continuous tone (i.e. "big, beauty shots of a car) or anything where you want to use a lot of detail. GIF for images which contain a lot of similar colors.  Using compression GREATLY reduces file size and is pretty much standard procedure online.

Another target you may want to take into consideration is trying to target your viewing area to a 13" monitor.  Now, I know this seems small, but people out there with this size monitor either won't see all of your site, or they will be scrolling all over the place just to see everything.  I try to keep the entire layout at 640 x 480 pixels.  And, as in the Mitsubishi site, if we have something we need to enlarge or get more detail on, I usually make a thumbnail of the image and make it clickable into a new window....but I try to use this sparingly, only on the feature pages of the cars.

A question you may want to ask yourself is this..."Do I need frames?" While I agree that they are a great feature the web has to offer, some sites simply do not need them or they only need one....to navigate around a site without having to reload every time.

One HTML feature everyone NEEDS to learn how to do is use "TABLES".  They are a lifesaver for text and graphical layout issues, and they make organizing information easier." -- Jeff
 

Additional comments on  graphical layout elements:

Another issue to consider is the visual impact of a site. Simple, light backgrounds are easier on the eye and, in most cases, generate a more inviting aspect. A design by my niece, Linfield College's computer department page,  illustrates this. Light colors and images, combined with simple feature navigation, is more inviting than a sites packed with obvious technical features or gadgets.

Site integration, both through navigation aids and layout is important. A common layout reminds people where they are; navigation bars helps people move rapidly to features of interest (or move beyond features they don't like). Purchased HTML editors, like Dreamweaver, easily generate css files or templates to serve this purpose. (This site uses frames to create a common look with minimum hand coding labor, but the frames approach is not ideal.)

Finally, technical features, like JAVA banners, are good attention grabbers, but overuse causes people to activate the "TV add tuneout" reflex. Busy page designs discourage quick look visitors; page loads slow down. As Jeff's advice notes, quick-and-simple loads have more impact.

Image Sources

There are thousands of places to get images from the internet. Some that I found useful include Bells and Whistles, which also has JAVA animated graphics and the Icon Bazaar. Of course, it can be just as easy to create your own or alter these icons in any graphics program. (You might try NetStudio's shareware applet for editing jpeg images (photos) and creating  banners, buttons, or headings in this format.)

Optimizing Images  (important for balancing download speed vs image quality)

• GIF optimizing: MediaBuilder has free sites to optimize GIF images for web page speed (i.e., minimum image size properties). Connect to the internet. If you are optimizing an image from the internet, go to the internet site of the image and right click on the image. (If you are optimizing an image on your own computer, refer to "STEP 1" on the optimizer sites for an alternate procedure to follow.) Select "copy image location".  Now either go to MediaBuilder's GIF Optimizer site or, if you need to alter the image, go to their GIF Works site. Use ctrl V on your keyboard to copy the image location into the "GIF URL location" box, then follow the site's instructions. The smallest size and color set that fits your needs is the best choice for optimization.  When you are done, if you are using the image for a site control, use the button maker to alter the image into a button that depresses when the image is clicked by a mouse.
• JPEG optimising: Online JPEG Wizard is a simple site specializing in optimizing this type of image for download speed. This site has the added advantatge of accepting both GIF and BMP type images for conversion  and optimization. Be aware that an image optimized for monitor viewing speed may not be the ideal for the printed page.

Image Mapping

Image mapping allow you to take an image and create links to specific features in the picture.  There are many tools available. The tool I use is Boutell's MapEdit. It is free to use for 30 days and is cheap to register.

Note: Mapping requires absolute (pixel unit) sizing of images in order to work correctly. Relative sizing (used to keep layout consistent between monitors of different size and resolution) distorts picturedetail-to-action relationships within image mapped links. For this reason, always set image sizing to an absolute pixel size; don't change the pixel display size setting once an image is mapped.
 

Animating GIF images

GIF (type GIF89a) images can be animated (I.e., turned into mini cartoon-like progressions of images). Animated GIFs work in browser versions Netscape 2.0 and Microsoft Explorer 3.0 and later. Many animated GIF images of this type are available through the image resources I've listed above. However, sometimes you might wish to build your own animated images for specialized needs. (Of course, if you bought an advanced (read: costs money) full-featured HTML editor, you don't need this. You are already making animated GIFs.)

If you don't own an HTML editor with animation capability, shareware GIF editors provide an affordable introduction for creating your own animation. Although GIF animation images are not as versatile as program animation (like JAVA animations), they are much easier to create, faster to download, and view on a wider variety of browser platforms. Shareware animators are free (to try), simple, and if you like them, cheap to register. Two of the best-rated shareware GIF animator programs of this are:

• Alchemy Mindwork's advanced GIF Construction Set for Windows (~$20 to register) has capabilities and optimizers to match most of the highend programs (listed in the next paragraph) at one-tenth their price;
• If you don't need help with image optimization DiProbe offers Gifline, a simpler and slightly cheaper animator (~$10).
Each of these animators allow you to combine material of your choice to create cartoons, text flip boards, and more. Edit animation speed and viewing action to create dramatic  progressions of text, photos, or even, if you integrate different sized images, strobe effects. (As always, avoid feature bloat; keep banners under 12kb and avoid animations over 50kb.)

These inexpensive shareware programs create high quality animations, but serious animators often prefer high-end web graphics programs for image animation. They cost ten time more, can't create more, but they may make work easier and more efficient. (That's the web gossip; they're to pricey for amateur's like me to buy.) All of the Optimizers functions guide design to reduce the download size of animations; other functions ease the time needed to make a professional looking product. The best rated of these are:

• Adobe's ImageReady,
• MacroMedia's Fireworks, and
• Ulead's WebRazor Pro.

JAVA

Note: Many limits on JAVA capabilities are designed to protect host computers. Visitors to your page (hosts) do not want you to have the ability to release rogue programs into their computer. Some visitors to your site may even disable all JAVA viewing and functinality if they do not trust their browser to block rogue actions.

JAVA comes in two flavors. (A purest would point out that these flavors are now only distant cousins.) The simplest, JavaScript, places un-compiled program code into the header area of a web page. Each programmed function relies solely on the JAVA interpreter in the browser used to view the web page. Special effects are relatively simple, but downloads tend to be faster. If more complex function is necessary, compiled JAVA applets offer broader capabilities. However, unless you use a graphical compiler, programing skills are often required to modify "cut-and-paste" applets. In addition, applets usually function by calling additional coded "class" functions, as needed, from the original web site. Depending on the speed of the internet link, this significantly slows down page function.

JavaScript

Most web page designers find the power of  JavaScript sufficient for their purpose. The simple animated or interactive web pages features it allows can be combined to create incredibly sophisticated effects. In "page source" views of web pages, JavaScript appears as code in the header. Code may activate automatically when a page is opened in a browser or it may need input from the person viewing the web page. Interactivity features may use "code call" script in the body of the web page, like a link, to activate the JavaScript program. JavaScript programs are usually easy to copy and adapt across web pages.

Next: Improve visitor traffic and volume