Beast-Blog.com
Chicletification and Sloppy Code

Just lately, after learning more about this blog promotion and “feed” stuff as I mentioned in a previous post, I have decided to put a little more effort into getting found by people who read blogs. After all, if more people come to this blog and read my stuff as a result, then that’s probably a good thing. It could lead to web design opportunities, all sorts of good stuff, right? So I took a half day and ventured forth on the web in hopes of being properly Chicletified. Here’s how it went…

Chicletification

I located several click-services, reciprocal-link directories, subscribed to them — which was pretty easy in most cases — grabbed their mostly awful code, and after a lot of “use our code” editing, I placed 32 additional mini-icons or chiclets on my blog’s side bar. (Whoa, enough already!) Unless the image is a data-containing, live-updating, I saved them to my server for local hosting to decrease load time. The services seemed to vary quite a bit. Some better than others. One really stood out in a very good way as was evidenced by their level of personal attention.

Specifically I’m talking about Blog Advance. A lot of encouragement came from the nice people over there. “Join a Usergroup,” “Visit the Forums.” Since somebody was being so welcoming, I let myself be welcomed. And I got a great welcome at that. Anyway, the whole thing was sort of cool, a personal touch. Okay, now onto the code…

Sloppy Code

I don’t understand why the code snippets offered by a lot of the sites I visited is so, um, loose. It should be written to a proper DocType or Document Type Declaration (DTD) — and offered in two flavors. It’s only a little icon, so shouldn’t it be offered to users properly? Sheesh. Like this:

For HTML use:

<a href="http://www.directorysite.com/?you">
<img src="http://www.directorysite.com/images/icon.gif" alt="DirectorySite.com" width="80" height="15"></a>

And, with a closing slash (in the vast majority of the cases at this time).
For XHTML use:

<a href="http://www.directorysite.com/?you">
<img src="http://www.directorysite.com/images/icon.gif" alt="DirectorySite.com" width="80" height="15" /></a>

In both examples above, you may want to add the title attribute to the link part of the code if further explanation of the link is necessary. Also note that URLs will change, and quite possibly the image dimensions. The measurements are in pixels. There may also be border styling to consider. The target attribute is another thing. You may want to host the image locally, too. Below are examples of these things that code providers really need to tell bloggers so they do it right.

Title attribute.

In the next example I will show you the XHTML code from above with the title attribute added, plus a different URL, and a larger image (88px x 17px) so you can see how it might look with these changes.

<a href="http://www.blogclicksite.com/ref.php?yourid" title="Vote for my blog at Blog Clicksite!">
<img src="your_images/icon.gif" alt="BlogClicksite" width="88" height="17" /></a>

Ampersands in URLs.

Some URLs provided to you will have ampersands in them. It is important for proper page validation that these ampersands “&” be converted to character entities. This is will not affect the URL. Conversion is as follows: Use & instead of &. Let’s say you are provided a link-back URL like this example.
http://www.bloglisting.com/?action=signup&ref=you&id=436
It should look like this:
http://www.bloglisting.com/?action=signup&ref=you&id=436

Alt attribute.

Alt or alternate text is what’s visible if the image isn’t available. Thus, think of alt text as brief text version of the image. So let’s say you have an icon that says RSS, the alt text for this attribute would be quite simply RSS (alt="RSS"). If, however, you don’t want or require this, if the image is a simple bullet icon without text, for example, you wouldn’t remove the alt attribute, but you would apply a null value to this attribute, as follows: alt="" instead of alt="RSS".

Border attribute vs. border styling.

In many of the code snippets I collected, I was provided with the styling attribute for border in the code. You see, by default, a linked image will typically have a border around it. This isn’t usually desired by the site owner (even though I have borders on mine), thus they add something like this, border=0, or border="0", or, in some cases, like this, style="border:none;" or style="border:0;". Example one is completely invalid — don’t use it. Example two is okay to use in an HTML document. The last two examples are perfectly fine for HTML or XHTML documents. However, if your DocType is XHTML, you cannot use the border attribute, style must be used in its place (often already taken care of in your CSS). Here’s an XHTML example with a no-border style, followed by an example with a styled border like I use.

<a href="http://www.directorysite.com/?you" title="No Border" >
<img src="http://www.directorysite.com/images/icon.gif" alt="DirectorySite.com" width="80" height="15" style="border:none;" /></a>

<a href=”http://www.directorysite.com/?you” title=”Styled Border” >
<img src=”http://www.directorysite.com/images/icon.gif” alt=”DirectorySite.com” width=”80″ height=”15″ style=”border:2px solid #99cc66;” /></a>   /* You can also use “dotted” or “dashed.” */

Target attribute.

Last thing I came across in the code soup I had for lunch was the target attribute. Target defines how the link will open; new window/same window. By default, links will open in the same window, thus no code is needed. If, however, you want your external/off-site links to open in a new window, then the target attribute, target="_blank" must be supplied and defined, as shown in this HTML example.

<a href="http://www.directorysite.com/?you" target="_blank">
<img src="http://www.directorysite.com/images/icon.gif" alt="DirectorySite.com" width="80" height="15"></a>

Please note that I used an HTML example. The reason I did this is you cannot use the target attribute in XHTML. It has been deprecated. The trend nowadays, is to not take over the visitor’s browser with new windows but to open all links internally instead — to separate the page’s behavior from its mark-up. Thus, in my opinion, regardless of the DocType, if the code snippet has target anything, I would simply remove it. Keep them with your great content and imagery, don’t try to kidnap your visitors. If your site or blog is good enough, they’ll stay a while, bookmark or blogmark you, subscribe to your feed, and maybe return later. Right? “No!” you say? Alright, since you’re being insisting, I will show you a way to use target in XHTML even though I no longer condone the use of it. (Please note that I use script elements to make this happen and if JavaScript is disabled, the link will open internally. Also note that I add onkeypress to accommodate keyboard users.) It would be considerate of you to use the title attribute in this case, like so: title="Link opens new window".

<a href="http://www.directorysite.com/?you" onclick="target='_blank'" onkeypress="target='_blank'">
<img src="http://www.directorysite.com/images/icon.gif" alt="DirectorySite.com" width="80" height="15" /></a>

Document type.

In this post I have given you two basic examples of many things based on the document type declaration or DTD. This, for those who don’t know, is the fist thing the browser sees, top of each page, found positioned above the <head> and <title> and. It tells the browser what kind of document it is among other things. An easy way to determine your blog’s DocType is to “View > Source” (right click, select that option). The first one or two lines you’ll see on the page is the DocType. Here’s a XHTML DocType followed by an HTML DocType.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Easy, right? Want to learn more about document types? I wrote another article about DocTypes that you may want to read. Also, I’d be short-changing you, dear reader, if I didn’t give you a link to the absolute authority on this subject.

In closing…

I’m not sure I’ll keep all the icons, some will likely fall along the wayside as time passes. It all depends on the results. For now, though, I have been thoroughly chicletificated, and done so validly!

Filed under Wicked Wild Web, Coding & Markup —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

My WebAxe Accessibility Podcast »

GreenBeast CMS v.1.3 Public Release! »

Great News for Rotten Smellers »