Pink and Blue: Free WordPress Theme

Pink and Blue is a three-column theme for adult (18-21 category?) blogs.

Pink and Blue theme

Both XHTML (strict) and CSS validate fully and although the appearance is quite colorful, the graphics total less than 31Kb. Content appears on the left, with two sidebars to the right. The intention is for site navigation links to appear in the right bar and for the other to be used for promotions, etc. With this arrangement, surfers’ eyes will pass across promos while moving between content and navigation.

With two exceptions, everything will be picked up automatically from your installation. The first is a javascript called new_win.js which serves to open all off-site links in a new window, without the need to add target=”_blank” anywhere. If you want to use this script, open it in an editor and change the first line – var excludedomains=["carpejugular.com"] – to reflect your own domain name.

The other is the wp_list_bookmarks settings in center_column.php. It is currently set to display all bookmarks in random order. If you want to change that order or limit to a specific category, this page over at WordPress explains the options. If you are using a version of WordPress before 2.1, you should replace my code, perhaps with get_links_list.

This theme is completely free to use and/or adapt as you wish. It includes a small credit in the footer and I would be grateful if it is left in place. To install, download the zip, unpack it on your PC, FTP the directories and files to your wp-content/themes directory and then activate the theme in your WordPress admin.

Monetizing Your Blog

Search engines love blogs. Search engines mean traffic. Traffic means money. Instant riches.

Although that train of thought contains a few kernels of truth and heaven knows it is appealing, the reality is rather different. First, you are not likely to earn more than a very modest income from even a fairly popular blog and if you don’t have your own traffic source for it, you are going to need patience as well as making sure you get everything right.

Splog or Blog?

Search engines don’t love blogs in particular, but they do love original text-based content, lots of it, in depth. And that’s exactly what the earliest blogs were providing. Ignore this at your peril because although you can run splogs (minimal, sales-pitch type and/or non-original text), you will not see near the search engine benefit for which “real” blogs have become legend. There are ways in which certain strategies and circumstances might make it worthwhile accepting that loss, just don’t be under any illusion that they work as well as the model they mimic. I may cover splogs another time, this article is about making the real thing work from scratch.

Hardcore Blogging

Do not take on blogging lightly. Blogs are long-term projects which must be worked on consistently: you need to add at least one meaty article a day. On top of that you will need to develop (inbound) links, since that is something else the search engines value highly. And unless you are ready to have your modest earner as part of a varied empire, once you have your first blog under your belt, you will need a second, then a third and so on. A lot of work by the time you are done.

Don’t worry about visual content, RSS feeds and all the other tools at first. Blogging is about writing, so start by identifying a niche or angle you will be able to write about every day. How will you write? If you Google pretty much anything you will get thousands of results, so what style, personality or authority can you bring to your site to make it different, to pull in the bookmarkers and feed readers, as well as the search engines? This is something anyone building any kind of site should think about, but with blogs you cannot afford to simply pay lip service.

If by this point you haven’t decided that maybe you should be looking at mass-producing splogs, then the next thing is to identify who you are going to promote. If you are building a mainstream blog, Adsense might be your best bet, but if an adult blog, then you will benefit from sponsors who offer good content for affiliate use. It matters less what exactly they offer, than whether among their zips, FHG’s etc, is stuff you can write about with conviction. More than say, if you were running a TGP, it is also a good idea to pick sponsors whose sites do not disappoint. Blogs by their nature involve repeat visitors, not one-off sales shots. Promoting third-rate sites is a very bad idea.

Next, come up with a reasonable domain name and a theme. If you cannot afford a designer, there are hundreds of free designs out there which are relatively easy to adapt, or you can build a theme from scratch. Above all focus on usability and not gloss (Smashing Magazine recently published an article which is full of design clues) and if you do hire a designer, make sure he or she is going to deliver a table-free design which enhances and not overpowers your content. I strongly recommend either finding a site to use as a model, or sketching/roughing out the layout you want. There are lots of links and elements on a blog page and if your visitors cannot find what they expect easily, they will be gone.

Once your site is live, work especially hard to produce catchy topic-relevant titles. Create a list of keywords, but don’t overuse them, just keep the list handy as a reminder to use specific terms rather than generic ones when you can. Make sure you keep stats for both your site and your search engine, so that you can see what is popular and provide more of the same.

In search engine terms, hard exchanges with other sites such that your link appears in a long list with many others, are close to useless and possibly even damaging. Much easier to accomplish in mainstream than adult, you need to spend some time each day finding ways to place links back to your site from other sites. You can do that via non-spammy comments on other blogs, by organizing post exchanges, and by being willing to cast some bread on the water, with unconditional mentions of other blogs in your posts. By all means let the site owners know you have plugged their sites, but don’t be discouraged if most never return the courtesy. The few who do will make it worthwhile and meanwhile your visitors will appreciate being offered extra resources.

Sign your site up with Feedburner, make sure you are using a decent ping list and provide “chicklets”, the icons to encourage social bookmarking and feed subscriptions. If you are doing everything right and you want to speed your growth, when you begin earning money use it to buy yourself promotion (promotion, not traffic), on the search engines and/or on relevant sites.

Onwards and Upwards

Once you are feeling fairly confident that your site is solid and you have its maintenance under control, start over with something related but different. You can begin cross-promoting and as your network builds, you can if you wish, gradually spread into categories quite distant from your starting point. Just make sure that each new site builds on those you already have, so that you really do have a network and not just a collection of sites. That will also make it easier (with care) to use your posts on more than just one site (see below).

Sponsors RSS Feeds

If you are lucky enough to find some good feeds relevant to your blog(s) there is absolutely no reason not to use them. If you do build a network, they will make it possible to expand further (unless you hire writers or regularly exchange posts) than would otherwise be possible.

So what is “good”? Well in this context it must mean that visually and textually the feeds are consistent with your site(s). True too if reusing your own posts, it is an excellent idea to at the very least swap out some keywords or even rewrite bits of imported feeds, to ensure uniqueness. If you don’t have the means to edit feeds before they appear on your site, you can always set up a hidden site for importing and editing feeds and then import from there to your live site(s).

PS: mainstream oriented but relevant to everyone, ProBlogger is an excellent resource for articles about monetizing blogs. Definitely worth subscribing to.

Technorati Tags

Just for the record, although even WordPress refers to “Technorati Tags” in the Codex offering more than a dozen related plugins, del.icio.us was actually one of the first introducers of “tags” (keywords related to and attached to or embedded in posts). And while if you use tags and ping Technorati your posts/pages/site if added to the directory, will be classified according to your tags, there is no longer a requirement for these tags to point back to Technorati. Which is good news, because the traffic from Technorati is generally more of a trickle than a flood, not near enough to justify what used to be quite serious traffic leaks.

Tag Strategy

What if any value can tags serve, apart from controlling classification in some blog directories? First they might offer a small search engine edge if handled correctly, in that tags chosen (as they should be) from words which actually appear in your text, will in turn cause WordPress to generate pages based around those tags. Such pages by definition share at least some tags/keywords in common which might result in a concentration that might give you a decent SE placing.

