Setting up an e-commerce website with Magento is not too complicated, the install and global configuration are pretty easy and shouldn’t cause too many problems. For more advanced configuration and template tweaks, things can get a bit more hectic, but with the following Magento tips it should already get a little easier.

1. Add a custom “add to cart” button on CMS pages

Sometimes you’ll want to show a different presentation of your products or introduce it on a CMS page for some reason. If you want to do that it’s actually not so complicated, in your page editor, just add the following HTML code where you want it to appear in the page.

<button onclick=”location.href =’{{config path=”web/unsecure/base_url”}}/checkout/cart/add?product=1&qty=1′”>Buy It Now</button>

Save the page and refresh the cache. Now if you open the page in you should be able to see “Buy It Now” button. When clicked it adds 1 product with ID=1 to your shopping cart.

To make it a little more advanced, you can add the quantity of products you want to let the customers add, in that case use this code (example for five products).

<button onclick=”location.href =’{{config path=”web/unsecure/base_url”}}/checkout/cart/add?product=1&qty=5′”>Buy 4 Get 1 Free</button>

Source of the tip

2. Add custom comment box to each product on the cart page

If you create more than one website with Magento for clients, you get 90% chances that one of your clients will ask to have a comment box for products on orders. It makes sense, the client could have a specific requirement or question regarding the order or the shipping and a comment box is the best way to let him comment.

This tip is a bit long, so take a look at it on Magento Coder’s website.

3. Hide shopping cart sidebar when it is empty

Having the shopping cart in the sidebar or elsewhere on the page is very useful for your visitors. However, displaying the shopping cart when the user has nothing in it is not necessary. To hide the cart in the sidebar, try the following steps.

1. Open: app/design/frontend/default/<your template>/template/checkout/cart/sidebar.phtml

2. Look for the following div (normally on line 32):

<div class="box base-mini mini-cart">

3. Add this php code right before that opening div tag

$_cartQty1 = $this->getSummaryCount()
if ($_cartQty1 >0):

4. Add this php code to the bottom of the file
endif

Source of this tip

4. Add Facebook Like on a product page in Magento

Having a Facebook button on your product is an easy way to take advantage of the power of Facebook. If a user clicks on it, he shares your page with all his friends.

To add this button, add the following code anywhere in this template file: app/design/frontend/theme/theme/template/catalog/product/view.phtml

<a name="fb_share" type="button"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
<?php elseif($_share == 'facebook_like'): ?>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like show_faces="true" width="450"></fb:like>
<?php endif; ?>

5. Add a language pack as a store view

Creating a store view for a language is not too hard, but you shouldn’t have any problem doing it in Magento if you follow these instructions.

1.  Download the language pack you need and then unpack it to your Magento install folder. It copies two folders: one goes to app\design\frontend\default\default\locale and the other one to app\locale.

2.  Go to System > Configuration in your admin. On the left top corner in Current Configuration Scope dropdown box, you can see Default Config, and Main Store in English store view.

3.  Now let’s go and add the French store view. Under the dropdown box, there’s Manage Stores link or you can directly go to System > Manage Stores. Click the Create Store View link on top right, and type these in store view information form:
Store: Main Store
Name: French
Code: french
Status: Enabled
Sort order: 0

4.  Save, go back to System > Configuration. In Current Configuration Scope dropdown box, you now see there’s French store view. Click that link.
On Locale options tab on the left, uncheck the “use website” checkbox then change the locale to French (France). Save.
Now you can have your website in French.

6. Tip to hide the price of the product if Magento user is not logged in

Tier pricing is great, but you don’t want to display every price to every customer. To show tiered pricing to logged in visitors only, go to: app/design/frontend/default/default/template/catalog/product/view/tierprices.phtml

On this file, add this PHP function

<?php if(Mage::getSingleton('customer/session')->isLoggedIn()): ?>

The above function should be added before the following piece of code

<?php if (count($_tierPrices) > 0): ?>

Then add this code at the end.

<?php endif; ?>

7. Add a contact form to a Magento CMS page

Of all Magento tips, this one solve a very frequent problem. Your clients will want to get a contact form to which they can add bits of text, they’ll also want to have the breadcrumb menu shown for that contact page. Out of the box, the Magento contact form doesn’t allo this, to do it you just have to follow this procedure.

Go to your CMS> Manage Pages interface
Once there, input your HTML as you normally would on any other page
Once you are happy with HTML part, add this lines:

<!– CONTACT FORM –>
{{block type="core/template" name="contactForm" form_action="/contacts/index/post" template="contacts/form.phtml"}}
<!– END OF CONTACT FORM –>

Source of this Magento tips

8. How to Remove Credit Card Information From Sales Email

Depending on what payment system you allow to your visitors, Magento sends the credit card number openly by email, which is not secured at all. Here is a Magento tip to avoid displaying that info in emails.

1. Open the file app/design/frontend/default/your_theme/template/payment/info/cc.phtml

2. Find the lines that read:

<?php echo $this->__(’Credit Card Number: xxxx-%s’, $this->htmlEscape($this->getInfo()->getCcLast4())) ?><br/><?php echo $this->__(’Expiration Date: %s/%s’, $this->htmlEscape($this->getCcExpMonth()), $this->htmlEscape($this->getInfo()->getCcExpYear())) ?>

3. Comment this code out, so it looks like this:

<!–<?php echo $this->__(’Credit Card Number: xxxx-%s’, $this->htmlEscape($this->getInfo()->getCcLast4())) ?><br/><?php echo $this->__(’Expiration Date: %s/%s’, $this->htmlEscape($this->getCcExpMonth()), $this->htmlEscape($this->getInfo()->getCcExpYear())) ?>–>

4. Save the file.

Source of this tip

9. Debug your layout in Magento

Your layout files and templates are not showing up on front? You can see what’s going on with your layouts using Mage::log() method in your controller. The code below would log loaded layout handles and compiled layout update string into var/log/layout.log file.

Here is how to enable the debug mode in your index.php file.

public function testAction()
{
$this->loadLayout();
// …
//Somewhere within controller action after loadLayout() was called
//The code below logs loaded layout handles to “var/log/layout.log” file
Mage::log(
$this->getLayout()->getUpdate()->getHandles(),
null,
‘layout.log’
);
//The code below logs merged layout to “var/log/layout.log” file
Mage::log(
$this->getLayout()->getUpdate()->asString(),
null,
‘layout.log’
);
}

10. Display a product’s category name

When on a product page in Magento, it can be a bit tricky to display the name of the category the product is in. Actually it’s not that hard, all you have to do is to follow these Magento tips.

The template file you’ll have to edit is this one catalog/product/view.phtml

