The idea is fairly simple – write your CSS using a “bottom up” approach, as opposed to a “top down” approach, treating your elements as “objects”, using mainly classes, as opposed to IDs. The idea of this is to make classes more reusable and to encourage a greater css granularity architecture. The overall theory behind OOCSS is something I don’t dispute in the least, if anything it’s simply good practice when writing a CSS file.

For me, the whole article borders on the pedantic to the outright pretentious.

Firstly, I’m not a fan of the name. “OOCSS” implies a link to OOP (Object Orientated Programming), which it is not. I can see why they’ve named it OOCSS as I guess multiple classes could be similar to inheritance, an element on your page as an “object”, classes imply reusability etc. As a web developer, who uses OOP I was instantly put on the defensive, thinking “OOP for CSS, wtf”. I understand the name is simply a paradigm, but it sends out all the wrong signals for me personally.

Apologies if this article turns into a bit of a rant…..

Descendant CSS Selectors

OOCSS seems to have a odd rule whereby descendant CSS selectors (E>g. .foo h4) are suddenly not allowed. Instead, to adhere to OOCSS principals you need to split the this into two separate classes and apply both classes within your HTML code:

<div class="button-basic button-skin"></div>

Both methods – using a descendant selector and two classes – are perfectly valid for me.

CSS Class Abstraction

One of the ideas that I don’t agree with the fact that the article and whole concept implies that more class abstraction is good. People still learning could read into this idea the wrong way and (worse case scenario) end up with a plethora of abstract classes that produces some awful HTML:

<div class="padding center-element block text-italic floated-right"></div>

I won’t go into the debate about speed of selectors either, as the article is little one sided here. Giving preference the use of classes over IDs is not a good way to go in my opinion.

OOCSS Performance Benefits

Another major selling point of OOCSS is that of site speed – which is of huge concern to web developers nowadays after recent Google changes, citing page speed as ranking factor. This part of the article is null and void for me as it’s so obvious. Small style sheets will result in smaller css files that download faster – that’s pretty obvious. Although after the CSS file has been gzipped there wouldn’t be a great deal of real world benefit. Saying all that however, OOCSS is something the majority of good developers do anyway ….

OOCSS – Already Used …

For me, OOCSS is an acronym someone has given to a technique they have suddenly realised they use, after comparing it to OOP – a fancy name if you like. It’s an acronym I imagine will be very common on CVs.

After reading the article I wondered why it existed in the first place. OOCSS is something any designer/developer worth their salts does by default after a longer enough period of time. One of the biggest sayings when relating to good CSS is “don’t use ID selectors for everything”. It doesn’t make a great deal of sense when you’re learning, but as time goes on you’ll realise that some commonly used IDs could just as well be a class – whallah, you have yourself the beginning of OOCSS. For instance, in pretty much all my projects I have a class called input-wide that one applied to an input field, makes it longer.

Hell, when I was first learning CSS years ago and ran my (awful, naff) sites through the W3C CSS Validator popped up a warning mentioning redundant CSS that could be better served using a class instead of ID – I never heard one mention of OOCSS then either.

To conclude, I’m not against OOCSS per se, I’m against the way it’s been described in the article as something new and revolutionary. In reality, everyone uses it, unknowingly as it’s simply a collection of best practices. The article would have a made a lot more sense if it was titled something along the lines of “CSS Best Practices”, as that’s simply what it describes, nothing more or less.

For me this whole area complicates CSS. Personally, I’ll keep using LESS for rapid development of layouts on multiple devices and as a starting point for my CSS – which is just what I believe a CSS Framework should be – a starting point, not a long list of “do’s and dont’s”

I’m sure some people will totally disagree with me on this whole topic, so I apologise in advance. At the end of the day it’s a hugely subjective topic

The latter is not a new idea by any means, but is generally considored to be a positive practice to implement on any site.

SOC and Ecommerce

The effect is compounded on ecommerce sites – sites that usually have a heavy template footprint. For example, a typical ecommerce site may contain a category listing with child categories in the form of a “mega drop down menu”, as they seem to to be coined. This is fine, as such menus do contain a lot of good keyword rich material that will be relevant to your site.

