Download Improve your bottom line with a well-tuned

January 2007 Volume 8 Number 1
Inside
™
Web Design
Techniques & trends for today’s web design professional
Web Theory in Practice
Improve your bottom line with a well-tuned
eCommerce site
by Ron Wilder
˛
Sooner or later you’ll be confronted with the question, “Why haven’t
we set up shop on the Internet?” Unfortunately, going from a simple
website to one that allows you to take orders and accept payments is no
simple task. We’ll show you what tools you’ll need to easily create functional
eCommerce storefronts and improve your company’s profits.
To help you through the process of creating an eCommerce storefront, we’ll:
• Explain the eCommerce process and what you’ll need to begin
establishing the infrastructure for the site.
• Show you what to evaluate for when comparing eCommerce services.
• Examine the mechanics of eCommerce, including handling monetary
transactions.
In this issue
If it hasn’t happened by now, it will
soon. Trust us. Some bean counter at
your company will look at the money
being spent on serving up your website,
as well as your whopping salary, and
run into your boss’s office exclaiming
that you must somehow determine
how to make your company’s website
pay for itself. Your boss and the bean
counter will then put their little brains
together and decide that you’ll just
have to sell your company’s goods or
services online.
Take control
of directory
browsing
Improve user experience
while staying secure
Of course, they have no idea what
you’ll need to set up an eCommerce
site, or even how much it will cost. They
just want one. It makes sense that if the
web costs them money, they should be
able to recoup those costs by selling
stuff.
Go with the flow
So what are you going to tell them,
other than the obvious well-planned
comments that might jeopardize your
job? Well, for starters, you can tell them
that eCommerce sites can be expensive
to set up. They can be even more
expensive than any goods or services
offered on your site. Since that probably
won’t stop them, you might as well be
prepared to run with their ideas.
eCommerce 101
Before you set up an eCommerce
site, it’s important to understand the
process. After all, it isn’t as easy as most
of the stuff you do in simple HTML.
First, a shopper comes to your site
and browses through the pages for an
item to purchase. Once she decides on
Need some
validation?
Find the
broken link
Ensure top quality
code with these
tools
Troubleshoot faster
by understanding
your URLs
something to buy, she fills out a form
and that information gets transferred
to a secure server, where the data is
encrypted. The data is then sent to
a payment process center where the
credit card information is verified,
and the funds are removed from the
customer’s account and placed into the
merchant’s account. The information
then travels back through the secure
server to the storefront, where the
customer is given the status of the
order. Now, let’s look at what’s involved
in getting an eCommerce solution up
and running on your site.
eCommerce packages allow you to
import the information directly from a
spreadsheet.
Start at square one
If you’re really serious about
eCommerce, you’ll need some type
of electronic commerce software
that allows you to create catalogs, a
shopping cart, and payment functions.
Granted, it’s possible to write your
own solutions, but it’s also possible to
remove your ear from your head with
a good healthy pull. Suffice it to say
that you should attempt to avoid both
situations.
Rather than spend a ton of money
on custom applications, chances are
you’ll find an off-the-shelf eCommerce
package that will do just fine. Table A
lists a small sampling of companies that
market eCommerce packages. Some
of these companies offer software
solutions that you run on your server,
Once you’ve established that you
want to include an eCommerce
option on your website, you should
begin establishing the infrastructure.
Obviously, you must first make sure
you have all the information for each
of your products. This includes price,
item description, item number, and
shipping cost. Also, be sure you have
a photo of each of the products that’s
suitable for the web (no one’s going to
want to browse through your online
shop if each graphic takes minutes to
download). For planning purposes, it’s
best to enter this information into a
spreadsheet. This also makes it easier
to set up your catalog later, since many
Take the easy way out: Before you choose
an eCommerce solution, it’s important to
determine how many items you’ll be selling.
Often, if you’re only looking for someplace
to hawk a few items, you’ll find the folks at
Yahoo! or eBay have pretty good deals for
building small online stores. And, since the
software’s so simple to master, it won’t take
you but a couple of hours to completely set
up a small storefront.
Find the right eCommerce
package
Table A: There are a number of eCommerce solutions available to you.
2
Product name
URL
5click
www.5click.com
Actinic
www.actinic.com
Active Commerce
www.activec.com
CustomCart
www.customcart.com
ECMerchant
www.ecware.com
FreeMerchant
www.freemerchant.com
MerchandiZer
www.merchandizer.com
Elastic Path
www.elasticpath.com
MonsterCommerce
www.monstercommerce.com
Mercantec
www.mercantec.com
StoreFront
www.storefront.net
I n s i d e We b D e s i g n
while others provide you with a simple,
web-based interface to set up your site.
Both types of solutions work equally
well, though the software solutions
usually take a little less time to set up.
Carefully review
eCommerce packages
As eCommerce has picked up in
popularity, so too has the number of
eCommerce packages available. And,
while you’ll find most of them suitable
for general purposes, you should take
a close look at the software you choose
before you commit to it. Here are some
variables to consider before you make
your own purchase:
• Easy product entry/updates. Most
packages worth their salt allow
you to import product information
via a spreadsheet. That way you
don’t spend hours rekeying the
information. Also, make sure the
software allows for instant updating
of current products.
• Good photo management. The
number of photos contained on
your site will grow as you add new
products to your site. It’s important
that the software you use for
eCommerce makes managing the
images trouble-free.
• Support for associate programs.
Sort of like word of mouth for cash,
associate programs allow you to
monetarily reward folks who refer
your site to others. But without
software support, this feature can be
a big headache to administer.
• Multiple payment methods. At the
very least, your eCommerce system
should accept the major credit and
debit cards. The best systems also
allow you to pay with purchase
orders from established accounts as
well as international methods, such
as SmartCards.
• Automatic authorization. Unless
you’re running a low-volume site
where manual processing of credit
Call 1-800-223-8720 to subscribe
it. Remember that they can always
go somewhere else to make their
purchase if they can’t find yours
quickly enough.
cards is acceptable, you’ll want an
automatic method so there are no
bottlenecks in the order process
while you’re verifying information.
• Variations on products. Make sure
the software allows the customer
to select the various product
options, like color, size, and model.
Otherwise, you’ll end up with more
pages than you really need.
• Automatic calculation of shipping
fees and discounts. Surprisingly,
many packages only allow you to
charge a given price for the product
and shipping. You’ll be better served
with a software package that allows
you to discount the cost of the
product and the varied amounts
for shipping. It’s also important to
be able to charge sales tax for the
different states if applicable.
• International currencies. If you
plan to ship outside of the United
States, make sure the software
accommodates the appropriate
currency and address information.
Otherwise, you might be missing out
on a large market.
• Security. You need to make
shoppers feel secure as they browse
your site. After all, you wouldn’t buy
an expensive stereo from the back
of some beat-up van, would you?
Okay, maybe that’s a bad example.
But on the web you want shoppers
to feel safe sending their credit card
information over the Internet. To
do so, be sure the software you use
supports the industry standard
SSL (Secure Socket Layer)
protocol. Also, be sure to
publicize how secure
your shopping
software is in
several places on
the site.
• Sales support. If someone wants
to buy a widget from you, chances
are he might also be interested in
purchasing a widget AC adapter
or maybe even a widget filter. The
software should allow you to crosspromote products and suggest
add-on products. If you need a good
example of cross-selling, just make
a purchase from Amazon.com. As
you can see from the sale shown
in Figure A, they’re very good at
making purchase suggestions, even
on the oddest of purchases.
• Order tracking. Once viewers
become customers, you’ll want to
keep them informed. Customers feel
more secure when they can track
their purchases while in transit. If
your software allows this feature,
your customers will feel better and
you’ll decrease the number of calls
your customer support staff has to
take.
Understand the money
flow
In the past, setting up an eCommerce
site meant setting up special accounts
to verify, charge, and transfer the
money from the buyer’s credit card to
your account—obviously an issue of
great importance. Fortunately, all of the
major eCommerce packages take care
of this for you by setting up an account
with a merchant service provider (MSP)
that accepts Internet payments. This
provider can be a typical bank or an
independent service organization
(ISO). A bank, while viewed as more
secure and reliable, can be a bit more
selective about whom they open an
MSP account with. Since ISOs lack the
government regulation of banks, they
can accept more risk and therefore
are more flexible about whom they
work with. But as with everything
else in the financial world, risk comes
at a monetary premium—you’ll
undoubtedly end up paying a higher
per transaction fee with ISOs than
with standard banks. Check with the
eCommerce provider to see if you have
a choice between agencies—you might
even be able to use your own bank.
A
• Product search.
You want to make
sure people looking
for your product can find
w w w. e l i j o u r n a l s . co m
J a n u a r y 20 07
3
Move the money from
their pocket to yours
Once you have an account, you
need to be able to get funds into it.
To do so, you’ll need a secure form
for the customer to fill out. A secure
form is typically an HTML form that’s
encrypted using Secure Sockets Layer
protocol (SSL). Though all eCommerce
packages worth their salt will run
through SSL, you want to determine
whether it’s included in the cost of the
package or an extra change. They’ll
typically charge you a nominal yearly
fee for the key and another yearly fee
for the VeriSign certificate itself.
You can bank on it
Finally, you’ll need a processing system
to authorize and post the transactions.
This service allows you to pass the
information from the secure server to
both the customer’s bank and your
own. The two largest names in the
business are Authorize.Net (www
.authorize.net) and CyberCash (www
.cybercash.com). Before you sign up
with either of these services, make sure
the solution works with your MSP and
that the service isn’t already bundled
with the MSP package.
Establish trust
Once you have each of the proper
elements in place to set up your
storefront, all you need is several days
to put everything together and see if
it works properly. As you’re reviewing
the site, make sure it gives the person
the confidence to purchase from you
online. Just like a typical retail store,
customers usually shop where they feel
Table B: There are a number of sites to review for good eCommerce information.
Reference site
URL
eCommerce-guide
http://ecommerce.internet.com
EMarketer
www.emarketer.com
NetBusiness
www.techweb.com/netbiz
TRUSTe
www.truste.org
comfortable. Remember that unless
your company specializes in socks
made from the virgin wool of blue
yaks, chances are the customer can go
elsewhere to purchase the items. You’ll
want to give him a compelling reason
to purchase from you.
Also, make it as easy as possible for
the shopper to become a customer.
Make sure she can order an item with
a minimum number of mouse clicks.
Fewer clicks equal more customers in
the long run.
Finally, remember that the customer
is sharing valuable information with
you and treat it accordingly.
Other eCommerce
resources
Adding an eCommerce feature to your
site isn’t necessarily something you
should rush right into—especially
after reading one article on how to
sell your wares on the web. Before
you make the leap, and possibly lose
your shirt, we suggest you review the
information on the sites listed in Table
B. You’ll find them extremely helpful
resources, both now and as the bucks
continue to roll in.
Quick Tips
Find the web tools you need to enhance
your web presence
by Michelle Dick
In our ongoing effort to help you find the tools you need to simplify the website creation process, we stumbled across
some web building tools worth checking out.
Caspio
Caspio Bridge eliminates the need for a strong programming background to build complicated web forms, data
searches, reports and web applications. It lets you create web database applications with the use of step-by-step, pointand-click wizards. (www.caspio.com)
Newgie, LLC
Newgie has a free service that makes it easy to import updated news headlines into websites. When the Newgie
JavaScript code is placed on a website, the latest headline news is automatically streamed onto the website. You can
choose from a variety of topics. (www.newgie.com)
4
I n s i d e We b D e s i g n
Call 1-800-223-8720 to subscribe
Functionality Matters
Create a seamless web experience by
controlling directory browsing
by Mark Ray
˛
Web servers typically allow directory browsing, but it can be
problematic. If no default page exists, the site’s directory appears
instead, which might expose your site to hackers. Fortunately, by
implementing a couple of simple techniques, you can prevent directory
browsing and give visitors a more seamless web experience.
To enable you to control directory browsing on your site, we’ll:
• Disable directory browsing across a site with a simple change to the
.htaccess file.
• Create redirect pages to send visitors to a more appropriate location.
• Modify the appearance of a directory’s contents when allowing directory
browsing is appropriate.
As webmasters, one of our overarching
goals is to create a sense of continuity.
When someone visits our website, we
want them to feel that they’re visiting a
unified location in space, even though
they’re really just requesting a series
of separate HTML documents, and the
graphics associated with them, from a
web server.
Features like directory browsing help
because they simplify the rather arcane
URLs users have to type. But directory
browsing can also hurt. Nothing spoils
the unified-site illusion more than
accidentally seeing a directory listing
like the one in Figure A.
A directory page like this appears
when the web server doesn’t find a
default page in the requested folder.
The web browser actually generates
the directory page on the fly based on
the folder’s current contents.
panels. If you can’t find that setting,
contact your hosting company for more
information.
Another option is to add the following instruction to your .htaccess file:
Options -Indexes
The .htaccess file is a root-level
configuration file found on UNIX
servers. Once you’ve added that
instruction, users who try to surf to a
directory will instead see a page like
the one shown in Figure B.
You—or your hosting company—
can easily disable directory browsing.
When you do, this message appears
instead of a directory listing like the
one in Figure A.
Create redirect pages
There’s nothing wrong with disabling
directory browsing. However, stark
white pages labeled “Forbidden” don’t
A
Disable directory
browsing across your site
If you never want directory pages like
the one shown in Figure A to appear,
you should disable directory browsing
across your site. Some hosting
companies include an option to disable
directory browsing on their control
w w w. e l i j o u r n a l s . co m
J a n u a r y 20 07
5
exactly enhance your site’s user-friendly
image. That’s why many webmasters
opt for an alternate strategy: creating
redirect pages for those folders that
don’t already contain an index page.
To create a redirect page in a folder:
1. Create a new HTML page and save it
in that folder with the same name as
your site’s home page.
2. Switch to HTML/Code mode and add
the following code before the page’s
</head> tag:
<meta http-equiv=”refresh”
content=”0; URL=../index.htm”>
B
3. After URL=, include the relative URL
of the page to which users should
be redirected. In our example, that
page would be index.htm in the
parent folder.
4. Switch to Normal/Design mode
and add a message explaining
the redirect and a hyperlink to the
target page. Some users will see
this message before the redirect
happens. You can format this page
with themes and any other content
you like, to maintain a consistent
look.
5. Save the page, publish the site, and
preview the page in the browser. In a
split second, the target page should
replace it.
In our example, we redirect users to
the parent folder’s index page. If the
current folder were the images folder
(or another first-level folder), the
redirect would take them to the site’s
home page. You could also redirect
users to your custom 404 page—the
page that appears when a user enters
an invalid URL.
Note: If you aren’t sure how to format a relative URL, see the Reader Forum “Understand
the difference between absolute and relative
URLs,” in this issue.
It goes without saying that you
must add a redirect page to every
folder on your site, although you can
copy and paste the first one to speed
up the process. If your site is large
and complex, you may be better off
disabling directory browsing globally.
C
6
I n s i d e We b D e s i g n
Call 1-800-223-8720 to subscribe
Take advantage of
directory browsing
Although allowing directory browsing
isn’t usually a good idea, there are
times when it’s the best approach
to take. If your site includes an
extensive collection of downloadable
documents—clip art, class notes, or
whatever—you can avoid the tedium
of creating hundreds of hyperlinks
by simply allowing users to browse
the directories that contain all those
documents.
Customize your
directory pages
Most servers even allow you to
customize the appearance of the
directory pages they generate, a
feature called fancy indexing. Take a
look at the page shown in Figure C,
for example. This page combines the
automation of a directory listing with
the flexibility of a normal web page. It
includes an ordinary directory listing at
the top, followed by what appears to be
an HTML page—hyperlinks, formatted
text, images, and all.
To create enhanced directory pages:
1. Enable fancy indexing. You may be
able to do this on your site’s control
panel. Otherwise, contact your
hosting company.
2. Create a file called HEADER.html
and save it in the target directory.
This file replaces the “Index of
/directory” heading shown at the
top of Figure A.
3. Create a file called README.html
and save it in the target directory.
This file will appear at the end of
the directory listing, as shown in
Figure C.
Fancy indexing is a powerful
capability. It lets you give users
access to directories of downloadable
documents while also including
instructions, copyright notices, and
other important text. By taking
advantage of fancy indexing in some
folders and adding redirects to other
folders, you can reduce your workload
and improve your users’ experience
with your site.
Problems and Solutions
Stop bad code in its tracks with these top
web validation tools
by Jonathan Rabson
˛
Where validation tools come into play is in helping ensure that you don’t
write nonstandard code out of ignorance—which is really two kinds
of ignorance. One is not knowing that a certain sort of syntax is incorrect or
nonstandard and the other is simply not realizing that line 257 in your web
page has that syntax, which you’d know to be incorrect if only someone or
something brought it to your attention. Validation tools do just that.
To ensure quality code on your web pages, we’ll:
• Start out by exploring some of the main reasons why you would want to
use a validation tool.
• Look at what sites offer in terms of validation, and also supplement this
information with details on other useful validation sites.
• Run through some of the main categories of validators, starting with
HTML/XHTML validators, and then moving on to CSS validators.
When you’re working under tough
time constraints, sometimes it can
be difficult to catch instances of
nonstandard code. Unfortunately,
this can make it difficult to get your
web page to perform reliably in lots
w w w. e l i j o u r n a l s . co m
of different browsers, past, present,
and future. But don’t worry, you aren’t
alone. Indeed, we all write nonstandard
code, and sometimes we have to.
After all, modern browsers typically
include some features that aren’t
yet standardized. The real problem,
however, is when, after you’ve worked
hard writing pages and pages of code
till past midnight, you aren’t sure
anymore if everything you’ve written is
standard or even correct.
J a n u a r y 20 07
7
That’s where automatic validation
tools (commonly called validators) can
help. Certainly, you could roam the
web and find dozens of such tools,
including many free utilities and some
commercial products. We’ll make your
task easier by highlighting some of the
most useful tools out there, and giving
you a basic idea of what to expect
from them.
Four key reasons to use
validators
Despite the abundance of tools
available to check your web code, you
may wonder why this is even important
when you can just check whether your
page looks right in a browser. Here are
four reasons why relying entirely on
the trial and error approach may not be
such a great idea:
• If you check your code mainly on
the browsers that most people will
be using (which makes sense), that
means you’ll view your pages with
popular browsers such as Microsoft
Internet Explorer 6. These browsers
tend to be more lenient when
encountering mistakes in HTML,
CSS, and JavaScript than other
browsers (particularly older ones),
so your page may look right even
when it isn’t.
• Once you do test on a wider array
of browsers, the iterative process of
testing and fixing will probably be
very time-consuming if your code
has errors and nonstandard tags.
• If the browser overlooks certain
HTML errors, it will probably go
into quirks mode. That means the
browser essentially says, “Okay,
you’re going to write nonstandard
code? Fine. Let’s throw standards
out the window. I’m free to have my
own idiosyncratic behavior too.” As a
result, various quirky differences may
arise between how your page looks
in different browsers.
8
I n s i d e We b D e s i g n
• The more your code conforms to
standards, the more likely it will
work in future browsers. Browser
manufacturers have been notorious
for removing certain proprietary
behavior from future versions of
their browsers. Just think about
Netscape’s layers debacle.
Big players in the
validation field
Out of the many validation websites
available, a few top sites are probably
the most logical places to start. These
include the QA Toolbox (www.w3.org
/QA/Tools/) from the World Wide Web
Consortium (W3C), the Web Authoring
Tools (www.htmlhelp.org/tools/) from
the Web Design Group (WDG), and the
Site Valet Developer Tools (http://valet
.htmlhelp.com/tools.html), which is
associated with the WDG site. These
websites are full of links to just about
every kind of validator and checker
you’re liable to need.
HTML/XHTML validators
Most online HTML/XHTML validators
give you the option of specifying the
URL of your live web page, or testing
code either by pasting it into a text box
or uploading a file from your computer.
Another common feature of validators
is to give you information not only
about obvious ones (e.g., forgetting
to close a tag) but also about more
subtle errors, such as failing to include
an alt attribute for an <img> tag. And
many validators give you warnings
about code on your page that may
not be technically wrong but still
warrants attention, such as the use of
nonstandard characters. While in some
cases, you may decide to leave certain
nonstandard elements on your page
alone (e.g., curly quotes), reading these
warnings can help you to make more
knowledgeable web decisions.
One important distinction among
the available validators is that some
of them perform a thorough check
against the standards, whereas others
provide more subjective information
using parsers that aren’t standardsbased. Tools in the second category are
sometimes called linters or lints. They’re
useful for providing certain coding
recommendations, but they may miss
certain errors or falsely report an error
that isn’t there.
So, let’s start out by looking at a few
standards-based validators. The first
two are very well-known; the next two
are commercial (or semi-commercial)
products you may also want to
consider.
W3C Markup
Validation Service
http://validator.w3.org/
Naturally, the first place you’d want to
look for a validator is the W3C website.
Since the W3C is the group that defines
the standards for HTML, XHTML, CSS,
and other web-related standards, this
is clearly a good starting point. If your
code passes the test, you’re allowed
to display a special logo on your page.
Another important advantage to this
tool is that it’s continually updated with
bug fixes and other changes to reflect
the most up-to-date standards.
One problem you’re liable to run
into, however, is that when uploading
local files, you’re almost sure to receive
the message No Character Encoding
Found! Falling back to UTF-8. Typically,
you set up character encoding through
the web server, but when you upload
a file, the validator may not know if
you’ve set this up. Although setting
character encoding through the web
server is the preferred approach, you
can also force your page to work by
inserting the appropriate meta tag into
the head section, like so:
<meta http-equiv=”content-type”
content=”text/html; charset=iso8859-1”>
Another thing to keep in mind when
using this site is that it contains a lot
Call 1-800-223-8720 to subscribe
more features than you may notice
at first. For instance, you can access a
number of useful options by clicking on
the Extended Interface or Extended File
Upload links. In addition, while most
people think they need to be online
to use the validator, you can actually
download the Perl code for free to your
own computer. The page to do this may
be a little hard to find if you’ve only
bookmarked the Markup Validation
Service page (it’s listed in the menu
under Docs, but you might not think to
look there). Simply point your browser
to http://validator.w3.org/source/, and
you can get the code.
WDG HTML Validator
www.htmlhelp.org/tools/validator/
This open source validator is very
similar to the W3C validator, but it
has additional features to facilitate
checking your code. For example, it lets
you validate several URLs at once, and
it also lets you type or paste your code
into a text box at www.htmlhelp
.org/tools/validator/direct.html. As
you can see from Figure A, this page
starts out with the required elements,
so you can easily experiment without
having to type in the <html>, <body>,
and other tags found in every HTML
document. You can also copy and paste
the contents of this text box to create
your own handy template for web
pages. Another feature of this site is its
warnings, which tell you about certain
coding problems that may not show up
in a plain syntax check. Although most,
if not all, of these warnings have been
incorporated into the W3C site, you
may appreciate the check box WDG
provides to distinguish whether you
want to see them. Finally, as with the
W3C site, this site lets you download
the source code, so you can run it from
your machine, see how the code works,
or even incorporate it into your own
open source program.
w w w. e l i j o u r n a l s . co m
Page Valet
http://valet.htmlhelp.com/page/
Page Valet is basically an offshoot of
the WDG HTML validator and XML
validator wrapped into one, and it’s a
combination of a free and commercial
service. Certain features require you
to pay a subscription fee to Site Valet.
However, you can still use the basic
validator online for free, or download a
simplified version at www.webthing
.com/software/validator-lite/.
A Real Validator
http://arealvalidator.com/
If you prefer the feel of desktop
programs, you might consider the
commercial A Real Validator software,
which you can try free for 30 days. Of
course, you may wonder why you’d
want to pay for a validator when such
high-quality ones are available for free.
Although A Real Validator’s claim of
superior accuracy doesn’t distinguish
it from the other validitors we’ve
listed, its real advantage is that you
get the richness of a desktop program,
Automate the fix
When you do catch sloppy or
nonstandard code in your web
page, you’ve really only solved half
the problem. Now, you have to fix
the code! If it’s a matter of a few
oversights, you can probably do
your fixing by hand. However, in
some cases, you may want a tool that
not only checks your code, but also
fixes it automatically, such as, Tidy
or HTMLTidy. HTMLTidy is available
from the W3.org website (www
.w3.org/People/Raggett/tidy/).
There’s also an open source project
on Sourceforge.net (http://tidy
.sourceforge.net/) that allows you to
integrate Tidy with your applications.
With these tools, you’ll be able to
both catch and fix quirky code.
complete with a help utility and other
user-friendly features. As of this writing,
the cost to register your copy of A Real
Validator is $25.
A
J a n u a r y 20 07
9
CSS validators
One of the problems with many HTML/
XHMTL validators is that they won’t tell
you about any faulty cascading styles
sheets (CSS) code on your page. For
instance, none of the three validators
we’ve discussed check the CSS, unless
you go to a separate page. Indeed, the
A Real Validator package apparently
doesn’t come with any sort of CSS
module at all. With the prevalence
of CSS in web pages today, this can
be a serious limitation. To test that
part of your code, just navigate to the
following pages on the W3C and Web
Design Group sites.
W3C CSS Validation Service
WDG CSSCheck
http://jigsaw.w3.org/css-validator
/validator-uri.html
W3C’s CSS validator is just like the W3C
Markup Validation Service, except, of
course, that it focuses on the CSS. You
can use it to check CSS on your web
page as well as external CSS files. Unlike
the validation service for HTML/XHTML,
the CSS checker allows you to type
or paste your CSS code directly into
a text box. In addition, there’s a link
back to the Markup Validation Service.
(Unfortunately, there’s no easy-to-find
link back.)
http://www.htmlhelp.org/tools
/csscheck/
CSSCheck is the Web Design Group’s
validator for CSS. You’ll also find on this
page links to CSS documentation that’s
a little easier to read through than
documentation on the W3C site.
A few grains of salt
Of course, as we mentioned, it’s
possible to go overboard with how
you interpret validator output. Simply
put, a lot of useful features that you
might want in your page (or that a
client may demand) simply may not be
standard.
Reader Forum
Understand the difference between absolute and
relative URLs
by Mark Ray
I don’t know who it was that said, “A little knowledge is a dangerous thing,” but he
could have been talking about me. I decided it would be fun to include a JavaScript
thing on my home page to display a random photo each time somebody hits the
page. I found just the right script on the web, but when I tried it out on my site, all
I saw was those red Xs that indicate that a picture is missing. The instructions said
something about including the pictures’ absolute URLs, but I don’t understand what
that means. Can you clarify?
Sure thing. First, however, it’s probably
appropriate to start by examining
the anatomy of a URL, or Universal
Resource Locator, which is the unique
address of a document or other
resource on the internet. Depending
on how you parse it, a URL includes
three pieces of information: the service
or protocol, the domain name (or IP
address), and the path, which includes
the document’s directory and filename.
Here, for example, is the URL for an
image that appears on the Eli Journals
website:
http://www.elijournals.com/images
/Fax.gif
The service is http://, which designates
a web server (as opposed, for example,
to an FTP server), the domain name is
www.elijournals.com, and the path is
images/Fax.gif. That means that
Fax.gif is stored in the images folder
in the site’s root directory. This URL
is called an absolute URL, because it
includes all three elements: service,
domain name, and path.
Of course, if you were creating a
hyperlink to that image from a page
on the Eli Journals site, it would seem
redundant to include the domain name.
That’s where the relative URL comes in.
It omits the service and domain name
and gives the document’s location
relative to the current document’s
location.
Let’s say that the target document
is in the same directory as the current
document. In that case, the relative
URL would actually just be the target
document’s filename, as shown in this
<img> tag:
<img border=”0” src=”logo.gif”
width=”19” height=”16”>
If the target document were one
level down (in a subdirectory of the
current directory), the URL would look
like this:
images/logo.gif
10
I n s i d e We b D e s i g n
Call 1-800-223-8720 to subscribe
If the target document were one level
above the current document (in the
current directory’s parent directory),
you would use this relative URL:
../logo.gif
Finally, if you had to go up one level
and then go into another directory to
reach the target document, the URL
would look like this:
../images/logo.gif
When you create hyperlinks in
most programs automatically use
relative URLs for internal hyperlinks
and absolute URLs for links to other
sites. You’re almost certainly seeing
the missing-image icon because you
specified the wrong URLs for your
pictures.
The script probably loads the
pictures into an array, so look for some
code like this near the beginning of the
script:
var RotatingImages = new Array(3);
RotatingImages[0] = “images/street_
scene.jpg”;
RotatingImages[1] = “images/snow_
shot.jpg”;
RotatingImages[2] = “images/
nightscape.jpg”;
Check each of the relative URLs you
find there to be sure the path to the
image is correct, or simply convert each
to an absolute URL that looks like our
Eli Journals URL above.
Eliminate spam by using smart web design practices
By Ron Wilder
As a web designer, I’ve accepted the fact that I’ll receive more spam mail than the
average person, since my email address appears in so many places on the site.
However, is there any way to reduce the chances of my email being grabbed up by an
unscrupulous advertiser without limiting my access to the viewers of my website? I
already have all the standard spam blockers set up in Microsoft Outlook Express.
Fortunately, since you’re in charge
of both the domain and the design,
there are a number of ways you can
prevent receiving large chunks of the
gelatinous meat product in your email
box. Here are a few tips you should
consider when setting up your sites.
Inside
™
Get unlimited email accounts
Most web hosting services provide
an option to allow for unlimited email
from that domain. This option is a
great tool in managing spam. The key
is to set up the mail so that anything
incorrectly addressed to the domain
DOWNLOAD:
http://download.elijournals.com/webdesign/200701
/spam.zip
is forwarded to your email address.
Then, when you need to use your email
address to register for a web service,
use an address like nameoftheservice@
yourdomain.com. Since there wouldn’t
be an account for that address, it
would automatically be routed to
your standard email address. When
Web Design
Inside Web Design (ISSN 1527-0270) is published monthly by Eli Journals, Inc., a
subsidiary of Eli Research, 2222 Sedwick Road, Durham, NC 27713.
Customer Relations & Subscription Services
New Hill Services
Dept. 1380
Denver, CO 80291-1380
Email: [email protected]
U.S. toll-free . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (800) 223-8720
Outside U.S. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (239) 280-2383
Fax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (800) 508-2592
Editorial
Senior Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Michelle Dick
Email: [email protected]
Toll-free: (866) 614-8702
Contributing Editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Jonathan Rabson
Mark Ray
Ron Wilder
Graphic Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pam Nichols
Managing Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Stephen Dow
Editorial Director . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Erin Lang Bonin, PhD
w w w. e l i j o u r n a l s . co m
Publishing & Sales
Back Issues
Publisher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Craig Scott
(919) 281-0474, ext. 324
To order a back issue, call Customer Service at (800) 874-9180. You can pay with
MasterCard, VISA, Discover, or American Express.
Bulk Sales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pam Snyder
(877) 853-9938
Copyright
Customer Service Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Holly Smith
Postmaster
Postmaster: Send address changes to
Inside Web Design
P.O. Box 413006
Naples, FL 34101-3006
Price
Domestic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . $187/yr.
Outside the U.S. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . $197/yr.
GST #: 889037958. PM #: 40031405.
© 2007 Eli Journals. This work is an independently produced publication of Eli Research,
the Content of which is the property of Eli Research or its affiliates or third-party licensors
and which is protected by copyright law in the United States and elsewhere. The right to
copy and publish the Content is reserved, even for Content made available for free, such
as sample articles, tips, and graphics, none of which may be copied in whole or in part
or further distributed in any form or medium without the express written permission of Eli
Research. Requests for permission to copy or republish any Content may be directed to
Mark Lydard (800) 508-1316 or via email at [email protected].
Inside Web Design is a trademark of Eli Journals. All product names or services identified throughout this journal are trademarks or registered trademarks of their respective
companies.
Have information on copyright violations? Call us! We’ll share 25% of the net proceeds
of all awards related to copyright infringement that you bring to our attention. Direct your
con-fidential inquiry to Mark Lydard (800) 508-1316.
Printed in the U.S.A.
J a n u a r y 20 07
11
2060
Please include account number from label with any correspondence.
you begin seeing email addressed to
[email protected]
you’ll not only know that the email
address has been nabbed up by those
pesky marketers, but you’ll also know
where they got the address from. You
can then set up a rule in your mail
client to remove the mail before it ever
begins to bloat your mailbox.
Be careful registering
Though you might not really think
about security being a problem
when you register a domain, you
need to remember that the contact
information, including your email
address, is available to anyone who
wants it. That’s why you get emails
with your domain name in the
subject, offering you great deals on
body modification, questionable
pharmaceuticals, and solutions for your
apparent loneliness. When you register
a site, use the technique outlined
above, or use a portable email address
like MSN, Hotmail, or Yahoo. We like to
set up an account using the domain
12
name as the addressee, so for instance,
the Hotmail account that we’d use to
register the domain Eli Journals would
be [email protected]. Of course,
you’ll occasionally need to visit the site
and delete the mail, but that’s an easy
task that you can leave to do while
you’re chatting on the phone with
your mom (and she’ll appreciate the
occasional phone call).
Keep your address
off your website
We’re constantly preaching to always
include a contact page for your site
where individuals can ask questions
about the company or compliment
you on your particular sense of style
in designing the site. And that means
that you have to include an address for
the mail.
The problem is, search engines
designed for spammers visit sites
and automatically extract any email
addresses they consider valid, whether
the addresses are simply in mailto
format or in web forms. But you
can outthink these rascally address
harvesters. (After all, they’re really
nothing more than a few lines of code.)
Just use a little code of your own. The
script shown in Listing A will display
the message Contact Us on the web
page but the harvesting software
won’t recognize the address, since
it’s combined from different variable
names on the fly. (And, of course,
you can download the code from the
address listed above.) Just make the
necessary changes to the script and
include it in your GoLive Library or
Dreamweaver snippets.
Mail with forms
If you use forms on your site for
email, you’ll need to modify the script
shown in Listing A a bit. Just use the
document.write function to form the
input information, as shown in Listing
B. Again, once you made the necessary
changes, you can save this script
for use within your Web authoring
application.
Listing A: The following code prevents robots from
Listing B: This script allows you to hide email
harvesting your email address from the web page.
addresses when you’re using forms.
<script language=javascript>
<!-var theuser = “yourname”;
var thehost = “yourdomain.com”;
var themessage = “Contact Us!”;
document.write(“<a href=” + “mail” + “to:” + theuser +
“@” + thehost + “>” + themessage + “</a>”)
//-->
</script>
<script language=javascript>
<!-var theuser = “yourname”;
var thehost = “yourdomain.com”;
var themessage = thesuer + “@” + thehost;
document.write(“<input type=hidden name=email
value=” +theuser + “@” + thehost” + “>”;
document.write(theuser + “@” + thehost);
//-->
</script>
I n s i d e We b D e s i g n
Call 1-800-223-8720 to subscribe