I thought there could be a lot more LOLs in doing it to others…

Create five pics 97px x 68px and upload them to an album. Then tag them with your chosen friends name, in reverse order…

I chose < – LOL but oh dear the opportunities

I made a conscious decision last year to stop farting about, adding hours of additional coding to my work for the sake of those people who insist on continuing to use Internet Explorer 6… However I also realized it’s better to offer reasons to upgrade rather than just delivering a simplified version of a given website.

I’ve read the comments and excuses across countless blogs, some users are stuck with IE6 at work and their companies won’t upgrade… others do not know how to upgrade (a pop up advising to upgrade is easily missed) or they simply fear change. Whatever the reasons are, it’s a crappy browser. IE6 is ancient, it’s successor is now very old too and let’s face it, it could do with being purged from use as well.

I had to LOL the other day reading some review on IE9 that included a quote about standards compatibility across all browsers etc. If you’re a designer, you’ll know IE (any version) can be the bane of a web designers life. Maybe IE9 is going to be great (IE8 sucks at CSS3), but so f***ing what? It’s late, very late and from what I have read so far offers nothing that hasn’t been provided by Firefox, Chrome and others for at least a couple of years now.

I have been using the Universal IE6 CSS for a while now but figured rather than just serve a plain version of a site I’d like to still include a nudge to the viewer to get rid of that turd of a browser and at least upgrade to IE8 or better still try a decent browser out.

I also wanted to include that ancient, long dead Office Assistant as hopefully a reminder as to how old some things are… and how they are not missed :O) The displayed message is a little tongue in cheek without being obviously sarcastic Here is a screenshot (as hopefully you’re not using IE6 and won’t be able to see my live version)…

Before we begin, download IE6 Warning Message Code and feel free to use it, edit it however you like.

Here’s the html (note the conditional comments that only display the enclosed html to IE6):

<!--[if IE 6]>

<div id="ie6lol">

<h1>It looks like you're trying to browse the World Wide Web using Internet Explorer 6</h1>

<p>Did you know the Internet Explorer 6 (IE6) browser was released way back in 2001 and even IE7 (IE6's replacement) was released way back in 2006?</p>

<p>Today's web browsers such as <a href="http://www.microsoft.com/uk/windows/internet-explorer/default.aspx">IE8</a>, <a href="http://www.mozilla.com/en-US/firefox/">Firefox</a> and <a href="http://www.google.com/chrome">Google Chrome</a> provide you with a significantly better online experience.</p>

<p>Having to include tweaks and hacks to cater for a last generation browser holds back today's web designers, it holds back innovation and progress at a time when things are progressing daily. This means that unless you upgrade you will only see a basic version of this and many other websites. In time your continued use of the IE6 browser will cause you to be denied access to popular websites completely.</p>

<h2>What would you like to do?</h2>

<br />

<a href="http://www.mozilla.com/en-US/firefox/" title="">Get Firefox</a>

<a href="http://www.google.com/chrome" title="">Get Google Chrome</a>

<a href="http://www.microsoft.com/uk/windows/internet-explorer/default.aspx" title="">Upgrade Internet Explorer</a>

</div>

<![endif]-->

and here’s the very basic css:

#ie6lol {
position: absolute;
top: 20px;
width: 800px;
height: 400px;
background-color: white;
background-image: url('img/ie6assistant.jpg');
background-repeat: no-repeat;
font-family: arial, sans-serif;
color: black;
padding: 30px 50px 0 50px;
}

#ie6lol h1 {
font-size: 16px;
font-weight: bold;
margin-left: 40px;
margin-bottom: 20px;
}

#ie6lol h2 {
font-size: 13px;
font-weight: bold;
margin-bottom: 1px;
}

#ie6lol p {
font-size: 12px;
line-height: 15px;
width: 700px;
}

#ie6lol a.button {
font-size: 12px;
margin-right: 15px;
border: 1px solid #CCC;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
background-color: #FFFFC1;
color: black;
text-decoration: none;
}

#ie6lol a:hover.button {
font-size: 12px;
margin-top: 15px;
margin-right: 15px;
border: 1px solid #808080;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
background-color: #FCFD89;
color: black;
text-decoration: none;
}

What we end up with is a div that is only displayed in IE6 with an Office Assistant background image, a bit of info about how old IE6 is (you can also include warnings about security etc to the user – it might scare them into upgrading unless they’re 100% I don’t know how to computer, what is an internets?) and then the options to try another browser or to upgrade – on occasion I include a 4th option offering help, basically a link to contact me if they want. You never know, it could be your next client…

I’ve recently been taking a lot of notice of the beauty of partial transparency now available to good browsers primarily the RGBa css unfortunately not supported by the bag of crap Internet Explorer. I ended up having to find a very functional workaround for IE involving an rgba.php script that generates a partial transparent .png file which is then tiled as an old fashioned background.

Firefox, Chrome, safari all beautifully render partial transparency just that sack of shit IE that continues to be the bane of an easy design life.

As I was coming up with the initial layout photoshop mockup for Lara to approve Google released their IMO seriously cool fonts directory. I was keen to use a different font having spent ten years stuck pretty much with Arial, ,Verdana, Times and Georgia.

