Filed under: Affiliate Marketing
We’re off to film at Affiliate Summit Boston
Chris Johnson and I will be flying out to Affiliate Summit in Boston on Sunday; we’ll be taking camcorder to film content for our newly released Affiliate Marketing TV channel – affiliates4u.tv
If you’re attending the conference, let’s hook up for a chat and if you’re up for it an interview for the site.
We have already lined up the team at Affiliate Future US, and a couple of exhibitors.
Either ping me or Chris on Twitter, Google Talk or by email and we can arrange to meet up whilst at the conference.
Let us know here if there is anyone you’d like us to hunt down for you, metaphorically speaking!
Two Years On - How I’m Enjoying Life at Existem
Well it crept up on me like a metaphorical Ninja, but I’ve now been working at Existem for (just) over two years.
In that time I’ve worked on many different projects, met loads of interesting people and taken part in two HUGE events in the form of a4uexpo and a4uawards, and it’s fair to say I think the best is still to come.
On a personal level I feel my work has improved hugely since I have been here and I hope that it’s something that keeps constantly improving as we move forward.
Over the past year or so (mainly due to my first computer going to silicone heaven, taking the first 8 months work with it), I’ve kept quite a large catalogue of stock illustrations, icons, photoshop brushes and wordpress stuff and I thought now would be a fitting time to pass on some of these things.
You can download all this stuff as a zip file here (careful, it’s quite large at 300MB)
Everything provided has either been made by me or found from open source sites online.
I hope you find it helpful
Some awesome examples of creative advertising
I’ve just been doing some research into creative advertising approaches in preparation for the second round of a4uexpo press adverts that I’ll be creating soon.
I found this MAMOUTH list of examples which has some of the best examples of creativity I’ve seen in a while.
We defiantly don’t have the budget to create anything like this (nor am I suggesting we would) but its great to see advertising thats intelligent and above the average stuff we see everyday.
Here’s my favourite
Hackers in force at the Webgains Golf Day
It was not only the Hampton Court Palace flower show last Friday, but the third annual Webgains Golf Day.
After a 6am start and drive the weather held out for an awesome day and my warmest regards and thanks to the team at Webgains for organising such an enjoyable and sociable day.
As usual the refreshment buggy navigated the course with drinks throughout the day and even Peroni on the 17th hole!
Our team came second (again) with myself, Paul (ShopperUK), Alex (Virginia Hayward) and Peter (Webgains) battling through, paul winning longest drive and scooping some nifty Molton Brown goodies.
It was excellent to chat to Sheema, Andrew and Ryan who I hear will be leaving shortly to head up the New York office, best of luck!
Designing A Wordpress Theme From Scratch (Part Two)
Before we start, a bit of housekeeping
If you missed part one of this tutorial it is available here
The final layout for this part of the tutorial you can see here.
You can download the original files for this tutorial here if you wish.
You can also grab my base template here
Feel free to play around with all the files until your hearts content, that’s always a good way to learn and you can always grab a fresh copy and start over.
Marking up the template
Depending on the size of the project you could well choose just to code straight into a wordpress php theme. However its a good learning exercise, and good practice if you are doing something a bit different, to code into a static html page first and then split that page into separate php documents afterwards.
If you visit http://www.breakfast-epiphanies.com/basic_site/ and view the source you will see that I have laid out an extremely basic layout of elements with good semantic structure. This is the basic underpinning of every site and its a good idea to do this first.
Some people will write pure html first then css afterwards. Personally I’m more back and forth between the two but I find having a basic skeleton in html really helpful before doing any css.
As you can see we will be using ‘header 1 tags’ for the logo/blog title so this is high up in the document. We will be using an unordered list for the navigation as that is in essence what it is. (Same applies for the footer). We also have two sidebars floated next to each other in order of importance.
The wrapper holds all of the sites content and has an additional ID of top. This acts as an anchor and means we can skip back to the top of the document easily, helpful when you have a long page.
Lets go coding - html from the top down.
Although I just said I usually jump between css and html, for the purpose of this tutorial I’ll split the two apart as its a lot easier to explain that way. What I thought I would do is go through the html document in order from top to bottom picking out some of the elements and explaining my decisions.
O.K, head over to http://www.breakfast-epiphanies.com/layoutfiles/ and view source. Or download the tutorial files and open in your favourite editor.
1. Right after the <body> tag we have a skip link which will jump the user down to the main bulk of content on the site. This is particularly useful for mobile browsers where space is an issue. This link is then styled via css to appear hidden until in focus (hit that tab key) - note this doesn’t seem to work in Firefox 3. (Ammedned 10 July 08 - turns out I put it on a really silly number for z-index in the css and FF 3 didn’t like it.)
2. Next up we have the coffee cup icon. This is purely presentational and although I know many purists hate this kind of extra mark up, to me the web is a visual medium too and using something like this now and again I don’t think hurts anyone now does it?.
The reason it sits outside of the wrapper is because I want it sticking above everything else on its own z-index. As you will see later on, we need to declare the wrapper’s overflow state as hidden so IE won’t kill the site. If the coffee cup was within the wrapper it would cut the top off.
3. Below this the wrapper begins which will hold all the site’s content. As I said above it has an ID aswell for anchor tagging.
Then we have our logo. Here I have used a css image replacement technique to replace the text. This is useful because you can still retain your all important ‘header 1 tags’ in the html which are search engine’s bread and butter but you can now add your logo too. How cool is that.
I’ll go over how to css this in the next section.
4. Next we have the anchor for the skip link to move to. Ideally I would apply this to the first element in the main content.
In this instance though the first chunk of content would be ‘the_post’ which will be in the wordpress loop when we come to theme the template later on.By placing the link just before the loop it will move the page to the main content without getting involved in the loop.
5. The section ‘the_post’ is what will contain the bulk of the site content as this will be the main loop. This section has a class called ‘the_post’ applied to it.
I use a class because they can be re-used. I tend to use classes 99% of the time for this reason.In addition, I add an extra class of ‘even’ OR ‘odd’. This will give us added benefit if we wish to style alternate posts differently. Adding multiple classes allows us to overwrite bits of the parent classes while inheriting the remaining styles of the parent.
E.g - If the parent class has a margin of 10px and a border of 1px we could use the child class to remove the border but keep the margin by just declaring border:none; in the child class. This would remove the border but keep the margin as no new style for margin was applied.
Later on will we build a function into the worpress loop with a little php so we can add alternate odd and even child classes to each post but for now we will emulate how wordpress will display the code.
6. After the wordpress loop will come the endif statement. This is where the page navigation will be so we need to look at mocking that up in the template too.I used a similar technique to how we replaced the title text here using pure css to replace the text with images. Again I will cover this in the next section.
7. The first sidebar is floated to the right of the main content. Some of the content is styled in a conventional manner as we will be coding this into the side bar but I have also emulated how wordpress displays widgets using an extra wrapping ‘li’ for some reason. If we were not using widgets you could style this in a conventional manner using ‘ul’ tags.
You will notice at the top of the side bar we have a ‘div’ with a title ‘optimised’. This displays a little image that tells the user that their browser is fairly new and as a result will display the site as it was meant to be seen. By using attribute selectors via css we can hide the image and display the text for IE6 and older browsers as they do not support the attribute class. Again I will cover this in the next section
8. Next to the first sidebar is the second sidebar which has much the same styles as the first. I tend to use this sidebar for banners etc…
9. Lastly we have a simple footer which will provide our legal info and credits and will also clear the floating coloums above it.
Lets go coding - the power of css.
In this section I will cover a few of the css features I have used to make this site. I won’t be covering things like basic layout properties, text size etc… If you want to know all this please pick through the source code. Its all commented to help you.
Achieving Semi Fluid Layout - Because we want our wrapper to fold the sidebars underneath each other if the browser is at a smaller resolution we need to use percentages. Here’s what I did to achieve this effect:
width:auto !important;
width:100%;
position:relative;
overflow:hidden;
The width is set to auto!important and 100% in two different decelerations. This fixes Firefox’s bug that sometimes messes up a 100% width layout.
The overflow is set to hidden so IE doesn’t add horizontal scroll bars.
Position relative is used as a fail safe for IE6 as this can sometimes sort out hasLayout problems (more on that later). You don’t necessarily have to add this.
Css Image Replacement - This is a great technique for getting the best of both worlds, search engine friendly text content and visually appealing images.
This example below is how I have styled the page navigation, a similar technique is also used to style the logo. Here’s what I did to achieve this effect:
div.page_buttons {
margin:0;
padding:58px 0 0 15px;
width:570px;
height:80px;
background:transparent;
}
/*Trade text for buttons*/
div.page_buttons a.next {
margin:0;
padding:0;
display:block;
float:left;
width:51px;
height:51px;
text-indent:-99999px;
background:url(../images/page-navigation-buttons.png) transparent no-repeat 0 0;
}
The div class ‘page_buttons’ is the holder that will hold all there of our navigation buttons. The background is transparent as we will need there to be no background or we won’t get the proper effect.
Then we style the a links using a class defined in each link. E.G ( a.next) – In the html it looks like a class=”next”
By using display:block we can give an element width and height properties and by floating it left we can make them sit next to each other.
Text indent is used to push the text that the image is replacing off the page so it is no longer visible.
Finally we define the image path, its background colour, its repeating property and its background position.
In this case it is set to no-repeat transparent and we be possitioned top left (or 0 0) in the 51px x 51px area we have created.
Attribute Selectors - These are great for adding additional styles but in this site I have used them to create a little badge letting the user know if their browser is up to date.
Here’s how:
I created a ‘div’ element with the title ‘optimisesd’.
Attributes can use most things but I prefer to use title where I can.Within that ‘div’ I create a paragraph style with the class ‘alert’.
Then in the css we do this:
div[title="optimised"] {
width:245px;
height:81px;
background:url(../images/optimised-badge.jpg) transparent no-repeat 0 0;
display:block;
text-indent:-99999px;
margin:0 0 15px 0;
padding:0 0 15px 0; /*Pad down the border bottom*/
border-bottom:1px dotted #1b0f05;
}
/*Styles the alert text in ie6*/
*html .alert {
background:#fff;
padding:5px;
}
div[title=”optimised”] is the attribute seclector.
Within this we define the width, height etc… as well as using text indent as before to replace the text with an image.
Next we style the text that older browsers will see using the ‘*html .alert class’. We use the *html hack so that IE6 will pick it up but IE7, FF, Safari etc.. will not.
:After Class for Firefox - If you are using Firefox you may have noticed the little pencil icons on the headers in the sidebar. These are added using the :after class, which at the time of writing are only supported in Firefox (as far a I know).
I quite like this technique to add little visual additions without weighing down the code too much.
Here’s how
h2.widgettitle:after {
content:url(”../images/pencil-icon.png”);
margin:-35px 0 0 210px;
position:absolute;
z-index:10;
padding:0;
width:33px;
height:34px;
display:block;
}
We again use display:block so we can apply width and height.
By using the content deceleration we can apply an image to the :after class.
By using position:absolute we can pull the element around independent of the hierarchy. This means we can use positive and negative margins to position it where we want it.
Multiple Classes - We can use multiple classes to overide certain parts of a class while inheriting others as discussed above.
div.the_sidebar {
margin:0 20px 0 0;
padding:0;
float:left;
width:245px;
}
div.last {
margin:0;
padding:5px 0 0 0;/*Pad down abit so everything lines up*/
}
As you can see the sidebar has margin properties, float, padding and width properties applied.
We want our last sidebar to share the float and width properties but not the margin or padding properties so we define new ones. Then we create multiple classes in the html like so:
div class=”sidebar last”
hasLayout and other IE tricks
“A lot of Internet Explorer’s rendering inconsistencies can be fixed by giving an element ‘layout.’”.
In brief IE6 does not give layout properties to all elements and this is what often breaks sites in Internet Explorer.
By giving an element ‘layout’ we can often fix many problems associated with the browser.
A detailed explanation is available here http://www.satzansatz.de/cssd/onhavinglayout.html.
My personal way of dealing with this is to give hasLayout to an element by using zoom:1. There are several other ways, each with pros and cons but this is my method of choice (even if I have to sacrifice validation in IE6)
Other Tricks for IE
overflow: hidden; - Its amazing how often this will sort out all sorts of things, even if logically it shouldn’t
word-wrap:break-word; - This allows wordpress to break words apart rather than poking out of a containing div.
position:absolute; - If an element is missing this 9 times out of 10 will bring it back into play
display:inline; - If you seem to have double margins this will sort that out
*html ‘your class or ID’ - IE 6 and below hack to target older browsers
html > body ‘your class or ID’ - Target newer browsers with this to bypass IE6 and below
So that just about wraps up part two. As usual, any questions please add them below. Until part three….
What to do with Shopping Search?
We have a large number of domains that are lying around for want of a better phrase ripe and ready for development.
One such domain being Shopping Search - As you can see its a relic from 2003 however with some development time we could make it special.
The big question… What on earth do we do with it?
Here are some initial thoughts off the top of my head:
- Use the ShopWindow API to create a CPA based price comparison site
- Use a white label or XML feed from Pricerunner
- Create a mash-up with various XML / API feeds
- A social Shopping Search Site
- A rough and ready Blog
Answers on a postcard or comment!
