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.

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.

If you are a website designer then chances are you have created your latest website and submitted it into the various CSS showcase websites out there such as Best Web Gallery.

The main purpose of these websites I feel is to offer inspiration for designers and wannabe designers and some DO offer great resources. I visit these sites daily as a rule and check out the latest designs by companies or freelancers and lately have noticed that a lot of these sites are starting to add anything with a bit of CSS into the gallery.

The problem with this is that new designers starting up are going to be looking through and thinking that the poor designs featured are normal and that this is what people want. To me it is a worry as I am one of the people who believe that the web should be a beautiful place and not full of fugly pages.

Best Web Gallery is a good place to start if you require true inspiration and up until recently others were a great inspiration. To promote inspirational websites is a good thing but to promote anything with CSS is going against the rules of the website being viewed and will surely kill the failing sites. Websites that showcase others work for inspirational purposes should endeavour to provide their visitors with great designs to be inspired by.

A website featured on a showcase site should be proud of the fact and tell people about it on their own websites but if people visit the site and see that they are also showcasing theworstpageontheplanet.com then it no longer becomes prestige and actually degrades it somewhat.

Do you believe that all of these sites serve a great purpose in aiding designers or do you feel the same as the fatman?

For inspiration in all things design related there is a resource site i solidly stand by and that is For Web Designers. FWD has links for all sorts of things including Ajax, CSS, Icons etc.

Edited for more information:

So just 24 hours after posting my last post regarding the CSS showcase sites going downhill, one of the more frequent sites i visit Design Shack has decided to feature a site that does indeed include a little CSS…. by little i mean LITTLE.

This is a link to the site they have featured Link. This particular site features ONE CSS style but yet has made it into the site which states the following “Design Shack is a highly regarded web design gallery and portal, which has been showcasing inspirational CSS since 2003.”.

Am i allowed to rest my case or do i need more proof?

There will be a few steps covered but i will try to explain it as simple as i can

Step 1 – The Image

First we need to open Photoshop or the graphics program of your choice and create an image 110px x 80px. This is to be the only image we will use for our navigation. Notice how I have both of the buttons (normal state & hover state) in the one image.

Step 2 – The XHTML

Now its time to fire up your coding program, In my case it is Dreamweaver. Create a new html document and name it navbar.html then save the file.

Now add right after the body tag the following code:

<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>

Step 3 – The CSS

Create a new css file and add the following

#navigation li {
	display: block;
	list-style-type: none;
	float: left;
}
li a:link, li a:active, li a:visited {
	background-image: url(YOURIMAGE);
	background-repeat: no-repeat;
	height: 40px;
	width: 110px;
	line-height: 40px;
	background-position: left top;
	margin-right: 2px;
	display: block;
	text-align: center;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
}
li a:hover {
	background-image: url(YOURIMAGE);
	background-repeat: no-repeat;
	height: 40px;
	width: 110px;
	line-height: 40px;
	background-position: left -40px;
	margin-right: 2px;
	display: block;
	text-align: center;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
}

And that is it you are done You should have ended up with this Click me

Explanation

This takes away all of the strain and bloaty code of javascript and also preloads the image so you do not get that nasty flicker effect.

Because the image loaded initially is the double button image the rollover is instant in its rolled on state. The hover state called upon in the li tag basically tells the bg to rise 40px on rollover.

I hope that I have helped you with your CSS Tabbed Navigation woes. If you feel something would be better another way then please do let me know