Web Designer Information:

You may find the following notes useful ... then again you may not ..

The Target Web User or Market

The following 'rule-of-thumb' values may be useful when considering the features, size of pages and overall 'feel' of your web.

Notes:

1. In all cases the above are generic consumer and small business type targets. Specialist web sites for specific target audiences can assume other values or the market defined by the above values can be ignored.
2. Many techniques can be used to break these rules and still allow use of newer and heavier resource features e.g. if a download is likely to take more than 20 seconds give the user the choice and an indication of how long at, say, 28.8K.
3. If a browser specific feature is to be used it should be noted on the Home page (or prior to entering the actual page) and links to get the required browser(s) provided. Plug-ins will normally load automatically or at least the user will get the option.
4. Use compression as much as possible to reduce image file sizes - but watch picture quality - it can go down sharply. Experiment with both .gif and .jpg (or .png) formats. You can get the most extraordinary difference in file size at the same quality level depending on the data. Use thumbnails for big pictures and let the user choose to expand or not.
5. Crop images right to the edge, set 'transparency' options and use CSS background colors to fill out.
6. Experiment with, and use wherever possible, text rollovers rather than classic graphic rollover effects. Text roll-overs are much faster and 'lightweight' (which is always good).
7. Use CSS style sheets for as much style and layout control as possible.

Things that can destroy 'Look and Feel'

The following notes may be useful when considering the look and feel of a site (or how we, the great unwashed, can conspire to destroy all your hard work):

1. Browser window size. Many people do not run with a full screen browser or may resize the browser window. If you use static widths in layouts you may lose 'right' hand side information or navigation symbols. Use 'liquid design' principles whenever practical to avoid these problems.
2. Navigation or Contents Frames. In many cases a clean web site can suddenly be destroyed if the scroll bar appears in a 'left side' contents frame. If you disable the scroll bar you might as well not bother with the frame and use a simple header and main page. Keep 'Left' hand navigation bars as short as possible (use fold-out or walking menus if you can) or use 'drop-down' menus.
3. Web site errors. Even the most carefully checked web sites have problems from time to time. Somewhere on each page there should be a webmaster e-mail reference. Look at this positively if clients complain you can fix it, otherwise they may silently disappear in frustration and never come back to your site.
4. Optimism. Never assume that the user will touch the scroll bar. If the most important or essential piece of information or visual effect is at the bottom of the screen and the scroll bar is needed to get to it, it will never be seen. Personal Prejudice: Most screens just fizzle out at the end, much nicer to reward someone's effort with a nice touch at the end.
5. Default Fonts and Colors. All browsers allow the user to set the default font and even override the page font. If you MUST have a particular font you MUST use a .gif or .jpg.
6. Footers. It is not easy (lets say its impossible) to use a 'left' or a 'right' hand frame with a full width footer bar.
7. Font size. HTML text allows the following standard point sizes 1 = 8pt, 2 = 10pt, 3 = 12pt, 4 = 14pt, 5 = 18pt, 6 = 24pt, 7 = 36pt. Use CSS style sheets to define point sizes rather than scatter font= attributes all over your mark-up.
8. Font size. We all break this rule but should not. If you set a font size then it can override settings in the user's browser. That's why we do it, but for the visually challenged this can be a nightmare because they will typically set options to use the point size they are comfortable with. Try to keep font size dependency out of your design as much as possible or use 'small', 'big' etc..

Additional Information for Designers working with ZYTRAX

If you are designing the look and feel of the pages and we are developing and building them, then:

ZyTrax should supply the Designer

• Standard Page text for the site. This may include any or all of the following items (depending on the site requirements). Copyright statement. Webmaster e-mail contact. Legal Notice link. Trademark notices. Privacy and Policy link.
• Customer supplied artwork. e.g. logos, product photos etc. or other material if appropriate.
• Customer preferences. Any customer color, style or other preferences to be used as a GUIDE only.
• All Page Types: e.g. Home Page, Press Releases, Press Release list, Product Pages, Forms (with content boxes), Contacts Page, Company page, other special pages e.g. photographs.
• Navigation Overview. Including any prioritization of navigation, planned use of Frames, unique effects.
• Page Features. Any specific features required on each page.

  Customer Code. Normally a two letter code for each customer for identifying filenames.

The Designer should supply to ZYTRAX

The Designer should supply ZyTrax with the following information.

• Draft Home Page Layout. A full GIF, JPG or PNG of the proposed home page should be made available as soon as possible. This page is designed to get customer feedback over 'look 'n feel'. Normally no further work should be done until the customer has approved the design. This page should be complete in terms of proposed Colors, Fonts, Point size, navigation features but does not have to be operational (i.e. links do not have to work).
• Dummy Page Layout. For each of the page types a full page view (.jpg, .gif or .png) to let us do the page building faithfully.
• Font Type, Family and Point Size. For all the fonts used.
• Background/Foreground/text colors. The RGB reference for all the colors being used.
• Rollovers. ON and OFF versions of the rollover (.gif, .jpg, .png). NOTE: Keep file names as short as practical.
• Images. In .gif, .jpg or .png format with short but explanatory names starting with the customer code. This should be accompanied by any border or spacing requirements (measured in pixels) when placed in a page.

  Hyperlink colors. The RGB value to be used for used and unused hyperlinks.

ZyTrax Web Page Effects available

• Standard Two image rollover.
• Three image rollover. Image 1 and 2 are normal rollover, image 3 used when button is clicked (normally only used for drop down or walking menus navigation.
• Drop down menus. Any number of drop down items per 'button', any number of levels, any color in each level. May be used with a 3 image rollover. Drop-down menus can contain text or images.
• Walking (or fold-out, drop-down) menus. Normally left to right ot top-down. Any number of items per 'button', any number of levels, any color in each level. May be used with a 3 image rollover. Fold-out menus can contain text or images.
• Expanding Menus. Normally on left. Single click will expand a single bar into a static sub list.

• Rollover Text Effects. Two or three color rollover using CSS colors - does not require .gif or .jpg or .png files. LIGHTWEIGHT.
• Custom Javascript programming effects.