However, I have recently been experimenting a little on an ecommerce site I regularly perform SEO on, that does have a fairly beefy drop down menu. I have been focusing on product pages – I like to think of these as your most important pages and pages you’d want people to land on, as it tends to help conversions. In my eyes, any white hat technique to give greater weight and meaning to such pages is a good thing.

For the site in question I edited the source to force the top menu to the very bottom of the page and used absolute positioniong to force the top menu to the top of the screen for the user, when the page is rendered. I performed a similar action for the product description. As a result the important content i.e. the product title and description are now very close to the top of the page within the HTML.

Further Product Page Optimisations for SEO

Additionally I made a couple of other minor optimisations that I’ve noticed some bigger sites are using. At the top of the site in question, there is a company logo – a link, styled with a background using css. For the product page I amended this to a h1 tag with the product title within the header tag. I then used text-indent to hide this. Further down the page, I replaced the old header one tag (was further down the page previously, next to the product description) with a h2 tag and placed the product strapline within a h3 tag. So, the HTML for my company logo, for a product page is as follows:

<h1>
<a href="/product-url.html">My Product Name Here</a>
</h1>

I’ve been runing the above for a month now and have noticed the following trends in Google Analytics – I can’t be 100% sure this is directly down to the above though:

• Increased traffic to product detail pages from Google
• 1.2% increase in sales conversions

Over the next month I’ll be experimenting with replacing the logo with the category name, on my category listing pages too. I’ll update this post with my findings.

Have you had any similar experiences using the above, or similar?

Let me elaborate.

As much as I love the web design forum, some of the advice given is frankly, awful, I can’t not post a reply. A lot of the advice given is a range of generic seo quotes that people have picked from the web. E.g. ‘use headings’, ‘have a keyword density of 4%’ and ‘get backlinks’. The majority of the advice centers around simply getting people on a website or appearing for a generic, competitive term. Compare the latter to SEO’s calling me up at work (and I quote) – “there are 9,000 people searching for xxxxx every month, imagine having 9,000 more people on your site every month”.

All this is fine in theory. However, say you do manage to appear for a generic competitive term or get 9,000 new people on your site – what then. There is a high likelyhood that your boucne rate (or percentage of people who leave your almost immediately) will increase a lot.

Enter Conversion Rate Optimization

So what exactly has happened in this instance? You now have a lot of traffic coming to your site with lots of people boucning off. For websites that require their visitors convert – basically any site that sells a service or product (read: any business website) this is bad news, not to mention a total waste of time.

As a website owner, if you found your site at the latter stage, you’d want to investigate something called conversion rate optimization (or CRO). This is a term given to the science of converting more of you visitors into actual customers – which is what any business requires from their website. Essentially, it the measure of success of a website. For clients who say they want a nicely designed site, with lots of graphics, or clients who want to appear number one for lots of keywords – they really mean they want a site that converts and makes them money.

This one factor is overlooked so much and seems to be a highly vicious circle. SEO and CRO go hand in hand, indeed they need to go hand in hand as they are tighly linked. Quality SEO practice is needed to get more people onto your site, while CRO is needed to convert these visitors into customers.

It amazes me that I still get marketing calls from professional SEOs who say they can get me onto page one for ‘web design’, without any mention at all of CRO – they simply say they’ll get lots of quality backlinks to my site. This is wrong for two reasons. Yes, my site will recieve a lot of traffic, but is it fully optimised to convert visitors into customers (currently it isn’t, currently undergoing a redesign). Additionally, it’sd a well known fact that short tail terms don’t convert as well as a long tail terms. I’m currently much happier being ranked highly for a longer tail version of ‘we design’ – ‘web design xxxx’, where xxxx is my county. Yes, it has less traffic than ‘web design’, but the traffic is more targetted and relevant. Additionally, I have a geo targetted page in the SERPs for this term, which helps too.

