What's to decide? Decide on a design with the web page content in mind.
Know your materials! A webmaster is not always the author of the content. It's important to know what the author's intent, purpose and goal is behind the text. What is the meaning of this? Major points should come at the upper portion of the presentation and details or points of lesser value should be last or linked to the page. Highlights should be drawn out of the page by use of headings, bold, or font. The viewer will most likely scan a page before he reads it to find out if he is interested. Here's your chance to draw him in!
Once you know the materials it's time to plunk the major points and highlights on paper. Organize them by importance and how they relate to each other.
A story board is your visual connection between the outline and your layout. Eventually all of your ideas must be put into HTML code. Coding and planning of an entire site simultaneously can be frustrating and waste time. Decide which areas need graphics, what belongs in a table, what material is related to other pages in and outside of your presentation. Visually, is it pleasant to look at? What needs to be highlighted where on the page? (Get out your highlight pens, post-it pads, and eraser markers! WELS web site was organized on my living room floor!)
Know your audience! To whom is the author speaking, and in what tone of voice? Is it boring, funny, serious, formal, casual or sad? Take this into consideration when deciding on graphics, colors, fonts, and page layout style.
So you've outlined and built a story board. You're still not done! You've considered content but not length of pages. Divide and group text that is lengthy or relates to other sources. Keep in mind download times and accessibility of pages for the visitor.
Placement and the story board work hand-in-hand with one another. Once you start coding though, things are brought to light and you may have to rework your initial plan. A few items to consider:
Use headings and bold to highlight major points of text. Be consistent throughout your presentation. If you use HTML tag H1 (heading code) for the major headings and HTML tag H3 for sub-headings, don't change halfway through your presentation or vary from page to page.
HTML list tags can organize data and links beautifully on a page. Visitors will appreciate the quick access by grouping information this way.
Remember to treat each page as its own publication. Your guests may be dropping by from another web site link. Headings and page titles should be present, not assumed.
Images should be appropriate for the tone of the content. If your subject is rainbows, would you use a black and white photo? That doesn't mean you can't be creative. Perhaps you use the black and white photo colorizing it as your refer to that particular hue in the rainbow. Then reward the user at the end with the color version of the photo.
Be consistent with image style, avoid mixing. Don't overuse an image; for example, the flashing animated star on all 100 resource links. The flashing takes away from the readability and becomes mundane.
Image size should be kept small. I once visited a company home page with only it's logo on that page. The graphic was huge, and download time was beyond worth waiting for. Images can work for or against you!
How do you get around? Take a tour of your own site. Are there any dead ends or a link back to the main page? If a page is lengthy not by choice, offer a way out halfway through the presentation.
How deep is your page? Most users will click on links only three deep before returning to familiar ground. Guests are afraid they'll get lost and not know how to get back to the initial page of interest. Dividing and grouping your content has become more important than ever!
Most sites offer information on the number of visitors, date of last update, or the content author or web master signature. Make this data inconspicuous as it is not the purpose of the page. Be consistent as to where you place this information on the page.
Frames divide the viewing screen into sections. WELS site uses frames throughout most of the site. There is a disadvantage in using frames, you must offer a nonframes version for text browsers. If your links are in one frame but content in the other (just like this page), text only browsers can not see the links area of your screen. Thus, a dead end!
Frame styles vary. You should select a style that complements your data allowing for sufficient viewing space at the lowest screen resolution setting (480 X 640). You'll want to test your frame style using the actual content to avoid excessive scrolling or truncation of information. Proper heading and image sizes are important when trying to fit them into a specific frame. Avoid using too many frames or it will confuse your visitor.
The most popular styles and uses are:
(Links to examples...use your browser's equivalent of the "back" button to return to this page!)
- Navigation strip H: upper portion button bar / lower portion content
- Navigation strip V: left side button bar / right side content
- Vertical 50/50 split: left side outline/ right side detail
- Horizontal 50/50 split: upper portion instruction / lower portion examples
- "T" split: main menu upper / left side outline / right side detail
- "r" split: left side navigation strip / upper portion main menu / lower right corner content
- "L" split: left side button bar / lower portion site info / upper right corner content
- Custom split: Split the screen as needed
Templates can offer design relief as well as site consistency. One base document contains heading styles, backgrounds, navigation buttons, site information minus the content. This provides quick creation of new pages. If there is cause for change, make sure you update all pages including the template.
Table and align tags help position images and text harmoniously on a page. White space is used wisely and content appearance is enhanced.
Create small images without compromising quality. Edges should not appear jagged, nor should graphical text be blurry. Choosing the appropriate file type can enhance quality and cut down on image size. Your main goal is to enhance a page and the content. Don't let the image be the page.
So how do you know which file type is the best for saving an image? Web browsers handle .JPG or .GIF formats. Joint Photgraphic Experts Group is pronounced "jay-peg". This graphical format was designed to display a photograph image on the web. It has compression features (used to make the file smaller) and handles color and shading different than a .GIF format.
Graphics Interchange Format pronounced "jiff" is the single most used image format. Developed by CompuServe in order to display an image on multiple platforms. Used for simple colored images such as line drawings, bar graphs, or clipart.
The odds are against you when designing images for the web. There are so many variables that cause a graphic to display differently than intended. Resolution, bit depth, platforms, browsers, palettes, and file format all play a major role in how the images you create are viewed. Here's a brief description of each:
- Resolution:
- An image size is determined by the height and width in pixels. The monitor setting then contributes to the size the image appears on the screen. Resolution is the number of pixels displayed per inch. Your web images should be saved at 72 ppi. The screen resolution (monitor setting) will translate the image pixels to screen display pixels. (Default monitor settings for the Mac is 72 ppi, but for the PC monitor it is 96 ppi.)
- Bit depth:
- Each computer video card defines the number of colors that can be present within each pixel on a computer screen. The number of bits making up the viewable color is "bit depth". The newest models can display millions of colors. Older models (most widely used to view web pages) can only display up to 256 colors at one time. Thus a "dithering process" becomes necessary, or your careful design. An image with a million+ colors is dithered when displayed on an 8 bit (256 color) capable display. That means that "like" colors are chosen to create a similar look to the image. Results are not always pleasant since the quality of the image is lost.
Monitors may be set at different levels of display. You may have 24-bit color display capability and yet you may choose the 8-bit setting (which is a good choice when displaying your newly created .GIF files).
24-bit
16-bit
8-bit
7-bit
1-bit16.7 million+ colors
65.6 thousand colors
256 colors
128 colors
2 colors- Browser:
- Browsers handle color translation differently. Why? Each has it's own palette, that is, the number of colors they relate to. So if your graphic contains a color not in their defined palette, it must translate it, or dither it to a similar hue. Netscape, Internet Explorer, and Mosaic all have unique palettes.
- Palette:
- Palettes not only differ between browsers, but also within platforms. Macintosh and PC's differ. There are 216 colors out of the 256 palette (8-bit) that are equal on each platform. Some designers use just these colors for cross-platform look.
- File format:
- We've talked about .GIF and .JPG files and their uses. GIF files should always be 8-bit or less when saved for the web. Browsers expect and will dither a 24-bit .GIF down to an 8-bit translation. So if you are designing with a 24-bit monitor setting, it's best if you view your .GIF images at an 8-bit setting. Make necessary corrections or adjustments to achieve quality results.
Browsers expect .JPG format to be saved as a 24-bit graphic. The browser will dither the images automatically.
Your best bet with a graphic is to...
- Test it on different platforms, browsers, and resolution settings. Keep it smaller than 25K, and use .GIF and .JPG formats appropriately.
- Include within your <IMG...> HTML tag an "alt=description of the graphic" option for the "text only" or "graphics dispabled" browser, as well as a courtesy for the sight impaired visitor.
- Specify height and width options within the <IMG...> HTML tag so that Netscape browser loads images quicker. (Do it as often as you can, as it is helpful to the majority of visitors!)
- Save download time by repeating an image on a page (bulleted items). Once loaded into memory, a browser doesn't have to download that image each time you define it within the code.
- Save .GIF files in 8-bit (256 colors) or less without giving up quality.
- Design images with smooth edges and text shouldn't appear jagged or blurry.
Designing can be painless if you have access to web image sets. Give copyright or credit information if requested by the graphic designer or site. Many graphic style sets offer:
Avoid neon or wild designs for easier text readability
Consistently place buttons in the same position throughout a presentation. Each button should equal in size and font characteristics. Don't fool your visitors with a button that is not a link.
Make sure the rule isn't wider than your page causing it to scroll. Don't overuse rules to highlight headings. Horizontal rules are meant to divide content, not text.
Test again and again! HTML versions, browsers, browser versions, platforms, video cards and screen resolution are the major weakness of any design. Everything looks great on the browser you used for design and then you take a look at your page on another computer. Shock! Nothing appears the way you intended. You can go overboard trying to please everyone. Check the W3 consortium page and other resource links to stay informed of the latest versions and limitations. Do your best and then say "this will have to be good enough" still leaving room for others' opinions and suggestions. You can always listen without taking action (If you're convinced you're right that is! :?).
Bottom line...test your pages on various platforms, browsers, browser versions and screen resolutions. If they are not at your disposal, post a notice on your site inviting others to give you feedback. And once you're satisfied... tomorrow the rules will change! The internet is an evolving entity.
There are many sites that will test your page for you! (Also included on the resource page.)