and add the next code where you want to display the category

<?php $categories = $_product->getCategoryIds(); ?>
<?php foreach($categories as $k => $_category_id): ?>
<?php $_category = Mage::getModel('catalog/category')->load($_category_id) ?>
<a href="<?php echo $_category->getUrl() ?>"><?php echo $_category->getName() ?></a>
<?php endforeach; ?>

Have any Magento tips to share?

The Magento tips mentionned in this article are only a few, but they really helped in creating my Magento sites and templates. Do you work frequently with Magento? If so, do you have any cool Magento tips you could share?

If you are thinking to use the tabbed navigation then you can easily implement it through jQuery. Do you know how? Here, we will discuss how to implement the Horizontal Tabbed Navigation through jQuery. We will also put a highlight to add the implementation of effects like Collapse, Sorting, and Mouseover.
Let us start now from a blank html file. We are adding following default code to it:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>jQuery Tabs</title>
   </head>
<body>
</body>
</html>

Now, we will link the default jQuery CSS and JS files with our HTML file.

<link type="text/css" href="jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>

This is the time to add the script code to create the tab interface.

<script type="text/javascript">
$(function(){
   // Tabs
   $('#tabs').tabs();
});
</script>

This is the default script to create the tabs without any effects.
Now, we will create the tabs using ul and li tags, and add the contents in them. For this work, the jquery-ui-1.8.13.custom CSS file have the classes like tabs-1 for 1st Tab, tabs-2 for 2nd tab, and tabs-3 for 3rd tab. You can edit the CSS file to have more classes to create more tabs in your design. Following is the code to create three tabs:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Google</a></li>
      <li><a href="#tabs-2">Yahoo</a></li>
      <li><a href="#tabs-3">Bing</a></li>
   </ul>
   <div id="tabs-1">
      Content for Tab 1
   <div>
   <div id="tabs-2">
      Content for Tab 2
   </div>
   <div id="tabs-3">
      Content for Tab 3
   </div>

After merging the complete HTML code will be as following. You can also copy this code for your work.

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>jQuery Tabs</title>
      <link type="text/css" href="jquery-ui-1.8.13.custom.css" rel="stylesheet" />
      <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
      <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
      <script type="text/javascript">
      $(function(){
         // Tabs
         $('#tabs').tabs();
      });
      </script>
   </head>
   <body>
      <h1>Welcome to jQuery Tabs</h1>
         <!-- Tabs -->
         <h2 class="demoHeaders">Tabs</h2>
         <div style="width:500px; height:auto; font-size:small;">
         <div id="tabs">
         <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
            <li><a href="#tabs-3">Tab 3</a></li>
         </ul>
         <div id="tabs-1">
            Content for Tab 1
         </div>
         <div id="tabs-2">
            Content for Tab 2
         </div>
         <div id="tabs-3">
            Content for Tab 3
         </div>
         </div>
         </div>
   </body>
</html>

Following will be the output of the tabs created with above code:

Thinking to add the effects in tabs?

Mouseover Effect
You have to add only event: “mouseover” in the scripts code as show below:

<script>
   $(function() {
      $( "#tabs" ).tabs({
         event: "mouseover"
      });
   });
</script>

Remember to remove the previously existing script code with this one. After adding this code, the tabs will toggle on moving a cursor above them.

Collapsible Tabs

Want your tabs to expand and collapse with a click, then replaces the existing tab code with this one:

<script>
   $(function() {
      $( "#tabs" ).tabs({
         collapsible: true
      });
   });
</script>

Sorting

Want to allow the visitors to sort the tabs as per their requirements, just add following code.

<script>
   $(function() {
      $( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
   });
</script>

Positioning Tabs on Bottom

Thinking to position the tabs on the bottom of content! For this, you have to add some more customization through style tag, change the script code, and change the HTML code.

Script Code

<script>
   $(function() {
      $( "#tabs" ).tabs();
      $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
      .removeClass( "ui-corner-all ui-corner-top" )
      .addClass( "ui-corner-bottom" );
   });
</script>

Style sheet Code

<style>
#tabs { height: 200px; }
.tabs-bottom { position: relative; }
.tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; }
.tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; }
.tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
.ui-tabs-selected { margin-top: -3px !important; }
</style>

HTML Code

Now, you have to add the above mentioned tabs-bottom class to the div creating tabs.

<div id="tabs" class="tabs-bottom">

Complete code to have tabs on bottom

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>jQuery Tabs</title>
      <link type="text/css" href="jquery-ui-1.8.13.custom.css" rel="stylesheet" />
      <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
      <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
      <script>
      $(function() {
         $( "#tabs" ).tabs();
         $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
         .removeClass( "ui-corner-all ui-corner-top" )
         .addClass( "ui-corner-bottom" );
      });
      </script>
      <style>
      #tabs { height: 200px; }
      .tabs-bottom { position: relative; }
      .tabs-bottom .ui-tabs-panel { height: 140px; overflow: auto; }
      .tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; }
      .tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
      .ui-tabs-selected { margin-top: -3px !important; }
      </style>
   </head>
   <body>
   <h1>Welcome to jQuery Tabs</h1>
   <!-- Tabs -->
   <h2 class="demoHeaders">Tabs</h2>
   <div style="width:500px; height:auto; font-size:small;">
   <div id="tabs" class="tabs-bottom">
   <ul>
      <li><a href="#tabs-1">Tab 1</a></li>
      <li><a href="#tabs-2">Tab 2</a></li>
      <li><a href="#tabs-3">Tab 3</a></li>
   </ul>
   <div id="tabs-1">
      Content for Tab 1
   </div>
   <div id="tabs-2">
      Content for Tab 2
   </div>
   <div id="tabs-3">
      Content for Tab 3
   </div>
   </div>
   </div>
   </body>
</html>

Output

Conclusion

The implementation of Horizontal Tabbed Navigation becomes easy with the use of jQuery libraries.

You can make use of above code or download the following demo-jquery-tab.zip file containing the mentioned files below:
jquery-ui-1.8.13.custom.css – contains the code style the tabs.
jquery-ui-1.8.13.custom.min.js – contains code letting the tabs to work.
jquery-1.5.1.min.js – includes the code from jQuery library from Google Ajax APIs.
demo-jquery-tabs.html – has the code for implement default jQuery tabs.
demo-tabs-mouseover.html – has the code to implement jQuery tabs with mouse over effect.
demo-tabs-sort.html – has the code to implement tabs with sort effect.
demo-tabs-collapse.html – has the code to implement the tabs with collapsible effect.
demo-tabs-on-bottom.html – has the code to implement the default jQuery tabs on bottom.

