.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
}


The code above is perfectly valid and will work fine, but we can save time and make the code much neater using the following code:


.header {
padding:5px 10px 5px 10px;
}


Using the code above we can specify all of the padding for the header div on one line. It works by applying the first attribute (5px) to the top padding of the div. The second (10px) applies to the right side padding, the 3rd (5px) attribute means the padding on the bottom of the div, and the forth (10px) attribute means the left side padding. The padding is always applied in this order.

It is possible to shorten this code even further using the following code:


.header {
padding:5px 10px;
}


This works by taking the first (5px) attribute to mean the top and bottom, or vertical padding, and the second (10px) attribute to mean the horizontal padding (left and right).

The exact same principles can be used to declare the margin of your divs, so what could have looked like this:


.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
}

Can now look much neater, and is obviously much quicker to write using the following:


.header {
padding:5px 10px;
margin:5px 10px;
}


Background properties

One of my favorite CSS shortcuts is the background property shortcut. This is how a typical CSS file could look without shortcuts:


.header {
background-image:url(images/image.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#fff;
}


However, with some nifty CSS it could look like this:


.header {
background: #fff url(images/image.jpg) repeat-x top;
}


The above code is much quicker and more manageable. Take note though, that all of the properties must be provided when using the background shortcut. If I missed off the colour specification at the beginning for example, the code would not work.

Font shortcuts

Another very useful shortcut is the font shortcut. The code below can be shorted considerably:


body {
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 0.8em;
line-height: 1.2em;
}


Here is the shortcut:


body {
font: bold 0.8em/1.2em verdana, sans-serif;
}


It is important to write the shortcut in the same order as above so that web browsers don’t get confused!

Borders

This is my favorite shortcut of all. This saves me a great deal of time when I am developing web sites because whenever I have a problem with a layout or an element, the first thing I do is put a border around it so that I can see its dimensions and work out what’s going on.

Here is some typical code:


.header {
border-width: 1px;
border-color: #000;
border-style: solid;
}


This can be shorted to the following:


.header {
border:1px solid #000;
}


Then, whenever you are not sure why an element is not behaving properly, just use the border shortcut above to debug your code and see what the dimensions of the element are.

Conclusion

As you can see, you can make your code much shorter and neater using the CSS shortcuts outlined here. Once you get into the habit of using them, I guarantee that you will wonder why you ever did it differently in the past!

Centering the Layout

The first thing we need to do is centre the layout. We will create a site that is 800px wide in this example, centered in our browser. To do this we need the following code:

body {
margin:0px;
padding:0px;
text-align:center;
}


.container {
width:800px;
text-align:left;
margin:auto;
}


The text-align:center command in the body tag is needed to centre our .container div. We then need to align the text back to the left in our container and apply margin:auto to move the container div into the centre of the page.

Achieving 100% height

Making your site stretch to 100% height is slightly more complicated. Due to difference in the way browsers render css we will need to use a nifty CSS hack to achieve what we want. Here is what our code will look like with the next set of declarations added:

html, body {
margin:0px;
padding:0px;
text-align:center;
height:100%;
}


.container {
width:800px;
text-align:left;
margin:auto;
min-height:100%;
}


* html {.container:height:100%;}


In the first block of code we have added ‘html’ to the body section. This is because we need the body to stretch to 100% of the height of its containing element, which is the html, so we too have set this to 100% height.

In the container, we have added ‘min-height:100%’ which tells all browsers apart from Internet Explorer 6 and below that 100% is the minimum height, and if the content expands beyond this, the container will automatically expand with it. As Internet Explorer 6 and below do not understand this command, we need to pass a value of height:100% to these browsers only, as they treat height:100% to mean the same as min-height, therefore allowing the container to expand. We do this with the universal selector hack.

Adding the footer

We now have a 100% height, centred layout and its time to add the footer. Here is the next bit of code we need to add:

.container {
width:800px;
text-align:left;
margin:auto;
min-height:100%;
position:relative;
}



.footer {
position:absolute;
bottom:0px;
height:150px;
}


.clearfooter {
clear:both;
height:170px;
}

The first thing we have done here is add position:relative to the container. This allows us to position the footer absolutely within it. We want it to sit on the bottom of the page so we have added the bottom:0px to achieve this.

Unfortunately, by positioning the footer absolutely, we have taken the footer out of the flow of the document and therefore, any content will disappear behind the footer. To fix this we add a .clearfooter section which sits behind the footer and fixes this problem.

The HTML

Here is the basic layout that needs to be added to your HTML document:

<div class="container">


<p>
Add your header and menu as required
<p>


<div class="clearfooter">
</div>


<div class="footer">
Footer contents here
</div>


</div>


Wrap Up

All the code you need for this very effective layout is provided here. To see how it all slots together and to see a real world example, you may download this template so you can see how you can expand the code used here.

Coming up with the right theme

Now and again, you may be asked to work on a project in a niche that you may not understand fully and have never worked with before. This can make it very difficult to think of a suitable theme for the site. For example, I was once asked to work on price comparison site, an area I did not have much experience in. Normally I have lots of ideas I can use in the initial stages of site design and can usually come up with a suitable theme fairly fast, but on this occasion I was finding it difficult. I knew that I wanted the site to look modern and professional (who doesn’t), but most importantly it had to be easy to use and make the wide range of products available easy to find and view.

The first thing to do in this situation is to look at competing sites. There will probably be many good examples you can study. There will also be lots of bad examples. Look closely at both and try to form an idea of how your own site will look. Obviously, you do not want to copy your competitors and I believe you should try to come up with something even better if possible but there is nothing wrong with admiring other peoples work and seeing how you can improve your own work as a result.

Viewing your competitor’s sites in a niche that you are not familiar with is also important because most of the successful sites will all adhere to the same guidelines. That means that users of these sites come to expect certain features and if your site is drastically different, they will probably not trust your site and you will not convert as well as you could. Remember – its good to be unique but it can be bad to go against convention. In my example, I noticed most of the successful competing sites all had a prominent ‘categories’ block at the top of the page acting as the main navigation. This is obviously something that worked well so I decided that my theme would need to include this as well.

After researching your competitors, you should probably be getting quite a few ideas going through your head about how the site should look. Before you go any further, grab a pen and notepad and start sketching your ideas down. They will be very useful later when you actually begin your design.

Developing the theme

Now that you have some good ideas and made some sketches, its time to fire up your graphics package. I use Photoshop to develop my sketches into a simple template which I can then slice up and use in my html and css. The Photoshop template does not need to be totally accurate, but try to get your main features such as header, navigation and side bars as complete as possible. Once you have the main features, its really easy to select the right font and colours for the rest of your design when you write your css.

When I’m developing my theme there are some key things that I do. Firstly, I visit some good css galleries such as cssremix.com and cssbeauty.com. You can see some really nice designs on these sites and whist there may not be any designs aimed at the same niche as yours, you can still gain a great deal of inspiration from some of the designs on these sites. Its normally the really small, subtle effects that I notice. Another thing that really helps me is to look through web design magazines. I like to read .net magazine. The experts in these magazines provide really useful information and there are always great examples of websites to inspire you.

I also look through previous work that I have done do determine a suitable layout to use. Normally, the layout will have to be totally changed to fit in with the new site design but this helps me decide whether I need a fixed width or fluid layout, a sidebar, or just a top bar etc. By now, I am usually ready to start creating the Photoshop mockup.

The beauty of doing a mockup in Photoshop first is that you can change things easily and get feedback from the client before you begin coding. It also makes it very easy to build on your design until you get something you are really happy with. Use your sketches from earlier and all the ideas you have accumulated as you begin your Photoshop mockup. Soon, you will have a nice looking design and our creative block will be overcome. Once this is done you can get final approval from the client and move on to the next step of development.

Conclusion

When you hit a creative block don’t worry to much about it. It happens to us all and you will be able to complete your project with little delay. The most important thing to remember is not to rush into a design when you are short on ideas. You will end up creating something neither you, or the client are happy with. Take the time to go through the steps outlined here, and of course, add anything else that helps you out to the process.

Link building background

Search engines are very good at counting links. The difficult part is determining how trustworthy links are. A link on a blog or forum could possibly be spam so obviously, search engines don’t expect them to be trustworthy. A link from a high ranking website or a website with a .org domain however, are more likely to be reliable. This is not to say that form and blog links are not useful however. Just remember that search engines count links for a reason. They want to determine how good sites really are so that they can rank them accordingly.

For this reason, obtaining links purely to rank well in search engines can land you in trouble. If a search engine detects that links have been obtained un-naturally, you could be penalised. For example, imagine a new web site that has just been launched. The webmaster has heard that links pointing to his site will increase his rankings so he searches on Google to find a submission service that submits his site to 1000 directories for £100, thereby obtaining 1000 incoming links. Unfortunately, obtaining this many links in a short period of time does not look natural. If all the links point to the same page i.e his homepage, then this look even more unnatural. If each link uses the same anchor text, then once again, this looks very unnatural and he may have just wasted his £100.

Paid links – good or bad?

There has been quite a lot of talk about paid links recently and if they benefit or harm your site. The truth is that paid links can harm your site but it really depends on why you acquire these links. If you buy a link on another site in order to increase your page rank, you are effectively trying to fool the search engines so this is not a good idea. However, if you acquire a paid link in order to be visible to the audience on that site and obtain some direct traffic and help build your brand, then this is fine. It is difficult to say how a search engine would know the purpose behind the paid link, but to be safe, be honest about why you want the link and if its only because you want to increase your rankings then spend your time on more suitable areas such as building good quality content which we will discuss later.

Link exchanges

Swapping links for the sole purpose of appealing to the search engines is a waste of time. If you are doing so because you genuinely want you audience to know about the other site then there is nothing wrong with that, but search engines can easily determine swapped links and if they see that most links on a site have been exchanged, then they will obviously not look natural or trustworthy and will therefore have little effect on your search rank.

How to get links properly

After reading this you may be left slightly daunted and wondering how you can possibly obtain enough links to rank well in the search engines and drive traffic to your site. Don’t worry though. By utilising a combination of link building techniques and sticking to the basic principles, and above all – having patience, you will be able to build a very successful campaign. We will now look at some of the main things you need to be doing in your link building campaign.

Directory submissions

We have already established that obtaining many links from low quality, untrustworthy sources will not help you ranking very much. However, it is still worth investing some time submitting your site to some good quality, search engine friendly directories. To start things off, submit your site to about 100 directories related to your sites content. Although this may have limited effect on your rankings and will bring in very little visitors from click throughs, it will help your site get indexed quickly and set a foundation for the rest of your link building. Using a service such as usefulsubmit.com is a good place to start.

Paid links

Take a look on text-link-ads.com and find some good quality sites in categories related to your site. Try to find sites with a high page rank that display paid links prominently and that don’t have too many other paid links on the same page. When you find 1 or 2 suitable sites, buy a link on the site and monitor any traffic you get from it.

Remember that we want to get click throughs from targeted visitors rather than purely increase page rank. This way we can honestly say that we are not trying to fool the search engines and any targeted traffic that comes through as a result of your paid link may end up recommending you, bookmarking you, linking to you and so on. If your paid link does not provide you with a satisfactory amount of traffic then cancel it and try another site. Once you identify sites that provide you with adequate amounts of traffic stick with them and continue to monitor and add your link to more sites as your budget allows. Hopefully you will see your backlinks increase as a result of the visitors coming from your links liking your content and linking to you.

Good quality content

This is where most of your energy should be focussed. Keep writing new content and updating your site whenever you can. This is the best way of obtaining good quality one way incoming links. If you own a site than chances are, you are pretty knowledgeable about the subject area, so share your knowledge with others and you will see huge benefits. Writing about something new and exciting in your subject area, some problem you have come across and solved, tutorials and anything controversial are all good topics to explore. When talking about good quality content, don’t just focus on text. With the rise of broadband, video has become a huge commodity on the internet so take advantage of this if you can.

Asking for links

Another good way to get good quality, one way incoming links is to simply ask for them. If you have a good site with good content that would be of interest to users of a popular site you know about, then its worth sending a personalised email to the owner of that site informing them of how their users could benefit from visiting your site. Be professional and sincere. Only ask if you truly think having your link on their site would be mutually beneficial. 9 out of 10 of the people you ask may well turn you down but remember, its quality not quantity that counts so don’t be disheartened if not all of your requests are met.

User generated content

Don’t focus your link building campaign around search engines alone. Social networking is huge now and is changing the way people find the things they want on the Internet. Create an account with popular sites such as digg.com and stumbleupon.com and spend some time networking and building up your profile. Not only is this enjoyable but it could drive a great deal of traffic to your site, increasing the chances of obtaining links from an array of sources. Get a bookmarking widget from a site such as addthis.com to make it easy for people to bookmark content from your site.

Conclusion

All the classic advice such as commenting on people blogs, posting in forums and including your link in email signatures are all valid techniques, but remember that the most benefit will come from obtaining links from trustworthy sources. By following the principles outlined here, and having a great deal of patience and diligence, you will be able to create a high ranking successful web site.

A landing page is a page or group of pages specifically developed to be associated with the keywords in your ppc campaign. These landing pages need to be as specific to the ad as possible.

Relevancy

By asking yourself ‘what does this visitor expect to see’ when they land on your page, you will be able to start building highly effective landing pages. Your landing page need to have as little distraction as possible and allow the user to complete the desired action (i.e, a sale) as easily as possible. When a user clicks on your ad, they are demonstrating that the initial ad was relevant to them, and you need to continue this relevancy onto your landing page.

Consider the following example; A user performs a search on Google for ‘Samsung LCD TV’. Your ad is displayed in the results and does a good job of inciting the user to click on the ad. The user now lands on your landing page and you now need to convince them to carry out the desired action, in this case, buying the television. The user will be expecting to see copy and images relating to the product. Having too much unrelated content on the page could easily put them off.

The headings you use on your landing page are vital. They need to be as closely linked to the title of your ad as possible to have the greatest effect. In our example, our images would clearly show the product in question and we would include a clear and concise call to action. We would also need to include as much assurance as possible to our visitor that we are a credible and reliable supplier. Text such as ‘money back guarantee’ and ‘free delivery’ can be particularly effective.

You also need to remember than relevancy is subjective. Different people landing on your page may regard different elements on the page differently. This is why it is important to experiment and try different combinations and layouts.

Landing Page Design

We will now look at how you should design your landing pages in more detail. Firstly, get a pen and paper and sketch your page out, highlighting the major elements such as your logo and navigation (elements that are normally constant throughout the site). Next, sketch out the details on the landing page such as the title, images, description and buy button. Look at your sketch and imagine yourself landing on this page and ask yourself which elements would attract your attention. Think about where you should add colour and which areas should remain clear. Continue sketching until you think you have achieved the most effective layout. The beauty of sketching pages out like this is that it is so quick and easy and often makes you think of things you may have otherwise overlooked.

Headings

It needs to be immediately obvious to the user that the heading of your page relates closely to your ad. Make sure you include the keyword in the heading. This applies even if the keyword phrase consists of only one word. The best thing you can do to determine the effectiveness of your headings is to do some basic tests. Try two different pages that are identical apart from the headings and see which one converts best. When you are confident that you have determined the page that converts best, do a few more tests until you have the best headings possible. Experiment with the colour, font size and letter spacing, as well as the words in your heading. It is surprising what a small difference can make to the effectiveness of your landing pages.

Images

Generally, you should only use images in the main content of your landing pages if it truly adds relevancy to the page. It is normally best to avoid images that are included purely for aesthetics as they tend to distract the user. However, if you are selling a product, showing images of the product is essential, preferably showing high quality pictures of the product from various angles.

Calls to Action

You should also experiment with your call to action button. If you wanted your visitor to complete an order form for example, you could try using ‘buy now’ rather than ‘submit’. Even better- try to include your keywords in the button text. Depending on your keywords, this can be tricky so only do this if you have a keyword that reads well as the button text. For example ‘Buy Samsung LCD TV’ contains all of our keywords from our previous example but it could be too long and may not convert well. This is where testing would be important. As with your headings, try testing a few different pages concurrently. The results can be surprising.

It is also important that anything that could cause the visitor to change their mind about the transaction during this stage is addressed. Visitors frequently abandon shopping carts and forms at the last minute as they can be unsure about what to expect when they click a button or link. Many people are still very sceptical of the internet so in order to put them at ease, think about how easy and reassuring the process is from beginning to end. The sketches we talked about earlier can help you address this.

Conclusion

By testing your pages and thinking carefully about how your visitors will interact with your page, you will be able to create highly effective landing pages that could give you a significant advantage over your competitors and help you make the most of your ppc campaigns. On the Internet, your competitors are only a click of the mouse away so start developing your landing pages now and make the most of every visitor you get!

Step 1

Open up the picture you want to work on in Photoshop. I used this image from www.sxc.hu:

Step 2

Now you will need to duplicate the background layer. Go to layer > duplicate layer or simply drag the background layer onto the create a new layer icon in the layers palette. Name your duplicated layer ‘mask’.

Step 3

Now we want to desaturate the mask layer to create our black and white image. Go to image > adjustments > desaturate. Now that we have our black and white image, we need to start adding color to the bits we want to show through. Go to layer > layer mask > reveal all. This will put a layer mask on our ‘mask’ layer. Make sure the layer mask is selected (it will have a white border around it). If not, just click on the thumbnail within the mask layer.

Step 4

Select a hard brush and with black as your foreground color, begin painting on the areas that you want color. If you make a mistake, select white as your foreground color and paint over your mistake. Take your time and zoom in to be as accurate as possible.

Eventually you will end up with your fully painted image:

There are quite a few ways to achieve this effect but using layers masks and brushes is the most accurate and effective.