Lots of emphasized uses of the word “might” there. Two reasons. The first is that it is near impossible to control the keyword density of those pages, so they are very unlikely to hit the ideals purely by coincidence. You could even end up being penalized for stuffing. Second, there is a growing school of opinion (I haven’t decided how credible it is) which says that if Google finds the same posts on your site via different routes (ie via category and date (and tags), as well as in their original date order, you could be penalized for duplicate content. The response to this belief is to place noindex metas (using a plugin) on all but main and single-post pages. Bye-bye any SE edge there could have been. Not everyone will agree, but in my view the best use of tags is to treat them as an extension of your categories.

Basic site navigation should be kept simple because too many options make it difficult for the surfer to choose. Crazy as it might sound, he may leave your site rather than make that choice. With that in mind, it is a good idea to restrict your categories to no more than a dozen, but that may well not be near enough to filter your visitors as effectively as possible, nor even give them a proper idea of all that your site has to offer. Tags to the rescue!

With tags, you can even say to hell with convention and apply tags to articles based on a list of keywords/phrases you have decided to use as effectively sub-categories. Don’t worry about whether or not these words appear in the text. Or you can play by the rules and restrict yourself to words from the text, still in effect creating sub-categories. Keep the tags per post between 3 and 6 (again for the sake of simple choices) and list these tags under each article (much easier) or embed them in the text (possibly more effective). Chosen wisely, you are then offering your visitors a tempting way to dig deep into your site, while at the same time allowing them a chance to define their interests more precisely. Try not to go too wild selecting different keywords for each and every post, because there really is no point in sending surfers to a page which may only contain the post we was originally reading. Even exercising some control you will likely still end up with dozens of tags on your site. Enough already :)

Tag Clouds

These are those collections, often of different-sized and/or different colored links, such as the one you can see on the right of this page. Tucked discretely out of the way or displayed on their own page, they serve much the same purpose as a site map: of limited interest to most visitors but a decent way to ensure search engines have short paths to all your content. To actually put them under the surfers’ noses is more questionable and I do it here mainly because I want features I know I shall mention occasionally, to be built into the site so they can be seen.

Webmasters tend to think they are “cool” and possibly surfers did too while they were a novelty. But unless the cloud is kept small enough that it will exclude many tags anyway, it soon becomes another case of information overload. Think carefully about if and how you use them.

De-mystifying WordPress

Even if you buy a WordPress theme, chances are that pretty soon you will want to change, add or delete something. You can dip into your wallet every time, or you can get your head around how the scripts work. At first glance, the code may seem different and confusing, but look more closely and you will begin to see just how easily adaptable WordPress is.

After you unzip your WordPress download on your PC, you will see a file structure like the one above. When you have done the Famous 5-Minute Install chmod 666 all the PHP files and the css file in the default directory, so that they can be edited. Inside your WordPress admin area, select the WordPress Default theme for editing.

I do not recommend that you attempt to do more than minor editing directly into WordPress. This is an entirely personal preference, but I work from a set of files on my PC, using my regular HTML editor and after each change, copy and paste the code into WordPress. It’s more convenient than non-stop FTP’ing; I can look at the results as soon as I have saved the new code (to open your site in a new window, right-click on the “View Site” link at the top of your WordPress screen); and if I don’t like what I see, I can easily undo the changes or make more. Most importantly, at some point you will surely paste over the wrong file. Local copies make that an inconvenience and not a disaster.

Down the right side of the screen is a list of file names: Stylesheet, 404 Template, Archives and so on. Click on the “Main Index Template” link to pull it into the editing area and (if you are working the way I do, open it in your HTML editor too). This is what you will see and it’s okay to say “Huh?”.

The good news is that although WordPress blogs are driven by PHP, you do not need to understand any PHP at all. All you must know is that <? marks the beginning of a placeholder and ?>, the end of one. In between, is the code WordPress needs to work its magic.

Take a look at the areas I have highlighted in color. They are all get commands, which tells WordPress to process and then insert a template into that spot. Right now the templates are header, sidebar and footer. Look at that list on the right of your WordPress screen and there they are, templates for the top, side and bottom of all your pages. There is also searchform in that list, look down near the bottom of the code you have open in your editor, and find include blah blah… searchform.php. This is the regular PHP command with which you may already be familiar and WordPress also uses it to pull in templates.

Look at the code again, focusing on the styles identifiers used by the divisions. As they should, they should give you heavy clues as to what they contain: content; post; postentry; postmetadata; and navigation. Now look inside the divisions for more giveaways like the_title, the_time, the_content. After that, there isn’t much left on the page. Some conditional statements (while and if) wrapped around a few sections and that’s about it.

Take a look at your new blog and note that information about the category to which the post belongs appears below the post. Now cut the paragraph that I have highlighted above and paste it back, above div class=”entry”. Paste the whole page of code over the code in your WordPress editor and save. Look at your site again. That’s how easy it is to make changes to the “running order” of your pages.

The Loop

Look again at the last illustration, it begins with if (have_posts()). The section illustrated here is what WordPress calls The Loop and it is exactly that: a loop within which a list of commands are repeated so that several posts can be displayed at one time. It checks whether any posts exist and if so, displays them. If not, an apology and search form are displayed. The important thing to remember about The Loop is that although you can move things around as easily as I just indicated, you must keep items which you want to display for every post inside The Loop. By extension, if you only want to show something once on a page, it must be placed outside The Loop, above the while statement or below the endwhile.

Examine the other templates in the same light, experiment with them if you wish. All we are doing at this point is de-mystifying the way that WordPress builds a site. WordPress is not without flaws, but it does illustrate very well how big, apparently complex sites can be made from just a few simple components. It also throughly applies the principle of separating content from design. You will not find a dimension or color anywhere in the templates: they are all contained within the single Stylesheet which shows at the top of that list of files and to which I shall return in another article.

HINT: Some good-looking adult blog themes are on sale, but take a look at the way they are coded before you buy. Most use tables, producing a horrible porridge of old-style coding mixed with the modern (X)HTML/CSS which WordPress uses. I’m not someone from Planet Geek trying to spread the good word. This sloppy coding not only slows sites down and makes them less search-engine friendly, but should you want to change anything later, you are likely to find the job much harder. If your designer of choice is unable to use CSS, have him do your design and then either convert it to a WordPress template yourself or have someone do that for you.

CSS Basic Page Structure

The concept of separating content from layout instructions was developed by document storage specialists decades before CSS came along. It is a logical concept which works best if approached logically. In the case of site design, that surely begins with basic page structure.

The first step towards having CSS behave predictably is to include a valid doctype and HTML tag as the first two lines of your HTML. A longer list of all the options is offered by W3C, but the most common are:

If you are coding in HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
...

If you are coding in XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...

If you don’t use a doctype, use one which is incomplete or doesn’t match the rest of your code, browsers drop into what is know as “quirks mode” which means they assume you have written very old code. They will ignore recent additions to CSS and interpret others wrongly. This can totally destroy your layout.

