The 5 Golden Rules of Professional Design

The Web design world is filled with excitement and experience, creativity and skill. And these days, the growth in the freelance design industry means that even novices have the chance to be paid for their site designs.

Here are 5 key techniques that every professional designer uses in the development of a client site. Let's look at how you, the budding freelancer, can implement them quickly and easily for your own clients.

1. Combatting Internet Spam Spiders

Often, a bony, lanky black spider will crawl around a Website, wiggle its little feet in excitement, gather up all the email addresses on the site, and store them near its pinchers. Then, when it returns to its master, it will religiously add all the data it gathered to a huge nest of email addresses, which it can use as bait to reel in its clients -- direct marketing firms.

Those little black spiders are software utilities that slither underneath your page's surface to look closely at underlying HTML code, specifically searching for standard format email addresses (name@domain.com). This can be a most effective method for gathering email addresses -- and it needs to be thwarted! There are a number of techniques we Web designers can implement to protect our clients against these creepy crawly annoyances. Here are three that can work well.

1. Use HTML symbols

To prevent spiders grabbing email addresses, make a few formatting modifications to fool the software. All email addresses use the at symbol (@), and spiders are taught to look for them. HTML symbols are symbols that, though written directly into the HTML code, are interpreted by the browser into their actual meaning. The HTML symbol for the @ sign is @ So, how do we implement something like this? Simple:

<a href="mailto:name&#64;domain.com">

All we do is replace the @ sign with the HTML symbol that represents it. However, it's not a surefire solution: though most spiders are not sophisticated enough to interpret HTML symbols, some are. How do we surpass this hurdle? Let's try some Javascript.

2. Use Javascript

In this method, we simply break up the email address into four different sections:

1. name


2. the @ sign


3. domain


4. extension

Here's a simple implementation of Javascript to perform this action.

<script type="text/javascript">  
name ="you";  
domain ="domain";
extension =".net";  
document.write('<a href="mailto:' + name + '@' + domain  
+ extension +' " ' +' >e-mail link here ');  
</script>

The above code is fairly self-explanatory. We define three variables: name, domain and extension, and simply concatenate those variables within a document.write statement to the browser. Notice we use HTML's anchor tags within the write statement, to ensure that the user's browser interprets the email link correctly.

There's another problem with using this method... can you figure it out? Javascript is a client-side technology, which means although spiders might not be able to interpret your email address, browsers with Javascript capabilities turned off won't either. In this case, your email address will not be displayed to the user.

How do we fix this problem? Can we get away with refusing to display any email address? Yes, we can, but we must still provide a way for the user to contact the site owner. The solution is a rather simple email form.

3. Use Forms

The third might be the only fool-proof method of protecting the site owners against spam spiders, and that is simply to refuse to display any email addresses. Instead, if your server supports server-side processing such as Perl, ASP, Cold Fusion or PHP, simply design a feedback form, and call a server-side script to process the data behind the scenes. Spiders can't dig quite that deep!

I'm a huge advocate of PHP, but choose whatever language your host supports. Please note that if your server does not support any server-side programming language, you're out of luck in this regard -- you'll have to choose between the two aforementioned methods.

2. Take the Typography Test

A Website is nothing without content, and most content is comprised of simple text. Many Web designers neglect to pay attention to their typography, and it shows. Proper typography varies based on where the text is located on the page, and what purpose it serves. Although there are no rules etched in stone, there are a few general -- and in some cases, elementary -- techniques that should be followed, but are often ignored.

Headings

Clearly, headings should be larger than your body text by 1 or 2 font sizes. You may consider bold, but be cognizant of the letter width. Arial Black, for example, may create letters that are too fat for your taste, or that of your clients. When you use colored fonts, be sure the colors contrast well with the background color of the site. Black and dark gray don't contrast well, while black and white (or light gray) can work quite well. Sometimes, even a simple color change can create useful headings.

Also, be sure to cascade your headings. A main heading, for example, would be larger than subheadings. This effect creates a sense of emphasis and flow within the information.

Do not italicize your headings. Italics are meant to underscore particular content, but as the text is a heading and of larger size anyway, italics are redundant and often make the text difficult to read.

Fonts

The default is Times New Roman, which works fine, but many find boring. I've experimented with Arial, Georgia and Verdana, and have found Verdana the most readable of these. This is a personal preference, but fonts should be restricted to the above four to ensure compatibility between all the site's users. If your visitor's browser doesn't support your font choice, their browser will revert to its default.

As browsers have increased support for CSS, whenever possible, use Style Sheets to define your fonts, rather than HTML's <font> tag. Also, be sure to keep your font sizes large enough to be read by visitors of all ages and visual abilities.

Stress Styles

Avoid using all capital letters within text, as this makes it difficult to read and implies that you're shouting at the reader.

To stress words within body text, decide on a single format and stick with it. Some use bold, while others choose italics or like to underline. My personal favorite is italics, but any of these can work well. Be careful when using underline, however, as this format can be mistaken for a link. And make sure you don't overuse these stress styles.

Your entire body text should not be bold. Bold, like italics, should be used to emphasise words, and usually an entire section of copy should speak for itself in regularly styled text. I like to use CSS to space my body text out a little to increase readability -- give it a try.