Webdisplays
   color
  
Your Site
Page Design
your.com
Content
Layout
Compatibility
Navigation
Front Door
Ecommerce
Security
Multimedia
Images
Connections
 Dynamic HTML
Introduction
Graphics
Animation!
 Maintenance
Overview
Tools
Promotion
Indexing
Search Engines
Reports
 Your Name
Domains
Hosts
Free Pages
$ Value
Designers
 HTML Tips
Trial & Error
Editors
RGB Color Chart

free tools!

Contact Us!

Graphics and Backgrounds

As you've no doubt noticed, graphics play a large part in the appeal of a site or the lack of it. Graphics designs are as unique as personalities and it's very difficult to forecast clashes or love affairs. One of the major concerns in website graphical developement, is what the results will look like on different browsers, platforms and screen sizes. This is difficult to predict in many cases and having no or just simple graphics is a measure with it's own consequences.

An image is not always viewable, as people can turn off image loading to speed browsing, be blind, or access your site with non-graphical browsers! The W3C have defined new requirement that you add "alt" text for images, so that a text description of the image can replace it on your page, or be read aloud to the blind. This is not without it's own problems, a favourite howler went something like this:

<CENTER>
<FONT SIZE=6>Our Classrooms and Staff</FONT>
<IMG SRC="rule.gif" ALT="fancy horizontal rule">
</CENTER>
Instead of using <H1> for this first level header, it was simply marked up with a font size and no <BR>. So, there's no linebreak implied between the text and the image. Now, when displayed with image loading on, this was not a problem: the "fancy horizontal rule" was so wide that it automatically went onto a new line. However, with Lynx this whole thing is quaintly rendered as:

"Our Classrooms and Staff fancy horizontal rule"

More than anything else, wallpaper or backgrounds and text colors are the biggest and most common mistake made by webmasters who assume that everyone will use their color preferences for text, or have chosen text colors that clash or are nearly invisible against that background. Likewise, a background choice can have bad effects if the user has changed his standard color settings, or prefers only the default ones. Perhaps they have x-ray vision but many sites are simply unreadable for these reasons. No doubt, individual monitor settings and room lighting also play a role in these bad decisions. Color is an important psychological tool that should not be abused if one wants to appeal to a wide audience. Needless to say, too much color can also be a problem.

Colors are best chosen based on the default blue/purple link text colors, against a near-white or dark background, especially where text is involved. Remember too that wallpaper should always be produced or viewed in 256 color mode to ensure it renders well with few colors! Dynamic HTML allows many new ways of highlighting and pre-describing special font style, sizes and decorations on certain named parts of documents without having to repeat the instructions for each little part. This can reduce the size of highly stylized content dramatically.

The most critical factor is also the size of these files, and here, Netmechanic's Free Power Tools Gifbot can be of great help in speeding up those files, packing them into much less space for you!

Graphics are also strongly influenced by the Content requirements and Navigation systems you plan to use on your site and should be chosen carefully to avoid having to redesign the site to make changes. Unfortunately the graphic-navigation design template is the backbone of your site. Once the navigation method has been decided it is very difficult to alter afterwards without a thorough make over. Like houses, a site that is built upon weak foundations, in this case depending on an adolescent or infant new technology, may require extensive repair when browsers featuring newer standards hit the market!

This consideration is a good reason to have two versions of your site so you can fall back gracefully if problems arise! This is also a good argument for implimenting a more conservative graphical layout that renders well in both plain and DHTML versions.

Back To Main

©1996, 1997, 1998, 1999, 2000 WebdisplaysTM All rights reserved.