Tag Archives: CSS

Protect your email address from crawlers

Knowledge Base,

I have come up with my own way to protect private data like email addresses, postal addresses or telephone numbers you want to or have to publish on your website. I was wondering if anybody else does it this way and what could be possible pitfalls. So please comment this post or write me if you have any remarks.

A simple solution would be hiding it via JavaScript (technically this would rather be “revealing via JS”) – but this does not work for me since I don’t want to exclude users with disabled JavaScript, for example blind people using screen reader. Plus, German law requires you to provide contact information barrier-free. The same holds for displaying the address as image.

My approach works with simple HTML+CSS only:

  1. One long-known technique for “encryption” of email addresses which I included into my approach is the substitution of some characters in your HTML code by their hexadecimal counterpart, i.e. mail@example.com → mail@example.com. This will break poorly-programmed crawlers but it is a pretty old trick so I assume it is not that effective anymore.
  2. Another simple method are HTML comments which won’t affect your readers but (hopefully) some crawlers: mail@example.com → ma<!-- just one comment -->il@example.com.
  3. And here comes the new part: include invisible boxes containing useless text in your code: mail@example.com → mail@ex<span style="visibility:hidden;float:right;">useless</span>ample.com.
  4. Please don’t forget to exclude sites with such disguised information from legitimate web crawlers via your robots.txt file – otherwise your site would look broken.

Altogether this disguises your email address as

ma&#105;&#108;&#64;<span style="visibility:hidden; float:right;"> useless </span>examp&#108;<!-- just one comment -->&#101;.com.

As you may notice this approach is not very pleasant for screen reader users either but I think if you include a personal message via

<div style="visibility:hidden; float:right; height:0px;">
Dear screen reader user. I have included some invisible boxes
in the following contact information to puzzle spam crawlers.
I apologize for your extra work but I am sure you will
be able to decode the text.
</div>

it will work for them. Displaying your address as image or disguising via JavaScript would not.

What I learned during the redesign

Knowledge Base,

I have decided to update my website and turned it into a blog. All “portfolio” content is now presented as articles and is alternating with some tricks and tips mostly related to IT. This post is both the announcement of the new design and a collection of snippets I found while customizing WordPress and the theme.

  1. The sticky header is achieved by setting 
    .imageBadge {
	background-attachment:fixed;
	min-height: 100px;
}
.textBadge {
	position:fixed;
}
.mainContent {
	z-index: 2;
	position: relative;
	background-color: #FFF;
}
  2. The parallax effect for the header is done like this: 
    /**
 * Creates a parallax effect for the header when scrolling
 */
(
function () {
	var a = document.getElementById("masthead"),
		e = $(window);
	e.unbind("scroll").scroll(function () {
		a.style.backgroundPosition =  "center "+ -(e.scrollTop()/ 9) + "px";
	});
}
)();
  3. The sticky footer or “the curtain reveal effect” is done with 
    .footerContainer {
  height:50px;
}
.footer {
  position:fixed;
  bottom:0px;
  padding: 10px 0px;
  z-index:0;
  width:100%;
}

    A minimal demonstrator for points one to three can be found here: http://jsfiddle.net/PQS2C/3/

  4. Since there are so many syntax highlighters out there: I prefer the SyntaxHighlighter for WordPress. It does not screw up the indents, it has line numbering and visitors can easily copy the code.
  5. Protecting your WordPress login page (or other sensitive documents) by using .htaccess is a good idea because it reduces the load when your site is attacked and you have an additional protection against security vulnerabilities. But if you want a specific IP address to be excluded from the password query so you don’t have to enter the password every time, add the following to your .htaccess in the WordPress root folder: 
    <Files wp-login.php>
  AuthUserFile <path to your .htpasswd>
  AuthName "Admin console"
  AuthType Basic
  require valid-user
  Order allow,deny
  allow from 12.34.567.89
  satisfy any
</Files>
# Guard some other sensitive files
<FilesMatch "(\.htaccess|\.htpasswd|wp-config\.php|readme\.html)">
  order deny,allow
  deny from all
</FilesMatch>