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.

Steven Goldstar looked in his book; ‘How to spot aliens from an long way away’ and found some information in it that was meant the old man was and alien. Steven Goldstar stopped his helicopter in mid air and spin it round quick to go back to the old man but the old man was gone when he Steven Goldstar got their.!.

Steven Goldstar said to himself “If that old man is alien then shops are on danger!” so he flied really fast to get to the shops and get their before the alien did. When Steven Goldstar got to the shops there was’not any signs of the alein at all so Steven Goldstar got in the shop and speak to the shopkeeper who was an Franceman and said to him…

“Shopkeeper man! bewear! there is and alien and he his coming to your shop!” and the Franceman did’not understand Steven Goldstar and he said back “what?” (in France language) so Steven Goldstar draw picture of alien and burning shop on cardbored that was on floor and the shopkeeper understands than and closes door fast!

Suddenly the old man was at the door but on the outside of it but he did not see it was an door cos oit was all glass and he banged into the door with his face and screamed “YOu damn basterz, I kill you aLL soon when I get in shop!” and Steven Goldstar and the shopkeeper got ready for the alien to attack them inside the shop soon!

Steven Goldstar opened his rucksak and took out some guns and bombs and grenads and other wepons to fight aliens with an give some to the shopkeeper who take them from him ready to used!!!

The Alien was really mad now and burst in the shop smashin’g all the glass with his head which was now like an alien and not like an old mans head cos it had change from it camoflage and it came at Steven Goldstar an the shopKeeper with angry look in it eyes an said to them very mad “Now you will all died!!!! Raaaaaar!”

Steven Goldstar fired an gun it was a Glock at the alien and the bullets just bounced off the alien becos the alien has a electrical shiel to protects so bullets was no danger to it!

The shopkeeper also fired his guns at the alein but was too slow doing it and the alien bited of his head and he was died there and then by the alien so Steven Goldstar grabbed up a lazr rifle from his rucksack and shot the alien in the mouth from very close to it an nothing happend again so Steven Goldstar got grenads and put them on floor with pins pulled out and ran away to the back of the shop quickly!

The grenads sploded and the alein was walkin over them when they did and it got hurt badby the spolosion and laid down making sounds like an person who was hurt a lot so Steven Goldstar came back to the front of the shops and see the Alien there and saw it were hurt bad so he got up an gun and shot it 5 times in the hed and it was then still!!!!

Right at that time Steven Goldstar mobile rang and it was the local Police asking Steven Goldstar if he was ok and he said to them “I have been attacked by an alein in the shop and the shopkeeper  is ded too with the alein that i killed but I did not kill the shopkeeper the alien did it.”

the Policeofficers said do you need us to help and Steven Goldstar says back, “no need to help me, I have answered the call of dutey an killed the alien”. The policemans said then “good work Steven Goldstar you did what had to be done when Duty calls!” and Steven Goldstar said back to him “yes, but i will need and ambulance hear to take away the bodies before they smell bad!”

In 5 minutes later and ambulance arrive at the shop at it take away the shop keepr bodies but andother van turned up then for the alein and it take it away to a secret location to be studyied by Science!

Then he was very tired and Steven Goldstar went back home on his helicopter which was not even damaged a bit but he did not have any fud and drink and stuff that he was meant to got so he was in trouble with Sarah Goldstar… again.

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.

In this particular example I was provided the original photoshop layout by my clients graphics designer, a very skilled man indeed (who I am fortunate to continue to work alongside occasionally) but from a 100% print background handling lots of high resolution brochures, posters etc.

