Daniel Hardy

Yesterday a friend of mine showed me a great dynamic comment system being used over at deadspin.com . After seeing it in action I decided it would be fun to implement something similar on my site (even if I rarely get any comments). I have whipped up a bit of Javascript and tweaked my template a bit to support it. Please leave a comment and let me know what you think. If it gets decent reviews I can great a tutorial on how to easily implement it on a typical Wordpress theme.

I have been working on various forum validation techniques lately and came across a simple idea that seems to make a lot of sense. You can read more about it here. The basic idea is that you include a hidden form element. If this element is filled in then it is probably a bot that doesn’t understand CSS or Javascript. When handling this submission you know that you can ignore it.

I have been using a unique theme for a while now and have noticed something strange. It appears that many people don’t code in the background color because they assume that the default is white. Well this is a fallacy, as it turns out the default is set by the window manager and there fore your page may be broken. I know I am a minority but it is not that hard to add one line of code to ensure your site is always at its full glory.

Making logos accessible is actually much easier than many make it out to be. It is important to make your logos accessible as you want them to have a strong search engine presence.

For this tutorial you will need to have a basic understanding of XHTML and CSS.

First comes the HTML. Generally your logo is nested in the header like this.

<!--HTML Code-->
<div id="header">
<a href="home"><img src="yourlogo.jpg" alt="COMPANY NAME" /></a>
</div>


To make this more accessible and for it to degrade gracefully we really want to eliminate the “img” element and in turn use a text elements like this

<!--HTML Code-->
<div id="header">
<h1><a href="home.htm">YOU COMPANY NAME AND ANYTHING ELSE</a>
</div>


In the above case if a user views the page un-styled they will simply see an H1 header link with the name of your company and any other text you place inside. This allows search engines to read the actual logo in plain text and assign this text an important value (first H1 elements are seen as important). It also improves mobile device structure as many of them don’t like images.

Now we can use CSS to make the image based logo appear where we want it and more importantly how we want it (image). We only need to style two elements, the ‘H1′ and ‘a’ tags.

/*CSS Code*/
#header h1{
width:auto;
height:auto;
text-indent:-9000px; /*This removes the text from the screen*/
}
#header h1 a{
width:300px;
height:100px;
background:transparent url('path/to/your/image.jpg');
display:block; /*This is critical*/
}


In the ‘H1′ element you will notice that we gave it a text-indent of -9000px. This moves the the text far enough off the left side of the page that even with the largest monitor it is not visible. By doing this we ensure that pesky text doesn’t sit on top of our beautiful logo.

The next unusual piece you will find in the CSS is under the ‘a’ element. “Display:block;” renders the ‘a’ element as a block level element allowing it to have a fixed width and height.

Now you have a beautiful logo that degrades seamlessly and is extremely accessible both to humans and search engines.

Great web app. to test and validate just about every aspect of a web page in one single shot. This includes things like validating HTML/XHTML, CSS, Feeds, etc to testing for accessibility and SEO problems.

Very handy, check it out

read more | digg story