Quantcast

CSS And Backgrounds - II

(No Ratings Yet)
Loading ... Loading ...

If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

Part 1 focused on the many ways to specify web page backgrounds with CSS. This part 2 addresses these subjects:

  1. The background of divisions of the web page, within DIV tags.
  2. The background of tables.
  3. The background behind sections of text content.
  4. The background behind INPUT and TEXTAREA form elements.
  5. The background behind ordered and unordered lists.

This part 2 supposes you are familiar with part 1 . Without that familiarity, especially if you are a novice with CSS, part 2 can be confusing.

Like part 1 , the CSS examples in part 2 are provided in the format used when the styles are defined in the HEAD area of a web page. For site-wide implementation, you can use an external file for the same effects.

The Background of Divisions of the Web Page, Within DIV Tags

Specifying a background for a DIV section of your web page is similar to specifying the background of the entire web page. Backgrounds specified for a DIV section will lie on top of the web page’s background.

A DIV section is that portion of your web page in a DIV tag, i.e.:

<DIV>
Content of a DIV section.
</DIV>

Create a CSS class in the HEAD area of your page, like this:

<style type="text/css">
<!--
.divtest { background-color: yellow; }
-->
</style>

Now, when you create a DIV section in your web page with class divtest, the division’s background will be yellow. Example:

<DIV class="divtest">
<p>A paragraph.</p>
<img src="picture.jpg">
<p>Another paragraph.</p>
</DIV>

To specify an image as the background for the DIV, several different methods can be used. Each method requires changing the CSS class “divtest” in the HEAD area of your web page. Images, if they’re too large for the DIV section, will have their top-left portion displayed to the size of the DIV section.

  1. To tile the image, where the image is repeated across the top and row by row until the entire DIV background is covered, use
    .divtest { background-image: url(image.jpg); }
  2. To print the image just once, not tiled, use
    .divtest { background-image: url(image.jpg);
    background-repeat: no-repeat; }
  3. To print the image just once, positioned in the top-right corner of the DIV section, use
    .divtest { background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: right top; }

    Positioning of the image can be done in the many ways that web page background images can be positioned. See part 1 of this series.

  4. To repeat the image across the top of the DIV section, use
    .divtest { background-image: url(image.jpg);
    background-repeat: repeat-x; }
  5. To repeat the image along the left edge of the DIV section, use
    .divtest { background-image: url(image.jpg);
    background-repeat: repeat-y; }
  6. To create a DIV section the exact dimensions of the image, use (assuming an image 200 pixels high and 400 pixels wide)
  7. .divtest { height: 200;
    width: 400;
    background-image: url(image.jpg); }

The Background of Tables

Background color and images can be specified for tables, almost identical in method to specifying backgrounds for DIV sections. For testing, create a CSS class in the HEAD area of your page, like this:

<style type="text/css">
<!--
.tabletest { background-image: url(image.jpg); }
-->
</style>

Now, when you create a table in your web page with class “tabletest”, the table’s background will be whatever you specified for that class. Example:

<table class="tabletest">
<tr>
<td>
Table data cell content here.
</td>
</tr>
</table>

Image tiling and positioning, and background color styles are specified using the same specifications language as the class for DIV sections.

The Background Behind Sections of Text Content

Background color and images can be specified for standard HTML tags for text content, too. It is almost identical to the DIV and table style specifications, except no period is typed in front of the style. (The period indicates a custom class. Lack of a period indicates a style for a standard HTML tag.) Standard HTML tags for text content do not have the ability to be sized except for the amount of area the text itself requires.

To specify a background of yellow for H1 (header size 1) text and an image background for P (paragraph) text, put this in the HEAD section of your web page:

<style type="text/css">
<!--
H1 { background-color: yellow; }
P { background-image: url(image.jpg); }
-->
</style>

Now, in the following page copy, the header will have a yellow background and each paragraph will have an image as its background. Example:

<H1>My Header</H1>
<P>A paragraph.</P>
<P>Another paragraph.</P>

Image tiling and positioning are specified using the same specifications language as the class for DIV sections.

The Background Behind INPUT and TEXTAREA Form Elements

The background of form INPUT and TEXTAREA fields can be a specific color or an image. To make all INPUT areas yellow and put an image in the TEXTAREA field, put this in the HEAD section of your web page:

<style type="text/css">
<!--
INPUT { background-color: yellow; }
TEXTAREA { background-image: url(image.jpg); }
-->
</style>