About the Author: Keshav Arora is a Senior Technical Writer with seo-Semantic-xhtml.com, a specialized division of HYPERLINK “http://www.ipraxa.com” IPraxa. Seo-semantic-xhtml.com provides PSD to HTML, XHTML, CSS and 3rd party application integration. Follow us on Twitter, and be our fan on Facebook.

What is UCD and how does it relate to the mobile user experience?

So what is this ‘user-centred design’ (or UCD) you have been hearing about? Well it comes down to you really! As the user you are bombarded with a plethora of experiences and interactions through websites everyday. UCD is a design philosophy in which your needs, wants and constraints are taken into consideration at each stage of the design process.

So what is the process of getting to know your users? Knowing the different processes of UCD and how to fulfil a mobile user experience is a task that takes quite a bit of research and time delving into different models and approaches. There are many processes, models and tools that you can use for UCD the question arises which is right and which is wrong? Which one works and which one doesn’t?

Knowing the Tools and Process of UCD

Generally when starting a project you gather knowledge such as your target market or target audience. This is a good start, from here usually people will look at business objectives and then start to re-arrange user objectives to suit…This is where it can start to go pear-shaped!

Business objectives are great but without the user in mind as a main element to the project processes the end result could be a bit business orientated and alienating to the user.

Tools such as personas, scenario building and use-case can greatly help your client see the objective of different users.

It is all a hypotheses until you place it in front of a user and test.

With the view that it is a hypotheses, it comes to a point where the tools and methods you are using are subjective, as each user scenario is created by you and/or the client, though the main goal is to achieve focus in the area you want your users to go to, it is still just hypotheses till it is delivered to the users to test.

Designing for a UCD Approach

For web designers the process is similar to designing for websites. However there are some additional considerations with mobile designs, such as screen resolution, device constraints and features and issues with connectivity.

A crucial question is, do you really need a mobile site? Most websites probably do not need a mobile dedicated site/app and so delving into this process can be lengthy and a waste of time. While there is the opinion that everything will be “mobile web” soon, doing a quick analytics check on the breakdown of your desktop to mobile visitors and what operating system they use to access your site, will quickly tell you if you really need to provide a mobile site. This simple check could save you lots of time and money! Google analytics can do this operating system to browser analysis breakdown.

If your analysis reveals that you really do need a mobile site, next steps are, how can you determine that a mobile site will complement your website and be of use to users? Basically you need to identify the core functionality of the site and content that users will find useful on a mobile setting, while still fulfilling your own business objectives.

Certain questions that are useful to determining if you require a mobile site are:

• Would users find the information useful and can they access the information on a limited connection/speed?
• Are there features/areas of my site that would have a better function as a mobile accessed site/app?
• Can a mobile site/app enrich the experience for users?
• Do you need a dedicated mobile site/app or is it viewable as a full website on mobile devices? Is it too content heavy?
• Can you break the mobile site/app down so that the main areas are shown on the mobile site/app?

Who are the users and what do they want?

UCD methodology answers questions regrading the task and goals of users. These answers can then be used to make decisions about design and development of the mobile site/app.

When addressing what users want, knowing your target audience is crucial, particuarly key things such as what they want out of the content, what is their experience with the content and what functions do the users need.

Knowing your target market, identifying your key user groups and creating personas will help you create better designs for your users. The key here is the more you understand about your user the better you can design something for their needs.

Mobile design considerations

When designing for mobiles, there are certain things that need to be taken into consideration such as smaller screen sizes, simplified navigation, prioritization of content, design for connectivity issues, minimising user input and steps to goal plus many more depending on the content you want the users to view and the mobile functionality that you can build in.

The UCD Mobile Process and Testing

This process is very similar to a website process and there are many ways to “skin a cat” as the saying goes, but with UCD and mobile design; designing, prototyping and then testing are the three crucial stages for effectively seeing if your user interaction is correct and how this correlates from content to user.

Testing your mobile design with users is a crucial step. There are many tools out there to do user-testing such as online cases, focus groups and online emulators. These will all help you to gather knowledge about if your content/product and design is effective. An example tool is the W3C mobileOK Checker and this great list of mobile emulators: http://www.mobilexweb.com/emulators.

Testing and analysing through Google analytics is also a great way to see how users interact with the content on the site. If you can’t do extensive user testing, you can setup a Google analytics account and use such things as advance segmentation and goal setting to see if your users are going to the right areas.

UCD is the way to go

So when designing a mobile site, good UCD practises help ensure the content is relevant and useful for the users while fulfilling business objectives. No feature should be added to the site just because it is cheap and easy or you ‘think’it is a good idea. UCD and mobile user experience should go hand in hand to create a richer experience for the user, this means marrying great functionality with content that matters.

There are many good web designers out there, thousands of them, but there aren’t so many great designers. The difference between a good and a great designer? Details! Just like for product design, where Apple makes its products better by paying attention to every little detail, you can make a big difference in web design by focusing on polishing details of your design. So if you want to become a better designer, make sure you are not too quickly satisfied and don’t give up the work too quickly. Too tired to keep on? Take a break and come back to your work with a fresh look later on.

But do you know what details are often overlooked by web designers? I know a few… To help you understand which details will bring your designs to a new level, I have listed some important ones. These are not rules of course, but advice that could help you make your next design better than the previous one. Be careful though, don’t put all your attention on the details and don’t forget the big picture, your design has to be good in the first place for those details to really enhance it.

1. Use smooth and consistent drop shadows

Drop shadows are a great tool for giving depth to your designs. However, if poorly used they can give your design an unprofessional look. Two things are important for creating good drop shadows:

• Make your shadow subtle: it will provide the desired effect in a subtle way, without being too obvious.
• Use consistent lightning source: for a coherent design if you use two shadows of more, make sure the source of the light is always the same.

2. Go easy on gradients

Same as for drop shadows. Don’t overuse gradients or it will kill the effect. Also, gradients should be subtle and use colors that degrade smoothly. For better results, try to avoid using more than two colors in your gradients, it will make it look more heavy but not more elegant.

3. Align, align, align

Give proper alignments to the elements of your designs. Well-aligned design elements make your web page look tidy and organized, it also helps create better white space. To do this, grid systems will make your life much easier. I personally recommend the Grid system or the 960 Grid System, but there are many others out there or you could even consider creating your own.

4. Think out of the box

A bit contradictory with the previous advice, you should some let elements or images of your design go out of the box. Grids are good to lay the base of your design, but they can quickly get quite boring if too rigid. Letting an element pop out makes the website design look more dynamic and lively. This effect is often used on titles or on some important images that need more attention than others.