A major pitfall when using CSS is the unwillingness of browser developers to adopt a consistent standard. There are solutions (hacks) to almost all these inconsistencies, but it is easier to avoid them where possible. To this end I recommend beginning every CSS file with some parameters for the whole page.

body {
	margin: 0;
	padding: 0;
	}

These two properties define the space around the outside of an element (margin) and the space inside an element (padding). If we seem to be leaving logic behind already, think of the screen as the master container and the body (your HTML) as an element within it. It is necessary to set the padding to zero to counter the default padding set by Opera.

If you do want space around your design, just change the values for margin. You can either set a single value to be applied on all sides:

body {
	margin: 10px;
	padding: 0;
	}

or different values for top, bottom and each side:
body {
	/* top, right, bottom, left */
	margin: 20px 50px 20px 50px;
	padding: 0;
	}

Single Columns

It isn’t necessary to create an overall division to contain the rest of your page, if the whole page is a single column. Nevertheless, something like this means you establish parameters for your page which don’t then need to be repeated several times:

/* in your CSS file */
#wrapper {
	width: 780px;
	/* "auto" will center the block */
	margin: 0 auto 0 auto;
	padding: 20px;
	}
	
	
/* your HTML */
<div id="wrapper">
	All your content goes here
</div>

You can leave out the margin parameter if you want your content to show against the left of the screen. The padding parameter is also optional and of course the actual dimensions are up to you. Padding may not be useful if your content will appear on your overall background color, but if they are not the same, you probably would not want your content hard up against the edges of that center block:

Double Columns

I am going to use a double column layout to illustrate a complete typical page structure of header, content and footer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
/*global settings */
body {
	margin: 0;
	padding: 0;
	}
	
/* basic structure */
#wrapper {
	width: 780px;
	margin: 0 auto;
	}
#header {
	}
#content {
	}
.left {
	float: left;
	width: 350px;
	}
.right {
	float: right;
	width: 350px;
	}
#footer {
	clear: both;
	}
</style>

</head>
<body>

<div id="wrapper">

	<div id="header">
		HEADER
	</div>

	<div id="content">
		<div class="left">LEFT COLUMN</div>
		<div class="right">RIGHT COLUMN</div>
	</div>

	<div id="footer">
		FOOTER
	</div>

</div>

</body>
</html>
Although we haven’t applied any styling yet to the header or content blocks, it makes sense to provide place-holders, since we have created the blocks in HTML. Making the total width of the left and right columns (350+350=700) less than the width of our “master” block (780-20-20=740), creates the space between the two columns. Note that otherwise no widths have been specified and 100% is implied by default. The float parameter, is what tells each block to place itself to the left or the right.

We haven’t styled the footer block but we did need to include clear: both. Without that parameter, the block would locate itself as high up the screen as possible, which in this case would be between the left and right blocks. Always include clear: both in a block which follows multiple to tell browsers to create it below the longest of the blocks above.

That covers basic page layout for one- and two-column designs. Three-column layouts are slightly more tricky, so I shall cover them separately.

HINT: It is a big timesaver to store code similar to that above as templates for all the basic layouts you commonly use: simply open a file and your page is already part made. I include a little more than shown above – basic fonts, header sizes, link treatment, etc – but only such elements as are always, or almost always used. Indenting code (and I usually leave an empty line between blocks) makes the flow of the code easier to follow, and if you indent every new block and close indents at the end, you will soon see (when your final block close instruction is away from the left of the screen) if you forgot to close a block along the way. Give ID’s and classes descriptive names so that your style file doesn’t become gibberish. Finally, always comment anything in your HTML or CSS which needed special treatment or might otherwise catch you out if you don’t look at the file(s) again for a year.

Update

At the beginning of this article, I mentioned the value of including parameters in a style sheet to account for the differences between browser defaults. For those who are more familiar with the issues involved, here is the set of instructions which I use myself. It pretty much over-rides all the default styling in all the major browsers, leaving you to start with a clean sheet, as it were:

/* clear browser defaults */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
abbr,acronym,fieldset,img{border:0;}
address,caption,cite,code,dfn,h1,h2,h3,h4,h5,h6,th,var{font-size:100%;font-style:normal;font-weight:normal;}
caption,th{text-align:left;}
div{overflow:hidden;}
h1,h2,h3,h4,li{white-space:nowrap;overflow:hidden;}
ol,ul{list-style:none;}
/* global hacks */
body{text-align:center;}

WordPress Plugins

The cost saving involved in using open-source software is usually quite small and definitely not worthwhile for a commercial site, if it means working with an inferior product. But when a product is solid and has a huge user base providing both support and modifications, open-source software offers many advantages. WordPress is “free” software at its best and credit must also go to the people who wrote the various plugins which are used on this site.

  • Bad Behavior stops comment spam before it starts by trapping and blocking spambots before they have a chance to post comments. Use this even if you have comments closed, to prevent direct access to the comments script.
  • Chicklet Creators adds RSS feed subscription buttons to your blog
  • Dashboard Editor allows you to customise your admin dashboard to speed up loading.
  • Disable AutoP is the answer if you find WordPress entering paragraph tags where you don’t want them.
  • Duplicate Content Cure is a solution to the concerns some have that the search engines might penalize blogs for showing the same content on multiple pages (index, archives, single, etc).
  • Feedsmith (formerly known as “Feedburner Feed Replacement”) this forwards regular feed traffic to the Feedburner version of your feed, while letting some (SE) User-Agents see your feed directly on your site. I strongly recommend the use of Feedburner, as a free way to extend your feeds compatibility and and also to get some useful exposure via Feedburner’s directory. Nice stats too!
  • Google Sitemaps Generator will create a Google compliant sitemap of your WordPress blog
  • Optimal Title mirrors the function of wp_title() exactly, but moves the position of the separator to after the title rather than before. Much more friendly for those scanning SE directories.
  • Page Link Manager lets you choose which pages appear in your site navigation.
  • Recent Posts displays a customizable list of recent posts (with/without extracts).
  • Related Entries uses full indexing to display a list of posts similar to the one being viewed. Good for visitors, good for keeping older posts exposed.
  • Search Everything improves dramatically on the default search script, by allowing pages and comments to be searched if desired.
  • Search Meter logs what people are searching for on your site.
  • Secure Form Mailer secure php form mailer script.
  • Sitemap Generator generates a customizable sitemap containing all posts and pages.
  • Sociable automatically add links on your posts to popular social bookmarking sites
  • Slim Stat produces useful stats for your blog.
  • Spam Karma stops all forms of automated blog spam effortlessly, while remaining as unobtrusive as possible to regular commenters. Combined with Bed Behaviour (above) Spam Karma will allow you to keep comments open, unmoderated and yet free of spam.
  • Tiger Admin changes your WP Admin interface to a quicker and more friendly version. Only works with fully CSS2-compliant browsers.
  • Ultimate Tag Warrior allows tags to be used either as a navigation aid and/or for SEO. Tons of functions, not such great documentation.
  • WP-Cache is a very fast cache module which can manage the whole sites. Once installed, make sure it is working, otherwise your blog will actually run more slowly.

3-Column, Search-Engine Friendly Layout

