Web Page Design Tips & Traps

Handy Dandy Hints to Ensure Good Results.

[Woz]

There are so many technical variables and possible pitfalls in Designing Websites it can be easy to overlook seemingly minor problems. In fact, something that seems simple enough in itself can often have major ramifications to the overall look and feel, and therefor effectiveness, of the site if not checked and rectified.

I know some possible pitfalls, but I am sure I don't know all of them, so I though we could pool resources with a definitive list of Tips and Traps.

Let me start off with Browser Settings in IE.

Problem: - IE sets background and text colour to the Windows settings by default which result in Black text on White Background. So it is easy to forget to set these in HTML as everything looks OK in the browser.

However, Netscape uses Black on Grey by default, which doesn't look anywhere near as good.

Remedy: - I use IE with the colour set to standard Gray Background Black Text. This allows me to double check I have set the background correctly in my pages.

And it appears a widespread trap that a lot of people forget about, from Moms and Pops right up to the likes of Microsoft and Yahoo. I have found it quite amazing the number of sites that do not set backround and text colour. They often end up with the very nice gifs surrounded by a little white set in a sea of grey. Not Nice!

Hope this helps, looking forward to more Tips and Traps from Members.

Onya
Woz

[brotherhood of LAN]

Further to the thread topic

I found [tuxedo.org...] very re-assuring. The guy puts a bit of his own flavour into it, but I relate well to his grunts

It pretty much covers many of those "'90's type" home sites that were riddled with frontpage components and cut and paste code

[Woz]

Yep, good list of pitfalls, but unfortunately he makes the same mistake of not setting his background despite saying "stick to either light text on dark backgrounds or the reverse".

I rest my case. <sigh>

Onya
Woz

[papabaer]

Basic, almost mandatory, CSS:

body {
margin:0;
padding:0;
color:#000;
background:#fff;
font:11px verdana, arial, helvetica, sans-serif;
}

Of course, all the above values will be changed to suit your needs, but it covers the basics.

NOTE: I may include a line height along with my core font-size (11px/14px) but this might cause problems for other elements or .classes that assign a different font-size without a matching line-height. Be sure to test accordingly.
- papabaer

[buckworks]

Tip: Remember to include height and width attributes for all images. If that information is included, the browser can tell how much space the images will need, and can start drawing the page without needing to wait for every last page element to download. This will make your pages *seem* faster, even if total download time is the same.

Trap: Watch out for this with cut-and-paste affiliate links. Many affiliate merchants forget to include height and width attributes for images in the cut-and-paste codes they supply. Take the time to figure out what they should be and include them.

[papabaer]

If you use CSS for sizing, margins, pandding and borders and have only recently come from "oldskool HTML," you might forget to include UNITS OF MEASURE for your dimension values.

For example IF you styled a <div> using the following INCORRECT CSS,

div.text-run-on {
width: 300;
height: 400;
}

The text placed within the above styled <div> will NOT word-wrap; you will see your text runing off into the distance.... Exit stage right!

Use units of measure for ALL values exceeding 0 (zero).

div.word-wrap {
width: 33%;
height: 400px;
padding:5px 30px 0 5px;
border:3px inset red;
}

- papabaer

[tedster]

This applies particularly to Netscape 4 compatibility, but I've seen the oddities in both IE6 and Opera6.

Make sure the code actually controls the font, whether through HTML or CSS.

To do this, I set my default font to something a bit "off" like a script font. If you leave your default set to a sans-serif font, and your pages use a sans serif font, you'll never notice if the browser reverts to its default font instead of the font you intended.

The reason this is important, even when you have a CSS body declaration in place, is that browsers DO get confused. This happens especially when your code gets complex, with nested divs, etc.

Sometimes (if the user has a serif font as default, for instance) you need to include a redundant declaration, just to keep your pages from looking like ransom notes.

I've seen Opera 6 revert to the default font for an unordered list, even though there was a body font and a paragraph font declaration.

IE will revert in some complexly nested div situations.

And Netscape 4 is notorious for forgetting the body or paragraph font after a table. (One easy fix for this is to wrap the table in DIV tags - no attributes, just the bare naked tag itself will do the trick, in many cases.)

[tedster]

