See more details over at www.swtop100.co.uk

The keyword ‘restaurant vouchers’ has over 33,000 searches in Google each month and with the recent trend of restaurants discounting heavily at off peak periods to lure cash strapped punters with Printable Vouchers offering up to 50% off, its good if a little late timing.

The opportunities for long tail keywords are also immense.

It’s a simple but we hope effective site that gives us a good opportunity to develop a lucrative email list and eventually earn from contextual and CPA based offers on the site.

To co-incide with the site we’ve also created a Vouchers Twitter feed which we’ll be using to promote the site virally.

Granted it’s similar to many others in the space, however we hope its simple and easy to use design will be a winner.

We’ll see how Google treats the .at domain in the coming weeks, however early results appear to be positive.

We’re using some of the technology and learning curve to launch a second and I must say rather exciting site in mid December 2008 - watch this space for details!

Big kudos to Darian Moody who joined us recently who has coded up the site and Pete who’s put together the rather funky background and general design - also thanks must go to Doug for allowing us to use his Voucher Code XML feed (and in return be a pain in the rear with bug testing!)

If you want to stay updated with codes, become a VoucherCodes.at fan on Facebook

One of the latest projects we have been involved with is eat out - offering consumers the opportunity to find restaurants, review them and connect with likeminded foodies.

The site also is interlinked with the Invitation Book and the Platinum Card which offers consumers the ability to save a percentage at their favourite restaurants, shops and bars.

There are now over 100 Bristol Restaurants listed however the site also covers many of the major UK cities.

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….

Seriously though the new iPhone really is going to open up a whole array of opportunities for savvy developers and affiliates through apple web applications and new features such as their geo photo tagging. Other mobile phone operators have similar developments, and further simplification and price reductions on mobile browsing and a greater number of models utilising WiFi will enhance the opportunity even further.

I know we’ve all said Mobile is going to happen in the affiliate space for some time, so embrace it now as I have a feeling one day quite soon its just going to knock on our door and we’ll no doubt all be surprised!

Rubbish me if you like, but its already happening on a browser level and web applications will give developers even more control and user loyalty.

Anyhow, back to the Blackberry, anyone thinking about making the switch? My only concern is email, something the Blackberry is awesome with.

<plug>* as a side note I’ll be passing on my 8310 to Mobile Phone Xchange, who will send me a not too petty £31 for it to be ‘recycled’

The affiliate programme is managed by our friends at Existem Affiliate Management - chat to Mark for more details as you can earn around £4.00 per lead. </plug>

I would however like to congratulate a good friend Duncan Jennings on the sale of his start-up welovelocal.com to GCap.

Iv’e always been a fan of the site which utilises the power of social media groups and local search perfectly. Cap plan to combine the site, which carries reviews and recommendations, with its own network of local radio brands - A powerful combination.

The site which is still in its infancy is a perfect example of what a good team can deliver utilising many different technologies and revenue streams. The latter which may not be in place today certainly will in the near future as the local space extends its reach and matures.

Congratulations to both Duncan and Max :) well deserved.

Topics include, your idea and viability, funding, registering your company, accounting and book-keeping, customer support, IT infrastructure, Design and Build, Marketing, Staying in business! Managing your team and Launch.

The beauty of the workshop is that if offers advice based on Ryan’s own experience of developing start-ups and web applications. The content intrigued me so much that I decided to register not only for the content but also for the networking opportunity that it offers as the event also co-insides with the Bath OpenCoffee – an evening for web entrepreneurs.

I’ll let you all know how I got on next week, I believe there a couple of places left if you would like to register.