SITE DESIGN AND THE THREE CLICKS RULE
Before you finalize your site map, let's think in more detail about how a good
direct response website should be organized.
Our first rule forbids the use of external links. Therefore, you can eliminate any
links pages, sidebars with site affiliates, advertising banners, or such things from
your site map. Although selling advertising space on your website may seem like
a good idea for building revenue, it distracts your viewers from your central goal:
selling the product. So, keep it simple, and leave the advertising off.
Our second rule dictates that content on your site should be limited to only that
which is essential for persuading people to buy your product. The policy that
goes along with this rule is to consolidate most of your site's information onto as
few pages as possible. This reduces the chance that viewers will come to your
page, click a link that takes them to another page on your site about your
product's features, and then forget to come back to your main page to actually
buy the product. Of course, there are situations where you'll want to divide your
content among several smaller web pages on your site as opposed to putting
everything in one massive index page--if you have a wide variety of technical
data about your product, as well as photos and testimonials, you run the risk of
boring your viewer long before he gets to the crucial "Buy" link.
So, follow this guideline: if your viewers don't have to scroll down more than one
or two times in order to read all of your product information, put everything on a
single index page. If you have to scroll down too often to read all of your site
content, then split the content into separate pages--but make use of pop-up
windows in order to keep your main page open, or make sure that there's a link
to your actual "Buy" page in a prominent place on every one of your sub-pages.
Above all, remember our third rule: keep it simple, stupid. One easy guideline for
doing this is to follow the three-clicks rule:
• Upon arriving at your site, your viewers should never have to click more than
three links in order to buy your product.
One way to implement the three-clicks rule might be this: your viewers start at
an index page that describes the product information. They then click a "next"
link to take them to a page about prices and ordering information. They then
click a link to start ordering the product. That's two clicks in total. Another way
to implement the three-clicks rule: your viewers start at an index page that talks
in general terms about the product. They click on one of your subpages
(features, testimonials, pricing, etc.-whatever best suits your specific product) to
learn more about the product. They then click on a "Buy Now" button to learn
about pricing, and then they click on a button to begin ordering the product.
Three clicks. There are any number of other possible configurations--experiment
with your site map until you come up with something that gets across all your
information while maintaining this same simplicity. Your customers will thank
you-and you'll thank yourself when you see the sales figures.
COMMERCE SYSTEM
The one site feature that you're unlikely to be able to provide on your own is a
working system for buying products, sending shipping orders, and transferring
customer's payments to your account. Systems like this are extremely
complicated to code, difficult to integrate into a page, and above all risky in terms
of security. You don't want to take a chance on building your own commerce
system from scratch, starting to take customer orders, and then finding out that
someone has hacked your system and reduced your business bank account to
zero.
You have two options for getting around this problem: hiring a very, very good
coder with experience in this area (which we'll talk about more in the next
chapter) or going with a proprietary coding system. The former option--hiring an
experienced coder and building your system from scratch--is riskier and costlier
up front but has some advantages in terms of site design and simplifying your
accounting operations. The latter option--using a proprietary system--is safer in
terms of site security and more familiar to many users (who tend to use systems
like PayPal or Bit Pass for several different types of online purchase), but also
comes with a price: hefty transaction fees and possible content restrictions.
Which you choose is up to you, but if you think you have an excellent coder and a
good system for taking in revenue, go with the former option: you'll lose some
money up front, but you'll tend to gain more in the long-term in saved
transaction fees.
BELLS AND WHISTLES
Once you have your basic site design, you have a skeleton--and a skeleton is
nothing without flesh. We'll talk more about developing your text content in a
later chapter, but at this point we'll think in terms of the basic look and feel of
your page: images, sounds, and Flash effects that you may want to use in order
to enhance the look of your page and build your business's personal identity.
Here are some good rules to follow:
• Use graphics that you already use in promoting your business as a basic
template for your site design. This builds a brand identity for you, which
can be invaluable in attracting customers and building sales.
• Don't get too complicated. Too many beginning web designers feel the
need to show off their skills, drag every HTML/CSS trick they know out in
order to make a flashy, impressive page, and end up with an inconsistent
mess that drives customers away. Choose a simple look for your page
with a few colors and a general feel, and either communicate this to your
coder or build it yourself.
• Avoid music on your page (unless you're selling CDs, instruments, or audio
equipment.) Music is often irritating to web surfers, makes your page load
more slowly, and doesn't add much to your online image.
• Keep load times on your page low. Any images you use should be
optimized for web use (a good Photoshop tutorial or an experienced web
designer/coder can tell you how to do this), background images should be
avoided whenever possible, and complicated scripts running on your page
(counters, message boards, or Java effects) should be kept to a minimum
or eliminated entirely. Every second your viewers spend waiting for a page
to load is a second in which they can easily decide that your product isn't
worth the effort--avoid this at all costs.
So now you've mapped out your site with an eye to the rules of direct response
design, you've decided on the images your page will use and the basic look of
your site, and you've made some preliminary steps to deciding on what
commerce system you'll use.
At this point, it's time to start laying bricks, as the builders say. And even if you
plan to hire a coder to build your site for you--as many people choose to--it's a
good idea to know a little bit about what materials your page will depend on. In
the next chapter, we'll learn just that.
4
DIY SITE CODING
For some of you, this will be the best chapter in this book. For others of you, this
will be a temporary detour into an interesting world, but not one that you'll need
to know everything about in order to be successful with direct response websites.
For both groups, much of this information will be helpful. If you know something
about how web pages work, then you'll know what to ask for--and what not to
ask for--when it comes to hiring a coder to build your website. If you want
something from your page that standard HTML can't deliver, you may find
yourself facing extra charges for CSS or even Flash design--or you may find
yourself striving to build a page that simply can't be built with current
technology. And if you're not familiar with exactly how computers interpret and
display website code, then you may run into costly revisions down the road when
customers complain that your website doesn't work with their browser--as well as
lost sales.
So, if you're interested in building your direct response site yourself, this is the
place to start. If you're more interested in saving yourself some effort and hiring
a coder, familiarize yourself with a few of these terms before moving on to the
next chapter, where we talk in detail about how to find, retain, and communicate
with your coder in order to build the best page possible.
HOW WEB PAGES WORK
All web pages and websites on the Internet exist fundamentally as text files
saved with the HTML extension. Web browsers read these text files, decided
based on them (and based on HTML defaults) which formatting choices to use on
a page, generate all content from the text file and link to all images, and
ultimately display the page.
Of course, it's impossible to talk to a web browser in natural language: saying in
plain language to "make the margins one inch on all sides" is easy to understand
for a human layout editor, but impossible for a computer. Which is why--as we
touched on in the first chapter--standard protocols for online systems were a
necessary condition for the growth of the Internet. For two computers to talk to
one another--and in order to ensure that they're talking in the way that the user
intends--it's necessary to speak a common language, which is essentially what
HTML and other internet protocols are.
HTML (or "Hypertext Markup Language") is the most successful online formatting
protocol yet devised and should be the basis for any good website. It's also a
simple language to learn (as opposed to object-oriented languages like Java or
C#, which require a much greater working knowledge of computers and a much
greater willingness to spend time organizing a program.) HTML is essentially a
formatting guideline rather than a true programming language, which explains
some of its versatility and ease of use.
So, in order to learn DIY coding (or to learn how to talk intelligently to your web
designer), we first have to learn some key features of HTML.
KEY HTML TAGS
When you view an HTML file in a web browser, the computer follows this logic to
interpret your file:
Files are read in order from beginning to end.
If the file contains a tag, change the formatting rules to reflect that tag until the
tag is closed.
If the file doesn't contain a tag, format the text according to HTML standards and
browser options (most commonly twelve-point Times
New Roman.)
A "tag" is just a formatting instruction to your computer. All tags look like this:
<tag> </tag>
Where <tag> tells the computer to start formatting according to the tag, and
</tag> tells it to stop formatting according to the tag. There's a little bit more to
it, of course (and a good HTML tutorial can help you with some of the finer points
of this), but essentially this is all that tags are: formatting instructions. Think of
an HTML document as a document in a foreign language, with your browser as
the translator.
The most important tag in any HTML file is the <html> tag. The first line of any
.html file is always <html>, and the last line is always </html>. This tells the
computer that any information between these tags should be interpreted
according to the standard HTML rules, as coded into the web browser.
The second most important tag in any HTML file is the <body> tag. Any
information within the <body> tag will be displayed within the browser window
when the web page is loaded. The critical tag that complements the <body> tag
is the <head> tag, which determines information that the browser should know
about the content of the page--most commonly the <title> tag to determine the
information to be displayed in the title bar of the browser window, and the
<meta> tag to give information on the page's content to search engines. (A full
discussion of the <meta> tag is well beyond the scope of this book but will be
dealt with in a bit more detail in the marketing chapter.)
The most commonly seen tag in most HTML files is the <p> tag (which appears
only in the <body> section of the file, as will all the tags below.) The <p> tag
tells the browser to start a new paragraph of text, including a full line break
between paragraphs. Within the <p> tag, it's possible to place other formatting
tags, including <b>, <i>, and <u>--which declare bold text, italic text, and
underlined text, respectively. (If you're not doing your own coding, just know
that you can use tags to modify the appearance of text in order to emphasize
certain key words in your sales letter or other content--often a useful marketing
tactic.)
The <image> tag is used to place an image into a document. The <image> tag
contains within it the web address of the image to be placed (for example,
http://yourbusiness.com/yourgraphic.jpg), as well as optional rules for resizing
the image to whatever height and weight you want (allowing you to include even
large images like photographs on your main page.)
The <a> tag is placed around an element on the page--usually either text or an
image--to turn that element into a hyperlink to another section of the page. This
is most commonly used to connect pages to one another or to allow you to view
larger photos at their full size--you might resize a 1200 x 900-pixel photo to 120
x 90 pixels on your main page, but at the same time turn that picture into a link.
Customers can then click on the picture, which will allow them to view the picture
at full size in a new window.
The <table> tag is used for displaying text or other page elements in tables on
your page. A common use of the <table> tag is also to control the layout of your
page: if the table borders are set to zero (consult an HTML reference to find out
how to do this, if you're going the DIY route), you can create the illusion of small
text "fields" throughout your page--think of a newspaper with various columns,
photos, and advertisements laid out on a single page
(with the <table> trick) versus a single page of a book (without the
<table> trick.)
And finally--but perhaps most importantly, if you're building your own commerce
system or if you're trying to include user feedback and testimonials on your site--
there's the <form> tag. This allows users to input text on your page, click on
buttons, or select items from a dropdown list--an ideal way to keep your page
simple while still giving your customers the maximum possible options. (The
<form> tag can be extremely tricky for HTML novices and can also create some
security problems on your page if used improperly--be sure to consult a good
reference and to experiment before you start using this tag on your main page.)
TAGS IN DIFFERENT BROWSERS
To return to the "translator" metaphor: not all translators are equally good at
what they do. Any fan of world literature knows that the same basic text can
come out in wildly different ways when translated by different people--and the
same is just as true for browsers.
A few tags in particular can create problems if your site is designed for one
browser but viewed by a potential customer in another browser altogether. The
<table> tag is notorious for these kinds of problems, and while the <form> tag
will usually behave in the same way across different browsers, it may have a
radically different appearance for different users--and not always one that you
like.
There are two solutions to this problem. One is simply to test your page in as
many browsers, screen resolutions, and operating systems as you possibly can,
and tinkering with your basic HTML code to the point where it looks acceptable
(and works in the way you intend) for most of these. The other solution is to
choose one or two popular browsers to focus on, optimize your website for these
browsers, and then include a prominent disclaimer on all the pages on your site:
"Optimized for Browsers X and Y, versions a and b." This might cost you some
traffic, but it isn't likely to be a significant drain on your potential revenue.
CSS
A recent development in the field of web design is the popularity of CSS
formatting. CSS stands for "Cascading Style Sheets” and can be thought of as a
series of rules for the browser to follow when interpreting HTML.
For example: the basic HTML tag <a> always formats hyperlinks in the same
way--blue underlined Times New Roman text. You can manually change the font,
color, and size of this text every time you use the <a> tag in your files, yes, but
this gets timeconsuming and is limited in its possible effects. CSS files, by
contrast, can change the definition of the <a> tag for your browser. For
example, you might write a CSS sheet that defines the <a> tag as invariably
green, Arial, bold, and without the standard underline. With a little bit more
effort, you might even define rules for the <a> tag that allow it to change color
or become highlighted whenever the user's mouse moves over the hyperlink-a
cool little feature that, if done well, can add to the look and feel of your page
without costing you any effort or violating any of our three basic rules.
CSS programming isn't as difficult as hard-core programming languages like Java,
true, but it's still substantially less forgiving than HTML, and thus requires a much
greater investment of time to learn and use effectively. If you want to
experiment with CSS, be sure to give yourself some time to learn the syntax of
the language, work out your page implementation, and be sure that you don't go
overboard and make your design either confusing or unattractive. You might also
do some web searches for CSS layouts--there are plenty of CSS formatting
packages available for free online, including professional suites by design studios
(released for promotional purposes)--and of course you can always look at other
people's CSS files and get some ideas about how to implement your own, as long
as you don't directly steal someone's hard coding work.
PLAIN TEXT HTML VS. AUTHORING TOOLS
Building a web page from the raw HTML file up can be deeply rewarding as an
intellectual challenge, is certainly the most costeffective solution, and gives you
total control over the look and feel of your page. But it can also be extremely
time-consuming--not only to build, but to maintain. If you want to radically
revise your product information at some point, you'll have to go back in and
change lots of very specific HTML formatting in your raw text files-not the most
effective option, certainly.
An alternative to text authoring is to invest in an actual HTML authoring tool like
Dreamweaver or Frontpage. These have significant drawbacks, of course, not
least of which are the very high price and the lack of total control over your
website. But they do allow you to change your text through copying and pasting
without changing the basic formatting or underlying HTML code for every single
HTML file you use, and they simplify some of the more complex layout coding
that you might choose to use to make your page look more stylish and unique.
Some HTML authoring tools actually give you the best of both worlds--
Dreamweaver, for example, lets you edit the basic HTML coding of a page at the
same time as you edit the page text, images, and layout directly (withou
manually changing HTML tags), which can satisfy both the desire to work quickly
and efficiently and the desire to have total control over a page's layout. Any tool,
however, is only as good as the person who uses it, so just use the tools that you
prefer and that work the best for your coding style.
If this sounds complicated, it's because DIY coding is complicated. There are
definite benefits to it, of course--but for many business owners, those benefits
aren't worth the time invested in learning the language. And even if you know
HTML and CSS backwards and forwards, you might believe that your basic design
skills can't give you exactly what you want for your company's website. If this
describes you, then move directly along to our next chapter, where we talk in
detail about just how to find, evaluate, and hire a coder or designer who can help
your website--and your product along with it--stand out from all the rest.