I have also shifted away from Windows in favour of Ubuntu and so far I have to say, I love it! fast, clean and just better. So aside from the design headaches I was also having to get used to new software primarily Bluefish, Gedit and the Gimp for graphics/photo work. My old FTP client Filezilla was available for Ubuntu so there are some familiar things around. I also extended my desktop with an additional monitor so now have a 24″ and my older 19″ running alongside each other. Productivity is certainly speeded up and dragging a window across from one monitor to the other also looks pretty cool.

So, back to the site design. Lara was very happy with the initial layout and all the over lapping transparencies bring a real depth and 3 dimensional effect. The text blocks etc all go darker when hovered, highlighting the text more clearly too and I have used a lot of jQuery. It’s a bit slower in IE as the rgba.php script has to generate the images and then the css tiles each elements background but as far as I’m concerned IE is for people who aren’t really all that bothered about their internet experience. With Firefox and Chrome easily available there is no real reason to continue to use Microsoft’s awful browser. I just don’t understand why they Microsoft seem to steer clear of supporting great CSS.

One of the first things I found was that the “Send To A Friend” module was wide open to possible attack by automated spammers. I don’t know about you, but I am really tired of annoying captcha images that are getting harder and harder to read and being crap at maths i don’t like having to perform sums before submitting a form.

So, I thought I’d try and implement a thing called a honeytrap or spam trap, whatever it’s called it was something I’d read about.

In a nutshell it is a field in the form that has to be left blank in order for the form to process and send when the user clicks submit. If the field is filled in the form does not send and as spambots, being a bit thick, fill in every field of the form, surely this trap will catch them out.

It required a bit of hacking into the original code and a couple of lines of CSS adding to the theme/yourtemplatename/css/global.css file but all in all it was pretty quick to do.

Here are the 3 files that need to be edited:

(Remember, always create a backup of the original files before editing)

• /themes/yourtemplatename/css/global.css
• /modules/sendtoafriend/sendtoafriend.php
• /modules/sendtoafriend/sendtoafriend.tpl

I use notepad++ for editing files but line numbers may vary if your files have already been edited or are from a different version.

sendtoafriend.tpl is the template file for the front end view of the send to a friend form that is displayed. In your file find this snippet of code:

<p>
<label for="friend-address">{l s='Friend\'s email:' mod='sendtoafriend'}</label>
<input type="text" id="friend-address" name="email" value="{if isset($smarty.post.name)}{$smarty.post.email|escape:'htmlall'|stripslashes}{/if}" />
</p>

<p>
<input type="submit" name="submitAddtoafriend" value="{l s='send' mod='sendtoafriend'}" />
</p>

We’re going to add the new field for the spam trap between the email address field and the submit button (line 5 in the code above) to give us the following.

<p>
<label for="friend-address">{l s='Friend\'s email:' mod='sendtoafriend'}</label>
<input type="text" id="friend-address" name="email" value="{if isset($smarty.post.name)}{$smarty.post.email|escape:'htmlall'|stripslashes}{/if}" />
</p>

<p>SPAM Trap Please leave the following field blank</p>
<input type="text" name="begonespam">

<p>
<input type="submit" name="submitAddtoafriend" value="{l s='send' mod='sendtoafriend'}" />
</p>

This adds the new text input called “begonespam” which is fine but at this stage the field will be visible to users. Although it instructs them to leave the field blank it could be confusing and it looks kind of silly. We can use a bit of css to hide the new field, so it’s still there to catch the spambot but just not visible to the human user.

First, place the new code into a <div>, call it what you like but in this example the <div>is given the id, “begonespam” like so:

<div id="begonespam">
<p>SPAM Trap Please leave the following field blank</p><input type="text" name="begonespam">
</div>

and the following CSS is added to the global.css file

/* spam trap hidden field for sendtoafriend */
div#begonespam {

display: none;

visibility: hidden;

}

So now we have an invisible form field – (Note when you come to test the form you may want to keep the field visible to begin with to test that it works correctly. From your installation, send a product to yourself once with the field left blank and then again with it filled in to see what .)

Before testing it though, we need to edit the final file, sendtoafriend.php the form processor.

Around line 44 in your text editor (note, the numbering here is all to sh** now – if anyone knows of a nice code snippet plugin for WP let me know!) you’ll see this code:

/* Fields verifications */
 if (empty($_POST['email']) OR empty($_POST['name']))
 $error = $this->l('You must fill all fields.');

Between /* Fields verifications */ and if(empty($… add the following code:

if (!empty($_POST['begonespam'])) { return false; }

so we now have something like this:

/* Fields verifications */

 if (!empty($_POST['begonespam'])) { return false; }

 if (empty($_POST['email']) OR empty($_POST['name']))
 $error = $this->l('You must fill all fields.');

As I mentioned above, keep the new form field visible while you test it. You can either comment out the div tags or just leave the css part until you’re sure it works.

You can see, or more to the point not see, the thing in action here: Pretashop – Modified Send To A Friend Module

It’s early days to give any performance indicators but it sure is a lot nicer looking than a big old, illegible captcha image.