DESIGNS BY SHER WEB DESIGN TIPS

The Design Tips area was created to give beginners who are making their first site with some guidelines before they start. I have been designing sites since 1997 and my first site broke every "rule" in the book :) These tips are all basic, easy to do tips that can have your personal or small business site look like you have been doing site design forever.

Web Design Links

Get personal business cards FREE right now. It's easy! Click here.
Cool Site of the Day: Submit your site
SitePoint: 10 Deadly Web Site Sins
Designer Index: Online Resource for finding web development professionals
Steve's Free website templates: Professionally designed freeware templates for personal and business usage alike.
Search Engines.com: Everything you need to know about getting your site into the search engines.
Ice House Designs: A community based site offering web and graphics design tips, resources, and services.
Web Sites That Suck: Design Tips
A List Apart: Design Tips
Web Monkey: Java Script/DHTML
Web Design Tips
Mining Company : Browser Compatiblity
Get your site reviewed: Promotion
Virtual Promote: Promotion
Site Owner: Reference
Abstractamation Mcatis: Meta Tag Generator
Web Page Design for Designers: Design
HTML Goodies HTML
Web Site Abstraction: Java Script/DHTML
Web Coder: Java Script
Dynamic Drive: DHTML
Bratta.com: DHTML

Dont's

Do not use multi-colored backgrounds with text that clashes with it- If you are using a dark colored background, use light colored text and visa versa.
Do not use dark backgrounds and light text if you have allot of information to convey - Reading light text on a black background strains the eye.
Do not use "rainbow text" (this would be having each letter a different color) - Another tough thing to read.
Do not use allot of animation - Not only does this create a slower loading site, but if the visitor is going to be staying awhile, it gets annoying.
Do not add several pop up ads for each page. They are irritating and will most likely drive the visitor away from your site.
Do not put music on your site unless the visitor can turn it off - another annoying feature - I have been known to leave sites that have midis on them - after hearing "Somewhere Over The Rainbow" for the 100th time, I can't take it anymore.
Do not put huge photos on your page - create thumbnails for those who would like to view a larger version.
Do not use a million frames to cut up your page.
Do not use obscure fonts - unless the visitor has the bubblegum font installed on his/her computer/ they will only see their default font.
If you need to use a unique font, create it as a graphic.
Do not center align EVERYTHING on the site.

Go to Web Pages That Suck for the whole enchilada. This is a great site to learn what NOT to do when designing your site.

Do's:

When designing business sites- use a white or subtle bordered background - It looks more professional.
Do keep a theme throughout the site - a logo and navigation on each page - This way the visitor knows he is still at the same site.
Do use the same font throughout the site - don't use verdana on one page and Arial on another.
Keep animation to a minimum - Use it to draw attention to special offers or information.
Do use browser safe colors whenever possible.
Do make your site browser compatible - do not use scripts, applets, DHTML, etc. that are only compatible with one browser.
If you use cutting edge technology, design a second site for those visitors who still have a 3.0 browser.
Do keep your visitors in mind - Design the site for the people who are going to visit, not for yourself You might like bold, bright colors, but a funeral directors site should use subtle colors and hues.
Do use height and width tags for your images - this loads the page faster and also is useful to search engine spiders.
Do add proper navigation on each page - At the very least you should have a home button on each page.
The ideal is both text and graphic "toolbars" on each page so that a visitor can get to any page on your site.
Do design for the "three click" theory - this means that any section of your site should only be 3 clicks away.
Do use a site map for complex sites - this way if your visitor gets lost, they can always go back home or to the site map.
Be sure to add meta tags in your source code directly after the title of your page so search engines can find you - here is a sample at my site:

Do have fun!

Placing Your Triple Backgrounds

To use triple borders on your web pages so that your text is aligned correctly for ALL Netscape and Internet Explorer browsers, place this HTML code just after the body background and text color tags:

The tip below will show you how to set up your webpage tables using 3 matching backgrounds. Instead of telling you how to set this page up, it will be the easiest if you just copied the codes below. Be sure to copy to notepad first, then select all, then copy.

Place the code below your </HEAD> tag:

<BODY BACKGROUND="sample1.jpg" BGCOLOR=#COLOR TEXT=#COLOR LINK=#COLOR VLINK=#COLOR ALINK=#COLOR>
<BR>

<TR>
<TD>
<CENTER><TABLE BGCOLOR="#COLOR" BORDER=2 WIDTH="700" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR=#COLOR BACKGROUND="sample2.jpg">
<TR>
<TD>
<CENTER><P><BR>
<BR>
<BR>
</P></CENTER>