Now, all INPUT and TEXTAREA fields will contain the background you specified. Example:

<form>
Your Name:
<INPUT type="text">
Narrative:
<TEXTAREA cols="11" rows="5"></TEXTAREA>
<INPUT type="submit">
</form>

Because the submit button is also an INPUT field, it will have the same background as text input fields. If you prefer to have the background of the submit button be blue (for example, it could be any color or even an image), create a custom class and then specify that style for the submit button.

Example for the HEAD section:

<style type="text/css">
<!--
INPUT { background-color: yellow; }
TEXTAREA { background-image: url(image.jpg); }
.special { background-color: blue; }
-->
</style>

Example form:

<form>
Your Name:
<INPUT type="text">
Narrative:
<TEXTAREA cols="11" rows="5"></TEXTAREA>
<INPUT class="special" type="submit">
</form>

The Background Behind Ordered and Unordered Lists

The backgrounds of ordered (OL) and unordered lists (UL), or each individual list item (LI), are specified using the same specifications language as the class for DIV sections.

If specifying an image for the background, the image will be behind the entire list if specified for UL or OL tags. However, if specified for LI, the image will be repeated behind each individual list item.

If UL and OL are specified, and LI, too, then the browser will print the LI background over the UL and OL background for each individual list item.

Here are examples for the HEAD area:

<style type="text/css">
<!--
LI { background-color: yellow; }
UL { background-image: url(image.jpg);
background-repeat: no-repeat; }
OL { background-image: url(image.jpg); }
-->
</style>

And, example lists:

<ul>
<li>
<p>A list item.</p>
</li>
<li>
<p>Another list item.</p>
</li>
</ul>

<ol>
<li>
<p>A list item.</p>
</li>
<li>
<p>Another list item.</p>
</li>
</ol>

In the above lists, the list items have paragraph spacing. The area taken up with each list as a whole will contain the specified background image. The list items will have a yellow background, which covers the image wherever the list item text is printed.

Now you have a lot of tools related to using background colors and images to help you design web pages.

CSS And Backgrounds - I

(No Ratings Yet)
Loading ... Loading ...

Background colors and images can be used for stylistic effects and can be an important element in the design of web sites.

With standard HTML, one can assign backgrounds to a web page and to tables and table data cells. Compared to what one can do with CSS, however, HTML is limited.

With CSS, background colors and background images can be applied in many different ways.


  1. The web page’s background, in any of the following manners:
    1. Background color (like standard HTML).
    2. Tiled image (like standard HTML), where the image is repeated across the top and row by row until the entire web page background is covered.
    3. Not repeated, the image printed just once. The image can be positioned anywhere in the window.
    4. Repeated across the top of the web page for one row.
    5. Repeated along the left side of the web page for one column.
    6. Fixed in position with the web page contents so the background image remains in place while the page content scrolls over the top of it.
  2. The background behind divisions of the web page, within DIV tags.
  3. The background behind tables.
  4. The background behind sections of text content.
  5. The background behind INPUT and TEXTAREA form elements.
  6. The background behind ordered and unordered lists.

This article will address only web page backgrounds. Part two will address the others mentioned above.

You probably already know how to create background colors and background images with standard HTML. As a refresher, the color and/or image URL are specified in an attribute of the BODY tag. Here are the methods, the first a yellow background color, the second specifying a background image:

<body bgcolor="yellow">
<body background="image.jpg">

The bgcolor attribute provides the color, as expected. The background attribute provides the image, but tiled to cover the entire background of the window.

Now, let’s see what you can do with CSS!

The CSS examples in this article are provided in the format used when the styles are defined in the HEAD area of a web page. For site-wide implementation, you can use an external file for the same effects.

Background Color

Here is the method of specifying a page background color. For single page, put this in the HEAD area. For site-wide implementation, you’ll probably want to put the style into your external CSS file.

<style type="text/css">
<!--
BODY { background-color: yellow; }
-->
</style>

Changing the color name (or changing the #ffff00 hexadecimal equivalent), will change the background color of the one page or all pages using an external CSS file.

Tiled Image

This will put a background image into your web page, the image repeating across the top, row by row, until the web page background is covered.

<style type="text/css">
<!--
BODY { background-image: url(image.jpg); }
-->
</style>

The URL can be specified as relative or absolute. The following are all valid formats:

url(image.jpg);
url(graphics/image.jpg);
url(http://domain.com/pictures/image.jpg);

Image Not Repeated, With Exact Positioning

This will print the background just once, placing it in the top-left corner of the web page.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
}
-->
</style>

To position the image in a place other than the top-left corner, use the background-position label. For example, this will print the background image at the right-top of the web page.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: right top;
}
-->
</style>