The layout was provided as a single layered image which meant I didn’t have the luxury of being able to grab each element as I would have done had the layout been provided as a layered .psd file. I think I also mentioned in my previous post about it also being supplied as a.pdf file :O( but hey back then I didn’t know any better. You never stop learning!

The first thing I did was take a full sized screen shot, cropped the layout out and saved it as a high res .png file. I also re captured the large photo that dominates the homepage content area and saved that as a .jpg for later use.

This gave me something a little like this:

Next I had to decide how to chop it all apart, what could be recreated using styled text and what would have to remain graphical. Unfortunately due to the non web safe font a lot of the original graphics has to remain in use (more on which later but I figured out a nice way to use text styled with CSS to look like the graphics including rollover effects) as opposed to primarily using text which is so much better for search engine optimization.

After a bit of chopping I basically arrived at this breakdown into the main sections:

• A – Header
• B – Top main navigation
• C – Main content area
• D – right column, secondary navigation
• E – Footer

I had to reconstruct some areas eg the header without the main navigation but I eventually ended up with a few individual elements that would then be built back together to display the whole, working site using XHTML, .PHP and CSS.

I had to divide the main navigation section into individual buttons and then create a darker hover state for the rollover effect. The resulting CSS required to convert what was a basic unordered list type of navigation using optimized text into the graphical representation was quite a challenge to say the least.

Each list item required a unique class so that each menu button could be given it’s own graphic hover image. Plus (by using .php) each item could be assigned a ‘selected’ class to allow the darker hovered image to remain displayed to indicate the currently viewed page.

What began as a tidy, unordered list quickly became something of a rats nest of code. You can see an idea of the list items below (I’ve removed urls and title etc to clean things up a bit):

<ul>
<li class="home"><a href="#" title="title here" <?php if ($page == ‘index.php’) { ?>class="selected"<?php } ?>><span>text link</span></a></li>

<li class="something"><a href="#" title="title here" <?php if ($page == ‘something.php’) { ?>class="selected"<?php } ?>><span>text link</span></a></li>

<li class="somethingelse"><a href="#" title="title here" <?php if ($page == ‘somethingelse.php’) { ?>class="selected"<?php } ?>><span>text link</span></a></li>
</ul>

This first list items class is “home” which calls the CSS to display the homepageUP graphic (the span is given a negative margin to move the anchor text 999pixels to the left and out of sight) for the link and swap it for the homepageHOVER graphic when the link is hovered. Once the link is clicked the .php code assigns the class of “selected” and the CSS for “.home.selected” tells the browser to display the hovered image to indicate that menu item as the currently displayed page. I could have used a totally different image for the “selected” state, maybe bright red with flashing dots but time was pressing on and it works fine. Here’s the CSS:

#navTop .home a {
background-image: url(../img/homepageUP.png);
background-repeat: no-repeat;
width: 96px;
height: 34px;
}

#navTop .home a:hover {
background-image: url(../img/homepageHOVER.png);
background-repeat: no-repeat;
width: 96px;
height: 34px;
}

#navTop .home .selected  {
background-image: url(../img/homepageHOVER.png);
background-repeat: no-repeat;
width: 96px;
height: 34px;
}

This was applied to each of the five main navigation elements that were assigned a div id of navTop and saved as an included .php file navTop.php

See a demo and grab the source files: CSS text/image navigation menu using .php to assign selected class.

In my next post in this series I’ll share how I eventually got the navigation in the right column working, it was originally just whole blocks of graphics with a hover action assigned using javascript, urgh. It took me a while but in the end I did it with CSS, got the blue diamond showing and correctly overlapping the main content div.

I have “rescued” several websites for people in the last couple of years. All had fallen foul of a less than savvy/honest web designer… (see: Has a copy of Frontpage 2001, made a site for their uncle and is now a Web Designer.)

When I get a phone call or email about someones website not getting any visitors or them not getting enquiries etc the first thing I ask is;

“Does your site show up in search results?”

To which the answer invariably is,

“Yes! In fact it shows up as number one in Google.”

Impressive, so what’s the problem? If their site is showing up top spot on the worlds number one search engine why aren’t they getting any traffic?..

So my next question is;

“What search terms to you show up top for?”

“Well it’s when we type our website name in… why?”

Deep breath.

Me: “Well the thing is, it’s not very likely that someone who has never heard of you is going to type your domain name into a search engine is it?”

Client: “I suppose not, we do advertise in a magazine so people reading that will see our domain name won’t they? They’ll type it in won’t they?”

Me: “Possibly but most likely they’ll type your url into their browsers address bar and go directly to your site. What is your website about?”

Client: “We have a couple of holiday cottages in Cornwall that we rent out.”

Me: “Ok, so really you want your website to show up in search results if someone types in something like ‘holiday cottages Cornwall‘ or ‘Cornish holiday cottages‘ then.”

Client: “Yes, that would be great, I see what you mean a stranger is more likely to type that in search than our domain name aren’t they?”

Me: “Exactly, by the way what is your domain name?”

Client: “www.freddyandsandras.co.uk”

Me: “… …”

Me: “Well there’s not much we can do about your domain name, it would be better if it contained keywords relevant to your service. Would you consider registering a new domain something like cornwallholidaycottages.com?.. with keywords like that in your domain you’d be off to a much better start.”

Client: “Well we would, I see what you mean about the name but we’re already paying £30 a month for our existing domain name and hosting.”

Me: “Ouch! That’s a little on the high side but we can talk about that later. I’ve just had a quick look at your website and had a look at all the code that is used to make it all work etc and it’s a pretty bleak picture I’m afraid.”

Client: “Oh dear, we thought something must be wrong. What’s the matter with it and what will it cost to fix it?”

Me: “There are a lot of things missing that need to be included in the behind the scenes coding, some photos could be optimized better and your menu navigation needs looking at. Currently it’s just graphic buttons pointing to pages called page1.html and page2.html.