In relation to narrow views expressed on the web design forum, well, those people aren’t helping anyone and seem to measure the success of SEO in terms of ‘how many’ people land on their site. As I’ve explained above, this is only part of SEO. I’ll take a typical scenario. Someone asks how they can improve the SEO on their site. People instantly jump in with the generic seo quotes (which are a pet hate of mine). I’ll have a quick look att he OPs site – awful design, no useful content there at all, sometimes not even contact details are present. This is where people need to work backwards before quoting the seo quotes they love so much. Firstly, perform some CRO on the target website and ensure that if a visitor does land on your site that are more likely to convert.

To illustrate some examples of CRO, I’ll explain a few simple and small examples I’ve personally used on some sites I’ve been working on:

• Make call to action button stand out and adjust the button text – on a corporate site website, increased enquiries by 2.5% in the first month
• Adjust the way an existing ecommerce store displays related items – instead of selecting 10 random products on the basket page, select 10 products that people have ultimately ordered, based on the current shopping basket – increased sales by 2.5% in the first month
• Removed unecessary fields in our website enquiry form – cutting it down to 3 fields, from 6 – increase in enquiries
• Boldened and increased font size of first paragraph of text on inner, informational pages – resulted in people spending more time on the site and allowed the page to focus a clearer message to the visitor
• For one company, that had worked with several recognizable brands, I added their logos onto the site in prominant place to build instant trust and reputation – increase in conversions of 3.5% in first month

I’m by no means an internet marketer, SEO guru or leading web designers at all However, it doesn’t take any of those to realise that once you have attrcated people to a site you need to do everything humanly possible to get a conversion. On the flip side, you need SEO to get a decent level of targetted traffic on a website.

SEo and CRO, a match made in heaven

The Range of Widgets Available

Firstly, I made use of nearly all the widgets available – this resulted in the final system being highly interactive and useable. For instance, having the ability to sort items simply via dragging and dropping when down extrememley well on the useability front with users. JQuery UI made it very easy to save these sorted positions to my database. Having to write something like this from scratch would have been impossible (for me anyway ) and been very time consuming.The dashboard/portal area was another area, where the requyirement to personalise the location of various content boxes was made easy.

The JQuery Dialog went down a storm too on the useability front too, as people were used to nasty old default JavaScript ones – the ability to include HTML within each dialog, on the fly allowed me to achieve some pretty informative and useable diaglog.

AJAX Integration

AJAX was always going to be a big part of the final system, so silently loading reports in background whilst users worked was essential. The majority (if not all) of the widgets have functionality to set AJAX options with ease. For instance, adding a nice ajax loading image while a report loads within a tabbed interface took a couple of minutes to achieve. As a further example take the Dialog widget – I was able to easily achieve the following, quite involved effect within a few minutes. A user clicks on a ‘raise invoice’ link, the dialog popups with a dropdown (the user would choose from an action here). Im was able to update the action all within the dialog, via AJAX.

Jquery UI CSS Framework

I’m a huge fan of the css framework used and especially of the fact it’s easy to skin large parts of your application via themes. Additionally, it is easy to borrow small parts of css such as icons and form formatting for use in other parts of the system, thus speeding up development even more, whilst keeping a constant feel to the system. The Jquery UI have added many specific classes that makes it easy to tweak the visual settings. Interestingly enough, it is lucky that JQuery UI has theme switching functionality, as one of the more odd requirements was to have a darker theme in the evening/nightime – this is easy to do on the fly and by conditionally including different JQuery UI css files – job done!

A Single JavaScript File

Through a single javascript file, I have a huge range of effects and widgets at my fingertips, all of which are compatible with each other. There is nothing as annoying as finding a nice widget for your application and the realising it breaks exsiting areas of your code. For instance, the JQuery Tools set of widgets look very nice, but seem to break a lot of existing code – this seems to be fairly regular for that particular set of plugins. Compare this with JQuery UI – I know I’ll have a range of rich interactions that will always work together. As a developer, this makes my life so much easier and aids development time. For example, I don’t have to scour the internet for a individual plugins, all of which will work and look different – I have them all in the form of JQuery UI.

The Filesize Issue

One of my biggest qualms was the filesize of the library in the past. However, the recent 1.8.x release has been the filesize reduced by over 50%! This is of even little concern for me now, as the speed advantages I gain by using JQuery UI are great. Additionally, Google host Jquery UI on their CDN, so you can use the google.load method is silently load the file, with even less disruption to your users.