With the advent of higher resolutions, bigger screens and blogs, 3-column layouts have become increasingly popular. But wanting and achieving are often not the same thing and the perfect answer to 3-column layouts is, as some describe it, “The Holy Grail”. You don’t want to mess around with absolute settings which require pixel-perfect placing. You do want the columns to appear to be the same length. You would like to be able to place the columns in any order within your HTML, so that you can tempt the search engines by placing your content-rich column at the top of your code. Unfortunately there are many attempted solutions but I am not aware of any which fulfil all those requirements.

This solution (I should probably be crediting someone with it, but it’s cobbled together from observation and experience over the years) is the one to use when search engine appeal is your priority. It has a major drawback, which is that unless you can dispense with a footer, you must know which is going to be the longest column. Your page will look horrible if you get it wrong. Nor does it attempt to equalize the columns, so if your design demands that they appear to be the same length, you will have to resort to the use of a background image to fake your columns (aka “faux columns”).

Otherwise it is a very neat solution which uses only one CSS “hack” (to compensate for Explorer’s strange treatment of margins). Tested in IE6 and FireFox, it provides fixed-width columns for navigation or whatever, plus a fluid center column which expands and contracts to fill whatever resolution your visitors are using. You may copy the code below and adapt it for your own use.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>3-Column, Search-Engine Friendly Layout</title>
<style type="text/css">
/* globals */
body {
	margin: 10px;
	padding: 0;
	background: #FFFFFF;
	font: 12px Verdana, Geneva, sans-serif;
	color: #000000;
	}
p,pre {
	margin: 0 10px 10px 10px;
	}
h1 {
	margin: 0;
	padding: 10px;
	font-size: 14px;
	}		
			
/* structure */
#header {
	height: 40px;
	}
#leftcolumn {
	position: absolute;
	left: 10px;
	top: 50px;
	width: 200px;
	}
#centercolumn {
	margin-left: 200px;
	margin-right: 200px;
	padding-bottom: 10px;
	}
#rightcolumn {
	position: absolute;
	right: 10px;
	top: 50px;
	width: 200px;
	}
*html #rightcolumn {
	right: 9px;
	}
#footer {
	height: 40px;
	}

/* fonts etc */
#leftcolumn p, #rightcolumn p {
	font-size: 10px;
	}
</style>
</head>
<body>

<div id="header"><h1>3-Column, Search-Engine Friendly Layout</h1></div>

<div id="centercolumn">
<h1>centercolumn</h1>
<pre>
#centercolumn {
margin-left: 200px;
margin-right: 200px;
padding-bottom: 10px;
}
</pre>
<p>The big plus of this layout is that, within your HTML, the columns can appear in any order, which means you may place your most content-rich block at the top of your code: the best place for search engines to find it. But it also has a serious limitation, namely that unless you can dispense with a footer, you must know which is going to be the longest column and adjust the code accordingly. In this example, the center (content) column is assumed to be the longest.</p>
</div>

<div id="leftcolumn">
	<h1>leftcolumn</h1>
<pre>
#leftcolumn {
position: absolute;
left: 10px;
top: 50px;
width: 200px;
}
</pre>
</div>

<div id="rightcolumn">
	<h1>rightcolumn</h1>
<pre>
#rightcolumn {
position: absolute;
right: 10px;
top: 50px;
width: 200px;
}
*html #rightcolumn {
right: 9px;
}
</pre>
</div>
<div id="footer">
	<h1>footer</h1>
</div>
</body>
</html>

In this example, we want a 10-pixel margin around the page and we have a 40-pixel tall header. Thus the left column is placed 10 pixels from the left of the screen and 10+40=50 pixels from the top. The right column is placed according to the same principle. If your header is a different size, or you want different margins or column widths, just change the numbers accordingly.

Because the center column is intended to be fluid, no width is stated for it, only left and right margins, which in this example, are the widths of the side columns (200 pixels). If you want to create a space between the center column and those on either side, simply increase the size of those margins.

And that is all there is to it. In another article I shall cover a less finicky 3-column layout, albeit one with less SEO appeal.

I don’t like having to remember to put left and right margins on every element, so that paragraphs and the like do not butt up against column borders. Therefore normally I would use padding applied to the block as a whole. However, because that introduces cross-browser compatibility issues which would have confused this presentation, I decided to sidestep them here and leave that topic for another article.

Convert a 2-column WP Theme

As a useful exercise in its own right, but also as a way to become familiar with both the HTML and CSS of a WordPress theme, this exercise will turn a 2-column WordPress theme into a 3-column version. Because the default theme is tricky in certain ways, I am using instead Journalist, although the principles described here involved apply to any.

One of the easiest ways to see how a template is structured, is to open the Main Index Template in my HTML editor and replace sections like <?php get_header(); ?> with its template. Once I have done this for header, sidebar and footer (in the case of this theme), I can look at the code of what would be a complete page in my blog. Then I paste the whole thing onto a new page and strip out everything which is not related to the basic page structure. What remains in this case is:

<div id="container">

	<div id="content"></div>

	<div id="right"></div>

	<div id="footer"></div>
	
</div>

Now I can open the stylesheet (style.css) and see how those blocks are handled (I have removed references to fonts etc to simplify this illustration):

#container {
width:950px;
}

#content {
float:left;
width:700px;
border-left:#999 1px solid;
margin:0 0 0 20px;
padding:0 0 0 10px;
}

#right {
float:left;
width:180px;
border-left:#999 1px solid;
margin:0 0 0 20px;
padding:0 0 10px 10px;
}

#footer {
width:700px;
border-left:#999 1px solid;
margin:0 0 20px 20px;
padding:5px 0 5px 10px;
}

The whole structure is held within the 950-pixel container block. There is no header as such, just an h1 tag. The content block is 700 pixels wide and the right is 180 pixels wide. Both have 10 pixels left-padding and 20 pixel left-margin. There are also two 1-pixel borders, so the total width of the layout is 700+10+20+180+10+20+1+1=942 pixels, leaving 8 pixels as a right margin.

180 pixels is a fairly common width to use for a sidebar, so we shall stick with it. The new sidebar will therefore need 180+10+20+1=211 pixels. To keep this illustration simple, we will not change the overall width, so to accomodate the new block, the width of the content block must be reduced by 211 pixels (to 489 pixels). With this design, the footer is not full-width, so it must also be narrowed to 489 pixels and for safety, scan through the stylesheet looking for any elements within the content block which are greater than this width. This theme has a textarea which is 500 pixels wide, so reduce that to 400 pixels.

The easiest way to create the second sidebar is to open the original in your editor. Since we are only working on the structure right now, we can ignore the content. All we need to do is change the <div id=”right”> at the very top of the file to <div id=”right2″>, then save it as sidebar2.php. FTP the new file to your server into the theme directory and CHMOD 666 it for editing later.

To recap, in the stylesheet we have changed #content { width:700px; } to #content { width:489px; }, textarea { width:500px; } to textarea { width:400px; } and #footer { width:700px; } to #footer { width:489px; }, we have created and uploaded sidebar2.php. Since we have created a new block – #right2 – we need some styles for it. Again, since this is about structure and not design, locate the block of #right parameters in the stylesheet, copy and paste them below their original position and make them all refer to #right2 thus:

#right2 {
float:left;
width:180px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
border-left:#999 1px solid;
margin:0 0 0 20px;
padding:0 0 10px 10px;
}

#right2 h3 {
font-size:14px;
margin:20px 0 5px 0;
}

#right2 a {
color:#222;
text-decoration:none;
border-bottom:#ccc 1px solid;
}

#right2 a:hover {
color:#222;
text-decoration:none;
border-bottom:#777 1px solid;
}

#right2 ul {
list-style:none;
}

#right2 ul ul {
margin:5px 0 0 10px;
}

#right2 ul ul ul {
margin:5px 0 0 10px;
}

#right2 ul li {
padding:0 0 5px 0;
}

Paste the revised stylesheet over the one WordPress is currently using and finally call up the Main Index Template. Scroll to the very bottom and above the line <?php get_sidebar(); ?> add <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>. This is the result:

And with that under your belt you are well on your way to creating your own, original templates.

In case you attempt this exercise using the same Journalist theme, be aware that I cheated slightly. The theme includes a stylesheet called style-ie.css which has a couple of hacks for coping with Explorer’s vagaries and those hacks include dimensions which will need changing in line with this article. Since a second stylesheet is fairly unusual and this article is for the illustration of general principles, I did not want to clutter it with such details.

Become Your Own Boss

Be honest. How many of you sit down every day and get right to work, reviewing galleries, building pages or whatever? How many, after you have put in your 10 or 12 hours of coding, traffic trading and the rest, save your files and get straight into whatever it is you do with your spare time?

There’s no doubt that adult webmasters on the whole are a hard-working bunch of people. We are pretty good at making use of lots of scripts and other tools to help us be productive. But while we play the role of laborer very effectively, we aren’t nearly as good at being bosses. Most of us are action driven: we work long and hard, learning as much as we can about the practical aspects of our business. We are happy if we earn more this month than last and when that doesn’t happen, we work a bit harder, hope for better days, and if all else fails, there is always the latest bandwagon to try out.

Think about it. Who is usually paid more: the CEO or the worker on the production line? Who earns more for their business? Now ask yourself if it really makes sense to spend all your time on the production line.

To be successful, you must be results driven. You should not spend a moment on anything without knowing why you are doing it, what you expect from it, and how long it will take you to produce the desired results. You need goals. In this context “I want to be rich” is not a goal: a 5% earnings increase over the next month is a goal.

Here’s a challenge. Finish work a couple of hours early today and try this:

  • Write the names of the next 12 months as headlines across a wide sheet of paper.
  • Ignore the two best and two worst months of the last 6 months, average your income for the 2 months which remain and write that number under each month. Total the 12 months.
  • Now put some thought into adjusting those figures, to account for any seasonal variations you perceive in this business. You might possibly show increases in October and November, decreases in January, February, June, July and August. Juggle the numbers until they reflect your experience, but the total for the year should be the same as in the first line.
  • More thought next, combined with a healthy dose of realism and a good measure of ambition. Knowing everything you do about the market, its competitiveness and opportunities, and about yourself, your skills and drive, how challenged you are currently, adjust the monthly numbers further to reflect what you feel is an attainable growth rate through the next year.
  • Take a hard look at the numbers you have produced. A 5% month-on-month increase may seem very modest but it represents more than 70% over the year. If you honestly believe you can achieve that (or even more), go for it. But be realistic, because the next job is to figure out how to achieve the targets you have just set.

The first reason for having specific targets related to specific timelines is so that you do not sit down on the 1st of the month and beaver away for the next 4 weeks, hoping for the best. What are you going to do to ensure you meet your targets?

The answer depends on your situation. Maybe you need to monitor your sponsors more carefully and find some new ones. Maybe some of your promotions are weak and need tightening up or replacing. Maybe you need more traffic. New sites. There are lots of possibilities. The point is that in an increasingly competitive market you must drive your results, not expect them to happen simply because you put in a lot of hours.

Once you have targets and you have figured out how to achieve them, it should be easy to produce a to-do list. At least for the upcoming month, better two, note down the broad steps you will have to take to see your plans through. Then, working a week or two in advance in more detail, fit that work into your daily schedule.

Where are we so far?

  • We have financial targets set for each month of the next year.
  • We have broad plans for the whole year as to how to reach those targets.
  • We have a lot of the practical details worked out for the next month or two.
  • We have specific tasks to complete during this week and next, and we have fitted those tasks into our daily schedules.

All that sounds easy enough. The snag is that if you take this seriously and you are already working your ass off, it is probably difficult, maybe impossible to commit yourself to more work. If you have come to that conclusion, this exercise is already paying off, because in real life you can only get a pint into a pint glass. Instead of working without a plan, introducing new things often more in hope than expectation and – perhaps without realizing it – letting proven revenue producers slip, this exercise is forcing you to think. What shall I have to spend less time on to free up the time for these new tasks? What will that cost me? Since I shall have to increase the targets for the new projects to make up for such losses, are those targets still reasonable?

If you took up this challenge and got this far, the final benefit is that you will be able to review each day, each week, each month, and see whether you accomplished everything and if the money is pouring in as you hoped. If yes, pat yourself on the back. If not, what are you going to do about it? Either way, now you are the boss, actually in charge of your business. Get it right and you will be paid the big bucks :)

TGP Makeover

This exercise illustrates how to approach the job of converting a typical thumb-preview TGP page into table-less XHTML with all the styling being done in CSS. The original (this is just a sample including the main elements only once) is coded in HTML, uses tables and some CSS and this is the end product. Compare the source code from these two links, just note that to make this exercise easier to follow, the styles are included in the documents. In use they might be stored separately and referenced by <link rel=”stylesheet” href=”/path_to/style.css” type=”text/css” media=”screen” />.

The first step in a “makeover” like this should be to validate the document in its present form. This one had only a few errors:

  1. Two title tags.
  2. Character-set meta tag appears twice.
  3. The header image has no alt tag.
  4. In the full version of the original, a div id (largelinks) was used multiple times. ID’s must be unique: use “class” where a style is going to be repeated.

Although not directly related to this exercise, I changed the document’s character set to UTF-8 (Unicode). I don’t want to go off at a lengthy tangent (you can read more about Unicode here), enough to say that ASCII, Latin 1 (ISO 8859-1), etc., are deprecated these days. Use this instead (note the space and oblique used to close the tag):

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Another change I made not directly related to the main point of this exercise, was to remove the bookmark javascript script into its own file, because it is search engine friendly to keep your head section to a minimum. That is one reason for creating a separate stylesheet file, the other being that if it is read in separately, the file will be cached, which makes subsequent pages of multipage sites load faster.