5. Use icons

Icons help your visitors scan through your pages to find the information he is looking for, in that matter they are important to improve the usability of your website. Use icons and your content will be read much more. Even better, nice looking icons will make your design more elegant. The good news is that you can find tons of free high-quality icons on the web. As with anything else in modern web design, don’t overuse icons and make sure they are appropriate.

6. Use highlights

This has been quite a trend in web design for the past few years. Use a small 1px white line to highlight and provide smooth contrast between two colors and give a clean look. This also make the outlines stand out better and create a very welcome contrast.

7. Improve the typography of your design

Start by chosing the right fonts, if possible no more than two. Hierarchy and scaling of fonts should be optimized to make the text easily scannable and have the text presented in easy-to-read chunks. Style the lesser used element such as quotes, lists,… Use well-balanced rags and keep good vertical rythm. An excellent plugin to take care of that if you are using WordPress is WP-Typography. Good typography will not be noticed by your average visitors, but it improves the readability of your site, its elegance and make it look more professional.

8. Use textures wisely

How many times have you seen websites that use huge wood textures in the background that totally overwhelm the web page? In those case, the background attracts all your attention and makes the page less readable. This is not how textures should be used. You should use textures to create an ambiance on your page and add some style, but they should stay unnoticed.

9. Use the right words for call-to-actions

Semantics is a very important part of your website’s design. For the search button, use the word “search”, not go or an icon. Another example that I always find confusing is blogs that use the words next and previous for the article navigation. Instead, use the words “older posts” or “newer posts”, they give some context and users will know where they are heading when clicking on those.

Whether you’re working for a firm or freelancing on your own, the most efficient way to develop a site is with a layered Photoshop mockup.  This allows designers to easily manipulate the design and adjust the color palettes without having to spend lengthy amounts of time coding.  Designers show the mockups to their client, gather any feedback the client might have, allow the client to pick which design they have best, and then turn the mockups over to the developer(s).

The good news for developers is that the design is already there for them all they have to do is convert it from the Photoshop mockup file, or PSD file, to a coded version that can be read by internet browsers.  In this tutorial we will be focusing on taking a PSD and “slicing” it with CSS and XHTML to develop the front-end of the site.  And since the PSD has all of the images and text we need, along with x and y coordinates, it’s just a matter of doing a little copy and paste, and then writing out the XHTML and CSS to make it work.

For this tutorial we will need to download two files.  The first is the Photoshop mockup file that we will be converting to XHTML/CSS to create a website.  The second file you will need for this tutorial, if you don’t already have it installed, is the Tiza font, which can be downloaded from here.  Once you’ve downloaded the font you will need to unzip it and install it by dropping it in to your “Fonts” folder.  Mac users can access their Fonts folder by going HD – System – Library – Fonts.  Or, if you’re a Windows user, you go Start – Control Panel – (select icon view in the top right corner of the window) – Fonts.

We’ll start by opening our PSD file in Photoshop, Fireworks, or whatever your image-editing program of choice is.  Once you’ve got your image file opened, go ahead and create a new CSS and HTML file.  We’ll be developing the home page, so I’d suggest naming your HTML file “index.html” and giving your CSS file something basic like “main.css” for easy referencing.

Typically when I’m coding a site from scratch I like to start by zeroing the page out and making sure that there are no default margins or any padding that will screw up the site when I’m slicing it.  This can be done by setting everything to zero at the beginning of the CSS file with an opening few lines like this.

body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, fieldset, legend, label, input, textarea { margin: 0; padding: 0; border: 0; }
sh1, h2, h3, h4, h5, h6, p { margin: 0 0 1em 0; }
h1{font-size: 200%;}
h2{font-size: 170%;}
h3{font-size: 140%;}
h4{font-size: 110%;}
h5{font-size: 80%;}
h6{font-size: 50%;}

With everything set to zero, let’s move on to the body.  But first, let’s take a look at what’s going on inside our PSD file by having a look at the “Layers” in our PSD file.  You will see a group of folders titled, “header”, “home”, “footer”, and “back”.  We will be starting with the “back” folder as this contains all of our background images.  To make life simple and prevent any unwanted mistakes, go ahead and hide the “header”, “home”, and “footer” folders.  The bottom file in the “back” folder should also be titled “back” and if you hide everything else within the “back” folder you will see that this file is just a solid color.  One of the keys to creating a website that loads fast is to minimize the images, so we can skip putting this image in the site by setting the color as the background color in our CSS file.  To figure out the color of that file select a fill color and hover over the image.  The result should be a hexidecimal color code like, #D7D5C3.

Jumping back to our CSS file, create a body tag and set the background color to #D7D5C3.  Your body tag should look like this:

body{ background-color:#D7D5C3; }

Next we’ll go back in to our image program and create our background image.  With the header, footer and home folder hidden, the only image layers that should be displayed are the ones inside our “back” folder.  Let’s hide the one labeled “content area” and leave the rest of them displayed.  Now we have our background image.  So, go ahead and save the file as “bg.jpg” and place it inside a folder named “images” within the root folder of your site.

Going back in to our CSS file now, we’ll add a line of code in our body tag just below the one defining our background color, to define our background image.  The body should now look like this:

body { background-color:#D7D5C3;background-image:url(images/bg.jpg); }

With the background in place, now we’re going to develop our main DIV tag.  I usually name mine “#container” as it simply holds everything in place.  As you’ll notice on the design comp the main content area is centered, not justified to the left or right.  In order to achieve this we must give it a relative position and then define margins with 0 on the top and bottom and “auto” on the sides.  And if we take a quick look back inside our PSD file, we’ll notice the only image we didn’t add to our main background image, “content area,” is 960px wide and by checking the y coordinate we learn that it starts about 139px from the top.  So, this tells us that our container should be 960 pixels wide and that we should have a header that’s 139px tall before we start our main content.  Let’s translate that to CSS and add it to our CSS file by doing the following.

#container { position:relative; margin:0 auto; width:960px; }
.header { height:139px; width:960px;}

Now that we’ve got a few DIV IDs and classes going let’s do some quick work in our HTML file and set it up.  In between the head tag we can add the title, I simply put “Hit Machine Music” and we can add the link to our CSS file.  Once those are set we can add our DIVs to produce an HTML file that looks similar to this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hit Machine Music</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div></div><!--end div "header"-->
</div><!--end div "container"-->
</body>
</html>

Best case scenario, you did everything right and if you preview your index page in a browser it should just be a textured background.  Like this.

Now that we’ve got the basics taken care of, let’s start on the header.  Going back to our PSD file, make sure that the “header” folder is visible and unlocked.  Once that’s done we’ll need to isolate the “Hit Machine” logo in to its own image file.  There are a few ways of doing this, but I find the easiest to be cutting it, opening a new file with a transparent background and pasting it in there.  The header needs to have a transparent background so that it can seamlessly sit on top of the site background, that we created earlier, without interrupting any of the background designs or texture.  I named mine “header.png” and saved it to the “images” folder in my sites root directory.

Next we go back in to our PSD file and undo our cut so that our design comp is back to full again.  Behind “Songs” link on the main navigation bar you’ll see a faint-white, rectangular box that notifies viewers of which page they’re on.  Let’s cut that and drop it in a new transparent .png file and save it as “navHover.png” to my images folder.  Though several browsers these days support transparent backgrounds, not all of them do.  So, it’s always safest to stick with an image file with a transparent background.

With the header framed up, let’s define the navigation starting with its placement.  We need to create a class for our entire navigation bar and have it floating to the right, so that it will align with the right side of our content.  To do this we create the following lines of code.

.navBar { width:555px; float:right; }

To define the links within our navigation bar, select the navigation links in our PSD file and, Arial font, bold, all caps, size 17 and the color is #6F6751 appear to be the styles we need to define in our CSS file.  It also looks as though our “navHover.png” image has padding on top of 65px, bottom of 34px, and 15px on each side.  And, since we’re going to need to move it down from the top, inside the .header tag, we’ll need to set its position to relative and define where we’d like it placed.  In the sake of keeping things simple, let’s go ahead and create a new class for our navigation and name it “.navBar” so that I can define its style as follows.

.navBar a { position:relative; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; font-weight:bold; font-size:17px; color:#6F6751; padding:65px 15px 34px 15px; top:65px; }

As to not mess up our navigation bar by placing it below our header image, let’s make our header image float left and give it a slight margin.  Like this:

.header img { margin-left:25px; float:left; }

With our navigation set up we should now add in our “navHover.png” class to apply to the correct pages the viewer is on as well as when hovering over links to other pages within our main navigation.  To do so we simply create a “.navbar a:hover” and an “.on” class with the only attribute being the background image, like this.

.navBar a:hover, .on{ background-image: }

Now that our navigation bar is all set up, let’s go drop in all of the appropriate code to our HTML page.  Working within our header tags we need to place our header image, then insert our navigation.  This can be accomplished by doing the following.

<div>
<img src="images/header.png" />
<div>
<a href="index.html">News</a>
<a href="songs.html">Songs</a>
<a href="photos.html">Photos</a>
<a href="videos.html">Videos</a>
<a href="events.html">Tours &amp; Events</a>
</div><!--end div "navBar"-->
</div><!--end div "header"-->

Now that we’ve got the header down, and if you haven’t already, go ahead and preview your index.html page in a browser to make sure that everything matches with the design comp so far.  If everything’s good to go, it should look like this.

The first step to creating the body will be isolating its background image.  To do that we want to go back in to our PSD file and cut the “content area” file from our “back” folder which we left back at the beginning of this tutorial, pasting it in a new, transparent, image file and saving it as, “contentBG.png.”  Then we want to go back to our main PSD file, undo the cut, and inspect the style of the main content area’s text, as well as note the margin between the background image and the start of the text, so that we can define some font styles in our next step.

Going back in to our CSS file we are now going to create and define our “.mainContent” class by writing the following code.

.mainContent { background-image:url(images/contentBG.png); width:900px; padding:25px; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#3F3D3D; }

Next we need to isolate the text, “See Hit Machine in Concert” along with the picture of the band member and the background texture image.  To do this I clicked on the text box inside my PSD file and deleted the links that were below, “See Hit Machine in Concert.”  We’re going to add that text back later with HTML so that it functions properly.  What I did next was expand the “home” folder inside my PSD file and then selected the first four images, “band member,” “see Hit Machine…,” “flash texture,” and “flash back.”  Once they were selected I cut them, pasted them in to a new file and saved it as, “mainImage.jpg.”  Since this image has no transparency, there is no need to save it as a .png.  While we’re at it we can slice out the rest of time images from our main content body.  These include our social media links and the thumbnail for their latest video.  I saved my icons as the corresponding social media network, (facebook.png, myspace.png, twitter.png, linkedIn.png, flickr.png and rss.png) and the video thumbnail as thumbnail.jpg.  The icons are .png because they have rounded corners across a variant of color, so they need a transparent background, whereas the thumbnail is a perfect square and could be saved as a .jpg.

Now that we have all of our images taken care of, let’s go to work on formatting and plugging in the main content, beginning with the main image.  Back in our HTML file we need to insert our “.mainContent” div and add our “mainImage.jpg.”  To do so our code needs to look like this:

<div>
<img src="images/mainImage.jpg" />
</div><!--end div "mainContent-->

If you preview your work, you should see your page starting to come together and look something like this.

Next we’ll add the quick links underneath the “See Hit Machine in Concert” header within our main image.  Referring back to our PSD file we can get all of the styling and positioning info necessary.  And even though the PSD file doesn’t show a hover state for the links, we’ll go ahead and add a standard one to let the viewers know it’s an active link.  To get everything set properly, your CSS code should look as follows.

.quickLinks { position:absolute; left:115px; top:390px; }
.quickLinks a { color:#fff; font-size:16px; }
.quickLinks a:hover { text-decoration:none; }

Now, going back to our index.html file, we’ll add the links in so that they’re displayed on our page.

<div>
<img src="images/mainImage.jpg" />
<div>
<p><a href="events.html">Schedule of events</a></p>
<p><a href="photos.html">Exclusive backstage photos</a></p>
<p><a href="info.html">Tour information</a></p>
<p><a href="interviews.html">Upclose interviews with the band</a></p>
</div><!--end div quickLinks-->
</div><!--end div "mainContent-->

Preview your work in a browser and make sure that you’re still on point with the design comp.  If you’re on the right track, you should be seeing something like this.

We’re rounding the home stretch now and I think the best way to handle the “Latest Videos,” “Hit Machine Blog,” and “Connect With Us” parts of the main content area is to split them in to floating columns.  We’ll start from the left and work our way right.  So, first up is the “Latest Videos.”  Our PSD file shows that from the left alignment point of our video column to the left alignment point of the blog column is 310 px.  While we’re in our PSD files let’s check the style attributes for our header and the link text below the thumbnail, before jumping back to our CSS file.  Once you’ve noted the style attributes you can go back to your CSS file and define them.

Since all of the headers were the same for our bottom three columns, I’m going to modify the h1 tag that we defined in our reset stage in the very first step.  So, going to the top of our CSS file I’m going to find the h1 tag which should only have a size definition and look like this h1{font-size: 200%;}.  And I’m going to modify that h1 tag to match the style of our video, blog and connect headers. So that it should now be defined as follows.

h1{ font-size: 18px; font-weight:bold; text-transform:uppercase; color:#3f3d3d; padding-bottom:20px; }

Now that our h1 tag is set we can start defining our video class.  I named mine “.latestVideos” and defined the width as well as created a class for the links and their style, so my code looks as follows.

.latestVideos { float:left; width:310px; }
.latestVideos a { color:#3d3f3f; font-family:Arial, Helvetica, sans-serif; font-size:16px; }
.latestVideos a:hover { text-decoration:none; }

With our latest videos column now set up, we can go ahead and put it in our HTML file and drop in our header, thumbnail and linked text by adding the following code.

<div>
<h1>Latest Videos</h1>
<p><img src="images/thumbnail.jpg" /></p>
<p><a href="#">Another video to watch here</a></p>
<p><a href="#">And yet another video here</a></p>
</div><!--end div "latestVideos"-->

Now would be a good time to check our work in a browser and make sure we’re still on the right track.  If all is correct, you should see something similar to this.

Next we’re going to add the blog column, which will be quite similar to the video column only according to our PSD file it’s about 90 px wider.  So, you can copy and paste your .latestVideo classes, modify the width and rename them to something like “.blog” or you can revel in the practice and write them back out.  Whichever you choose, your code should wind up as follows.

.blog { float:left; width:400px; margin-top:30px; }
.blog a { color:#3d3f3f; font-family:Arial, Helvetica, sans-serif; font-size:16px; }
.blog a:hover { text-decoration:none; }

Once the column is set up in your CSS file you can go ahead and add the content to the HTML file.  Mine looks as follows.

<div>
<h1>Hit Machine Blog</h1>
<p><a href="#">Loremipsum dolor sit amet consectetur adipiscing</a><br />
Nunc eu mi risus, nec luctus justo. Proin consequat mi lacus, eget commodo mi. Donec ultricies...</p>
<p><a href="#">Bibendum est eu gravida cras dui sem</a><br />
Venenatis a egestas id, consectetur faucibus nibh. Fusce id felis at lorem lacinia pharetra...</p>
<p><a href="#">Aliquam arcu nisi, sagittis at feugiat quis</a><br />
Accumsan ut metus. Mauris rhoncus odio fringilla diam vestibulum vitae vehicula mi rutrum...</p>
</div><!--end div "blog"-->

And if I preview it in a browser, it looks like this.

Now for our final column, similar set up to the previous only slightly skinnier than the rest, is our icon link column.  I named mine, “.logoLinks” and added the following code to match with what our PSD is calling for.

.logoLinks { float:left; width:180px; margin-top:30px; }

Next we need to add some code to space the logos apart to match our PSD.  We can apply the necessary style strictly to the images within logoLinks by targeting them specifically.  Then all we need to do is add a margin-left and some padding to the bottom that will match our design comp.  This can be done by adding the following code:

.logoLinks img { margin-left:30px; padding-bottom:20px; }

Now that you’ve got your “.logoLinks” column framed up, go back to your HTML file and let’s drop in all the information we need in order to get the icons to display on our page.  Thanks to the defining of the image tag, all we have to do is add in our header and the image links.  So, your code should look like this.

<div>
<h1>Connect With Us</h1>
<a href="#"><img src="images/facebook.png" /></a>
<a href="#"><img src="images/myspace.png" /></a>
<a href="#"><img src="images/twitter.png" /></a>
<a href="#"><img src="images/linkedIn.png" /></a>
<a href="#"><img src="images/flickr.png" /></a>
<a href="#"><img src="images/rss.png" /></a>
</div><!--end div "logoLinks"-->

With all of our columns in place, go ahead and preview your work in a browser.  It should look almost identical to your PSD file, but be missing the footer.

Last but not least, we have the footer.  According to our PSD file, there are only two layers that make up our footer, a bar the width of our content area and then some text.  I cut out the bar, dropped it in a new file with a transparent background and named it “footerBar.png.”  Next, we need to jump back to our CSS file and create a “.footer” class and define it’s attributes to match those in our PSD file.  So, your CSS code should be two simple lines defining the width and center aligning your.  My code looks as follows:

.footer { width:960px; text-align:center; }

After you’ve styled your footer, we’ll need to create a class for the image to add a little bit of space between the “footerBar.png” image and your actual footer text.

.footer img { margin-bottom:5px; }

Once those are added we’ll need to style the “contact us” link by defining links within the “footer” class.  Your code should look as follows:

.footer a { color:#3d3f3f; font-family:Arial, Helvetica, sans-serif; font-size:16px; }
.footer a:hover { text-decoration:none; }

Now that the CSS is set up, all we have to do is add it to the HTML file and we’re done!  So, open your HTML file and we’re now going to want to place our “footer” div AFTER the closing of our “mainContent” div but before the closing of our “container” div.  If we were to place our footer inside of the “mainContent” div our footer would have a left margin and not run the full span of our main content.  Your HTML code should match this.

</div><!--end div "mainContent-->
<div>
<img src="images/footerBar.png" />
<p>&copy; 2009 Hit Machine Band | <a href="contact.html">contact us</a></p>
</div><!--end div "footer"-->
</div><!--end div "container"-->

If you did it correctly, when you preview your index.html file in a browser it should look like this.

If it does, that’s it.  Congratulations, you’ve just converted a Photoshop PSD file to a webpage!  Now take your newfound wisdom and allow it to start earning you some money.  Good luck and have fun!

If you’d like to see the full source code, you can download it from here.

The article is written by Scott Stanton. With over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Maria works for website builder Wix.com, a free online platform for the easy creation of customized Flash websites.

What are the functions of web icons we observe on various websites? How are they used most efficiently? In this article, we’ll guide you through the process of effective icons creation.

Web icons are generally indicators and separators, they help to navigate and emphasize some key ideas of the content. If you drive a car you can easily imagine that icons serve exactly like the road signs, guiding through the website or application. They help to find the necessary tools and information quickly.

These catchy simple signs are usually intuitively recognizable. The majority of Internet users easily discern such icons as a miniature printer, a minidiskette, play arrows, twitter birds etc. This helps to see what action to take and how to play with the content.

Web icons are supposed to convey the clear meaning of the functions they serve. They should be intuitively clear within 1-2 seconds of scanning. Effective web icons don’t distract from the general content, but outline the most important features and make the process of navigation easier.

The key principles of web icons effectiveness are consistent lightning, considering the audience, general project layout, perspective, metaphor and so on.

It would be easier to create great efficient icons for your project using the tips below:

1. Consider the clear metaphor

Smart icons should indicate the common features of the objects they depict. Exact metaphors help to establish the better contact with the website audience. Make the concept be immediately recognizable.

2. Broaden your potential market and keep it simple.

Use flexible, sketchy images instead of detailed clip-arts. The icons should be recognizable to fit into various branches of the same business area. Simple icon means 2-3 objects in its structure. Simple jazzy concepts should be the natural complement to the project environment.

3. Use light sources consistently and carefully

The human eye feels the untruth and wrong perspective intuitively. So if you create the set of icons for the same project, make the light consistent not only for all the icons but also for all the elements of the environment. Try to depict web icons as the objects you observe in your real life, applying realistic shadows and lights. This will make them look more trustworthy.

4. Use nonstandard color combinations.

Feel free to experiment with the colors and tints. Make the icons stand out a bit. Eye-catching colors combined with the nonstandard shapes will bring the visitors attention and arouse the desire to click on them. But surely the icons should fit the general project color scheme to be more pleasant to theeye. Flash colors used for the simple business interface can be irritating.

5. Always consider potential customers.

Make web icons be interpreted in the single way regardless the cultural, national or religious traditions and signs of various groups of people. Use universal metaphors that could be easily recognized by users from any country.

6. Make a plan, create icons step-by step.

Find out the general concept first, make a sketch, choose the shape and colors, work out the details. Ask people about what they see in your image. If it takes them less than 2 seconds to grasp the icon idea, the icon is supposed to be successful.

Be creative and inventive, add some zest to your projects by adding awesome web icons!

The article is provided by IconDemon experienced columnist Helga Weber, enthusiastic about web design and digital arts. IconDemon.com is a great stock icons provider. It  offers 5300+ professional web icons of different topical categories and styles. In case you don’t have enough time or skills to create each icons individually feel free to choose any icon set according to your preferences.

Drupal doesn’t get as much hype as WordPress, maybe because it is a bit more complicated to learn. However, if you are looking to build large sites, it is probably the most flexible open-source CMS. With Drupal you can create pretty much any kind of site you want, here are eight examples of what you can do.

1. File storage site

This type of site can be very interesting for your client files management. A site like box.net lets you do that, but you will not have as much control over it.

To create a file sharing platform with Drupal, you can use CCK and Views, but also some modules like Media Mover, Filebrowser or Web File Manager.

2. Social network

In terms of social networking capabilities, Drupal is probably the best CMS. Out of the box, Drupal provides a pretty robust user management and permissions system, but if you want to create a real social network, you’ll need to use some modules. I will not list all the social networking modules for Drupal here because you can already find a page that does that in the Drupal documentation.

If you are looking for examples of social networks created with Drupal, take a look at Imbee or GoingOn.

3. Twitter Clone

I assume that you will not try to create a Twitter competitor with Drupal, but you can if you want integrate microblogging features to your Drupal site. Drupal has a microblogging module that will let your users send short updates (and more).

4. News portal

Drupal is the perfect tool if you are looking to create a news site or magazine. Using CCK and Views (again), you can create all kinds of post types and list them in a flexible way. Many news websites around the world are created with Drupal, one of those is the New York Observer. You can even have a deeper look of how it was built by taking a look at this article (the website has been redesigned since that, but still worth a look).

5. Blog network

Creating a blog network is fairly easy with Drupal, it’s even possible out of the box, no extra module needed. All you have to use is the built-in blog module, of course you can make it fancier by using other, but that’s another story. For example, the popular blog network Wisebread was built with Drupal.

6. Video-sharing site

This kind of website is too resource hungry for most people, but if you decide to create one anyway, you can do it with Drupal. Not ready for Drupal 7 yet, the FlashVideo module provides a powerful solution to create your Youtube clone, it integrates with CCK, converts videos to FLV and lets your users share videos with an embed code. Otherwise you can try Media Mover and SWF Tools. The MTV UK website was made with Drupal.

7. Image-sharing site

Perfect for amateur photographers associations or any group that wants to share photos, the Image module is very powerful and lets you create Flickr-like websites. For example, MyFinePix is a photo-sharing website that Fujifilm created for owners of FinePix.

8. Digg-like news site

Thanks to the Drigg module, it is fairly easy to create your own clone of Digg. The popular design social news site Designbump uses Drupal.

Whether you are an experienced Web programmer or just starting out, you know that there are many browsers currently in use and have probably had experience with the cross-compatibility issues.  The frustration of building a beautifully functioning website using Firefox, then discovering it doesn’t render properly in IE6 is a definite learning experience.  Testing your creations in as many browsers as possible is crucial to turning out a professional product.

There are a multitude of tools available to allow cross-browser testing with only one computer and your favorite browser.  Many of them will let you do online testing of multiple versions of the most commonly used browsers and some will include applications you may never have heard about.  A few require downloading and installation on your machine.

1. SuperPreview

One of these is SuperPreview from Microsoft.  The free version is only loaded with IE6, but a 60-day free trial of the full Expression Studio is available from Microsoft’s website.  Unlike most tools that only test live sites, this software allows you to test pages while they are still in development.

2. Cross Browser Testing

CrossBrowserTesting is an online service that not only allows testing across browser platforms, but also includes various operating systems.  It allows live testing of mobile operating systems, such as Android, as well as desktop environments like Mac OSX and Ubuntu.  They offer a 7-day free trial and several levels of monthly or yearly fees.

3. Adobe Browser Lab

Adobe has a free online service call Adobe BrowserLab that allows testing of several versions of the more common browsers from IE6 to Chrome 8.  It also includes testing of Firefox on OSX in addition to Windows.  Choose the view you prefer, the browsers you want to test and simply type in the URL of your website.

4. Browser Shots

If you have a need for a wider than normal range of browser apps, check out Browser Shots.  They are one of the few services that offer testing on Linux and BSD.  If your website is aimed at a narrow band of users with particular needs, they may be able to fulfill your testing requirements.  The free version may be rather slow due to the volume of users, but they offer nearly instantaneous results with an upgrade to a monthly service.

5. W3C testing tools

The traditional code testing sources from the W3C are still completely free. They offer testing for CSS and Markup plus several other checks.  They now include testing for mobile platforms. They will not only list errors for you, they will even give you line numbers and recommend fixes.

6. TechPatterns browser detection scripts

One way to fix browser compatibility problems is to determine what browser the user has and use a script aimed at that particular application.  Tech Patterns offers several browser detection scripts using JavaScript or PHP.  They even include instructions on where to put the code.  The scripts are free; all they ask is a link to your website.

7. Differences in IE 6, 7 and 8

IE is a fact of life, even though it is not the default browser choice for most web developers.  The most frustrating thing is that even when you write code to allow for IE idiosyncrasies, it may not work in all versions of the browser.  Smashing Magazine’s Louis Lazaris lists a number of code snippets and how they work, or not, in various IE versions in his article “CSS Differences in Internet Explorer 6, 7 and 8.”

8. IE-Only style sheet

CSS Tricks is a great resource that offers advice on CSS.  Their blog post, “How to Create an IE-Only Style Sheet,” gives clear step-by-step instructions on a secondary style sheet that is activated whenever a user accesses the website with an IE browser.

9. Eric Meyer’s CSS Toolbox

On Meyerweb.com, under Toolbox: CSS, there are two helpful style sheets.  One for resetting your CSS and the other a diagnostic style sheet for catching problems the evaluators might miss.

10. IE6 upgrade warning script

If IE6 is causing your users major compatibility problems, try using Google’s ie6-upgrade-warning script which will notify those users with a friendly message to upgrade to the latest version of IE, otherwise they cannot access your website.  Hopefully, this gives those users more incentive to upgrade and help out web designers to avoid compatibility issues.

This guest blog post was contributed by InMotion Hosting, one of the top dedicated server providers in the country.  You can find more of their useful design and development tips  on WebHostingHelpGuy or follow them on Twitter @WHHG_InMotion.

This post is part of a serie on SEO for web designers, make sure you don’t miss any update by subscribing to the RSS feed.

• Part 1: planning your website
• Part 2: website structure
• Part 3: on-page optimization
• Part 4: link building
• Part 5: keeping it up

Now that you have worked hard on your SEO during your website’s designing process and during the launch, you don’t want to leave it there. Search engine optimization is a long time process, you’ll have to constantly work on it and optimize your pages and links.

Keep an eye on your analytics

Once your website is live, you should detect its strengths and weaknesses to know which actions to take. Keep an eye on keywords that bring you traffic and check out the links that bring traffic to the popular pages containing these keywords.

You should also be aware of which websites refer to yours. If some important website in your niche brings you a lot of traffic, you better build a strong relationship with the owner of that site.

Check your rankings

If you are targetting some keywords, check out where they are ranking in Google search results. For that you can use SEO Centro’s Rank Checker tool or Google Rankings tool.

You can also check your page rank. Even though it doesn’t affect your search engine rankings, it can be an weigh in for link exchanges. It can also be useful for looking for advertisers.

Monitor your social media presence

Know what people are saying about your site and which pages on your website are mentionned often. It’s a great way to learn about the popularity of your articles.

On Twitter, you can track mentions of your website with BackTweets. Just do a search with your URL and you’ll get all updates that linked to your site. Another cool tool is TweetBeeps, the Twitter equivalent of Google Alerts. Enter the name of your product, brand or website and get alerts when it’s mentionned.

For Facebook monitoring, you can click on the insights. It will track demographic data, interactions by media type, and more…

Publish content regularly

As a web publisher, you should have a writing schedule and stick to it. Not only it will help to gain loyal readers, but Google and other web spiders will know what to expect from you in terms of publishing.

Build and maintain relationships

Last tip, but one of the most important. Networking online and offline is tremendously important for SEO. People you shared a beer with are more likely to link to you. If you have no way to meet people in your niche in real life: emails, social networks and instant messaging can be awesome tools for networking.

This post is part of a serie on SEO for web designers, make sure you don’t miss any update by subscribing to the RSS feed.

• Part 1: planning your website
• Part 2: website structure
• Part 3: on-page optimization
• Part 4: link building
• Part 5: keeping it up

Now that you have built your website and optimized it, the hardest is still to come: you have to get people to link to it. Getting links is hard work, whether you do it by writing awesome content or by submitting your site to directories. It is also a work that you’ll do on the long term, so get a strategy ready.

Submit your site to directories

Submit your website to directories. It is better and quicker to be included in a few good directories (you may have to pay for those) than to be linked from a thousand garbage directories. If you don’t want to waste your time, hire people to do it for you.

If your site has a RSS feed (which I recommend), submit it to feed directories and ping sites that let you ping them (Feedburner has an option for that). You can use this list of websites to ping if you use WordPress.

Use social media sites wisely

Twitter, Facebook and StumbleUpon have become weapons of mass traffic. They can also be very powerful tools for link building. If your article is popular on Twitter or Facebook, you will of course get some links from these two sites, but also on the blogs of people that discovered your content through these sources.

Best way to get social media traffic? Write compelling content that people want to share. In the design community: tutorials, freebies and list posts are the best way to get links and traffic from social media sites.

Another good reason to be active on social media sites is that Google and search engines start to use it for its results. This article on SEOmoz should convince you of the importance of social media for SEO.

Freebies & giveaways

Giving away some freebies like Photoshop brushes, textures, icons or WordPress themes is a great way to get backlinks. People who use those freebies will be likely to pay you by linking to your site or by recommending your stuff to their friends. Freebies also get bookmarked often, nobody wants to forget where the free stuff is right?

WordPress themes (or templates in general) are excellent for link building. Include a signature in the footer, some people will remove it but not all. Of course these links do not pass as much PR juice as in-post links, but they still contribute to your link building.

Related sites community news

Many design-related websites let you submit your articles through some form, then if they like it they’ll publish it as community news. If you write regular content, this can be a great source of relevant links.

1stwebdesigner has a long list of websites where you can submit your community news if you run a design-related website.

Start guest posting

Guest posting is time-consuming, but it is a good way to build your brand as a blogger and to get some back links. Many blogs will accept your content if you send them quality article, usually they’ll add a short presentation of the guest blogger with one or two links.

Send out press releases

If you are launching a website, product or service, you can try to send out some press releases on the internet. There are many free websites to do so, but also paid ones. You’ll gain some exposure and get a few backlinks from those sites, but also from the sites that’ll eventually write about your press release.

Social bookmarking sites

Digg, Reddit and Yahoo Buzz are a bit out of reach for the ordinary blogger. You can try submit your best content on those sites anyway, and try to be an active user and get some influence there.

You may have more chances with niche-related social bookmarking sites. For graphic and web design, my favorites are Designbump, Designfloat and The WebBlend. It is easier to reach the front page there, and those pass some link juice and decent traffic (don’t expect huge spikes though).

Exchange links

Send out emails to blogs and websites in your niche when you feel that they could be interested by a link exchange. Try to go for blogs that have the same kind of traffic as yours, sending link exchange requests to A-list bloggers if you have a small blog will probably be useless.