To begin, when preparing to develop a site what steps do you take? Do you jump right in and just start coding your .psd or alternative? Maybe you just build using your coding application and use minimal graphics? Whatever method you use I will try to explain why methodical structuring can make or break your new shiny website.

Up until recently I myself coded all my pages into the root folder of my hosting package and tried naming them accordingly. Using this method my websites always did quite well as they are coded very clean and Google liked crawling them but I soon realised I was missing one fundamental practice and so began a test. Enter Firstplaceingoogle.com.

I originally bought this domain name of a friend in an attempt to simply place a holding page with a link back to my main website I.M.A.G.E Ltd but decided to create a specific site offering SEO services as the domain suggests. This project I decided would be a trial of my new method away from my usually well indexed structure. Panic Time!!

We all know Google is the biggest and best engine to get the right listings on so I was to focus solely on that and optimise the site and structure entirely with Google in mind. To begin with I took out my trusty notepad and pen (You can get these from most places but I chose to go to the local high school and kick down a kid smaller than me and took his pencil case along with freshly decorated notebook – Bullying is bad and I do not recommend it unless you really need to do so).

So.. I knew that my website was going to have an index, a prices page, timeframe page and enquiries form so a simple site and good basis for this post. My notepad scribble was a little like this.

homepage
- - - prices
- - - - - homepage
- - - - - timeframes
- - - - - enquiries
- - - timeframes
- - - - - homepage
- - - - - prices
- - - - - enquiries
- - - enquiries
- - - - - homepage
- - - - - timeframes
- - - - - prices

Having my pages structured like this enables the user to have complete access to all of my pages from any page they visit. On top of this I decided to include a breadcrumb on top of each page. Now,  Firstplaceingoogle.com doesn’t really need this as it is a relatively small website but… I felt it good practice to include it anyway. The breadcrumb would be like so:

You are here: Home » PAGE YOU ARE ON

As you can see, not the most complex breadcrumb you will see but it does the job it is intended to do. Now it was time to begin creating the code for my pages and add SEO (Search Engine Optimisation) to each of my pages.

Now, again this is not the gospel way to do things but I have never been a fan of simply copying others work so I simply do things my way and this is one of them (If it’s not broke, why fix it?). So my SEO structure would be a bit more complex than my paging structure and would be like so.

<META>
<H1>
<PARAGRAPH>
<H2>
<PARAGRAPH>
<H3>
<PARAGRAPH>
<H4>
<PARAGRAPH>
<H5>
<PARAGRAPH>

Notice the pattern? Simple isn’t it? on top of structuring my individual pages like this I was to give each header a title like so <h1 title=”title here”>Header Here</h1> and also each link would gain the same treatment. It is also great practice to never use simple text within your links such as “click here” or “click me”. Instead and in my case i was to use links such as SEO Search Engine Optimisation Enquiries this would make it even easier for Google to index the site and its internal links.

Within each paragraph it is good paragraph to constantly link your chosen keywords within a readable format. What this simply means is that you can link a large amount of paragraphs together using your chosen keywords in nice sentences to ensure the engines do not see it as spamming.

Also important are the meta tags you use in the head of your pages. The ones i used are as follows:

<meta name="description" content="First Place In Google.com offer Search Engine Optimisation,
 SEO Services, Keyword Analysis and Keyword Suggestions for your website" />
<meta name="keywords" content="First Place In Google, Top Of Search Engines, SEO Services,
Search Engine Optimisation, Optimization, SEO, Website Keywords, S.E.O, Keyword Analysis,
Keyword Suggestions, Search Engine Reports" />
<meta name="distribution" content="Global" />
<meta name="rating" content= "Safe For Kids" />
<meta name="copyright" content="Copyright (c)2009 firstplaceingoogle.com." />
<meta name="author" content="First Place In Google" />
<title>Prices - Google Search Engine Optimisation (SEO) Services. First Place In Google</title>

This is a structure that I believe to be highly effective but again is not a chapter in the best selling book “Gospel ways to do things on your website” by Web Jebus.

