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.

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.

Although I am a website designer and developer the focus of this blog isn’t aimed at that! Instead it is aimed at my entire life and the things that interest me along with several tutorials on certain things I see as important. To be honest, I don’t really have a lot of free time to post on here but I will post what I can, when I can.