We've talked elsewhere about font-size issues. People can set their default browser font differently, or even their system font, so it pays to check your pages in various possible setups. I almost always see a few surprises when I do this.

By using px units for font sizes, I assumed I was making it impossible (well, unlikely) for the browser to resize the font. Some layouts require this kind of control, and others can be very fluid, but I was working on a very tightly controlled layout.

Checking this kind of page in IE6 I disovered that IE6 WILL resize the default bullets in a <ul>, even though the font stays at a given pixel size.

This oddity means that the line-height changes to accomodate the bigger or smaller bullets, changing other relationships on the page, etc, etc.

The workaround is to use a custom bullet image:
ul {text-style-image:url(bullet.gif);}

Then the bullets stay the size you expect.

[pcguru333]

Trap: Designing and testing on local PC can lead to the belief that the site you have designed downloads quickly.

Tip: to test for bloatware be sure to check your file sizes. On PCs that you test your sites be sure to clear your cache often.

[dstanovic]

pcguru333,

One thing I have done in the past is copy my html files to a floppy and run from there. I think they open at about the same speed as a 56K modem user;)

[pageoneresults]

Watch out for those hanging </p> and </td> tags. They will cause unusual spacing between the last line of your <p> or <td> tags.

Incorrect Example:
<p>Content here...
</p>

Correct Example:
<p>Content here...</p>

Incorrect Example
<td>Content here...
</td>

Correct Example
<td>Content here...</td>

[BlobFisk]

I've also found that the forms have a nasty habit of inserting unwanted whitespace in here and there...

Anyone else found this? And if so, did you find a solution to it!?

[Reflect]

Anyone else found this?

On the form tag put them outside of the <td> tags.

<form>
<td>
</td>
</form>

Brian

[DrOliver]

I've also found that the forms have a nasty habit of inserting unwanted whitespace in here and there...

Anyone else found this? And if so, did you find a solution to it!?

Put that in your CSS:
form{margin:0;padding:0;border:0;}

[brotherhood of LAN]

>tip

save this page for future reference

>trap

using certain WYSIWYG errors and not checking the "standard" code that it churns out...compared to true validation seen in these forums :) Also remove indentation of HTML to reduce source code file size

[moonbiter]

<form>
<td>
</td>
</form>

Note that this is invalid HTML. A <form> element cannot start in a <tr> element. ;)

[Reflect]

Whoops, thought I read that on this board to eliminate white space around the form in NN 4.X.

Sorry,

Brian

[lorax]

Tip: Know your <!DOCTYPE> and choose the appropriate one for each page.

Trap: Not using the correct DOCTYPE could cause a browser to render your page incorrectly. And not using a DOCTYPE is not an option!!:)

For more information:

[webmasterworld.com...]

[webmasterworld.com...]

[webmasterworld.com...]

[webmasterworld.com...]

[searchengineworld.com...]

[richlowe]

Just an opinion on the earlier cited "http://www.tuxedo.org/~esr/html-hell.html". I find this page to be, well, a bit too "my way is the only way. period". I understand about running into the site with the 200 animated gifs withb blinking text, marquees and even javascripts which bounce the page, but all of this stuff does have it's use.

To me, the point is to make intelligent use of the features of the browser that are available. There are instances where animatead gifs make sense - even a lot of them.

I would not even consider making a site without a guestbook. I find these (a) very reassuring, (b) useful as a "PR" device - reporting other's opinions of my content and pages and (c) I just like them.

Javascript and many of the other things that he mentions in the articles are useful when properly integrated with a page.

Even the "best viewed with" notes that the author objects to so violently have value - perhaps the page includes features that are indeed only workable in a particular browser. I personally would not bother as I like myh pages to work in all of the "big three", but others do not agree.

I guess my point is it is up to the webmaster (in concert with his business partners, of course) as to what's on the page and site.

A page and a site is designed to communicate something. If it does that communication well (even if it is just "buy this"), then the site has worked. If it does not communicate, for whatever reason, then the site does not work. It's really that simple.

Richard Lowe

[rmjvol]

Here are some excellent tips for professional looking page designs
that work. [geocities.com]

Although these tips are "for professionals" they are so easy that "You don't have to be a professonal like myself to learn from these tips."

rmjvol