Now onto the more important things. Does this method work? Well the honest answer is at the moment YES!! Since I launched First Place In Google I have been tracking its progress within Google and i am now happy to say that in just under 2 weeks I have made the second page (Update: Around 24 hours later and I now have the site on the first page on google. Proof that my system works.) for the search term “first place in google” which is no mean feat by any means. After 1 week I was placed on the 5th page so I have managed an 60%+ increase within a 7 day period.

I am still tracking the site daily to find my rankings for other keywords but I must also appreciate that there are lots of sites in this field doing the same kind of practice which obviously means a fight to reach the top. I have also implemented this method on my main portfolio site I.M.A.G.E Ltd which is a much more complicated structure and not yet indexed with the new structure by Google. I will closely be monitoring this and posting the results here. Go take a look.

I hope this post helps you in the structuring of your website and I look forward to your comments on how to better the system or what results you have gained using my methods. Making a comment takes seconds so go ahead tell me how juicy I am!!

Ok, so start with we want to have a main div which stretches for 80% of the browser width. Our main div will have the class .red and uses the following CSS.

.red {
	background-color: #F00;
	width: 80%;
	height: 800px; /* Just for illustration purposes */
	margin-right: auto;
	margin-left: auto;
}

So you can see that our .red class has an 80% width and uses margin auto for left and right. This centers the div within the browser and gives it a percentage of 80%.

Now, what we want to achieve is the following. A left column within .red with the width of 250px and a right column that will fill the remainder of the 80% width. Tricky? Not really…

Our left column will be called .blue and uses the following CSS.

.blue {
	float: left;
	width: 250px;
	background-color: #06C;
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-align: center;
}

The CSS for our left column is simple as you can see. It uses 250px for the width and I simply float it to the left. Our right column however needs a little more to achieve our result and is achieved like so.

Our right column will have the class .green and uses the following CSS.

.green {
	float: none;
	left: auto;
	margin-left: 250px;
	position: static;
	width: auto;
	background-color: #0F6;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #000;
	text-align: center;
}

.green has a static position, uses no float and has the width set to auto to ensure it fills the remaining space and the all important margin. the margin is the important part here as you need to set the value as per the width of your left column so if you have a column on the left that is 190px wide then your margin-left must be 190px and so on.

That is all you need for the desired effect (Live Demo). As usual, to leave me a fat comment dripping with greasy left over meat just look below.

The problem occurs when you float an element such as a div within your page with padding or margin. IE6 sees it and decides it has a passion for a fatty (no pun intended) and waves its magical MS wand. The MS spell makes the element expand with “double” the padding you wanted on it.

So what can we do to fix the issue? Well…. This is going to be a long long long exercise so I would seriously consider eating a kebab whilst doing the fix!! Got your kebab? Ok lets go..

add the following to the css of the element you are having an issue with.

display: inline;

That’s it…You are done. You still have the kebab right? not eaten any yet? Send it to me through my comments box.. Go ahead i don’t bite

P.S: If you really need your element to be a block element rather than inline you can do the following hack within your stylesheet.

this example is if you have 20px margin on the element.

margin-left: 20px;  /* Other Browsers */
margin-right: 20px; /* Other Browsers */
_margin-left: 10px; /* IE6 */
_margin-right: 10px; /* IE6 */

The underscore is only seen by IE6 and will basically give it beer goggles.

Ok, so scientists haven’t actually stated that there is indeed a www ozone layer but at this point you are reading the post so the title’s job has been done. This post is actually about the world wide web but I am going to be focussing on how we got it into the mess it is today.

Every developer or designer at one stage is guilty of a dodgy contribution to the basement of the grand old interweb and most learn from the mistake then move on to better things. I am of course reffering to bad design, markup or use of flashing animated .gif’s.

On an average day of web browsing looking for more useless information to forget an hour later I would say that 50% + of the sites either look or work absolutely cack. A little more time spent on the finer details can make a world of difference and websites that showcase the best of the best should really do what they say on the tin and actually show the ones that function, look good and inspire others.

I am guilty of shirking certain duties involved when building a site especially when the deadline is close but I like to think that the finesse is always there and my shirking will not be noticed or indeed important to the websites progression. Sometimes when there is a deadline and I have a designers block thing going on I usually check out some of the web showcase websites I frequent.