The words you can use for positioning are:

top bottom left right center

Note that the above words apply to the entire web page, not just the browser window. Thus, “bottom” means the bottom of the page, not the bottom of the window.

Positioning can also be specified by distance measurement and by percentages.

This style will place the top left corner of the image 400 pixels in from the left page margin and 100 pixels down from the top page margin.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 400px 100px;
}
-->
</style>

And this style will calculate the distance 10% from the left and 20% from the top.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 10% 20%;
}
-->
</style>

Calculation is done using both the dimensions of the page and the dimensions of the image, the same percentage of each. The point 10% in from the left of the image will be placed at the point 10% from the left of the web page. And the point 20% from the top of the image will be placed 20% from the top of the web page. It can be a hard concept to grasp without a drawing. But try it, specifying different percentages until you gain an experiential understanding.

Background Image Repeated Across the Top of the Web Page

This style will repeat your background image across the top of the page, one row.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: repeat-x;
}
-->
</style>

Background Image Repeated Along the Left of the Web Page

This style will repeat your background image along the left of the page, one column.

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-repeat: repeat-y;
}
-->
</style>

Background Image Does Not Scroll When Web Page Scrolls

To make your background image stay in place while the web page contents are scrolled over the top, use this style:

<style type="text/css">
<!--
BODY {
background-image: url(image.jpg);
background-attachment: fixed;
}
-->
</style>

An Application

Let’s suppose you have a nice little image of a flower. You want it for a background, printed in a row along the top of your web page. The flowers should stay in their fixed position when the rest of the web page content scrolls.

It can be done this way:

