|
Helpful tips for web site design/maintenance.
Banner Design/Usage
Statistics show that banner ads are largely ignored. However, that being said, they don't cause harm either. I wouldn't spend a lot of money on them, but if you can advertise for free, or on a site that is HIGHLY relevant to your business, go for it. Here are some tips:
- Standard size of horizontal banners is 468 pixels wide by 60 pixels tall (this may vary depending on who will be displaying your banner).
- File size should be no greater than 12 K (this may vary depending on who will be displaying your banner).
- Use bright, web safe colors. Check out CBD's color chart for help.
- Check for host/site specific restrictions.
- Use animation but use it wisely. You are trying to get someone's attention, not cause seizures.
- Get to the Point, don't mince words. You have a small space and just a couple of seconds to get someone to click through.
- Don't send visitors on a scavenger hunt - Make sure your banner links to a page that actually contains the information the ad copy speaks to.
- FREE! That word gets a lot of attention. Offer a freebie for clicking-through.
 AdDesigner.com - Easily make your own banner ad on the web for free.- Alchemy Mindworks - A paper on banner ad creation.
Top of Page
Basic Design Tips
Note: the tips below are aimed at business and informational sites. If you are designing an entertainment-related site, many of these rules can be ignored as your audience is likely to expect and tolerate long loading times and less than straight-forward navigation. But a special tip for you -- make sure the site is worth the wait if loading time is long!
The Foundation
- Unless your goal is to sell your site, keep your design simple. The most beautifully designed site in the world is useless if visitors don't get the point quickly and easily
- Design down. You may have a T1 connection and top of the line PC, but your audience probably doesn't. Design for the average user.
- Along those same lines, beware of fancy toys that require special plug-ins. While these elements can be fantastic for people who have the plug-ins, they can be enough cause for others to leave without looking back.
- Click then scroll... While scrolling used to be completely taboo, save for long articles, etc., now there is a fight between scrolling and clicking to see which is more annoying. My advice: give viewers a short and sweet menu of your offerings ALL ON ONE SCREEN. When they click on a particular offering, give it to them all on one page (make sure any options on this page are obvious immediately).
- Just say NO to "splash" pages (also known as "bridge" pages and "gateway" pages) - If someone has typed in your URL or clicked a link to your site, they have already decided to open the door. It's annoying to then see a page that says, "Here's our site, click to enter!" The first click should take someone directly to your home page/first page.
- Use clipart carefully -- or preferably, not at all! While there are some great clipart packages out there, they're available to everyone. If you really want a great, unique web site, limit your use of clipart.
- Make animation an option. If you must use Flash or some other animation feature on your site, give viewers a chance to indicate that they want to see it. Don't just throw it at them -- especially on the home page. If you must have Flash or other animation on your home page, give visitors a way out. Have a link that stops the animation. I can't tell you how many sites I have left because I got tired of waiting for some pointless animation sequence to end.
- Brevity is the soul of wit...and the key to capturing someone's interest online! Don't ramble on aimlessly. Use one-line, bullet points where possible. Again, length is okay for informative passages and articles - if a visitor has gotten that far, they want the information.
- Consistency. If I really have to tell you to use the same theme, layout, fonts, colors, etc. throughout your site, then you really should consider outsourcing!
- Watch your page size. As with most issues, opinions on this vary. Most sources say total page size (this is page plus graphics) should be between 30 and 50 K. I lean more toward 30 K for most pages - even less for home pages!
- Make yourself available! There is nothing more frustrating then having to hunt around a web site for contact information. I suggest a phone number and/or email address on every page.
- Make it easy for visitors to order your product (or the equivalent) if applicable. Display "Order" or "Subscribe" links prominently on every page.
- Tables are a good way to keep your layout in check.
- Only use borders when necessary. If you're actually displaying a table of data on a page, a border is fine, but html borders are pretty unattractive and rarely seem to "go" with a layout. Some browsers let you display solid color borders, which are better, but others stick with the old gray default.
- Make sure background colors and text/link colors work together. Don't use light text on a light background -- or dark text on a dark background. In general take great care in using black as a background color. It can be done very nicely, but usually it's not.
- Make background images wide enough. When I use them, my background images are very small files, so I make them 25 inches (1800 pixels) wide. It's a little overboard, but monitors are getting bigger and graphics cards getting higher-res all the time. If background images aren't wide enough, people with very high resolution monitors will see the image repeated. This doesn't apply to tiled images.
- Give the elements of your pages room to breathe. Don't overcrowd your pages. Remember that "empty" space is a very important element in balancing a design.
Details & Aesthetics
- Use web safe colors. Check out the CBD Web Color Chart
- Make your own "web safe" colors by "optically" mixing 2 or more web safe colors (basically creating a pattern of stripes, checks or dots with two or more colors). CBD has an online mixing tool that allows you to see what your mixture will look like. Mix using stripes or checkerboard pattern.
- Use default fonts and rarely, if ever, more than two fonts in one site. If you use some obscure font in your site, you MUST make it into a graphic. Otherwise, people who don't have the font on their machine will see the default font anyway and your careful designing will be for naught. I have seen a few sites offer downloads of fonts used on their site. Since some of these were fonts that aren't freeware, I'm sure the practice violates a license agreement or two.
- Use bold fonts for emphasis. Take it easy on ALL CAPS usage -- it tends to "look" like you're shouting.
- Use readable font sizes. Don't use teeny-tiny fonts. When in doubt, use the default. If your site is designed for the elderly, consider using larger fonts.
- Less is more when it comes to graphics. Unless you are designing an entertainment-related site, go easy on the graphics. Most visitors will leave your site if pages don't load in less than 20 seconds. When you have to use graphics, make sure they are VERY well optimized. See the Graphics Tips for more information on optimizing graphics.
- Avoid the usual gimmicks. In the early days of the web when most pages were text only, "cute" little tricks like blinking text, loud backgrounds, and page counters seemed pretty cool. Now they're a little cliché.
- See also Graphics Tips if you will be creating graphics yourself.
- Use "Alt" tags on all images. These serve a few purposes, 1) they replace graphics in web-readers (used by the visually impaired) and in browsers where the graphics have been turned off, 2) they are indexed by some search engines and contribute to site rank, and 3) they give surfers something to read while the site is loading (of course, it's better to just have a really fast-loading site).
- Set height and width attributes of images. Some browsers will set this info for you, but those that don't will put a placeholder where you graphic is and move other elements in around it. Sometimes browsers will wait for such images to load before displaying text. You always want text to load first so visitors have something to look at while the rest of the page is loading.
- Display graphics at actual size. If you want a graphic to display smaller than it actually is, make it smaller with a graphics program like adobe PhotoShop.
Top of Page
Browser Compatibility
Simplicity is key - If you really want your site to look good and work well in all browsers, don't do anything fancy. No nested tables, no JavaScript, no style sheets. Just text and graphics. But that's no fun. It's better to encourage people to use the latest browser versions. If you do run into problems, check out the tips below and email if you have questions. Most of the tips below are geared toward versions 4.0 Internet Explorer and Netscape Navigator. These versions have been around for a few years now and I find them an acceptable "low-end" when I design.
Browser Compatibility Tips
- Input field size. Internet Explorer tends to render input field boxes narrower than Netscape Navigator. To fix this, add the following inside the <HEAD> tags:
<STYLE>
.spacing { font-family:Courier,monospace; }
</STYLE>
or add the following lines to your external style sheet:
.spacing {
font-family : courier,monospace;
}
attribute: class="spacing" to <INPUT> tags. The field will appear a little shorter from top to bottom, and a little longer in Internet Explorer.
- Web Developer Rashmi Balakrishnan, of Suma Soft, Pvt., Ltd., sent me a tip to add to the above. She found that the above solution does not work in <textarea> fields. Her solution:
<textarea rows="5" cols="35" style="width: 356px" wrap="soft">
My thanks to Rashmi for her contribution!
- Netscape 4.5 and earlier: When using style sheets, make sure you only use letters and numbers in naming classes. Netscape 4.5 ignores tags with class names containing underscores (_).
- Radio buttons in Netscape are surrounded by the background color (bgcolor) set in the body tag. If the background color is set in the body, and a radio button is display in a table with a different background color, the button will still have the background color set in the body. Adding the property: STYLE="background-color:#000000;" (replace 000000 with the appropriate color) to the column tags (td) should take care of this.
- Form fields or buttons don't show up in Netscape unless they are inside <FORM> tags. I learned this when I found that input "back" buttons with JavaScript controls weren't showing up in Netscape.
- Netscape doesn't display pages if some tags aren't closed. It is good practice always close tags, but take extra care to close all table tags as Netscape won't display the page if you don't.
- Be consistent in how you assign column widths in tables. Whenever you can, use only pixels as width (not percentages). If you have to use percentages, try to use JUST percentages. I haven't had a lot of problems with this, but some people do.
- Make sure column widths add up to the table width if using pixels. Make sure columns add up to 100% when using percentages. Failure to do this results in wacky alignment in some browsers.
- Empty columns can cause problems. Netscape often shrinks them down to just a few pixels. Generally, adding a non-breaking space ( ) takes care of it. Some suggest that a small transparent GIF is a better way to go - but don't forget to set height and width properties or Netscape will display a placeholder where the graphic goes.
- Table spacing. If you set cellspacing and cellpadding both to "0" in your tables, but still find you have space around images, make sure that the close column tag (<TD>) appears immediately after the image tag. Some browsers will add a space in the cell if one appears in the code.
- Setting margins to "0". If you don't want white space at the top and left of your page, you have to set body margins to "0". To please both IE and NN in this, make sure that your body tag has the following: marginheight="0" marginwidth="0" topmargin="0" leftmargin="0".
- Borders. Some browsers will display borders on tables and images unless you tell them not to. To be safe, always set borders to zero (border="0") in table and image tags.
- Special character codes are not always recognized by Netscape Navigator. One in particular: © does not result in the copyright symbol when viewed in Netscape. As a precaution, use the numeric equivalent: ©
- Netscape 6.2 requires CLEAN, PURE JavaScript. Unlike other browsers, NN 6.2 takes no liberties with code. It strictly follows W3C guidelines.
If your code uses something like this to determine browser type:
var ns4=document.layers
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")
You may find your JavaScript doesn't work in NN 6. Add this:
var ns6=document.getElementById&&!document.all
Be sure to add ns6 instructions in the remainder of your code. And make sure any ns6 instructions are squeaky clean, TRUE JavaScript.
Top of Page
Content
Content is the Most Important Aspect of Your Site
- Gone in 15 seconds. That's how long you have to get your visitor's interest peaked enough to stay at your site. So, don't mince words. Make your point and make it fast, but strong.
- Brevity is the soul of wit...and the key to capturing someone's interest online! Don't ramble on aimlessly. Use one-line, bullet points where possible. Again, length is okay for informative passages and articles - if a visitor has gotten that far, they want the information.
- Update, update, update. Would you go to the mall, or open a catalog if you knew the merchandise was always going to be the same? Do you find yourself buying the same book over and over again? Then why do you think people will keep coming back to your site to see/read the same information?
- Make yourself available! There is nothing more frustrating then having to hunt around a web site for contact information. I suggest a phone number and/or email address on every page.
At a lost for content? Here are some ideas:
- Affiliate Programs - Again, make sure they are quality programs and sites.
- Art
- Art Made From Your Products/Products (I know of someone who makes great lamps out of John Deere farm machinery parts)
- Book Excerpts
- Bulletin Board
- Calendars - Relevant events and happenings. Personalized calendars.
- Cartoons/Comic Strips
- Catalog - put your whole catalog online, or have a place where people can request one.
- Chat Rooms
- Classified Ads
- Clubs/Memberships - Don't forget to make it worthwhile!
- Contests/Sweepstakes
- Coupons / Gift Certificates
- Course / Course Work (MIT recently decided to put most of its course work on its web site - for free! All in the name of sharing knowledge)
- Dailies - quotes, jokes, trivia, anecdotes, tips...
- Demos
- Design a Product - Start with a basic model and let people "add-on" their own features.
- Electronic Greeting Cards / Postcards
- Employee of the Month
- Employment Opportunities
- eZines
- Financial Data - Make sure you aren't breaking any laws!
- Forums / Lists
- Free Email
- Freebies / Free Samples
- Games / Puzzles
- Gift Ideas/Suggestions
- Gift Shops / Merchandise Displays - This needn't be a full blown shopping cart deal.
- History - This could be company/organization history, product history, holiday history, "this day in history", historic anecdotes regarding your organization or product
- Information Request Form
- Jokes
- Kids Stuff - Games, recipes, activities, coloring, crafts, and stories geared for children.
- Legal Information
- Links - Make sure they're good and relevant to your cause/audience.
- New Stuff - Keep people informed of products/organization/site updates.
- News - Keep it fresh!
- Newsletters
- Nostalgia - People love to "remember when".
- Opinion Polls - Don't forget to publish the results -- real-time if you can!
- Photo Gallery
- Poetry
- Political / Lobby Information - This isn't for everyone. If your group/site isn't political in nature, you may run the risk of offending potential clients.
- Product Fact Sheets - What's in it? What's it for? Where does it come from?
- Products/Product Information - Even if you don't sell it online, you can still tell people about it and how to get it.
- Questions and Answers / Frequently Asked Questions
- Recipes
- Seminars
- Shopping Cart / Store
- Statistics - Relevant to your organization, product, service, audience.
- Stories/Anecdotes - People LOVE to be entertained!
- Surveys
- Trivia
- Tours - Campus, factory, location, etc.
- Video / Audio - Use this one with caution! Slow-load time, poor quality, poor or out-dated content, and usage difficulty can really turn people off to your site.
- White Papers
Top of Page
Fine-Tuning
- Spell check and proofread - First impressions are lasting. Do yourself a big favor and have friend or co-worker proofread your site before launching.
- Test hyperlinks and graphics - This can be done manually, or by a service.
 NetMechanic: Power Tools for Your Web Site has a lot of tools to help test links and graphics.
- Complete your site! - "Under construction" signs can be the kiss of death for a web site. How many times have you bookmarked a site that was under construction and then gone back later to check it out? Zero. There are some individual exceptions to the rule, but for the most part, it is firm.
- Test your site frequently - changes made to web servers can affect your site without your knowledge.
Top of Page
Graphics
- Use web safe colors. Check out the CBD Web Color Chart
- Make your own "web safe" colors by "optically" mixing 2 or more web safe colors (basically creating a pattern of stripes, checks or dots with two or more colors). CBD has an online mixing tool that allows you to see what your mixture will look like. Mix using stripes or checkerboard pattern.
- Beware of graphics clichés. Shadows on text graphics, bevels on buttons, distorted text graphics, psychedelic patterns everywhere and other common graphics treatments can really be overwhelming. As with most things in life, moderation is the key -- or better yet, you could just skip it altogether!
- Anti-alias where appropriate. If you use text graphics (images of words) in your designs, and you find the text looks rough, try anti-aliasing. Conversely, if you have a graphic image of small text, sometimes turning off anti-aliasing can improve legibility. It generally depends on the font. Arial with a small point size, for instance, tends to look good without anti-aliasing. See graphic below for examples.
- Use the right file format for graphics. Line art, most text graphics, solid color graphics, graphics made up of only a few colors (GIFs only support 256 colors), graphics requiring some transparency, and graphics with little to no rendering (fades, shadows, etc.) are best suited for GIF (Graphics Interchange Format). Photographs and highly rendered art work do well as JPEG or JPG (Joint Photographers Experts Group). JPEGs do not support transparency. JPEGs support millions of colors (16.7, I think). PNG graphics are growing in popularity, but are still not supported by all browsers.
- Keep notes of colors, fonts, sizes, filters and other aspects of graphics that you're likely to forget. Trying to match a font to that of one you used in a graphic 6 months ago can be a pain.
- Optimize your graphics for the web. In other words, reduce the file size. One of the most effective ways to reduce the size of a graphic is to reduce the number of colors used in it. cropping is another quick way to trim some fat. Since version 4.0 or 4.5 (I think), Adobe PhotoShop has had a "Save for Web" feature which optimizes graphics. Check out the Graphics Resources page for links to software and tutorials to help with graphics optimization.
- Make graphics the actual size you want them to be on the web. Web servers will load the full graphic no matter what, so in terms of bandwidth, you're saving more if you don't rely on image height and width properties to shrink your graphics.
Check out CBD's Graphics Resources
Top of Page
Navigation
- Make hyper-links and image maps obvious, especially if they are important. Don't make people guess (unless that is part of the "point" of the site) what is "clickable" and what isn't.
- Label image maps. Most icons and images can be interpreted in different ways. Label image links so viewers don't have to guess where they lead to.
- Straight-forward navigation can make up for a lot of other shortcomings - but nothing can help a site with confusing navigation. Main navigation items should always be the same and in the same location. The top of the screen and left of the screen are the best places for your main navigation. Right side navigation can be lost to viewers using lower resolution settings. Designing for 600x800 resolution in the first place is a good way to avoid this.
- Most sites have navigational links displayed in text format at the bottom of each page. This is a good idea for many reasons, but most important is that people are starting to expect it.
- Show visitors the way home. Link back to your home page on every page in the site. A good way to do this is to have your logo be a link to the home page.
- Site maps and search boxes are very important for large sites. Not all visitors think alike. Some of them will get frustrated trying to use your navigation system. Site maps and search options are good ways to help these visitors find what they're looking for.
- Use "Alt" tags on all images. These serve a few purposes, 1) they replace graphics in web-readers (used by the visually impaired) and in browsers where the graphics have been turned off, 2) they are indexed by some search engines and contribute to site rank, and 3) they give surfers something to read while the site is loading (of course, it's better to just have a really fast-loading site).
Top of Page
Promotion
Online Directories
- SiteRelease.com offers a great directory service for new sites (sites that are less than 6 months old).
- Beaucoup.com is a directory of sites by subject.
- Business.com is an industry-specific search engine and directory.
- Fast! Claims to be the world's largest multimedia search engine
- Internets.com is a search engine search engine. That's no typo. Enter a "concept" or select a topic from a list. Internets.com will return a list of search engines specializing in your topic/concept.
- InvisibleWeb search engine and directory.
- iWon is a search engine/directory that offers prize incentives for searching.
- OpenUp Regional Website Malls - directory of web site "malls" where you can freely advertise your site/business/organization in specific categories.
- SunSteam search engine and directory.
- Verica "Family Friendly" (no X-rated sites) Directory/Index.
- WWWomen search engine specializing in women's issues/interests.
Top of Page
If you have any questions about web site design, or would like a free consultation and/or quote, please email or call 503-253-5478.
web site design | database design | graphic design | about cbd
|
