Web Site Design & Development Tips

Site Design Services
Portfolio of Sites
About CBD

Free Web Design Tools
Site Promotion
Resources
Tips

Web Site Design Tips: Basic Design

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. Visit the Resources section for links to user statistics and web sites that simulate older browsers.
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.
Design for minimal scrolling. Face it, people surfing the web are impatient. The more you can show them in one screen, the better. Full articles can be multiple screen lengths, but in other cases one screen should do it. Offer a link to "continue" at the bottom if necessary.
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! Nothing says "I'm an amateur" like clipart. Don't get me wrong, there are some great clipart packages out there, but it's available to everyone. If you really want a great 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. hIdaho Design's Color Center is an excellent online tool for testing color.
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.
See also HTML/XHTML Tips if you will be coding.

Details & Aesthetics

Use web safe colors. Check out the Free Graphics Tools section for help.
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.
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.

Check out Navigation Tips.