<style type="text/css">
<!--
BODY {
background-image: url(flowers.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
}
-->
</style>

Knowing how to use and position background images can enhance web page design.

See part two for ways to use background colors and images in the web page content itself.

Why You Should Avoid ‘Page Swap’ Link Exchange Proposals

(No Ratings Yet)
Loading ... Loading ...

As is fairly common, I recently received an email from someone seeking to crosslink our two sites. It is always a wee bit of a surprise when these messages arrive, though, given my article How not to build traffic: respond to email solicitations of Link Exchanges . You’d think they’d at least reference the points made in that article in their email!

Okay, I said in my response, tell me how you would propose we accomplish this. Well, his second message with the details of the proposed exchange - to build traffic on both our sites and increase our mutual page ranks, of course - quite startled me…

Thanks for the reply. We would like to host some pages on programimi.com. For Example: www.programimi.com/partypoker.html, www.programimi/pokergames.html etc. These pages will be linked from your Homepage for navigation. Kindly let me know if this is acceptable to you and also your expectations for each page. Hope to hear from you soon.

It’s a nice enough email and sounds reasonable upon first glance, but if you think about what’s being proposed here, this is a kind of link exchange that you should always avoid: they’re asking to have a page of links and ‘context’ (the all-important link context that Google wants to see) on your site in exchange, presumably, for a single text link back to your site from their own. If you’re desperate and really did want to pursue this sort of proposal, I would at least suggest that you charge the other party a significant advertising fee for a set of links rather than just one. I mean, really, does this kind of “swap” sound equitable to you?

I didn’t think so.

Just as important as the value of links is the ownership of content. Whether you’re building a site with the intent of having some Google goodness or whether you’re creating a site that has lots of good information and just incidentally has advertising, you should always retain tight control over your content because if a page is part of your domain, you own it. People who come to your site from a search engine (and 80% of Web site traffic - or more - is a result of searches and clicking directly onto a subsidiary page) have no way of knowing who created a specific page, so it’s all lumped into content with your name on it.

And in that context, no, I’d much rather not have pages on this site talking about poker and other gambling games anyway, even if there was a nice payment involved.

What would you do in this situation?

How Not To Build Traffic: Responding To Email Solicitations Of Link Exchanges

(No Ratings Yet)
Loading ... Loading ...

Here’s an email message that I received today, quite similar to email messages I receive at least a half-dozen times each day:

I am contacting you about cross linking. I am interested in ProgramimiCOM because it looks like it’s relevant to a site for which I am seeking links.

Not too bad, so far. But read on…

The site offers a comprehensive selection of over 6,000 technology products at academic prices including computer hardware, software, and books. With a Page Rank of 5, the site has an excellent reputation in the industry. It has a very professional look and feel.I’ll keep the web address confidential and will send it to you only if you give me permission to do so. Just let me know if it’s OK, and I’ll send you the web address for your review. If you approve of the site, then the intention is to exchange links.

Looking forward to your reply.

Sincerely,
Ritchie Hilario - Sr. Link Builder

P.S. If for any reason you don’t want me to contact you again, email me with the words “NO EMAIL” as the subject of your message.

Link Builder
Apartado Postal #18
Tijuana, B.C. 22432

Can you see what’s wrong with this message? If “Ritchie Hilario” is genuinely interested in cross-linking, she’s going about it all wrong. First off, using Google to search for Ritchie’s name reveals no results at all, suggesting that it’s a fake name. Strike one.Secondly, a spammy opt-out “NO EMAIL” postscript is a sure sign that this isn’t someone sitting at their keyboard, finding my Web site, and then genuinely requesting a link but rather someone using a mostly automated application that blasts out thousands of these sort of link exchange requests. Strike two.

Thirdly, did you notice the “legal mailing address” at the bottom of the email? It’s there because of the toothless CAN-SPAM law and as much as I’d like to think that the border town of Tijuana has a thriving Internet business community, it’s pretty darn clear that it’s either a completely bogus address, or at least a post office box that’s routinely emptied directly into a trash can. Strike three.

But even more, Google search results and page ranking are influenced much more by them trying to capture algorithmically why a site is linking to another site. I’ve talked about this extensively on the site, including The Right Way to Link to Pages On Your Site , Three Ways to Adversely Impact your Google Pagerank , and How does Google figure out what pages are more relevant? Pagerank .

With this perspective in mind, it’s clearly not a winning strategy to blindly trade links with sites you don’t even know about, don’t endorse, and wouldn’t otherwise link to without the reciprocal link. One way I try to capture this concept myself is to ask: would you link to the site because it’s helpful, valuable, and informative for your readers, audience or customer base? If the answer is “no”, then you really need to think carefully about whether it makes sense to link to them, regardless of if they offer a link back to your site or not.

And if you do decide to cross link, to accept a link exchange offer, realize that it might actually be a fly-by-night search engine optimization “consultant” (I use the phrase loosely in this context) who will promptly try to sell you on how they can use similarly dubious tactics to help you improve your ranking for only $xxx!

The Right Way to Link To Pages On Your Site

(No Ratings Yet)
Loading ... Loading ...

Here’s a topic that should be obvious, but isn’t: how should you best code links on your site from page to page? Should you use something like “page two” or “continued…” or “more” with the page filenames as the links? Should you use absolute links that always begin with a leading / (as in “/reviews.html”), should you always use relative links (as in “../reviews.html”) or should you use fully qualified links (as in “http://www.example.com/reviews.html”)?

The answer to this question might surprise you! First off, innuendo and rumor aside, Google and other search engines do not care about how your links are coded. I have read on some SEO sites that people suggest that Google “spiders” your site faster if you have absolute or even fully-qualified URLs, but as far as I can ascertain, that’s just not true. So this facet of the question boils down to what’s the easiest for you to maintain on your site? A link that allows you to move all the pages around as you might need to reorganize things, or a link that forces you to always live with a specific domain name and directory name? My druthers is unquestionably to use relative links as much as possible, and to always use absolute (though not fully-qualified) links on 404 error pages and other content that kind of floats around on your site.

The only area where full, absolute URLs are a necessity are weblog entries, because your Weblog entries should be generating an RSS feed (learn more about RSS feeds at this RSS info page ) which is then read by subscribers in their own applications, so relative links almost always fail. This means that it’s a bit more tricky to add links to, say, this entry since this Web site — ProgramimiCOM — is built around the Wordpress weblog content management system, but the trade-off of having clickable links in the RSS feed makes it worthwhile.

Let’s get back to the main question, then: How should you structure the links between pages on your site?

Well, I used to have links like “home” and similar, but upon reflection realized that they were empty links because the words that are used to link to a site are important and “home” is almost as bad as “welcome” in terms of being completely useless. Instead, all of your interpage links should, as much as possible, reinforce the key words and key phrases that you want to have identify your site (also see Understanding Keyword Density for more about keywords). Instead of a link like:

<a href=”index.html”>home</a>

therefore, you’ll find that you get more value out of simply replacing that link with a link that has the name of the site, the key concept, or similar:

<a href=”index.html’>Programing Tutorials</a>

If you really want some extra credit, think about your filenames too: “index.html” is generic and meaningless, yet your could easily configure your site to have a linked file called “web-design.html” and link to that instead:

<a href=”web-design.html”>free web design tutorials</a>

Now you’re really rocking.Whether you want to think about filenames or not, it’s certainly useful to think about the words that you use to establish the links between your pages. A few minor changes can have a significant impact on your findability and isn’t that worth the effort, after all?

Three Ways to Adversely Impact your Google Pagerank

(No Ratings Yet)
Loading ... Loading ...

Most of the time here at ProgramimiCOM we talk about proactive things you can do to improve your search engine findability, your site’s relevance for a specific key word or key phrase. For example, keyword density and page titles have both been explored in depth in previous entries.

Instead, this time I thought it would be useful to talk about a couple of things that you really shouldn’t be doing, things that will actually lower your Google pagerank and, quite likely, your relevance score for the other top search engines too.

The first thing to realize is that too much of a good thing isn’t good. Who said “all things in moderation, including moderation itself”? Anyway, they could have been a search engine optimization (SEO) expert, quite frankly!

Don’t Use More Than One Title Tag

Here’s a trick that would be mildly amusing if it wasn’t so darn idiotic: lazy SEO people figure “if titles are important for keywords, then having a bunch of titles will let me load a ton of keywords without anyone being the wiser!”. Sadly, though, they’re wrong.How would this look? The HTML source of a page might look like this:

<title>affilate marketing,affiliate marketing programs, affiliate programs, affiliate payout, affiliate links</title>
<title>advertising,advertising banners,google,google adsense,seo,search engine optimization</title>
<title>pay per click, PPC, pay for performance, PPC advertising, ctr, click-thru rate</title>
<title>Joe’s House of Search Engine Optimization</title>

The idea here is that your Web browser only shows the last title tag so you as a visitor are oblivious to this trick, but the Web site developer thinks they’ve figured out a loophole in “the system” and have stuffed an additional 25 keywords. But Google knows this trick and will penalize you.

Don’t Hide Keyword Lists

Another common trick that people use to trick the system is to have keywords where the text is the same color as the background. On a page with a white background this would look like:

<font color=”white”>pay per click,affiliate program,google adsense</font>

Or, if they’re a bit more savvy, they might have this as a CSS style specification with an H1 header:

<h1 style=’color:#fff’>pay per click,affiliate program,google adsense</h1>

Again, the idea is that as someone viewing this site, you wouldn’t be aware of the keywords in this H1 tag because you wouldn’t see the H1 at all: it’d be the same color as the background and would vanish. But Google would see it and rank these keywords even more highly on the page.Right? Wrong. Google’s algorithms are pretty savvy and particularly overt tricks like this are easily picked up and penalized.

Don’t Create Link Farms

A third way that you can end up penalized is a bit more sutble: if you have pages that have lots and lots and lots of links pointing to other sites, you could have that page categorized as a so-called “link farm”, thereby deprecating any value that a link from your site / page could offer someone else (or another of your sites, for that matter).In the SEO world, the common belief is that you should never have more than 100 outbound links on a page, and 60-75 is a really good number.

The workaround for this is easy: simply take your links page and break it into more pages. If you have 10 pages with 50 links each, the people to whom you’re linking are more likely to get a benefit from your link than if you have 2 pages of 250 links. By the same token, having someone link to you from a link farm page is useless and uninteresting. It certainly won’t improve your pagerank (see How does Google Figure out What Pages are More Relevant? Pagerank . for more about pagerank).

There are lots of other ways people try to circumvent the Google pagerank system, among other search engines, and there are lots of SEO specialists (really, I should say “specialists”) who just use some shareware app to figure out sneaky and short-term fixes to help your relevance and page rank. And you should avoid all of them, because if your site is blacklisted then you’ll likely have to change your domain name and/or IP address to even get back into the Google engine at all. It’s not a pretty sight (or pretty site!) and the risk is far too high for any short-term reward on Google.

How To Use Meta Tags For Web Sites

(No Ratings Yet)
Loading ... Loading ...

If you are a beginner to building Web sites you may not even know what a meta tag is. Even if you are an intermediate Web pager you may not understand fully what they are, what they mean, and what they can do for you.

Meta Tags help search engines to index your site better so people can find you. If you don’t have meta tags in your Web pages then a lot of search engines will not even see your Web site and no one will come. They are one of the most essential parts of your Web page, if you want people to come to it.

Let’s say your Web page is about sewing. Your Meta Tags may look something like this:

<head>
<meta name=”keywords” content=”sew, sewing, stitch, stitching”>
<meta name=”description” content=”Sewing for all your needs.”>
</head>

Of course you may want to use more keywords than just 3 but you get the idea.

Notice that I put the “head” tag around them. That’s because Meta Tags have to be inside the “head” tags or they won’t work.There are many things you should think about when coming up with your keywords. Ask yourself “if I was at a search engine and looking for a Web page on this topic what would I type into it to find this page”. You may also want to use keywords that show up somewhere on the page at least once. Some search engines will also look at some of the words on the page itself and if they see the same word in the body of the page and in the keywords then your placement in the search results will be higher. One thing you should never do is type the same word twice in your keywords. Some search engines will get confused and not look any further to see the rest of your keywords and your page could get missed.

One trick that sometimes works is by using misspelled words in your keywords. For instance, if someone was looking for your sewing site do you think that they may type into the search engine “seuing” by accident. If this is something you have done or if it seems to be a common way of misspelling the word then you may want to add it to your keywords. This way if someone does misspell the word into the search engine you could be on the top of their search results. On the other hand, some search engines will penalize you for using a word in your meta keywords that you don’t use on your page so use misspellings with caution.

Another important part of meta tags is not really a meta tag but is still very important to your search engine placement. It’s the title tag and it’s one of your basic HTML tags. It makes words show up on the top of the browser but it also tells people what your site is about. In your title tag you should use a short phrase that describes your page and uses keywords. You should not use puncuation except for a dash in your title tag.

The Secret to Return Traffic on Your Website

(No Ratings Yet)
Loading ... Loading ...

Okay, if you are reading this, you are probably a hard-charging, stay-up-til-all-hours-working-on-the site, make-another-pot-of-coffee webmaster looking for ideas on how to build return traffic.

Well, we’ve done very well with enticing visitors to come back, and our secret is very simple: Offer milk.

Still with us? Good.

Every local convenience store or bodega carries milk. They don’t do it for the profit either as milk has a very low markup. They do it because people need milk every week, sometimes twice a week.

Milk keeps customers coming back. Quite often, after the customer picks up the container of milk, they grab a few other things while in the store. When this occurs, milk has served its purpose. (Stores also situate milk in the section of the store farthest from the entrance, thus making the customer have to walk by and look at all the other products, but we’ll save this for another article)

Hence the question: Does your website offer milk?

Okay, enough with the “milk” metaphor.

Does your website offer content that would give visitors the desire to return? If not, you need to get to work.

There are many types of content that can achieve this purpose. Let’s take a look at a few.

Message Boards
This is probably the most effective technique. Message boards are outstanding for drawing return traffic, especially when hot topics are going. There has been much written on how to promote and establish a successful message board.
A rather nice side benefit of the message board is the fact that the content is provided free of charge from forum members. If your forum threads get indexed by search engines, they will help draw new traffic as well.

Teasers on Upcoming Pieces
When you begin working on a new piece or project, do you promote in on your site? How about announcing in a highly visible area, “Coming This Monday, How to Lose 30 Pounds in 30 Days!” Give visitors something in which to look forward.

Website Polls
Okay, polls won’t draw that much traffic, but some visitors are very curious as to how poll numbers progress. Every little bit helps.

News Headlines Updated Daily
This is just another excellent technique for bringing back traffic. If your site is about baseball, creating a News Headlines section of baseball headlines linking to the actual articles is a very successful draw for return visitors. Yes, the visitors are exiting the site via the headline link, but they came back today for the headlines and will be back tomorrow. (Also, by designing the link so it opens to a new page reduces the amount of traffic that actually leaves)
If your budget for outsourcing to a news headlines service is limited, you can use Google alerts, and the headlines will be sent to you every day. You just paste them onto the page. Not very hard at all.

“What’s New” Section
A small table on your index page entitled “What’s New” is an excellent way of demonstrating that your site is updated frequently, thus enticing visitors to return.

Email Subscription
If you operate a niche site, you’re probably getting visitors who are very interested in your topic. Offer a monthly newsletter or bulletin service where you will notify visitors of breaking news and other large happenings in your niche. Mailings are nice because they give you big traffic spikes when you need them. (Don’t overdo it though. Only email when you have something to say, or recipients won’t open them)

Of the Week!
Create a section for a quote of the week, photo of the week, tip of the week, etc. If you do this carefully and with excellent content, it will draw visitors back each week.

Half Articles
Let’s say there is some large happening in your niche. You can write an article on what happened and make clear that you will post the outcome when it occurs. Simply, instead of waiting for the whole issue to pass by, write the piece half way through followed by a “more to come.”

While it’s great to put milk on a site, you also need to make sure that you are not driving traffic away.

Here are some things that reduce return traffic:

Excessive Page Loading Times - Often caused by too many graphics, sound, crazy effects, etc.

Poor design and site navigation
Poor grammar, spelling, etc.

Writing in all capitals or fonts too large

Lack of Updated Content

Pages cluttered with too many ads

These are just a few suggestions. If you do some brainstorming, you can come up with even more content that will work as milk on your site.

Someone once said “the best source of new customers are you existing customers.” That is as true today as it was when it was said.

Getting new visitors is fine, but take action to retain your current visitors.

About the Author
Andrew A. DeMuth is a long-time small business owner and police officer with extensive experience in marketing. He currently runs one of the nations largest law enforcement websites, http://www.NJLawman.com 

CodePress

(No Ratings Yet)
Loading ... Loading ...

CodePress

CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it’s being typed in the browser.

Features
You can try some features with the demo.

* Real-time syntax highlighting » just write some code
* Code snippets » on PHP example type “if” and press [tab]
* Auto completion » simple type ” or ( or ‘ or [ or { on any example below (except Plain Text)
* Shortcuts » on PHP example press [ctrl][shift][space]. It’s shortcut to
* Multiple windows » you can add multiple CodePress windows to the same page

http://codepress.org

DHTML or Flash?

(No Ratings Yet)
Loading ... Loading ...

The last five years has seen an exponential growth in the use of shockwave and flash animations in creating websites. The old tried and trusted techniques such as D/HTML are slowy moving over to make room for this newer multimedia delivery vehicle. Scripting, such as Javascript, is viewed with disdain by some and ignored by others. Yet the people who advocate the use of flash/shockwave in creating multimedia-rich sites are not asking the right question: Is all that glitters gold?

An important facet of flash / shockwave glossed over by most people is that these technologies are a packaged scripting environment: In other words - most of what you can do in flash, you can do in DHTMl with a liitle effort. A question that pops up at this stage is: Why would I want to go through all of that? The answer is simple and is illustrated by way of practical example.

Pick a topic - any topic - and type the relevant seach keywords into your favorite search engine. Now try to find a flash site under the first thirty results. You will be surprised to find that this ’silver bullet’ of web design does not even feature. The majority of search engines do not support the indexing of shockwave / flash sites - this can have a detrimental effect on your Internet business if you rely on search engine traffic to generate revenue. Remember one thing: Content is king and the only recognised content is in HTML pages.

Bells & Whistles: Where, When and What

Deploying rich multimedia sites are becoming more and more a design requirement. However, the objective of your site should be the determining factor between using D/HTML or Flash for multimedia content. Exposure and the generation of revenue solidly discounts the use of Flash as the major site component - search placement is too important to sacrifice for a simple thing such shiny buttons. D/HTML provides an attractive alternative to ensuring that your site is indexed properly by search engines.

However, Flash should not be put out to pasture based on this: Limited Flash content can still be an asset on your Internet presence if used judisciously. Corporate Intranets are another matter entirely: Flash provides the perfect delivery vehicle for rich business applications, where DHTML would be more of a liability than an asset - e.g. training material, presentations and etcetera.

In conclusion, the objective of a site should determine which of the two technologies are the preferred medium for mutimedia delivery.

—————————————————————–

Riaan Pieterse is the CEO and founder of Kerberos Internet Services CC, South Africa. Having spent a number of years conducting various consulting assignments in the Far East, Middle East, Africa and Europe to businesses and governments alike, Riaan has a solid understanding of the business and technology issues in today’s market.

For more information visit http://www.kerberosdev.net