The value of converting to XHTML as part of a makeover is debatable. XHTML fans argue that you are future-proofing your work and since CSS behaves slightly differently, why be forced to learn these differences later and perhaps have to change some of your code? My view is that several scripts these days (notably blogs) default to XHTML, thus whatever the future may hold, it is easier to tackle a single HTML/CSS combo for everything. Fortunately, very few coding changes are required for XHTML:

  1. Change your doctype and html tag to:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    Here is an in-depth discussion of doctypes.
  2. All tags must be in lower case. I changed the case of the keyword and description metas and also applied the space+oblique to close the tags properly (compare the two source codes). I also had to convert the p (paragraph) tags to lower case.
  3. The target tag in the head must also be closed with space+oblique (be aware this tag works but is not part of the XHTML convention).
  4. Search and replace all <br> tags making them <br />.
  5. Change all image tags to end with that space+oblique.
  6. All dimensions and tag parameters must be enclosed in quotation marks.
  7. Although some HTML editors allow it, putting actual symbols (such as the copyright mark) into your code is a no-no because they may not display correctly (the copyright symbol of the original showed as a question mark in my browser). Use entities instead such as &#38; for ampersand: this page at Pemberley includes an entity table.

Now the CSS. Here is the new file with comments:

/* 18sweeties */
/* There may be nothing in a style file to remind you to what it
belongs, so give it a title */

/* Some will tell you to lay out your CSS file strictly separating structure and fonts/colors. That can be very confusing for CSS novices, so here I have placed the page-wide parameters first and the rest in page order */

/* globals */
body {
	/* for cross-browser compatibility always state the overall margin */
	margin: 0; 
	 /* include MAC fonts */
	font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background: #fffee8;
	color: #000; /* set a font color to be safe */
	}
img {
	/* use this and you don't need border="0" in any of your image tags */
	border: 0; 
	}
a {
	font-weight: bold;
	/* when colors are represented by 3 pairs, 0000ff, they can be shortened */
	color: #00f;
	text-decoration: underline;
	}
a:hover {
	/* it is not necessary to repeat parameters which will be inherited so only a color change is needed here*/
	color: #5454ff; 
	}
	
/* I always include this fix for a problem Explorer has with short divs. It is sometimes necessary to name the div, but this avoids that a lot of the time and if it isn't needed, (usually) doesn't hurt */
* html div {
	height: 1%;
	}
	
/* in page order for ease */
/* div align=center was used in the original document but is not compliant with current standards so this div was used instead */
#header {
	/* 17px represents top/bottom and auto left/right. There is no need to specify all four measurements when the pairs are the same */
	margin: 17px auto;
	text-align: center;
	}
.wrapper {
	width: 769px;
	margin: 0 auto;
	/* no need to specify left, top, etc borders when all are the same */
	border: #c103ff 2px solid; 
	background: #f9e6ff;
	}
/* check out the source code: all that was needed to replace the table holding the thumbs was a width-restricted container (wrapper, above) and a margin around the images */
.thumbtable img {
	/* replaces the cell-padding used in the original file */
	margin: 2px; 
	/* placing image dimensions here means no need to include them in HTML */
	width: 120px;
	height: 160px;
	}
/* when different style class have the same parameters, save code by combining them in a comma-separated list */
a:link img, a:visited img { 
	border: #cc0033 2px solid;
	}
a:hover img, a:active img {
	border: #cc0033 2px dashed;
	}
/* technically we could have given a class to the paragraph tag used originally but using a div here is more semantically correct */
.bookmark { 
	margin: 15px auto;
	text-align: center;
	}
.largelinks {
	font: 16px Arial, Helverica, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	}
.largelinks a {
	font-size: 24px;
	color: #ed145b;
	line-height: 28px;
	}
.largelinks a:hover {
	color: #00497e
	}
/* lists such as trade links need not be displayed vertically and can be given specific widths */
ul.largelinks {
  	width: 769px;
  	margin: 15px auto;
  	padding: 0;
	list-style: none;
	}
ul.largelinks li {
  	float: left;
  	width: 33%;
  	margin: 0;
  	padding: 0;
	text-align: center;
	}
/* these next lines cleaned up a mix of paragraph tags and spaces */
/* after multiple columns, in this case the inline list displaying trade links you must tell browsers when you want to begin a new block or they will try to create an extra column */
#footer {
	clear: both; /* that is what this line does */
	text-align: center;
	padding: 50px 0;
	}
/* Mozilla browsers and Explorer do not handle "clear" the same way, so we end up with more space than we want in Explorer. The following instruction which can only be read by Explorer and is ignored by Firefox etc., corrects that */
*html #footer {
	padding: 35px 0;
	}
#footer img {
	margin-top: 50px;
	}

The result looks the same in both Explorer and Firefox and just as it did originally. The combined size of the HTML and (uncommented) CSS for the revised version is 5.01KB compared to 6.54KB for the same section in its original form. That is almost a 25% saving, providing obvious speed and bandwidth benefits. Perhaps more importantly, had this been a text-based site, the content to code ratio would have improved dramatically, giving a distinct edge with the search engines.

WordPress header.php

This is the first in a series which will dissect a WordPress theme. Logically enough, it begins with a look at the header and its related CSS. To illustrate this I am using the Blix Redux theme because the header includes an image used as a background, with text showing on top of it.

Note: Add your site title and a brief description of your blog inside your WordPress admin.

In WordPress’ theme editor open up the Header file and look for the HTML for the header block itself. Then open up the Stylesheet and look for the CSS relating to the header block and the entries within in. And we hit the first gotcha: this author has separated structure and decoration to the point that he uses two separate CSS files and calls them from within the “official” WordPress stylesheet. This “wrinkle” makes no difference to the principles involved.

In Header (header.php):
<!-- header ................................. -->
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h3><p class="description"><?php bloginfo('description'); ?></p></h3> 
</div> <!-- /header -->


In Stylesheet (style.css):
@import "layout.css";
@import "shadesofgray.css";


In layout.css:

/* reset
--------------------------------------------------*/
body,h1,h2,h3,h4,h5,h6,p,form,fieldset {margin:0;padding:0;}

/* body
--------------------------------------------------*/
body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:75%;
  line-height:1.6em;
}

/* headings
--------------------------------------------------*/
h1 {font-size:30px;}

/* links
--------------------------------------------------*/
a {text-decoration:none;}

/* paragraphs, lists, etc
--------------------------------------------------*/
p {
  margin:0;
  padding:0 0 18px 0;
}

/* header
--------------------------------------------------*/
#header {
  height:150px;
  padding:0 0 0 18px;
}
#header h1 {
 /* display:none; This will hide the text in your header */
  padding-top:50px;
}


In shadesofgray.css:

body {
  color:#414141; /* provides the color for the description line */
}