• the client must be able to upload their own banner images
• the banner image was not square and had a transparfent mask around over it (in Photoshop, the banner image was underneath a clipping mask)
• The design must function in a range of legacy browsers

This presented a major headache. Usually uplaoding a totally square image is easy – a client can do this with ease themselves. However, the client in question has no experience using using Photoshop (and why should they to update their website?) and wouldn’t be able to upload a masked image. Additionally, using some of the new CSS3 image masking properties are out, as I need to support IE6 and above.

So, the solution here is to use a transparent image to overlay the square image – meaning a client can upload a square image and have it show masked on the live website – see the final result of what we’ll be making.

The HTML is quite simple:

<div id="banner_outer">

    <div id="banner">
        <div class="frame_top"></div>
        <div class="frame_bottom"></div>
        <img src="images/banners/splat.jpg" alt="splat" />
    </div>

</div>

Here, we have a simple wrapping divider to center the banner – “banner_outer” and a second divider to hold the banner – “banner”. There are also two dviders that are absolutely positioned, using a css sprites for the background images. The image is a 24 Bit PNG image – as this gives the smoothest effect for the frame and the underlying images could be photographs.

Remove the two frame dividers you’ll get a a simple box with a square image. However, when you add the two frame dividers you’ll see the image is show framed (one frame at the top, one at the bottom), exactly how an image clip would work in Photoshop. The CSS is very simple, but there is one key here to make your life easier and to ensure cross browser compatibility.

Positioning for Child and Parent Elements

Postion the parent divider to the two frames relatively. Why do this? Well a DOM element positioned relatively, gives you full control of the child DOM elements inside it, using absolute positioning – this was definately one of those ‘a-ha!’ moments for me where everything became clear.

In essence, the latter stops child elements positioned absolutely, from positioning themselves in relation to the body. To see the effect in action, view the demo and use Firebug to disable the ‘position: relative’ on the #banner element – the two frames are positioned absolutely according to the body element and not the #banner element as we want. You could ignore the position relative for the parent item, position the frame divs abolsutely and use margins to move them about – -this will work but you’ll run into issues in IE. I’d highly abvise you stick to the position relative method, as described above.

The frame I’ve chosen is a very subtle curve, but you could use any type of shape the mask the image.

A Note on IE6

As I’m sure many of you have already rightly realised – IE6 does not support transparent PNGs. This is really the only downside to this css based image masking technique. There are an absolute plethora of hacks for this, but I’ll be using the belated IE6 PNG Fix – which adds PNG support to IE6 and below. All that is required is the the following is added the head tag:

<!--[if lt IE 7]>
    <script src="js/IE_PNG.js" type="text/javascript"></script>
    <script>DD_belatedPNG.fix('div');</script>
<![endif]-->

The CSS for the example in question is extremely simple – there’s no need for me to explain this. Only difference, is that I’ve added a splash of CSS3 for eye candy.

The final result using a single image can be seen here and a result with multiple images using the excellent innerfade plugin can be seen here.

Happy image masking!

I was recently browsing a few photography website and came across a quite slick way to display a small snippet of information for for an image gallery. Unfortunately, it was Flash based, so I attemtpted to mimick the using only xHTML and CSS.

The basic xHTML is as follows:

<ul class="gallery">
	<li>
<div class="image_holder"><img src="images/1.png" alt="some image" /></div>
<div class="detail">

ImageTitle

{YOUR SNIPPET TEXT}

      <a class="more button" href="#detail_link">View More</a></div></li>
</ul>

The HTML is simply an unordered list, with a detail div, absolutely positioned, that contains the popup information about that item. When a user hovers over an image the detail tab will be shown. To achieve this effect a simple bit of CSS is used:

ul.gallery li:hover .detail {
   display: block;
}

There’s not a lot more to be honest – take a look at the result or download the source files.

The only downside is that due to the selectors used, the information divider fails to show in IE6.

The HTML