As of late (Refer to recent post) these sites seem to add more than their fair share of “ok websites” into the database so when somebody like me visits the site looking to steal some inspiration I am instead faced with trawling through more than a couple of designs to find anything decent enough to be classed as “best of the best”. A big culprit of this is CSS Showcase! The site seems to accept ANY website submitted to it (probably just to populate the database a bit more) so does not suit its purpose. It is also found on top of Google for “CSS Showcase” which is understandable by the domain name but how it could EVER inspire designers i will never know.

The birth of KIT

I’m not talking about the car off Knight Rider that would be silly and irrelevent although he does have a nice shine…Nope I am talking about a newly developed website called Keep It Tidy (keepittidy.co.uk) designed by a fat, greasy, ugly, sweaty bastard……ME

KIT is a Flash, CSS & HTML website showcase gallery which will feature websites that I deem suitable for inspiration to designers and developers. This could be for several reasons such as tutorials included, design, usability etc but ultimately will be based off the inspiration levels. I have created my own graph with an inspiration level from 1-10 and if a website reaches above 7 then it is suitable to be included.

What will this achieve?

Hopefully once we get more submissions into our database it can become an inspiration portal to designers and developers which can aid us all in our time of need when the inspiration blocker devil starts his rounds.

Have you created an awesome site? Submit it here.

Hey all, I have created a few more menus for you to download and use in your projects. If you would like to learn how to create these menus yourself you can refer to my recent tutorial here.

I have included the .psd, HTML & CSS files within each download to make it easier. Remember, if you use them in a project i would like to hear about it….That’s why i have a comment box

Click here for a demonstration.

Download: Red Menu
Download: Blue Menu
Download: Black Menu

Want more? Comment below and let me know.

In this tutorial I am going to explain how to create a sliding door navigation menu using only CSS. When you have finished the tutorial you will finish with something like this.

you will notice that when you hover over any of the links in the example the button state changes to reflect it and it seems as if only one image is used. This is not the case!! Sliding door menus use two images , one for the left and one for the right. I am also implementing my CSS menu trick so we use only one image for the left hover and link state and likewise for the right reducing flicker and making the script lighter.

The source files for this tutorial are included and the menu has been tested in IE6, IE7, Firefox & Safari (Windows). Onward bound…

The images

For this menu we use a total of two images for the entire effect. Amazing huh? The images are specially laid out like so:

The way the images are laid out allows us to use longer links if we need to and the buttons will automatically expand to fit.

The HTML

The HTML for the menu is very simple and takes up few lines.

<div id="aqua_blue_nav">
<ul>
 <li id="selected"><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Longer Link 1</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 <li><a href="#"><span>Another Long Link</span></a></li>
</ul>
<br style="clear:both" />
</div> 

You will see that the links are contained within two HTML elements (Link & Span) within the li tags. This is to allow us to call CSS functions to control them as we need to so lets break it down and actually explain what we are doing.

Link 1: <li><a href=”#”><span>Link 2</span></a></li>. You can see that link two is contained within an li tag  and within that we have a simple href tag and within that a span tag.

The href uses the following rule

#aqua_blue_nav a {
 background-image: url(aqua_blue/nav_left.gif);
 background-repeat: no-repeat;
 background-position: left bottom;
 display: inline-block;
 height: 37px;
 line-height: 37px;
 font-weight: bold;
 color: #333333;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 padding-left: 12px;
}

What we are doing here is declaring that any link within the navigation must use the left image in its normal state positioned to the left but the problem we have here is that the left image has no curve on the right side making the link look incomplete so we need to find a way of adding the right image into the link too. This is accomplished by calling the span tag from within the link using the following CSS.

#aqua_blue_nav a span {
 background-image: url(aqua_blue/nav_right.gif);
 background-repeat: no-repeat;
 background-position: right bottom;
 height: 37px;
 display: inline-block;
 padding-right: 12px;
 cursor: hand;
}

