The web design world is filled with excitement and experience, creativity and
skill. Often, experienced web designers utilize a set of solid, proven
techniques
that others may not notice. Let's take a look at a few of these techniques and
how you can implement them into your own site quickly and easily.
1. Combating Internet spam spiders
Often, a bony, lanky black spider will crawl around your web site, wiggle its
little feet in excitement, gather up your e-mail address and store it near its
pinchers. Then, when it returns to its master, it will religiously add all
gathered
data to a huge nest of e-mail addresses, then used as bait to sell to marketing
firms.
Those little black spiders are software utilities that slither underneath your
page's surface, at underlying HTML code, specifically for a standard formatted
e-mail address (name@domain.com). This can be the most effective method for
gathering
e-mail addresses and needs to be thwarted. There are a number of techniques web
designers can implement to protect against these creepy crawly little
annoyances.
Of the many, here are three that can work quite well.
Use HTML symbols. To disable spiders from grabbing your e-mail address,
some formatting modifications need to be made to fool the software. All
e-mail addresses use the at symbol (@), and spiders are taught
to look for them. HTML symbols are written directly into the HTML code,
but are interpreted by the browser into their actual meaning. The HTML
symbol for the @ sign is @. So, how do we implement something
like
this?
<a href="mailto:name@domain.com">
All we do is replace the @ sign with the HTML symbol that represents it.
This method, however, is sometimes caught by more sophisticated software.
Although most are not quite as advanced, they do exist. How do we surpass
this hurdle? Let's try some Javascript.
Using Javascript, we will simply break up the e-mail address into four
different sections, 1: name, 2: the @ sign, 3: domain, 4: extension. Here
is 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 so your browser will interpret the e-mail link correctly.
There is another problem with using this method...can you figure it out?
Javascript is client-side, which means although spiders might not be able
to interpret your e-mail address, browsers with Javascript capabilities
turned off will not either, meaning your e-mail address will not be
displayed
to the user.
How do we fix this problem? Can we get away with refusing to display any
e-mail address? Yes, we can, but we still must provide a way for the user
to contact us. The solution is a rather simple email form.
The third might be the only full proof method of protecting yourself
against
spam spiders, and that is simply refusing to display your e-mail address.
Instead, if your server supports server-side processing, like Perl, ASP,
Cold Fusion or PHP, simply design a feedback form, and call a server-side
script to process the data behind the scenes. Sorry boys, spiders can't
dig quite that deep.
I am a huge advocate of PHP, but choose whatever language that your host
supports. Please note that if your server does not support any
server-side
programming language, you are out of luck in this regard. Chose between
the two aforementioned methods, and stick with it.
2. Take the typography test
Our web sites are nothing without content, and most content is comprised of
simple text. Many web designers neglect to pay attention to their
topography,
and it shows. Proper topography varies based on where the text is and what
purpose it serves. Although there are no rules etched in stone, there are
a few general techniques that should be followed. Although some of these
tips may seem elementary, I find many of them are not followed.
Headings
Clearly, headings should be larger, by 1 or 2 font sizes, than your body
text. You may consider bold, but be cognizant of the letter width. Arial
Black, for example, may create letters too fat for your taste. When using
colors, be sure the colors contrast well with the background color of
your
site. Black and dark gray do not contrast well, while black and white (or
light gray) 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 to the information.
Do not italicize your headings. Italics are meant to underscore
particular
content, but since 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 think it is
boring. I have experimented with Arial, Georgia and Verdana, and have
found
Verdana the most readable font face available. This is a personal
preference,
but fonts should be restricted to the above four to ensure compatibility
between all users of your web site. If your user's browser does not
support
your font choice, their browser will revert to its default. Since
browsers
have increased support for CSS, or Cascading Style Sheets, whenever
possible,
use CSS to define your fonts, rather than HTML's <font> tag. Also,
be sure to keep your font sizes large enough for visitors of all ages and
eyesights.
Stress Styles
Avoid using all capital letters within your text, as it makes it
difficult
to read and implies you are shouting at the reader.
To stress words within your body text, decide on a format and stick with
it. Some choose bold , while others choose
italics or
underline . My personal favorite is italics, but any of these can work
well. Be careful when using underline, however, as it can be mistaken for
a link. In addition, do not overuse these stress styles.
Entire body text should not be bold. Bold, like italics, is used to
emphasis
words, and usually an entire body 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.
3. Metatags make your site search engine friendly
Metatags are what search engines use to display your site when a user
searches
for keywords within a search engine. Usually, web designers include at least
three metatags, title, description and keywords.
A great thing about metatags is they are easy to implement, directly within
the <head> and </head> tags.
Let's take a look at what the three aforementioned metatags look like.
<META NAME="Title" CONTENT="Title here">
<META NAME="Description" CONTENT="Description here">
<META NAME="Keywords" CONTENT="Keywords here">
You can copy and paste the above three lines of code and place them
within your
HTML source code; simply type in your web site's title, a description (or
summary)
of your web site, and keywords, usually separated by commas. Then, simply
submit
your web site to as many search engines as you can get your hands on, and
watch
your site's hits improve.
4. Always provide a method of contact
Always, always provide some method of communication for your users. Many web
developers will include e-mail links and feedback forms on their site. Doing
this tells your users that you care about what they think of your site,
and also
suggests your encouragement for them to e-mail you are share.
Be sure, then, to check your e-mail often. There is nothing more frustrating
then having to wait a week or more for someone to respond to your e-mail.
Checking
your e-mail ususally takes 2 minutes...do it as much as you can and keep your
web visitors happy.
If your server supports a server-side language, like Perl, ASP, Cold
Fusion or
PHP, either design one or head off to a script repository and perform a
simple
search. Listed below are a few resources offering free scripts:
Hotscripts.com
Matt's Script
Archive
ResourceIndex
(CGI)
ResourceIndex
(PHP)
TotalScripts
5. Design with the little guy in mind
In this day and age, all we think about are the bells and whistles,
especially
when it comes to slick new web designs. Not only are these new
technologies often
misused, it dramatically slows the speed of your site down, especially large
animated .gifs and complex Flash programs.
Although there are more broadband users than ever, never design specifically
for them. There are still 28.8 users out there, and designing your site
so waiting
time exceeds 10 seconds will send those users to a competitor's site.
Web designers need to keep their sites simple. Far too many, especially newer
web designers, have fixated their eyes upon the gold when they have not
yet mastered
the silver. Only use graphics where you need them. Never use .gif animations
unless absolutely, unavoidably necessary, which is rare. Additionally, do not
use large, intricate backgrounds on your pages, as they hinder the
readability
of your text and increase load time.
Design with the end user in mind. Assume the user is connected through a 28.8
modem with a 15" monitor at 800x600 resolution using Netscape. Trust me,
those
visitors will love you (and support you) for it.
Wrapping it up
We have looked at 5 tips every designer needs to keep in mind when doing the
work they love. Although communication is e ssential, steps can be taken
to decrease
the amount of spam in your little brown mailbox.
Designers also must make sure their topography is easily readable and
logically
designed. Moreover, search engine friendly sites are often popular sites, and
those who design for the little guy greatly improve compatibility with
all potential
users.
Using these tips will lift your site to another level and ensure every
visitor
gets the content they are looking for.
About the Author, Steve
Adcock :
From http://www.stevesdomain.net
Article courtesy of the author and websitegoodies.com