When writing your CSS, it is possible to write neater, more readable code by making use of CSS shortcuts. A shortcut is a feature of CSS that allows the developer to specify a number of related properties on a single line rather than specify them all separately. Lets look at the following example:


.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!

One of the most common layouts on the web is a fixed width site that stretches to the bottom of the page, with a footer sitting at the bottom. If the content of the page stretches past the bottom, the site container needs to stretch with it. If the content does not fill the page, the footer needs to remain at the bottom. With a table based layout, this would be a simple task, but who wants to use tables for layout? With some nifty CSS tricks we can accomplish this very well using CSS alone and once you know how its done, you will use it over and over again.

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.

Link building is one of the most important aspects of website promotion and is also one of the most difficult and time consuming tasks. It is the process of acquiring links that point back to your website. They are so important because search engines basically count each link as a vote for the quality of your website, the theory being that someone would not link to you unless there was something worth linking to. There are many different ways of acquiring links to your site, some more effective than others. This article will shed some light on the do’s and don’ts of link building so that you can spend your time on the things that will benefit you the most.

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.

With pay-per-click (ppc) costs rising and the marketplace more competitive than ever, it has become increasingly difficult to stand out from your competitors. Spending time choosing and experimenting with the ideal ad format and keywords is vital, but to make the most of your ppc costs and get the edge on your competitors, you need to focus on your landing pages.

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!

This is a really nice technique to make photos look dynamic and interesting. It can be used very well for coloring small, subtle effects like a subjects eyes for example or for more dramatic effects.

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.

Recently, I have been working on the SEO for Real Design Network and trying my best to get good rankings in the search engines. Here are some of the top tips that I found most important:

After My Top 5 Photoshop Tips tutorial I decided to write another one based on the same theme but with slightly more advanced features. The first tutorial was aimed at beginners where as this one may teach something new to advanced Photoshop users as well.

Quick Masking. This is a very useful feature for selecting parts of an image and can be more accurate and faster than the lasso tool. Press Q and then select the brush tool. You can now paint over any part of an image you want to select. When you have the selection covered press Q again or use the magic wand tool to make your selection.

Copying effects. After spending a long time creating the perfect effect, why waste time doing it all again on another layer. Simply right click on the layer effects icon on the layer in the layers palette and select ‘copy layer style’. Then, just right click on the layer you want to apply the effect to and select ‘paste layer style’ to crate the exact same effect.

Finding layers fast. Sometimes when you are creating complex images you may have a large stack of layers and find yourself having a hard time finding the layer you want. You can get around this easily and save yourself time and frustration by selecting the move tool and making sure ‘auto select layer’ is ticked in the options bar. now you can just click on a layer in your document to select it in the layers palette.

Re-Applying filters . Sometimes, you may need to apply a filter more than once to achieve the desired effect. Rather than going through the filter drop down menu every time, you can just press ctrl+F to apply the filter you last used with the same settings.

Feathering Selections. When selecting part of an image using the lasso or magic wand, the selection is often too jagged. You can get around this by simply setting the feather value in the options bar to 10.

One of my favorite ways to create nice looking header is to use abstract brushing techniques. I am going to try and get you on the right track with an easy to understand tutorial.

Step 1

Go to www.deviantart.com and do a search for Photoshop brushes. You should get lots of nice looking brushes in the results to choose from. Find a brush you like the look of and download it. Once it is downloaded you will need to make it available to Photoshop. Copy the brush from where you saved it and go to where Photoshop is installed on your computer. Once you find your adobe folder go to photoshop-presets-brushes and paste your brush in this folder. On my computer, the path to install the brush to is C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Brushes.

Step 2

Now open up Photoshop and create a new document with a white background, 700px wide and 100 high. Now look over to the top right of the window and there should be a tab that says brushes (if not you can access it by going to ‘window’ and clicking on ‘brushes’). Click on this tab and a window will drop down. There will also be a small arrow next to the text that says brushes. Click on this arrow and then go to ‘load brushes’. Find the brush you placed in the brushes folder and select it.

