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.
||800 x 600 pixels
||Accounts for approx 50% of the market. Almost the same proportion is higher resolution. 'Liquid design' principles should be used where possible to allow for an increasingly wide range of resolutions. Approx 2% of market is lower resolution (640 x 480).
||760 x 500 pixels
||Max. Viewing on a single page with no use of scroll bar.
||Approx 2% of the market use only 16 colors (declining), 12% (and slowly declining) have 256 colors the rest have higher color definition. The 'safest' option is to assume 256 colors.
||Over 95% of the market is now using a version 5 browser which means MSIE 5+, 6+, Mozilla 1+, Netscape 7+ and Opera 7+
||If special browser specific features are used you should indicate this on the page, preferably with a link to get the browser. Generally unless your site is really something special or indispensable you should avoid browser specific designs.
||Times Roman, Arial, New Courier
||These fonts are almost always available as standard
on Windows, Apple and X Windows (Linux, BSD, Unix).
||While many customers use broadband connections, over 50% of the markets still uses classic dial-up at speeds up to 56K. If your pages work well at this speed they will fly at broadband speeds. If they load like a dog at these speeds you may not have customers.
|10 sec load
||Maximum page size to load in 10 seconds at 28.8K. This is the maximum tolerance level for most clients. You should target 5 secs or less. Otherwise clients will click to someone else's page.
- 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.
- 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.
- 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.
- 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.
- Crop images right to the edge, set 'transparency' options and use
CSS background colors to fill out.
- 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).
- 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):
- 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.
- 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.
- 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.
- 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.
- 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.
- Footers. It is not easy (lets say its impossible) to use a 'left'
or a 'right' hand frame with a full width footer bar.
- 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.
- 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
The Designer should supply to ZYTRAX
The Designer should supply ZyTrax with the following information.
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
- 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.