<div class="thumb_wrap">
<a href="#link" class="thumb_link">
<span><img src="play.png" alt="play" class="play_video" /></span>
<img src="thumb.jpg" alt="thumbnail" />
</a>
</div>

I’ve simply nested a span tag containing the hidden play button. Additionally, to keep everything XHTML valid, the hyperlink doesn;t contain block level elemnts.

The CSS

a img {
border:none;
}

.thumb_wrap {
width:194px;
height:110px;
margin:0 25px 0 0;
float:left;
}

img.play_video {
position: absolute;
margin:40px 0 0 80px;
display: none;}

The CSS is simply sets the image’s position absolutely (to ensure nothing gets pushed out of line).

The JQuery

The give the show effect a nice fade in style and in order the show our hidden image I’ll add a small piece of JQuery that finds the image within our span tag and fades it in. The latter is done when the user hovers over the image, when the mouse leaves, the image is hidden again. The folllwing would go within the head tag (I’ve also let Google CDN host my JQuery file):

<script type="text/javascript">
$(document).ready(function() {

$(".thumb_link").mouseover(function(){
 $(this).find('img.play_video').fadeIn('slow');
});

$(".thumb_link").mouseout(function(){
 $(this).find('img.play_video').hide();
});

});
</script>

…..and that’s it. You now have a cross browser compatible (IE 6 plus) image gallery effect, that is very easy to implement. See the image gallery in action.

I physically cringe when I hear quotes such as ‘valid xhtml will help your users’. Valid xhtml will not help your users, to help your users a site needs to adhere to web coding standards – this is an entirely different beast. The main difference here is the practice of seperating content from presentation, thus giving the content increased meaning. For example, a page using tables to layout the whole web page would not adhere to web coding standards because using tables for layout is semantically incorrect and requires a lot more code. Tables should be used for tabular data, simple. Another example is the use of paragraph and header tags. Visually they are very similar but have a very very different meaning sementically. However, yet again, semantically incorrect pages will pass validation. The main Google webpage doesn’t even validate (interestingly, Google does’t even quote html attributes in order to save on page size). In my opinion, as long this is the case W3C validation will be a none issue, SEO wise.

Understanding which semantic elements add value to the document will affect the onsite of a website and is an SEO ranking factor.I have read several artuicles that describe W3C validation and SEO as a match made in heaven, this simply isn’t the case, although web semantics and SEO are.

There are many websites (40% is a figure thrown around a lot) that do not validate, yet perform quite well in search engines as they have a range of high quality content. Take a quick example. I searched for a very competitive term “houses”. The number one result was rightmove.co.uk. Rightmove even has an authorative listing for that term too – SEO wise there can’t be too many issues here. Running that site through the validator throws up 33 errors and 22 warnings. – see the result. These are mainly smaller syntax errors that quite rightly, the developers of that site have ignored. There are endless examples where sites a lot worse appear at the top of the SERPs, even though they fail to validate and sometimes, don’t follow web standards at all.

There is also another camp that stresses that W3C validation is important for page presentation, in turn page presentation affects your reputation and thus your SEO (the number of people willing to backlink to you). Well again, here I’d quote the subtle difference between validation and semantics. YOu can also have a perfectly presented and formatted page that fails to validate.

The addictive, green “congratulations” message that appears is far too often used to lure unknowledgeable clients into a false sense of trust and can go a very long way into building trust between the SEO and client. As Google uses over 200 ranking factors when indexing your website, I find it very hard to believe that minor syntx errors play much role at all. Whenver I see SEO companies that associate “100% valid xHTML code” and SEO I run a mile. It’s clear they have little knowledge of SEO from this one ststement.

Validator error severity

My next hate is the severity of these errors are often mis-quoted. Don’t get me wrong, validating your website is good practice, but not critical for SEO. A random unclosed paragraph tag, or site that uses ‘b’ tags instead of ‘strong’ tags is of little worry to me. I can spend my time of much more important, valuable areas – at the end of the day this won’t effect your SEO or the way the page displays. However, when there are more serious  (or hard) errors iccur these could very well stop the page from rendering all together. The latter is of course an erro you should take note of and fix quickly. However, minor syntax errors are of little concern. At the end of the day, pages that have an expected layout and content that the bots can consume easily is my major concern. However, pages that validate fully don’t give you SEO benenfit at all, however nice it is to have.