<CENTER><TABLE BGCOLOR="#COLOR" BORDER=2 WIDTH="600" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="#COLOR" BACKGROUND="sample3.jpg">
<TR>
<TD>
<CENTER><P><BR>

</P></CENTER>



Place your page content here. Be sure to change the names of your 3 backgrounds to your graphic names. The code #COLOR should be replaced with your six digit color number.



Place the codes below at the end of your page:

</TD></TR>
</TABLE>
<BR>
<BR>
</TD>
</TR>
</TABLE>
<BR>
</BODY>
</HTML>

Placing Five Backgrounds

To use five backgrounds on your web pages so that your text is aligned correctly for ALL Netscape and Internet Explorer browsers, place this HTML code just after the body background and text color tags:

The tip below will show you how to set up your webpage tables using 5 matching backgrounds. Instead of telling you how to set this page up, it will be the easiest if you just copied the codes below.

Place the code below your </HEAD> tag:

<body text="#000000" bgcolor="#000000" link="#000000" vlink="#000000" background="back1.jpg">

nbsp;
<center><table BORDER=2 CELLPADDING=10 WIDTH="87%" borderColorDark="#000000" borderColorLight="#000000">

<TBODY>
</TBODY></center>

<tr><td BACKGROUND="back2.jpg">
<table BORDER=2 CELLPADDING=20 COLS=1 WIDTH="100%" BACKGROUND="back3.jpg" borderColorDark="#000000" borderColorLight="#000000">

<TBODY>
</TBODY>

<tr><td><table BORDER=2 CELLPADDING=10 COLS=1 WIDTH="100%" BACKGROUND="back4.jpg" borderColorDark="#000000" borderColorLight="#000000">

<TBODY>
</TBODY>

<tr><td><table BORDER=2 CELLSPACING=10 CELLPADDING=5 COLS=1 WIDTH="100%" BACKGROUND="back5.jpg" borderColorDark="#000000" borderColorLight="#000000">

<TBODY>
</TBODY>

<tr><td><p align="center"><img border="0" src="banner.jpg" width="289" height="350"></p>



Place your page content here. Be sure to change the names of your 5 backgrounds (listed in red) to your graphic names. You may use three backgrounds and place them as alternate backgrounds.

The color code #000000 (listed in red) should be replaced with your six digit color numbers.



Place the codes below at the end of your page:

<BR>
<BR>
<BR>
</FONT></P></CENTER><BR>

</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Page Exits

In order to have your site open and close with Page exits, you can experiment with the Transition numbers below. I've tried them from 1 to 15 (Transition=12).


<meta http-equiv="Page-Exit" content="revealTrans(Duration=6.0,Transition=2)">
<meta http-equiv="Site-Exit" content="revealTrans(Duration=10.0,Transition=7)">
<style type="text/css">
</style>

Placing Your Music

To place music on your web page music plays consistently, place this code in your HTML document:

<bgsound="song.mid"><embed src="song.mid" autostart=true controls width=51 height=15 controls=smallconsole loop=true></embed>

Placing Fonts On Your Website

To place a specified font on your web page, this is a sample code to use in your HTML document:

<font size= "3" face="Book Antiqua">
Place your text on the site. At the end of your text place:

<font><font>

Sample Fonts

You can change your fonts

Like this if you would like

Or Even Like this!

Just remember one thing ~ if you have downloaded a font from a site and you place that font in your HTML code, it may be a font others do not normally keep in their computers. In this case, your font will default back to the normal font. Others will not see your special font. However, you will be able to see it because you have it in your computer.

How To Copy/Paste

This tip will save you a lot of typing! In order to copy/paste:

1. To highlight, place your mouse cursor to the left of the text you would like to copy. Hold down your left mouse button and drag it over the text you wish to highlight. Release your mouse button. You will see the text highlighted!
2. Click on edit. Click on Copy. Your text is now copied.
3. Move to the document or area you wish that text to be placed. Left click your mouse to place your cursor where you want it pasted.
4. Click on edit. Click on Paste.

You have now moved the text without typing everything all over again. This is the first function I learned when Windows first came out! It's a very helpful tool and saves time.

The above tips are things that I have learned through allot of reading, trial and tribulation. As I said earlier, my first site was a train wreck. Keep reading and learning and every site you design should be better than the last.

Sher
Designs By Sher