/* headings  hso: all headings & mouse over
--------------------------------------------------*/
h1, h1 a, h1 p
  {color:#FFF;}
h1 a:hover
  {color:#FFF;}

#header {
  background-color:#fff;
  background-image:url(images/shadesofgray/logo.jpg);
}

The HTML of the header block is very simple. It contains an h1 tag around the blog title which is linked to the site’s base URL. Then there is an h3 tag with a paragraph tag inside it, which holds the description of the site.

Hopefully I have identified all the relevant CSS entries. I tend to feel that while this style of CSS presentation may be technically correct, it does nothing for ease of use. Anyway to summarise: the header block is 150 pixels tall (to match the background image) and it has white (#FFF) as a background color, for those who have images turned off. 50 pixels padding has been applied to the top and 18 pixels to the bottom. As it happens, the choice of background color might be a poor one, because the h1 tag has been set with no margins or padding, 30-pixel font size, no underline, and also white in color. The h3 tag has no margins or padding, the paragraph (p) tag within it has no zero margins but an 18-pixel bottom padding. The site’s description is going to take its size and color from the default body settings and both h1 and h3 will be bold by default.

The most simple change would be to use another image of the same dimensions (690×150) and either overwrite the orginal or save it as you like and change the path in the background-image parameter. We could use a smaller image, say 670 x 150 and give it a colored border:

/* header hso: header backgound color --------------------------------------------------*/
#header {
  background-color:#4E7F01;
  background-image:url(images/shadesofgray/logo.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

Changing colors is easy. Let’s alter the h1 display and give the color of size of h3 specific settings. We shall also have h3 show as non-bold and while we are there, let’s move the text right and down some:

In layout.css add to:
/* headings
--------------------------------------------------*/
#header h3 {
	font-size: 1.4em;
	font-weight: normal;
	}
	
In layout.css:
/* header
--------------------------------------------------*/
#header {
  padding:0; /* change so the lowered text does not push the bottom of the block down */
  }
#header h1 {
  padding-top:100px; /* change from 50 */
  padding-left: 120px; /* add */
}
#header h3 {	/* add */
  padding-left: 120px;
}
#header p { /* add to prevent the block being expanded */
	padding-bottom: 0;
	}
	
	
In shadesofgray.css add to:
/* headings  hso: all headings & mouse over
--------------------------------------------------*/
#header h1 a {
	color: #FF2E37;
	}
#header h1 a:hover {
	color: #FF2E37;
	}
#header h3 {
	color: #4AF017;
	}

The result is hardly aesthetic, but it does illustrate the ease of making changes, providing you approach them methodically. All changes in size, color, positioning (both of foreground text and background image) follow the same principles.

There are two tricks which come in useful if you do not want your image sullied with foreground text, but you want to keep the text in your code for its search engine potential. The first is simply to make it not display, which is easier, but removes the link back to your root URL which – for better or worse – many blog surfers have got used to. The second, although you will need to remove the h3 tag completely for this to work properly, involves moving the h1 tag off-screen while leaving the whole header image linked:

To leave all the text but make it invisible to visitors, in layout.css add:
/* header
--------------------------------------------------*/
#header h1 {
  display: none;
}
#header h3 {
  display: none;
}

To have an invisible h1 but leave the whole header image clickable, in header.php comment out (or delete) the h3 line:
<!-- header ................................. -->
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<!-- <h3><p class="description"><?php bloginfo('description'); ?></p></h3> -->

In layout.css:
/* header
--------------------------------------------------*/
#header h1 {
  /* padding-top:100px; comment out this line */
  /* padding-left: 120px; comment out this line */
}
#header a { /* add */
  display: block;
  height: 100%;
  text-indent: -500em;
} 

That last technique might be most useful when any header graphic already included your site name and other details. The first technique, although easier to implement, might work best if only the h3 tag were rendered invisible. Once you are happy with your changes, delete any code which so far you have only commented out.

Obviously a lot more changes are possible and it isn’t practical to attempt to anticipate them all. The key to making such changes is: first identify the relevant HTML; second identify all the CSS which relates to it; and third, understand what the CSS is actually doing. Initially make changes by commenting parts out rather than by deleting them. Comment what you have changed (I haven’t done this thoroughly here, wanting to keep what you are seeing relatively uncluttered) and test each group of changes before moving on to the next. Nothing is worse than changing a whole page, seeing the layout has been thrown out of whack and not knowing where to start looking for the problem.

Troubleshooting CSS

If you are fairly new to CSS (and sometimes even when you are experienced) you are going to be faced with a page which just doesn’t look the way that you expected. Or perhaps it looks fine in one browser but not in another. Certain things are handled differently by the various browsers, but don’t be in too much of a hurry to assume that is what is going on: there really are not too many areas which require “hacks”. As in building a page, a methodical approach is what you need for problem solving whenever the answer isn’t immediately obvious.

  • Validate your HTML and your CSS. These validation services may spot your problem(s) for you, but in any case, attempting to solve visible problems will be much harder if hidden problems exist.
  • You may not see the results of changes (because of cacheing), so while troubleshooting, revert to placing your CSS in the <head> section of your page. Just be sure to remember to creare an external style sheet again once your problems are resolved.
  • Always troubleshoot (and test while building) with an advanced/compliant browser such as FireFox. It is far easier to hack, if necessary, to make CSS work for Explorer than to fix your broken code for a broken browser and then almost certainly have problems as soon as you do test in other browsers.
  • Give all your main structural elements (different) colored backgrounds, to help you spot gaps, overlaps, and just plain wrong positioning. If you still have problems, give apply colored backgrounds to all the elements in the problem area(s) and look for stray padding or margins.
  • Make sure you aren’t including images or unbroken text which is wider than the block within which it/they appear/s.
  • Don’t assume the problem is related to the code in the area where the problem seems to be on-screen. Comment out half your style-sheet at a time (/* at the beginning, */ at the end) to isolate which half is causing the problem. Then within the problem half, comment out sections of the styling until you isolate which is/are the culprits.
  • If a troublesome element includes something like margins or padding, apply some really big values, to be sure they are being picked up at all.
  • Browsers can do strange things with measurements, so try reducing your widths. Instead of columns totalling 100% of the available width, reduce one or more so they total only 99% or even 98%.
  • Identify a block around the troubled area which itself appears to be behaving and comment out (in your HTML) all the child elements within it. Then uncomment them one at a time until the problem reappears.
  • Add margin: 0; to all the elements in the troubled area. If that fixes the problem and you want to clean up your code, remove the new settings one at a time, watching for the error to return. That/those you do not want to remove!

Avoid trouble!

I know we think, read and write linearly, but if you want to avoid unnecessary troubleshooting headaches, don’t code your pages that way.

  • Begin by coding the broad structure of your page (using colored backgrounds). Test. Then add the detailed but still only structural elements. If you need some text to identify or stretch an element, add just a few lines that emulate the real content: do not fill your page with content at this point, because it just obscures the details you need to see during debugging.
  • As noted above, always test first in a standards-aware browser and when everything is okay, then add any hacks needed to accomodate Explorer. But if you can code in a way which minimises the need for hacks, so much the better.
  • Be careful when pasting a block of code from one file to another. Saving snippets of code which you use frequently can be a great timesaver, but if they can be acted upon by something else on the page, they can be a source of problems.
  • Some hacks use javascript. Check what your page will look like to visitors who do not have javascript enabled.
  • Floats can be a thorough pain in the *ss. If your floats are showing up in the wrong place, margins haywire or the content within is doing strange things, the answer might be here.
  • Margins, in particular bottom margins, simply vanish. If you cannot apply a border (which resolves this problem) padding might be a better option.
  • BUT unless you are willing to do some math and apply hacks, avoid borders and padding with fixed-width elements, because Explorer really screws up the way that combination is handled. There are workarounds. It is almost always better to add padding to parent elements than to child elements.
  • Never include code you don’t really need.
  • Set element margins to 0 (unless specific values are needed) to allow for browser differences.
  • Zero values and line-heights do not need units of measurement, otherwise all none-zero values must be qualified by %, em, px, or pt.
  • Browsers are case-sensitive, so if you refer to a class as leftcol in HTML it must not be leftCol in CSS.
  • If you are using floats and want to avoid your content sometimes disappearing entirely or formatting unpredictably in Explorer, you should read up on The Peekaboo and Escaping Floats bugs.
  • Be aware there are (mainly Explorer-specific) extensions which don’t work at all in other browsers (validation normally points these up).
  • TEST every step of the way: it is far easier than trying to isolate problems in a complete page.