Full validation isn’t always possible

Another point is that full validation isn’t always possible. For instance, getting your site to display correctly across the plethora of browsers available can cause validation errors. This brings me to another issue. At lot of people seem to assume that a page that doesn’t pass the W3C validation is badly coded. I’ll use the example of the Google home page here. This page doesn’t validate due to a numbers of reason including the numbers of browsing devices it needs to cater for and page size (saving them a lot of money). By the latter logic, Google is a badly made webpage, I think not. I’m really not going into this anymore as it infuriates me so much. There is a trend where someone checks a page through the validator, if it fails they instanyly make a judgement that the site is badly made.

To conclude, at the minute there really is no evidence to suggest that Google factors in the validity of your code. In time search engines use it as a ranking factor, simialr to how Google began to use loading speed as a minor ranking factor. Validating or not is NOT the same thing as serious HTML errors that hinder crawling and indexing – this is one huge SEO scam in my opinion and is pushed upon unsuspecting an unknowledgable clients. Furthermore, I’m yet to see a site built so badly that it has failed to be included in search engines.For me, quality, quthorative content will always be at the heart of SEO, not coding syntax.

I’m also not saying that W3C validation should be ignored. Tomorrow, Google could well decide that W3C validation is a must and a suddenly a major ranking factor. However, for the time being, is a bit of a none issue for me.

Is W3C validation good practice for web developers, definately. Is W3C validation a must for SEO, not right now. Are SEO and W3C validation highly linked right now, very unlikely.

First of all, take a peek and the finished JQuery image gallery – I’ve put the gallery in context on a product detail page for an ecommerce store.

JavaScript and JQuery to the Rescue!

JQuery was the JavaScript framework of choice and made it easy to get things up and running. Techniqually the same effect can be achieved without JQuery, but for simplicity I’m using JQuery. The code is quite easy to follow and I’ll just pickup  up on the main parts.

Firstly we’ll start off with the HTML – simply two dividers, with an unordered lists for the thumbnail images:

<div id="bigpic" class="b"><img src="images/big/iphone-3-big.jpg" alt="iPod Shuffle 16GB Zoom View" />
<p id="desc">iPod Shuffle 16GB Zoom View</p>

</div>

<div id="thumbs">
<ul>
	<li><a rel="images/small/iphone-1-small.jpg" href="images/big/iphone-1-big.jpg">
<img src="images/small/iphone-1-small.jpg" alt="iPod Shuffle Front View In Blue!" />
</a></li>
	<li> <a rel="images/small/iphone-2-small.jpg" href="images/big/iphone-2-big.jpg">
<img src="images/small/iphone-2-small.jpg" alt="iPod Shuffle Dual View Grey!" />
</a></li>
	<li> <a rel="images/small/iphone-3-small.jpg" href="images/big/iphone-3-big.jpg">
<img src="images/small/iphone-3-small.jpg" alt="iPod Shuffle 16GB Zoom View" />
</a></li>
</ul>
</div>

The main image is housed in the divider with the id of ‘bigpic’. I’ve also added a description below the big image – this will change when the image is hovered over to the thumbnail alternate text. Each thumbnail link goes directly to the enlarged version of the image – this way, the gallery will still work when JavaScript is turned off.

The JQuery Magic ….

Right after including the JQuery library (I recommend you make use of Google CDN for this – there are many reasons to let Google host your JQuery files) I have included an int,js file – this contains all the gallery JavaScript. The int file is a small file that catches a hover on each thumbnail and switches the main gallery image (Our ‘bigpic’ divider). All the code is contained within the mahic document.ready listener. The first half of the file catches the hover on a thumbnail:

$('#thumbs ul li a').hover(
		function() {
			var currentBigImage = $('#bigpic img').attr('src');
			var newBigImage = $(this).attr('href');
			var currentThumbSrc = $(this).attr('rel');
			switchImage(newBigImage, currentBigImage, currentThumbSrc);
		},
		function() {}
	);