Now our link has a left image and a right image associated with it and will expand to fit the text you require within the button but how do we now do the same but for the hover effect? Simple..we target the elements exactly the same as we just did but instead of simply using #aqua_blue_nav a, we will be using #aqua_blue_nav a:hover which tells the browser that the link has our mouse over it so it should change. We do this by using the following CSS.

#aqua_blue_nav a:hover {
 background-image: url(aqua_blue/nav_left.gif);
 background-repeat: no-repeat;
 background-position: left top;
 display: inline-block;
 height: 37px;
 line-height: 37px;
 font-weight: bold;
 color: #333333;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 padding-left: 12px;
}
#aqua_blue_nav a:hover span {
 background-image: url(aqua_blue/nav_right.gif);
 background-repeat: no-repeat;
 background-position: right top;
 height: 37px;
 display: inline-block;
 padding-right: 12px;
 cursor: hand;
}

You can see that the above CSS is calling the use of the exact same images as the normal state but if you check out the background-position you will see that the position has changed from bottom to top! Basically the CSS is telling the browser that when the links are hovered over the background must rise to the top giving the desired effect.

On my demonstration you will see that the first link already looks like it is being hovered over! We achive this by targetting the actual li tag holding the href with the CSS rule “#selected” and using the following:

#selected a {
 background-image: url(aqua_blue/nav_left.gif);
 background-repeat: no-repeat;
 background-position: left top;
 display: inline-block;
 height: 37px;
 line-height: 37px;
 font-weight: bold;
 color: #333333;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 padding-left: 12px;
}
#selected a span {
 background-image: url(aqua_blue/nav_right.gif);
 background-repeat: no-repeat;
 background-position: right top;
 height: 37px;
 display: inline-block;
 padding-right: 12px;
 cursor: hand;
}

This is telling the browser that any link with the id selected must act like its been selected to notify the user of what page they are currently viewing. Try switching the id onto another link and you will see another link take the selected state. Using this method you can design your own menus in minutes and minimum code. These menus can add a lot of sparkle to any websites navigation menu. If you have used this tutorial to build your own menu please let me know.

As usual, any questions please use the comments box. I have attached the source files below and you can view a demonstration here

Source Files: .PSD, HTML & CSS – Download

So I thought I would make a general post about all the unimportant things happening around the world before moving on to information regarding future postings. If you don’t care about Prison Break, Dexter or TV in general then you may aswell hit the jump and scroll towards the end of this post.

When I am not working i like to put my feet up and either spend time with my family, play some Xbox 360 or watch some TV.

I watch quite a few american shows religiously as I am sure many of you do too. Most notably Prison Break and Dexter. If you havent seen either show yet then you really should. Prison Break is on its 4th series right now and is just as fresh as it’s first whilst Dexter is on its 3rd series. What are they?

Prison break

If I tell you that Prison Break is about a group of prisoners breaking out from prison I don’t think i’m going to ruin it for you am I?. The reason I am posting about this now is because it is now coming to a conclusion and it is very exciting. SPOILER: Michael Schofield has just organised a plan to break into a building that has the best security system in the world and succeeded in walking out with a piece of hardware known as Scylla.

Scylla is “The Company’s” black book and contains the information needed by the police to take the company down for good however the guy from the police department “Self” has cheated Schofield and the gang and managed to take Scylla in a bid to sell it on so they are now trying to track him down and retrieve the device…AGAIN.

I may not be the best at explaining a story but i hope you get the gist of it and WATCH IT. An amazing series with few flaws.

Dexter

Dexter is quite simply a genius show and fits right into my favourites. Dexter is a blood spatter expert working for the police tracking down serial killers. The twist is that Dexter is also a serial killer that only kills other murderers.

Dexter covers his tracks pretty well but things still manage to get in the way. Watch it and you will be hooked.

Future Postings

Over the coming weeks I am going to be creating a number of video tutorials on creating a website starting from the basics leading up to more advanced material suc as PHP & MySql.

First part of the tutorial is going to be “3 Column Layout Using CSS” so watch out for that in the next couple of days. Most of the tutorials will involve using Adobe products, mainly Dreamweaver and Photoshop so you should have them at the ready.

Until then, keep eating and have fun.