stormdamage.org - Art, Webdesign and CSS.

A tasty looking burger vector, for your delight and delectation. For your personal amusement only, please do not use on any commercial work.

How accurately can you line things up by eye, without using any tools?

Find out on this quiz: The Eyeballing Game.

It’s often useful to have your email address proudly displayed on your website, with a handy little ‘mailto’ link to make things easier for your users. However, doing this is often an open invitation for spammers to ‘harvest’ your email address and use it to bombard you with unwanted nonsense.

They do this by using a spambot program which searches for likely looking combinations of letters. Since email addresses have to have an @ symbol, often they will look for this character and grab the text on either side, in the hope that it will be a valid email address.

A common way of getting around this to replace the ‘.’ and ‘@’ with ‘dot’ and ‘at’, or by putting in some extra text which will be obvious to a human reader, but will render it unusable for a spambot. For example, with ‘nameREMOVE@domain.com’, the ‘REMOVE’ text should be deleted.

Images can also be used to safely display the email address. This technique involves creating a graphic with the desired email address displayed, and saving it as a .gif or .jpg file. Though this can look effective, it does mean the address won’t be clickable.

Though they do work, none of these methods are especially professional solutions. Here are some quick alternatives…

Using CSS

Css can be employed to display the email address backwards in the code, but forwards on the page itself. Unfortunately, this neat solution doesn’t work in older browsers.

HTML:

<div class=”backwards”>email@address.com</span>

CSS:

.backwards { unicode-bidi:bidi-override; direction: rtl; }

Using Javascript

This technqiue breaks up the code with Javascript, so although it will display properly on the page it is hidden from spambots. This is probably the most common method of email obfuscation, but I’m not sure how effective it is these days, as newer spambots seem to trawl through Javascript as well.

<script language=”javascript”>
var user = “name”;
var domain = “domain.com”;
var display = user + “@” + domain;
document.write(”<a hr” + “ef=m” + “ai” + “lto:” + user + “@” + domain + “>” + display + “</a>”);
</script>

Using Enkoder

Enkoder is a handy tool which creates some crazy encrypted Javascript. The method is basically the same as above, but the code generated is far more unreadable. It also has options for editing the subject line and link title for your email anchor.

Although no method is 100% effective against the spammers, these methods should at least make things as difficult as possible.

As much as I adore CSS, it seemed to me that it had one main limitation – it’s impossible to make it behave like tables. For example, it you have three columns of data beside each other, if one pushes down further than the others, the adjacent two won’t push down to match. Something like this happens instead:

The temptation is of course, to just use a sneaky table. But after some research I found this elegant solution by Pixy. The main beauty of this technique is that it works even in IE6, and doesn’t require any hacks. However, it is a little hard to get your head around if you’re new to CSS, so here’s my simplified breakdown of Pixy’s technique.

Some deer outlines – an early Christmas present, or just for that foresty feel.

Test your ability to match colour tones along a sliding scale with this test:

Test Your Colour IQ

When you have a long line of text separated by hyphens, they will not normally be wrapped automatically onto the next line. This can be awkward, as it may break a perfectly good layout by breaking the content out of its containing box.

Some text like this for example, will not wrap if its container is quite narrow (say, in a table column).

466456-34635645-346346346-3463456

There is a solution – it’s the ’soft hyphen’:

&shy;

Which will create a hyphen which will happily wrap onto the next line.

Though it is easy to criticise sites that are somewhat lacking in design smarts, not enough attention is paid to the opposite problem – overdesign.

Though it may seem logical to highlight important information on your site, overdo it and you could put off your users. If they see a panel which tries a little too hard to grab your attention, they could assume it’s an advert and ignore it completely.

This is illustrated beautifully by Jakob Neilsen, who uses the US Census Bureau website as an example to show how easily this can happen. Although the site has the US population in large red letters, when users were asked to find it, 86% would miss it entirely, assuming it was an advert.

Another example to illustrate the overdesign problem is the website of Boots the Chemist:

The site’s main content is made up of variously coloured, attention grabbing panels, which are likely to be ignored by the user. The large numbers in bright red font also add to the problem. (more…)

You may remember a previous post of mine, where I explained a method of using only CSS to create tooltips. Well here are two creative uses for that technique. Firstly – this map of the capital cities in the UK and Ireland. The locations are revealed when you hover your mouse over them:

This is done by creating a <div> which has the map image as the background. Links are placed inside this <div> for each location, and are positioned absolutely over the map. Inside each link is the tooltip text <span>, and a <div> with the class ‘dot’ to define the hotspot area. On the map shown, I have outlined these divs with a square, white border so you can see where they are. But of course you could make them entirely invisible if you wanted to. (more…)

Here’s a nifty trick to make the content of any website editable – simply copy and paste this line of Javascript into your browser window, then play around with the content to your heart’s content:

javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0

Of course it doesn’t alter their code in anyway, it just changes the way you see it in your browser. There isn’t much of legitimate use for this, but it’s an interesting Javascript curiosity nonetheless.

(Shamelessly stolen from Blogstorm.)