Here we are getting the currentBig image href, the new big image (from our thumbs href) and current thumbnail src. The second empty fucntion is included to say ‘don’t do anything when hovering away’. Exclude this empty function and the hover event will continue to fire when you leave the image. Now we have these three variables we pass them to our switchImage function, code below:

function switchImage(imageHref, currentBigImage, currentThumbSrc) {

		var theBigImage = $('#bigpic img');

		if (imageHref != currentBigImage) {

			theBigImage.fadeOut(250, function(){
				theBigImage.attr('src', imageHref).fadeIn(250);

				var newImageDesc = $("#thumbs ul li a img[src='"+currentThumbSrc+"']").attr('alt');
				$('p#desc').empty().html(newImageDesc);
			});

		}

	}

This is quite self explanatory. The first check made is that the current big image is not the same as the target big image – if this was true we would fade in and out the same image, which leads to a rather weird looking effect. If both paths match, the user has hovered over the thumbnail of the current big image (in this case nothing would happen). Hovering over any other image will result in the current big image fading out, setting the big image src to the src from the thumbnail (the new image) and populating our description paragraph.

Using the Gallery in a Production Website

In the example 3 static large and small images have been manually added for simplicity. In a real website, maybe an online store, you would retrieve this information from a database. Another thing to note is image sizes. I always find it useful to let users upload whatever file resolution they want, giving them the exact pixels as a recomendation. To ensure that a particularly large file wouldn’t break the layout I tend to sue image resizing scripts, such as the excellent smart image resizer from shifting pixel – uploaded images can be automatically scaled to dimensions of your choosing.

Also, at some point I’ll learn about making your owns plugins for JQuery and turn this into a self contained plugin

There’s not a lot more to this to be honest. tested in IE6, IE7, IE8, Chrome and Firefox – all working nicely.

Take a look at the final result or download the source files. Enjoy!

Recently an existing client came to me asking why his site isn’t showing up when people search for a particular long tail search term. Now, his existing site used a pretty awful content management system that didn’t even allow him to set his own pages titles or meta descriptions. Furthermore, he was lacking inbound links, which people ranked above him did have. This all sounds simple and straightforward but even after I had explained (in quite clear and non technical langauge may I add) the merits of good SEO and one page content the client simply wouldn’t accept this as a solution. He had his own short term and less costly solutions – basically revolving around the the idea me resubmitting his sitemap page to all the major search engines each day. I’m not debating that submitting a sitemap isn’t a good idea, because it is. However, the client’s main KPI for this project was increased site enquiries.

After much discussing this we had both come to a bit of an awkward silence – not a good thing if you’ve ever experinced this in client meetings. For some reason I remebered back to my unoversity days where I had read something about split testing (or A/B testing) – where you can turn a negative situation into a positive one.This is quite a delicate situation to be in as it can damage your client relationship quite quickly.

The idea was to use the client’s idea for a period of time and my idea for a period of time. At the start of this I would install Google Analytics (I was tempted to use Google’s website optimizer, but decided against it) and let the statisitics do the talking – as a no one can argue with statistics.

This method has been very useful previously when demonstrating the merits of creating a dedicated landing page for Google Adword campaigns, but can be used anywhere if you’re willing to a little bit extra.

This method is beneficial for the following reasons:

• The client’s idea are being dismissed as wrong (however right you think you are)
• You are showing the client that you care enough to demonstrate your ideas
• Occassionaly the client will back down as soon as you explain your plan of attack
• It prevents those awful awkward silences
• You have a real world example to use in your other client meetings
• You are speaking the clients language in that you are demonstrating how your actions lead to increased conversions
• You are being direct, which I personally think is alwasy a good thing – as such statistics are often a huge eye opener for clients
• If and when the client comes to the same conslusion as you, they won’t blame you

There is always the arguement that the client is the client and that it’s all business at the end of the day. However, I personally pride myself on doing things properly. Others will say just get on with, do what the client wants and forget about it – you can only offer your opinion. This is a good point but can still damage your client relationships when they return later on and you need to charge them again. It all depends if you require long or short term client relationships – as they are definately an investment.