Free Design Resources: Accredited Online Design and New Media School

design tools

career center

student store

design newsletter

competitions and events

<< back to design tips

Web Design Tips

Keyword density
There are some search engine submissions that will ask you for a keyword density calculation. The way that search engine submission tools figures out the "keyword density" is by counting the total words in your body text, then counting the occurrence of your keyword phrase, and dividing those by the word count total. Example, you have 100 words on your page, with four occurrences of your keyword phrase, for example, "graphics". The total percentage would then be 4%. Aim for a keyword density of between 3% to 7%. Make sure that you have quality content, not just keywords repeated over and over. A general guideline is that you should try to have at least 200-450 words per page and computation of keywords includes those in the title and description. Some tricky people lace keywords in type that is the same color as the background, to get them in, even if the text does not specifically support the keywords. Search engine submissions know all of these tricks and are likely to not list your site at all if you try such tricks.

DOCTYPE to validate
Some people use validators to check their HTML pages before posting them. To use a validator, the document should start with a DOC-TYPE declaration. According to HTML standards, this declaration should specify which version of HTML the document uses. Browsers ignore DOCTYPE declarations, so if you're not validating pages, including such code is unnecessary. But if you do include DOC-TYPE declarations, make sure they're correct. The W3C has a page of them at www.w3.org/QA/2002/04/valid-dtd-list.html.

Links and bots
Robot or bot meta tags are used to inform search engines bots about what to do when they arrive to spider your page. It directs them to either index a page or follow the links and index links within any page.

For example:
meta name=”robots” content=”index,follow”
means the bot is to both index the page and follow the links contained in the page.
meta name=”robots” content=”noindex,follow”
instructs the robot to not index the page, but to follow the links contained in the page.
If you use “none” like this:
meta name=”robots” content=”none”
it means neither index nor follow, which is the same as:
meta name=”robots” content=”noindex,nofollow” .

Banner names
Be sure that your filenames do not use the words “banner,” “ad,” “advert,” “skyscraper,” or anything else that might be confused with an ad. Many ad blockers will stop these from being displayed. Also avoid ad-shaped images; some blockers stop these by size. A comprehensive list of what Norton will block out can be found at the bottom of http://tinyurl.com/6sszf

Buttons not boxes
A common mistake made by some Web designers is to use check boxes, which allows for multiple choices, instead of radio buttons, which are for one choice only, and when answers are mutually exclusive.

Percentage wrap
If you need to get different line spacing for that particular word wrap or to emphasize something, you can always set line spacing as a percentage, either larger or smaller than 100%:
p (line-height: 200%;)

IE floating bug fix
A useful conditional comment circumvents an Internet Explorer bug, which has the tendency to double margins on floating elements. The following conditional comment in the top frame should fix the problem, in this case assuming the desired margin is 30 pixels:

The div.image can be any floating element. We hear that this will be fixed in Internet Explorer 7.

Convert your earnings
If you do business in other countries, you want your customers to have a currency converter on your site. You can find one at www.xe.net/ucc/. Alternatively, they have a service that will email you currency conversion rates that you can post on your site.

Get them up-to-date
When designing pages that use Flash, it's usually assumed users already have Flash. Macromedia tells us that 98% of all users have the Flash Player installed. But they may not have the latest version. So you should offer your visitors the opportunity to get the latest version installed into whatever browser they are using to visit your site. Internet Explorer 4 and later and Netscape 4 and later will at least have a player installed by default. To ease the detection and installation for users, see the tutorial and script below to do all the detection and installation.
www.echoecho.com/flashbrowserdetection.htm

Sizing IE
When using Internet Explorer, to see what an image will look like in an 800x600 window, type “javascript:resizeTo(800,600); moveTo (0,0);” in the Address Bar and click OK. This resizes the browser window to 800x600 and positions it in the upper-left corner of the screen. You can do the same thing with 640x480, 1024x768, and other resolutions just by entering different values. You can also add these commands to the Links Bar for future testing, by dragging the page icon from the Address Bar to the Links Bar. You will get a warning saying this may be unsafe, but ignore it. You can also rename it 800x600 so that it takes up less room.

Learn from the Source
One of the best ways to learn how a web page was created is to examine the page’s source file. There are a couple of things that may cause you trouble while viewing the source code from Internet Explorer (View>Source). First make sure that your temporary Internet files are not full (Tools>Internet Options>General>Temporary Internet files>Delete Files). If this is not the cause, you probably have a notepad document or a shortcut to one on your desktop. Place these in a file and all will work as it should.

Non-caching pages
On occasion, you may want a page not to cache on a viewer’s hard drive. This is helpful for pages that update constantly or have other time-sensitive material. The way to do it is to use the meta tags between the <head> and the </head> block at the top of your page.

The code is:

enroll now