Why Validate?

Checking your HTML and CSS is a lot like spell-checking a letter or email. The difference is that as long as your pages look okay, you may be the only person who knows whether your code is valid or not. You are certainly likely to be the only person who cares.

You could argue that writing invalid code is like a mechanic not tightening a nut to the correct torque. Either you do a fully professional job or you do not. There are occasions when it is necessary to deliberately write invalid code – for example to workaround browser incompatibilities – but that is not the same as simply making mistakes. From the purely practical point of view, although many mistakes will stay harmless, some have the potential, when combined with something you may add to your page later, to break the page. It also seems illogical to complain about lack of common standards and then ignore the standards which exist.

Comfortisse Bra

Comfortisse Bra Review – The As Seen On TV Bra

If you have read even one of the many Comfortisse Bra reviews, you will hear one word repeated over and over, comfortable! Wearers are ecstatic about the perfect fit, no more chaffing or pinching, as is the most common experience with bras! Comfortisse bras are easy to size, beautiful in appearance, best of all feel great, and all this is accomplished without a stitch of underwire! If you are tired of trying to figure out the perfect fit for your bras, the difficulty is over, match the Comfortisse to your tee shirt size and you are all set. This is a slip on bra with no fasteners and hooks that require Houdini like skills and to top it all off it is machine washable.

Enjoy all day comfort with the Comfortisse Bra; you have tried most of the other brands both expensive and cheap. Now come over to the as seen on TV bra revolution and relax being beautiful does not have to be painful.

LifeCell Reviews Fuel ‘Cult Like’ Uprising

As revealed in recent Lifecell reviews, devout wrinkle cream users have been reported emerging in a cult like uprising in protests over several competing “poser” wrinkle cream products on the market’s bogus claims. Wrinkle cream products all claim to reduce or even remove unsightly wrinkles, fade age spots, remove crow’s feet and deep frown-lines etc. Many also claim to firm up sagging skin and even plump up your aging lips. Hordes of women have reported suffering severe depression as a result of having tried these many competing wrinkle cream brands, only to find the bottle full of little more than “hot air” and the smoke left remaining from their money as it vaporized into thin air.

These women having finally tried LifeCell cream, and realizing there actually is a product available on the wrinkle cream market that delivers as promised on every claim made by the wrinkle cream industry, have become enraged realizing what they’ve been missing.

You Want to be Successful?

Online adult entertainment is a strange business. Insofar as you can get to know anyone primarily via message boards and ICQ, you get to know your competitors quite well and your customers not at all. A lot of webmasters visit boards just to take a break from work, but there are always plenty of requests for help and suggestions. But then you see one of the other strange things about this business: such advice is very rarely acted upon.

For a few years it was incredibly easy to make money, so maybe it is inevitable that adult online attracts many people who are running away from failure than people who are striding purposefully towards success. Such people are lazy, disorganized, undisciplined: many even managed to fail when it was almost impossible not to make money from porn. I guess they are the people most likely to ask for ideas, but what they are really hoping for are neat solutions they can apply with no thought or effort, yet will drop a pot of gold into their laps. Preferably overnight. Small surprise that legions of would-be webmasters are gone and forgotten.

What makes people approach work, often life in general, in ways which guarantee failure or at best modest success? What makes people shy away from trying anything outside their experience and instead, put up a near impenetrable barrier to their own progress? Ego must bear a lot of the blame. That fragile part of our minds which is terrified of failure. Ego isn’t an energetic force which drives successful people, it is the inertia which produces failures. Successful people handle failure, they have to because it’s inevitable. Ego is also a liar because it tells us that not trying isn’t failure, when it is the biggest failure of all.

If you are sitting down every day, plugging away as usual and getting by on a trickle of checks, maybe even doing better than that, but still far from doing as well as you would like, stop and ask yourself why. Chances are that you are not dumb and even if you are lazy, that’s only a defense mechanism to prevent you from testing yourself. Figure out how to get past the block in your head which is stopping you from being successful.

Make change part of your routine

Some of the once biggest names in online porn have already disappeared or become largely irrelevant. In the past couple of years, several operations have closed or been swallowed by others and during the next few years we shall see a lot more high-profile casualties. We put this process down to the growing pains of a maturing industry and we don’t often think about why these specific operations failed to make it.

Some will not have failed in the usual sense. They may have fulfilled their owners’ ambitions or the owners might have had offers which were too good to refuse. But many more simply fall victim to a failure to change with the times. This is a very fast-changing business and if you do not change with it, you will be left behind.

This applies to everyone, big or small. Although in many respects it can be better to be primarily focused on one area, depending entirely on one aspect of the industry is dangerous. Spare part of your time to develop something in an area you think may be on the rise. And at least once a month and preferably more often, ask yourself what new wrinkles you have introduced to your main activity. If the answer is none, the reality – whether it is immediately obvious or not – is that your business has slipped backwards while some of your competitors have been moving forwards. Let that go on for too long and there is only one possible consequence.

Develop your skills

The more competitive an industry becomes, the harder it is to be successful in it. Standards rise. A design which would have worked 5 years ago, today will interest no-one. In 2000, Joe Blow could build a 100K TGP from scratch inside 6 months, but now even experienced traffic traders have to work. It isn’t enough to keep doing the same things day after day and rely solely on increasing experience to get you through.

In particular, make an effort to study topics such as general business principles, marketing and site usability. These are not just abstract principles and unless you have truly remarkable instincts, you will get a host of ideas for practical improvements to your sites and the way you work. You may be intimidated by these subjects or convinced they will be boring, but such knowledge is increasingly important and a vital part of becoming the professional you need to be to compete.

Take a close look at what you do. Are you so thinly spread that you are unable to do much more than scratch the surface of the areas you work in and the tools with which you work. That may not be a major issue if you can (and want to) hire people to do things for you, but otherwise it likely means that all your sites are increasingly showing their age. Maybe it is time to rationalize your operation, focus on its most productive areas, thus freeing up the time to be able to learn the skills needed to develop those areas further.

The main thing is to think! Don’t just climb back on the treadmill every morning and hope for the best. Failure isn’t the worst that can happen. If you don’t grab your life and your work by the throat and become successful, you could be looking at upwards of 30 years of tedious labor. I seriously doubt that is all you wish for yourself.