It gets a bit more involved but basically, graphics are invisible to search engines unless they’re given what called an alt tag, a textual description of the image. The alt tag further benefits by using keywords in it. The button on the navigation menu that points to the Rose Cottage page could be given the alt tag “Rose Holiday Cottage, Available For Rent In Cornwall” . then, the actual link to page1.html could be given a title tag again using some keywords to describe the link destination, Rose Cottage.

Text is much better for navigation links all round and page file names would be better called rose-holiday-cottage.html rather than page1.html. If the menu button needs to stay looking like the current graphic it can be made to look like that using a technique called CSS but that’s for another day.

Anyway I’ll put it all together and get in touch with you in the next couple of days with some ideas and suggestions rather than do it now over the phone. I’ll write up everything I can find and email it to you along with a rough idea of how long and what might be involved to fix it. I can also set you up with domain name registration and hosting for a LOT less than £30 a month.”

Client: “Ok, thanks a lot, I don’t think I’m going enjoy reading through it though. Bye for now.”

Me: “Don’t worry, the appraisal will be totally free to you and I’m sure we can come up with a fair way of taking it from there. Bye.”

And that has been kind of the way the chat went each time, a very disappointed person who had paid good money to a … well I won’t say to what. When you hear the figure £1500 mentioned plus £30 a month for hosting and you go to the site and see:

• A bunch of table cells thrown together (default borders always pleasant to see).
• Times New Roman text just resized for headers no H1, H2 etc used,
• No <head> title tag
• No meta description… a what?
• No alt or title tags used.
• Awful file names like page1.html
• Roaming navigation (homepage it’s at the top, page2 at the left, page 3 over at the right and so on) that swaps around the contents or even misses some out on some pages.
• Photos that are over 1MB but just click and dragged to fit the cell or the more advanced ones using width=”300″ to display a 3000 pixel wide image.
• A multitude of dead links, broken image links and having to constantly use the browser back button to navigate back…

Not good, and there are a lot out there – offering special discounts, £500.00 for a website that not worth £5.00

So, if you have a website that you think could do with a bit of a spring clean, drop me an email. I’ll gladly have a look.

<title>www.mywebsite.com</title>

Urghh! How many times have I seen the title tags simply filled in with the website domain name? I suppose it is better than nothing which is also often the case but…

The title is what will show in a search engine result as the large blue link. It is also the text you see in the top left corner of your web browser. If you see Untitled Document there when vieiwing your website it means you haven’t added a title tag – so get one in there, pronto :O)

You don’t have to worry about the words Untitled Document showing up in search results because they won’t… Unless search engines have become very lax these days a site so badly optimized isn’t going to rank very well at all, this is not a good thing.

Your title should include keywords relevant to the pages subject rather than the site name. These will show bold in search results if they’re the keywords the visitor typed in. Let’s say you run a website that advertises rental property in France, it’s called beaupeeps.com and your home page title is:

<title>Beau Peeps</title> or <title>www.beaupeeps.com</title>

Using your business name Beau Peeps as your title tag is pretty meaningless, it doesn’t contain one keyword relevant to the site subject. Someone searching for Beau Peep isn’t likely to be looking for a website about rental property in France, nursery rhymes maybe…

Similarly using  “Homepage” alone in your title is meaningless with regard to your business/website subject so a suggestion would be:

<title>Rental Properties In France</title>

Hey look at that! It actually tells you or more importantly your site visitor and any passing search engine spider what your website is about. See below for a typical Google search result.

Number 1 out of 6,200,000 results for that phrase… That’s what SEO is all about!

There is a limit to the number of characters (around 60) that you can use before the end of the title disappears off the edge of the search results blue link. like so:

This is a very long title tag that will eventually vanish off the edge of th…

Each page of your website should have its own title, try not to duplicate the same title for each page but remember to include keyword/s relevant to that page eg <title>Rental Properties In Brittany, France</title> on a page about property for rent in Brittany etc.

The same rules apply in your use of the meta description tag…

Upon closer inspection the ‘click here’ link within the message looks initially like www.facebook.com but when you look closer it is actually www.facebook.com.hyvsse.be  meaning that the facebook.com part of the URL is just a subdomain folder of hyvsse.be whatever the hell that is… the spammers,scammers phishers domain, certainly not Facebooks.

It’s known as Phishing, if you login via that link you’ll be giving away your login details to the lovely folks, the Phishers who set this up.

Here’s a screenshot piccy – I’ve coloured out my email address.

If you have already received this email or one similar and clicked the link you must login to your Facebook account normally and quickly change your password. Don’t panic but get it changed as soon as you can before the Phishers login and change it leaving you unable to login. Once in your Facebook account they will have access to all your messages, your friends lists etc and can do a lot of crazy things from setting a silly or offensive status for yourself to mass mailing all your friends with nasty stuff, who knows what else, to much more sinister things – some folks have Facebook linked with online payment gateways etc.