Web Design Tips & Tricks

These are various tips and tricks I have found out for budget web site design with an eye to selling. They are arranged in no particular order.

Untitled

An embarassing thing to have appear as your search engine listing. Please find your title tag and fill it in with something relevant. Then fill in the description tag below it. Most advise says get your product in first and then your shop name, just in case they trim it. If you don't the search engine will put up the first things on your page. Have a good look at the first things on your page. Then string them together without formatting. Is that what you want as a first impression?

Your Business Name

As a continuation of above, how many people will be looking for your business by name? Especially when you are starting out. By all means have it on the page with contact details, but as secondary importance to the product. Of Course if you do HAVE a name already then your business name is of more importance.

Copyright

Most people say have a copyright notice on your product pages, even for the design of the page. Of course you have to remember to update it every year. Have I said yet that templates are your friend?

Landing Page

Where is your customer going to land? It can be on any page on your site. Unless of course you have frames which is a subject all of it's own.

At the very, VERY least you need a link back to your home page on each and every page of your site, or to a page that has a menu on. Something!

A new customer isn't going to trim the URL step by step to find your home page. Even if they think of it, and if you have put in an index page in each directory for this eventuality.

The rowspan trick

The spiders from the search engines scan from the top down. This makes it better to have the important stuff at the top of the page. Search Engines also put more emphasis on links in sentences rather than a list.

For natural reading in most of the Western World, the important stuff goes on the top left and the least important stuff at the bottom right. This means that the menu or tables of content should be on the left hand side.

Are these two statements contradictory? Surely this means that the repetative menu would come before the contents? Not if you know a work around. The trick is with the rowspan attribute.

< table width="800" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="200" bgcolor="#FFFFFF"> < img src="../structur/black.gif" width="4" height="4" alt=""> <!-- This is a spacer otherwise some browsers drop the space. -->
</td>
<td rowspan="2" width="613" valign="top" bgcolour="#FFFFFF">
<!-- The contents of your page go here. -->
</td>
</tr>
<tr>
<td> < !-- The menu goes here. --> </td>
<!--Don't put another cell here --> </tr>
</table>

The menu is at the bottom of the page but appears on the left hand side where everyone expects it.

Menu buttons

Everyone recommends pages that load as quickly as possible, but you want a fancy menu? Images for buttons can quickly mount up size wise. Have you explored tables? If you fiddle with backgrounds and cellspacing and cellpadding you can have a wide range of buttons.

As example -

< table summary="" cellpadding="3" cellspacing="3" border="2" width="100">
<tr><td bgcolor="#c0c0c0"><a href="http://www.katlindesigns.com">This goes to katlindesigns.com</a></td></tr>
<tr><td bgcolor="#c0c0c0"><a href="http://www.homeoffaeries.com">This goes to homeoffaeries.com</a></td></tr>
<tr><td bgcolor="#c0c0c0"><a href="http://www.homeoffaeries.com">This also goes to homeoffaeries.com</a></td></tr>
</table>

Looks like -

Add a stylesheet instead of the colour reference and you can change the colours globally. i.e. instead of <td bgcolor="#c0c0c0"> have <td class="menu">. Then in your stylesheet you can specify a colour td.menu {background-color: #c0c0c0;} in the same section you can specify size of font etc. You can even put a single background image rather than a colour. td.menu{background-image: url(tile1.jpg);}

< table summary="" cellpadding="3" cellspacing="3" width="100">
<tr><td class="menu"><a href="http://www.katlindesigns.com">This goes to katlindesigns.com</a></td></tr>
<tr><td class="menu"><a href="http://www.homeoffaeries.com">This goes to homeoffaeries.com</a></td></tr>
<tr><td class="menu"><a href="http://www.homeoffaeries.com">This also goes to homeoffaeries.com</a></td></tr>
</table>

Looks like -

Of course I have such long menus that I have had to axe the tables as well, mine are in a single cell with stylesheet formatting to draw notice. The stylesheet stipulates the background colour of the cell and the size and colour of the links. It also gets rid of the underlines in the links

Please if you have more than ten pages invest in the time to learn stylesheets and templates. It will save you time and maybe even your sanity.

More stylesheet tips

Do you know:

1. Some browsers ignore class names with _ in them? They will ignore small_content but use smallcontent.
2. A dot class can be used globally. Instead of td.menu and p.menu use .menu in the style sheet. They need to be put at the top of the stylesheet. AND of course BE the same.
3. Stylesheets have a rank. An inline style outranks a style definition in the header and that outranks a global style sheet. Of course the two on page styles don't get updated when you update the site with the global style sheet.

Blue Underline Text

Text that is blue and underlined is the traditional link format for the web. Please if you you use this combination, use it only for links. It annoys people if it looks like a link but isn't. I don't say you can't use another look for your links. I personally use a dark blue without underline in my menus but in my body text I still use the traditional link colours.

I have a strong opinion of the sites where you can't find the links unless you are hovering over them.

I hold to the rule that I am out to sell and I try not to piss off the customer.

Netscape & Image files

One thing, Netscape 6 will not show a link to an image file, everything has to be enclosed in a HTML page while Firefox will show a stand alone image.

Spaces in File Names

%20 is the lingo for spaces in your file names, some programs still react very badly to that so it is just easier to take them all out. If you have difficulty reading the names then use the _ character instead of a space. A program like Dreamweaver where it will update the links of changed names is invaluable at this moment. The links will break in most email programs as far as I know.

Designer original Fairy & Fantasy Prints & Decoupage Papers

Design © Katherine Dyzel 2007-2009. All rights reserved.
Contact Katherine