Step 3

You now have your brush available and we can start brushing. Press ‘D’ on the keyboard to reset the colors to the default (black and white) and create a new layer in the layers palette. Now the select the brush tool and find your brush set. Select a brush you want to use first and move the brush somewhere over the canvas and do a single click of the mouse. Do this a few more times around the canvas until some kind of pattern is forming.

This is what I have so far. Obviously yours could look vastly different but the principles are the same:

Step 4

Create a new layer and begin brushing with a different brush, this time in white. Remember to do single clicks. After 2 or 3 clicks, create a new layer, select a new brush and select black for the color. Keep repeating this process until you have something you think looks interesting.

Step 5

Now its time to add some color. Create a new layer above your brush layers. Then click on ‘create new fill or adjustment layer’ at the bottom of the layers palette. Then select hue/saturation from the menu. tick the colorize box and move the sliders until you find a color you like. You may be able to stop here or if you like you can add a color balance from the ‘create new fill or adjustment layer’ menu. Once again, experiment with the settings until you find something you like.

This is what my image looks like:

Now you know the steps required to make an abstract header. However, you don’t need to stop here. You can create more layers, use a combination of brush sets, add images etc. It may take a little practice and trial and error but you will be able to come up with some nice looking images using these techniques.

One of the most important and also misunderstood of all CSS topics is positioning. Using CSS, you can declare 3 different kinds of position. These are:

• Static
• Relative
• Absolute

Static

Static positioning is the default position of an element on the page. If you did not declare any other kind of position then it would be static. An element with a static position will be part of the normal flow of the document, meaning that it will come after any preceding elements and other static elements will flow around it.

Static elements can not be moved using commands such as left:20px because this would mean the normal flow of the document would be altered. Static elements can be moved using margin command however.

Relative

This is the most misunderstood of the 3 positioning commands. Relative positioning is moving an element in relation to its default position. The element can be moved using left, right, top and bottom commands and you could make elements overlap each other if you wished. One thing to remember is that the space which the element occupied before it was moved will still behave as if the element was still there. This is because when you move an element using relative positioning, the actual document flow is only altered by appearance, it is not physically changed.

Absolute

Absolute positioning is something that is sometimes overused by those new to CSS. Many people are amazed by its ability to place elements anywhere on the screen but it is easy to get in trouble by using it incorrectly.

An absolutely positioned element is one that is taken out of the flow of the document and positioned at precise co-ordinates on the page. Top, left, right and bottom commands are used to specify the co-ordinates (eg left:20px;).

Absolutely positioned elements are positioned relative to the top left of the viewport unless they are contained within another element that has a position: relative, or position; absolute. In this case the element will appear in the specified position within its parent element.

Photoshop is a fantastic program which I have used for all my image editing needs since I started designing web pages quite a few years ago. There are endless shortcuts and tips that you can pick up and I’ve written 5 of my favorites below:

1. Cycling through blending modes. You can easily more through the blending modes by selecting the move tool from the toolbar and pressing Shift and the + key to move forwards or Shift and the - key to move backwards.
2. Selecting a layer. This is my favorite shortcut of all. When you want to select a single layer, simply hold down Ctrl and click on the thumbnail of the layer in the layers palette to select it quickly.
3. Give yourself more space. Sometimes when you are working on a large image you need all the space you can get. Press the tab key and the toolbar and windows disappear so you can concentrate on your image. Press the tab key again to get them back.
4. Hiding Selections. The marching ants selection can sometimes get in your way and make it difficult to see intricate details. you can hide the selection by pressing Ctrl and H.
5. Unlocking the background. This is something I have only discovered recently but it is very simple. Sometimes when you open a file, the background layer is locked so you cannot edit it. This can be very annoying but you can get around it by simply double clicking on the thumbnail in the layers palete and clicking ok when the new layers dialogue box appears.