Sunday, April 20th, 2008 Affiliate Stuff, C'est Moi, Design 2 Comments »

Et voila! My sunshine competition website is now live and kicking… pretty much. Time for a guided tour!

Go To Barcelona is the domain and subject. I think it’s a great domain because I can use it again for other destinations if I wish to do more travel domains, e.g. gotomars.co.uk or whathaveyou. I chose Barcelona because I briefly stayed there last year on a road trip, albeit on a campsite and not any of the lovely hotels featured!

Naturally, I used WordPress to create the site because it’s a fantastic CMS tool, I practically know it inside out and there are loads of plugins to extend the functionality. It’s also my first time with the brand new 2.5, which is quite nice and seems more fluid and easier to use.

Each ‘post’ is a hotel and the ‘category’ is the resort. The great thing about WordPress is that when I add a hotel, it will automatically be added to the category page, but I can customise it to include more information like this hotels in Eixample page which has a brief biography of the area surrounding the list of hotels.

Each hotel has a picture and description (reworded from the sunshine site), followed by a search box to find availability and book that particular hotel. This is followed by a list of similar hotels, thanks to the related posts plugin.

I quite like the design that I quickly whipped up; a clean text-based logo sits above the content, which is backed by a beautiful picture of a beach (which isn’t actually in Barcelona, apparently it’s in Japan). Above the fold has a beautiful summer blue sky and it’s only when you scroll that the whole picture is revealed. Yes, there’s a bit of a crease where I tried to attach a reverse image of the same photo to extend the length, but that will be fixed.

As usual, Internet Explorer doesn’t like it; ignoring the transparent background of the main content box amongst other things. Again, I’m sure there’s a fix somewhere and I will get on to it at a later date, but I think it degrades well with a white background.

The sidebar links are automatically generated thanks to WordPress, firstly with a list of resorts and then a list of articles which I will write throughout the site’s life with information, guides and suchlike.

All of this has been put together with the aid of sunshine’s fantastic affiliate area which allows you to choose your own banners of which there are generic and some customised to the resort of your choosing. I’ve used a generic in the sidebar and resort based on the category pages. Then there’s the search wizard which allows you to create a search box customisable to the hotel, and thanks to the chat tool and a friendly fellow called Alan, I was able to find the boxes I wanted. The spreadsheet helped list all the hotels with URLs of images. It really is a fantastic example of how an affiliate program should be managed.

So there you have it, how to create a site in just over a day thanks to WordPress, a few good plugins, the amazing sunshine affiliate area and a bit of motivation. Your comments are appreciated! Click here to see the site in action.

Tags: Go To Barcelona, Sunshine
Posted in Affiliate Stuff, C'est Moi, Design | 2 Comments »

Wednesday, February 13th, 2008 Coding, Design, Tips and Tricks 3 Comments »

Really, I do. I’m not the best coder by any means but I try very hard and hand coding my own websites and they come out alright. Until I switch to Internet Explorer, that is. Coding is difficult enough without having to cater for cross browser compatibility. The first issue is how differently Internet Explorer and Firefox translate pixels, margins and padding and often means a three column layout can look perfect in FF but IE decides to push a column or two to the bottom of the screen simply because it’s 1 pixel too big. This isn’t too bad to resolve; playing around with the numbers usually solves it.

A brilliant solution is the reset css which I found at just searching, which strips out all margins or whatever else the browsers automatically add. For example, the <p> and <h1> tags automatically have quite a significant line-height automatically given to them which can affect the lining up of <div>s. The reset css puts both browsers on a level playing field and gives you complete control of every attribute.

But even with this reset css applied, I noticed a list still had indentation in Internet Explorer which made a navigation sidebar on one of my sites look really strange. The <ul> and <li> tags had no margin, no list-style-type, nothing so why was it doing this? Apparently IE needs a float:left added to the list to really force it to the left. Irritating, but solvable.

But now I’ve come across yet another strange browser compatibility issue - colour! Do browsers translate colours differently? Take a look at this site (under very heavy construction, so watch out for falling code and broken links). In FF, the background-colour of the header image and the div around it is identical but in Internet Explorer, it looks slightly different. Is it just me? Makes me think I should just give up coding and spend the time writing content using Blogger or something like Lee. Or I should drive a car through the front windows of Internet Explorer HQ in a frustrated, sadistic rage.

Tags: Browser, Firefox, Internet Explorer
Posted in Coding, Design, Tips and Tricks | 3 Comments »

Sunday, January 13th, 2008 C'est Moi, Coding, Design No Comments »

<rant>

Here I am at 5am and I feel like screaming from the rooftops with joy. I finally located the </div> that has been messing up my code and causing me nothing but frustration and anger for the past half hour.

I’m no expert coding whizz but I love designing and coding my own sites. I’m easily bored and have a redesign more often than I have Sunday dinners, something which I’m going to stop doing if I actually want to start getting traffic and money! I’m self taught in HTML, CSS and bits of PHP learning from tutorials on the web, e-books and lots of trial and error fun. But it’s frustrating as hell.

My biggest peeve is Internet Explorer. I can spend a few hours lovingly coding a site and previewing it in my browser of choice, Firefox, where it looks perfect. I switch to Internet Explorer and suddenly my site has chunks missing, features overlapping and whatever else IE decides to break my site with. This very site is a perfect example; the sidebar looks fine in Firefox but IE prefers to insert a chasm of space between each link. I think I’ve finally worked out that the issue is down to the line-height property.

Tonight I’ve been working on what will eventually be my biggest site and I’m sick of serving the minorities. I try and keep my sites to an 800px frame for those that still use the ridiculously magnified resolution but the site I’m working on requires three good sized columns and that won’t happen in an 800px frame. I’m going to make it relatively liquid, but if Amazon don’t keep to an 800px frame (go to Amazon, switch your display to 800px and notice the scrollbar at the bottom of the window), there should be little issue.

This site has more <div>s than I care to mention, and WordPress likes to throw in a few unnecessary (in my opinion) <div>s for extra measure. I make one small change, the sidebar disappears and I have to spend the next half hour counting how many <div>s are actually closed, checking sizes, margins, padding and all that malarkey. Perhaps I’m stupid, perhaps I put too much work into it but in the end I come out victorious. I have a nice three column site that works and now needs many more hours to put in content and optimise for SEO….

</rant>

Posted in C'est Moi, Coding, Design | Post a comment »

Saturday, January 12th, 2008 Design, Tips and Tricks 1 Comment »

Here’s another quick tip, which might not be relevant for most affiliates unless you spend more time than is necessary actually designing a website, like I do (maybe not particularly well, but that’s for visitors to judge ;)). I find that when I design websites, I find a great colour theme but obviously HTML only accepts hexadecimal values for colours, such as #FF9900 (which is this orange). In the programs I use to design the sites, colours have RGB values such as 51,102,153 (which is this blue).

There is a quick way to convert RGB into hexadecimal. Simply open your calculator (ensure it’s scientific if you’re using a desktop calculator), put it in ‘DEC’ mode and type in the first of the RGB units. So for the example blue I gave above, I would type in 51. Now press ‘HEX’ and a new figure will appear, in this case 33. Switch back to DEC and repeat the process until you find out that this blue is #336699. Simple!

More quick tips as I think of them, feel free to make requests!

Tags: Colours, Hexadecimal, RGB, Themes
Posted in Design, Tips and Tricks | 1 Comment »