For web designers, having successful client projects leads to happy clients, more referrals, a proven track record, and valuable experience and knowledge that can be used in future projects. But there is a lot that goes into making a project a success, and simply completing the design on time is not enough. In this article we’ll take a look at 10 things you can do to make your projects more successful.

1. Focus on the User

It is the users who will ultimately determine the success of a design or re-design project. While we as designers like to create something that meets our own expectations or fits into what we think is a good website, the site is not for us, it’s for the users. If you can keep your focus on the user and work to create the best site possible for them, the project will be successful.

User focus starts with the first point of this article, getting to know and understand them. If you don’t take the time up front to get familiar with your client and their users, it’s difficult or impossible to create a site that focuses on the users’ needs.

2. Know What Actions You Want Visitors to Take

A successful design project will result in visitors taking some kind of action on the site. Depending on the client and the type of website, that action could be purchasing a product, filling out a contact form, opting in to a newsletter, downloading an informational product, or any number of things.

It’s important that you and the client have a clear understanding of what actions from visitors are critical to the success of the website. After you have established which specific actions you want visitors to take, leading visitors to those actions should be a priority throughout the design process. In the end, leading visitors to take the desired action is much more important than having a site that looks great or has a lot of bells and whistles.

3. Communicate with the Client Throughout the Process

Communication between designer and client is a critical aspect of the project for several different reasons. First, in order for the project to be successful the client must be happy with it, and that is very difficult to accomplish if you’re not doing a good job of communicating with the client from the start.

Second, consistent two-way communication helps to improve efficiency and eliminate time for unnecessary revisions and changes.

Third, good communication will keep the client in the loop with what is being done on the project and they’ll feel more comfortable knowing that the project is moving forward. Even when work is being done, if the client isn’t hearing anything they will often assume that nothing is being done. Simple communication can avoid this.

The web design process can be rather overwhelming and intimidating for many clients, and good communication helps to put them at ease. Communication is a skill that most designers continually work on throughout their careers. Learn from your experience and always work on ways to improve how you can communicate with your clients.

4. Truly Get to Know the Client and Their Customers/Visitors

In order to create a website that maximizes its potential for your client, you’ll first have to get a clear understanding of the client, how they do business, how they brand themselves, and you’ll also need to become familiar with their target market. Depending on your familiarity with the client and their industry, this may require a considerable amount of time and effort. The better understanding you have, the more likely you will be to create a site that meets the needs of the client and their users.

A common mistake, especially for new designers, is to jump right into the design process without dedicating time to getting familiar with the client. This often leads to a site that may look good on the surface, but doesn’t effectively fit the needs and personality of the client.

Different designers have their own methods for getting to know their clients, so do whatever works best for you. Some designers have a standard intake questionare or form that they have clients fill out to get information about their business and their customers. Others meet with clients, discuss and observe. Whatever your process, be sure that you prioritize the need to get to know your clients, and account for this in your estimates and scheduling of projects.

5. Have a Clear Set of Goals for the Project

Some clients will want a website just because it is the thing to do, but they don’t really know what they specifically hope to get out of having a website. Others will want to re-design their existing site because it is outdated or because they don’t like the look anymore, but they may not know exactly what they want to improve about the website. Having goals for the project will help to get a clear determination of what will make the project a success, and it will help to keep the project focused on what is most important.

Take the time to talk to clients about what is most important to them, and together you can establish a few specific goals for the project. It’s best to focus on a small number of things rather than having too many goals and getting distracted by things that are not as important. This process will assist you by getting your clients to think and communicate with you about the most important reasons for going through with the project, and it will give you some methods for measuring the project to gauge its success.

6. Clearly Define the Scope of the Project

A problem that every designer runs into at some point is failing to set boundaries on the scope of a project. Your idea of what is involved in a website design or re-design may not match up with your client’s idea of what should be involved. Disagreements over the scope of the project can lead to clients feeling like they are not getting what they paid for, or you doing more work than you expected when you quoted the project.

The solution to this problem is to have a clearly defined scope from the start, in writing. Be sure that you and the client are in agreement on the scope before starting the project, and get it incorporated into the contract. The details of scope can always be negotiated along with the fees, so there are opportunities to work out differing opinions when trying to secure the work.

7. Allow Plenty of Time

Creating an attractive, functional, and effective website takes time. One of the biggest hindrances to the success of a project can be a lack of time. When scheduling your projects be sure that you are allowing enough time to give each project enough attention. Plan some extra time for unexpected challenges or situations that arrive, because things tend to come up.

The amount of time that you’ll need to schedule will vary from one project to the next depending on what is involved, so it will take some practice to get it down, but learn from your mistakes and avoid unrealistic expectations.

One challenge that often arises is being held up on a project because you are waiting on information or decisions from the client. When preparing a timeline and setting deadlines for the project, the deadlines should not only apply to you as the designer. Setting deadlines for clients to get you certain information or to do their part is reasonable and will help to keep things moving forward. If the client doesn’t live up to their end and meet their deadlines, you’ll have a clear example of why the project slowed down if you have trouble meeting a deadline.

8. Incorporate Feedback Throughout the Process

We’ve already talked about the need for communication and to keep clients happy, and a big part of that is incorporating their feedback into the design. Even though you will have made a strong effort to get to know the client and their customers/visitors, the client will still know their target market better than you will, so their feedback can be extremely valuable. Also, their feedback is critical to wind up with an end product that is an accurate representation of their business.

Web apps like Proof HQ and ConceptShare are great resources for helping to organize the feedback the your design projects. Regardless of your methods for gathering feedback, in order to make the project a success you will need to take that feedback and use your professional judgment and design abilities to incorporate what you are hearing from the client. You’ll need to be able to create something that the client is pleased with and that works for the users.

9. Consider the Future

Many websites are continually growing and evolving. When designing the site take the future into consideration and try to get a feel for where the client may like to go with the site in the future. The most successful projects will be well structured so that growth and additions don’t require a re-design too quickly. As new content or products are added to the site, navigational issues sometimes arise, so try to anticipate the challenges that may occur in the future and structure the site in a way that will allow for this growth.

Considering the future is also important in terms of the design style. Avoid trends that are likely to phase out in the near future that will leave the site looking dated and out of touch. A timeless style of design is more valuable to the client in the long run than a trendy design that must be changed a year later.

10. Test

Successful projects must be well tested. Don’t rush the testing stage in order to get the site launched quickly, or the visitors are likely to experience unnecessary issues with the site. An effective testing phase can help to ensure smoother launches and a more positive experience for users.

jQuery is slowly becoming ubiquitous in the web development arena all due to its easy to learn, easy to use and easy to extend nature. Here are 30+ fresh and amazing jQuery plugins and tutorials which i have hand-picked from jQuery articles or plugins published in last 30 days on the interwebs. If you are looking for latest on jQuery, then this is a must read for you.

Tutorials

1. How to add preloader with loading image in a gallery using jQuery

Use a jQuery preloader while images are loading in the gallery.
» View Demo | » View Tutorial

2. Simple Lava Lamp Menu Tutorial With jQuery

Create a unique lava lamp animated jQuery navigation menu
» View Demo | » View Tutorial

3. How To Create a 3D Tag Cloud in jQuery

Amazing tutorial on creating a flash like 3D tag cloud using jQuery.
» View Demo | » View Tutorial

4. Drag & Drop With jQuery

Drag & Drop facility in a web application provides for a rich user interface, learn how to create one using jQuery UI.
» View Demo | » View Tutorial

5. Awesome Horizontal Animated menu using Kwicks for jQuery

Build a customizable and versatile horizontal animated menu using jQuery Kwicks plugin.
» View Demo | » View Tutorial

6. Create a Thumbnail Gallery With Slick Heading & Caption effect

» View Demo | » View Tutorial

7. Create an Attractive jQuery Menu with fade in and out effects

Nice tutorial on creating an attractive jquery menu with fade in background change on hover.
» View Demo | » View Tutorial

8. jQuery PHP AJAX Autosuggest

Autosuggest is one of the useful features of present web applications. Learn how to create one using jQuery and PHP.
» View Demo | » View Tutorial

9. Perfect Login Drop Down Box Like Twitter

Nice tutorial on imitating the new twitter login dropdown box using jquery.
» View Demo | » View Tutorial

10. Crafting an Animated Postcard With jQuery

Create a flashy postcard using just jQuery and no flash.
» View Demo | » View Tutorial

11. Twitter like Search With jQuery & AJAX

Create a twitter like search box that loads results using AJAX on same page.
» View Demo | » View Tutorial

12. Voting System With jQuery, AJAX, PHP

Learn how to create dzone like voting system.
» View Demo | » View Tutorial

13. AJAXed Sliding Shopping Cart Using jQuery

Amazing tutorial on creating a sliding AJAX Shopping basket that slides in and updates the cart when new item is added and auto-hides after some time. It also supports manual show hide option to view shopping cart at any time.
» View Demo | » View Tutorial

14. How To Build Animated Header in jQuery

Add motion to your header by animating its background. Amazing animation tutorial using jQuery.
» View Demo | » View Tutorial

15. Hide and Seek With jQuery

Use jQuery to display multiple modules of an application on a single page based on the event occurred.
» View Demo | » View Tutorial

16. jQuery Comment Preview

Provide comment preview to your users as they type in their comment using jQuery.
» View Demo | » View Tutorial

17. Styling Drop Down Boxes With jQuery

Since select boxes are hard to style using CSS, this tutorial shows you how to replace a select box with a textbox and an unordered list and then style them according to your choice.
» View Demo | » View Tutorial

18. Scrolling Dynamic Content Box

Load content into a div on scroll using AJAX just like Google reader loads more items as you scroll down to view more items of a feed.
» View Demo | » View Tutorial

19. Ways To Debug your jQuery or JavaScript Code

This article explains how you can easily debug javascript code using jquery console logging.
» View Tutorial

20. 5 Ways To Make AJAX Calls with jQuery

Nice tutorial from NetTuts+ about different ways of making AJAX calls using jQuery. It is even useful for those who are already familiar with jQuery as in depth coverage of various methods of making AJAX calls has been done.
» View Demo | » View Tutorial

Plugins

1. Tipsy

Display Facebook style tooltip plugins based on anchor tag’s title attribute
» View Demo | » Plugin Page

2. jQuery YouTube PlayList

Convert a list of YouTube links into playlist which allows user to see videos right on the page itself.
» View Demo | » Plugin Page

3. SuperFish Menus

Superfish Menus is an easy to use jquery plugin that converts unordered HTML lists into nice drop down menus.
» Plugin Page

4. Elastic

Elastic is a lightweight jQuery plugin that makes textareas adjust their size according to the size of content.
» View Demo | » Plugin Page

5. OverScroll

Implement iphone like click and drag to scroll behavior on your web page.
» Plugin Page

6. Tweetable

Display Twitter feed on your website easily and quickly with tweetable. Gives you option to convert twitter usernames and URLs into hyperlinks
» View Demo | » Plugin Page

7. jQuery Link nudge

Make links notorious just like ones on David Walsh blog using this jQuery Link Nudge plugin.
» View Demo | » Plugin Page

8. TimePickr

If you need to get time as input from user, then use this plugin to provide a rich UI to input time.
» Plugin Page

9. Truncatable

Truncatable lets you hide blocks of text on page and show them if user requires.
» View Demo | » Plugin Page

10. Incremental Search For Select Boxes

This plugin converts ordinary select boxes into combo boxes with incremental search, very useful if you have lots of options in the select box.
» View Demo | » Plugin Page

11. Anything Slider

Anything Slider is a full featured slider that is pretty easy to customize and adapt into your website.
» View Demo | » Plugin Page

CSS is a language that is not difficult to master, but if you use it for a large project, it can be very difficult to manage if you do not follow a defined approach while writing CSS code. Here are few tips that will help you write better and easy to manage CSS code.

1. Don’t Use Global Reset

Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it. Instead use subset of CSS Resets like one from Eric Meyer.
Not Good

*{ margin:0; padding:0; }

Better

html, body, div, dl, dt, dd, ul,  h1, h2, h3,  pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
ul { list-style:none }

2. Do not use IE Hacks

Though CSS hacks might be useful to maintain consistent look of the website over older browsers like IE6, but they can be problematic for newer versions of IE as newer versions like IE8 do support CSS standards to a good level and using hacks might break out the layout. You should use conditional statements instead to target specific versions of Internet Explorer.
For example, using the below lines of code within your <head> tag will load the iestyles.css file only when browser is Internet Explorer version 6 or less.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]-->

For information on conditional comments, refer to the quirksmode article on CSS Conditional Comments

3. Use Meaningful names for IDs and Classes

Suppose you define your sidebar styles using class .leftbox and after some redesign, you float it to right, then would it be meaningful to have leftbox as name for right floated box. You should put some thought before declaring classes and IDs for elements so that they are meaningful and easy to understand later.

4. Utilize CSS Inheritance

If multiple child elements of a parent element use same styles on your web page, it will be better to define them for their parent element and let the CSS inheritance do all the work. You’ll be able to easily update your code later and it’ll also reduce the CSS file size considerably.
Not Good

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

Better

#container{ font-family:Georgia, serif; }

5. Combine multiple Selectors

You can combine multiple CSS selectors into one if they have common style definitions. It’ll save you time and space.

Not Good

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Better

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Use Shorthand Properties

Utilize the shorthand properties of CSS to quickly write CSS code and reduce file size. Shorthand notation can be used for margin, padding, border, font, background and also for color values.
Not Good

li{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-top:5px;
	padding-bottom:10px;
	padding-left:5px;
}

Better

li{
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	padding:5px 0 10px 5px;
}

Here’s a complete guide to CSS shorthand properties.

7. Organize CSS Code

Organizing your CSS code in a certain pattern will make it easier to find things at later time and save you a lot of time looking for a specific style definition.
Here is a sample organization that you may use:

/*-------------------------
	CSS Reset
-------------------------*/

/*-------------------------
	Generic Classes
-------------------------*/

/*-------------------------
	Layout styles
-------------------------*/

/*-------------------------
	Section specific styles
-------------------------*/

8. Make CSS Readable

Writing readable CSS will make it easier to find and update a style declaration later. Either group all styles for a selector in one line or each style in its own line with proper indentation. You can also combine these two techniques together.

/*------------------------
	Each Style on new line
	---------------------*/
div{
	background-color:#3399cc;
	color:#666;
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	height:300px;
	margin:10px 5px;
	padding:5px 0 10px 5px;
	width:30%;
	z-index:10;
}

/*------------------------
	All Styles on one line
	---------------------*/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

9. Add proper Comments

Comments can be used to separate different sections of CSS code

/*--------------------
	Header
	-----------------*/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/*--------------------
	Content
	-----------------*/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*--------------------
	Footer
	-----------------*/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

10. Order CSS Properties Alphabetically

This might be a difficult way to write CSS but it’ll make it easier for you to find out any property easily at a later stage.

div{
	background-color:#3399cc;
	color:	#666;
	font: 	1.2em/1.4em Arial, Helvetica, sans-serif;
	height:	300px;
	margin:	10px 5px;
	padding:5px 0 10px 5px;
	width:	30%;
	z-index:10;
}

11. Use External Stylesheets

It is always a good design practice to separate content from presentation. Place all of your CSS code into external stylesheets and use the <link> to reference stylesheets within a web page. By placing CSS into external files, you can easily update your styles later at one place instead of looking into html templates or files for styles.
Not Good

<style type="text/css" >
	#container{ .. }
	#sidebar{ .. }
</style>

OR

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

Better

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. Split CSS into multiple files

If you are working on a large web project that has multiple modules, each with different set of styles and looks, it will be better to split your CSS files into multiple files based on the module they are applied to. You can separate stylesheets like, one for reset, one for layout, one for generic classes and one for module specific styles. This technique will let you organize your code easily in a large project but loading multiple CSS files means more HTTP requests and slower loading time, this is where Bridging CSS files come to rescue. Create a separate CSS file and import other CSS files into it.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

13. Compress CSS code

Once you are ready to deploy the web design project, compress your CSS code using tools like CSS Compressor to reduce file size and improve loading time of webpage.

14. Be Consistent in Writing CSS

When you work on multiple web development projects, it’ll be a wise decision to choose a particular way of organizing and formatting your CSS code and stick to that way for all your projects.

I hope these tips will help you write better and manageable CSS code. If you would like to share a tip or two, feel free to add your comment below.

Adobe AIR gives developers all kinds of possibilities to create applications. As Adobe’s websites says, “The Adobe® AIR® runtime lets developers use proven web technologies to build rich Internet applications that run outside the browser on multiple operating systems.”

In this post we’ll feature 35 tutorials that will help you to learn more about working with AIR. Some of them are at a beginner level that will introduce you to AIR, and others are more advanced and will teach specifics.

Introduction to Adobe AIR

Adobe AIR and Flex – Getting Started

Building an Adobe AIR Application with Flex

Writing Well-Behaved, Efficient AIR Applications

Performance Apps for AIR (video)

Christmas is in the Air (building a to-do list app)

How to Build a Contact Manager in AIR using XML Part I and Part II

Building a Desktop Application with Ext, AIR, Aptana and Red Bull

Developing Cross-Platform Adobe AIR Applications

Create a Drag and Drop MP3 Player with Adobe AIR

Building Lupo: A Case Study in Building Commercial AIR Applications

Building Web and Adobe AIR Applications from a Shared Flex Code Base

Creating Desktop Applications for the Cloud with Adobe Flex, AIR, and Amazon S3

Adobe Air Tutorial for HTML/JavaScript Developers

Implementing Drag and Drop Between the OS and AIR

Notification Windows with JavaScript and AIR

Recreating MapCache on Adobe AIR

Creating a Downloader for YouTube with Flex/AIR

Walk on AIR: Create a To-do List in Five Minutes

Adobe AIR & Flash Tutorial

Developing AIR in Flash (video)

Webcams, PNGs, and AIR (video)

How to Store Adobe AIR Application Preferences Using JavaScript

Take Your CSS to the Desktop with AIR

Adobe AIR: Supercharged Development with Debugging

Creating an AIR RSS Reader Application from Scratch with Flex and PureMVC

Building an XML Viewer on AIR with Flex

Synchronizing Drupal Modules with Adobe AIR

Getting Started with Adobe AIR as a Web Developer/Designer

Simple Zip Viewer with JavaScript and AIR

Reducing CPU Usage in Adobe AIR

Performance Tips for Adobe AIR

Create Your Own Adobe Air Application with Flash

Build a Custom File Extension AIR App

Twitter is obviously a very useful tools for bloggers. Did you ever wanted to know how many times your posts are sent to Twitter by your readers? If yes, just read on and learn how to know it, and display it on your blog, in full text mode.

paste the following function in your functions.php file:

<?php
function tweets($url){
  $content = file_get_contents("http://api.tweetmeme.com/url_info?url=".$url);
  $x = new SimpleXmlElement($content);
  $tweets = $x->story->url_count;
  echo "Tweets: ".$tweets;
}

Once done, you can get the number of tweets for any web page you want, for exemple:

<?php tweets("http://www.cosmos-blog.com"); ?>

To automatically display how many times your posts has been tweet, open the single.php file file and paste the following code:

<?php tweets($post->permalink); ?>

CSS is a language that is not difficult to master, but if you use it for a large project, it can be very difficult to manage if you do not follow a defined approach while writing CSS code. Here are few tips that will help you write better and easy to manage CSS code.

1. Don’t Use Global Reset

Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it. Instead use subset of CSS Resets like one from Eric Meyer.
Not Good    

1. *{ margin:0; padding:0; }  

Better

2. Do not use IE Hacks

Though CSS hacks might be useful to maintain consistent look of the website over older browsers like IE6, but they can be problematic for newer versions of IE as newer versions like IE8 do support CSS standards to a good level and using hacks might break out the layout. You should use conditional statements instead to target specific versions of Internet Explorer.
For example, using the below lines of code within your <head> tag will load the iestyles.css file only when browser is Internet Explorer version 6 or less.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]-->

For information on conditional comments, refer to the quirksmode article on CSS Conditional Comments

3. Use Meaningful names for IDs and Classes

Suppose you define your sidebar styles using class .leftbox and after some redesign, you float it to right, then would it be meaningful to have leftbox as name for right floated box. You should put some thought before declaring classes and IDs for elements so that they are meaningful and easy to understand later.

4. Utilize CSS Inheritance

If multiple child elements of a parent element use same styles on your web page, it will be better to define them for their parent element and let the CSS inheritance do all the work. You’ll be able to easily update your code later and it’ll also reduce the CSS file size considerably.
Not Good

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

Better

#container{ font-family:Georgia, serif; }

5. Combine multiple Selectors

You can combine multiple CSS selectors into one if they have common style definitions. It’ll save you time and space.

Not Good

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Better

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Use Shorthand Properties

Utilize the shorthand properties of CSS to quickly write CSS code and reduce file size. Shorthand notation can be used for margin, padding, border, font, background and also for color values.
Not Good

li{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-top:5px;
	padding-bottom:10px;
	padding-left:5px;
}

Better

li{
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	padding:5px 0 10px 5px;
}

Here’s a complete guide to CSS shorthand properties.

7. Organize CSS Code

Organizing your CSS code in a certain pattern will make it easier to find things at later time and save you a lot of time looking for a specific style definition.
Here is a sample organization that you may use:

/*-------------------------
	CSS Reset
-------------------------*/

/*-------------------------
	Generic Classes
-------------------------*/

/*-------------------------
	Layout styles
-------------------------*/

/*-------------------------
	Section specific styles
-------------------------*/

8. Make CSS Readable

Writing readable CSS will make it easier to find and update a style declaration later. Either group all styles for a selector in one line or each style in its own line with proper indentation. You can also combine these two techniques together.

/*------------------------
	Each Style on new line
	---------------------*/
div{
	background-color:#3399cc;
	color:#666;
	font: 1.2em/1.4em Arial, Helvetica, sans-serif;
	height:300px;
	margin:10px 5px;
	padding:5px 0 10px 5px;
	width:30%;
	z-index:10;
}

/*------------------------
	All Styles on one line
	---------------------*/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

9. Add proper Comments

Comments can be used to separate different sections of CSS code

/*--------------------
	Header
	-----------------*/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/*--------------------
	Content
	-----------------*/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*--------------------
	Footer
	-----------------*/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

10. Order CSS Properties Alphabetically

This might be a difficult way to write CSS but it’ll make it easier for you to find out any property easily at a later stage.

div{
	background-color:#3399cc;
	color:	#666;
	font: 	1.2em/1.4em Arial, Helvetica, sans-serif;
	height:	300px;
	margin:	10px 5px;
	padding:5px 0 10px 5px;
	width:	30%;
	z-index:10;
}

11. Use External Stylesheets

It is always a good design practice to separate content from presentation. Place all of your CSS code into external stylesheets and use the <link> to reference stylesheets within a web page. By placing CSS into external files, you can easily update your styles later at one place instead of looking into html templates or files for styles.
Not Good

<style type="text/css" >
	#container{ .. }
	#sidebar{ .. }
</style>

OR

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

Better

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. Split CSS into multiple files

If you are working on a large web project that has multiple modules, each with different set of styles and looks, it will be better to split your CSS files into multiple files based on the module they are applied to. You can separate stylesheets like, one for reset, one for layout, one for generic classes and one for module specific styles. This technique will let you organize your code easily in a large project but loading multiple CSS files means more HTTP requests and slower loading time, this is where Bridging CSS files come to rescue. Create a separate CSS file and import other CSS files into it.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

13. Compress CSS code

Once you are ready to deploy the web design project, compress your CSS code using tools like CSS Compressor to reduce file size and improve loading time of webpage.

14. Be Consistent in Writing CSS

When you work on multiple web development projects, it’ll be a wise decision to choose a particular way of organizing and formatting your CSS code and stick to that way for all your projects.

I hope these tips will help you write better and manageable CSS code. If you would like to share a tip or two, feel free to add your comment below.

This tutorial will show you how to create a beveled star using adobe illustrator CS4. Using just the star tool, the line segment tool and the live paint bucket you will be able to replicate this 3D looking star.

1. Creating the star

Start by opening a blank artboard and select the star tool (hidden behind the rectangle tool), then click and drag anywhere on the artboard. Hold shift while you draw if you want a perfect looking star. You can change the number of points of the star and the radius by clicking inside the star after it was created.

2. Adding the Lines

Select the line segment tool () and start by clicking on the uppermost point of your star and drag down a vertical line down the star to the next point.

Do this for the rest of the points.

3. Preparing to use Live Paint

Select all the lines and the star using the selection tool (V)

4. Adding First Color

Select the live paint bucket (K) once and all the lines will be selected. Chose the first color you want to use ( choose a light color for the highlights).

Use the live paint bucket to fill in a pattern like this.

5. Adding Second Color

Go back to the color window and chose a slightly darker color for the shadow. Fill in the rest of the white space with the new darker color acting as a shadow.

6. Getting Rid Of The Stroke

If you want to get rid of the stroke, select the entire star with the selection tool and go to the color window and set the stroke color to none. You can also change it to any other color you want.

7. You’re Done!

That is how you make a beveled star.

8. Be Creative

With some tweaking and changing of the radius and number if points of the star you will be able to create many different outcomes.

CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts – and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.

1. CSS Based Navigation

2. Navigation Matrix Reloaded

3. CSS Tabs

4. CSS Bar Graphs (CSS For Bar Graphs)

5. Collapsing Tables: An Example

6. Adam’s Radio & Checkbox Customisation Method

7. CSS Image Replacement

8. CSS Shadows (CSS Shadows Roundup)

9. CSS Rounded Corners Roundup (Nifty Corners)

10. Drop Cap – Capital Letters with CSS

11. Define Image Opacity with CSS

12. How to Create a Block Hover Effect for a List of Links

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

14. CSS Diagrams

15. CSS Curves

16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.

17. CSS Image Map

18. CSS Image Pop-Up

19. CSS Image Preloader

20. CSS Image Replacement for Buttons

21. Link Thumbnail

22. CSS Map Pop

23. PHP-based CSS Style Switcher

24. CSS Unordered List Calender (CSS Styled Calender)

25. CSS-Based Forms: Techniques

26. CSS-Based Tables: Techniques

27. Printing Web-Documents and CSS

28. Improved Links-Display for Print-Layouts with CSS

29. CSS-Submit Buttons

30. CSS Teaser Box

31. CSS Tricks for Custom Bullets

32. Ticked Off Links Reloaded

33. CSS Zooming

34. Creating a Star Rater using CSS

35. The ways to style visited Links

36. PDF, ZIP, DOC Links Labeling

37. Displaying Percentages with CSS

38. Image Floats without the Text Wrap

39. Let visitors decide, whether or not will they open link in a new window

40. Simple accessible external links

41. Zebra Table with JavaScript and CSS

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

43. Unobtrusive Sidenotes

44. Image Caption with CSS (Styled Images with Caption)

45. Dynamic Piechart with CSS

46. Format Footnotes with CSS

47. Hierarchical Sitemap with CSS

48. Snook’s Resizable Underlines

49. Switchy McLayout: An Adaptive Layout Technique

50. StyleMap: CSS+HTML Visual Sitemap

51. Custom Reading Width

52. CSS Alert Message

53. CSS Production Notes

One of the most challenging aspects of design for many web designers is color selection. The color scheme of a site can have a huge impact on the overall look of the site, and it will have an impact on visitors as well. There are a number of different methods that can be used for finding the right color scheme for a particular project, and in this post we will look at several of those methods. Throughout the post you will find links to helpful resources that you may appreciate.

Getting Colors from Existing Marketing Materials

In many situations the client will already have an established color scheme from an existing website or from other marketing materials. In some cases they may want a change, but frequently you will need to work from the established color scheme. Sometimes making slight changes to the shades of colors but sticking with the same basic color scheme can make an impact, and combined with a fresh design of the website it can help to give the company some added interest to their identity.

In situations where you are not working with a client that has an established color scheme, here are some methods that you can try for finding the right one on your own.

Online Color Palette Resources

There are a number of websites and online tools available for selecting color palettes. Many of these sites allow users to upload color palettes that they have put together, and the rest of us benefit by being able to browse through those that have been uploaded. Most of these sites allow you to search or sort the color schemes by a particular hue or by keyword, which can be helpful if you have one color that you want to use but you are looking for others to use with it.

Here is a quick listing of some of the best places to find color palettes.

Adobe Kuler

COLOURlovers

ColorSchemer

ColoRotate

Others:

• ColorCombos.com
• Colr.org

Other online tools exist for helping you to put your own color palette together. Here are some of the best.

Copaso

Color Scheme Designer

Toucan

ColorMunki

The Color Wizard

Color Explorer

Taking Colors from Photographs

Photographs are a great source of color inspiration. You can easily and quickly browse through photos either of your own or random photos from sites like Flickr and deviantART. When you find one that includes a beautiful color scheme, you can upload it to one of several different online tools that will help you to determine the specific colors that are used, providing the hex value so that you can use them in your design work.

Here are some of the best resources of this kind.

ColorSuckr

Pictaculous

What’s Its Color?

Others:

• Color Palette Generator from jrm.cc
• Palette Generator from Big Huge Labs
• Color Palette Generator from DeGraeve.com

At From the Couch David Perel has a nice video tutorial where he goes over his process for choosing colors from a photograph. This is a method that can easily be applied by designers with impressive results.

Design and development blog Build Internet has a series of posts that showcase color schemes from Photographs. Check out their Motivation category to find the color scheme posts.

Taking Colors from Magazines and Other Printed Materials

Online resources aren’t the only place to find color schemes. Magazines, books, flyers, posters, brochures, cards and any other type of printed material can be another source of color inspiration. You can either find a scheme that you like and try to come close just by eyeballing it, or you can scan it in and take the colors directly from the scan in Photoshop or another program.

Browsing Web Design Galleries

One of the best ways to find color schemes that work well for the web is to browse through design galleries. As you do, you will come across some color schemes that you really like and it may give you some ideas for your own work. Of course, what is good for one site may not work very well for another, so it is a good idea to keep your particular project in mind so you can find some colors that will work well for your situation.

You can search around and take one color from a few different websites, or find a scheme that you like and work with Photoshop to find a similar color scheme that will work for you but will avoid copying the colors of the other site. One of the downsides to this approach is that you can wind up doing more copying than you intend, so be careful to make your scheme unique even if it is inspired by other sites.

I Like Your Colors is an online tool that allows you to enter a URL, and it will give you the hex value of the colors in use.

Based on Psychology of Colors

One of the factors that should be considered when choosing a color scheme is the psychology of color. There is a great deal of research that has been done over the years to indicate meanings and messages that are associated with various colors. In many cases this will vary from one culture to the next, so be sure that you are paying attention to information that is relevant to your client and their audience.

Here is a list of some online resources and articles regarding the psychology of color.

• Color Psychology in Online Marketing
• Color Wheel Pro: See Color Theory in Action
• The Meaning of Colours
• Why Color Matter
• Color Psychology
• Color Symbolism and Psychology (from Wikipedia)

Nature

Color is everywhere in nature. Step outside, look around, and you are bound to find some inspiring color schemes. Plants, animals, sunsets, color schemes can be found from just about anything in nature. Of course, getting the exact colors and shades isn’t as simple as when you are working with a photograph (although you can always take a picture) or an inspirational website, you can still get many ideas simply from observing nature and the colors that appear.

What’s Your Approach to Choosing Colors?

If you have a method that works well for you, please share in the comments.

About Robots.txt file

It is great when search engines frequently visit your site and index your content but often there are cases when indexing parts of your online content is not what you want. This can be achieved by creating a simple text file on the root path of your server and naming it to exactly robots.txt. So, in other words, a robots.txt is a file placed on your server to tell the various search engine spiders not to crawl or index certain sections or pages of your site. You can use it to prevent indexing totally, prevent certain areas of your site from being indexes or to issue individual indexing instructions to specific search engines.

One thing to note down here is that the file Robots.txt is by no means mandatory for search engines but generally search engines obey what they are asked not to do.

How and where to create it?

The file itself is a simple text file, which can be created in Notepad or whatever is your favorite text editor. It needs to be saved to the root directory of your site, which is the directory where your home page or index page is. Misspelling is obvious, so be sure to name it correctly as "Robots.txt" and not "Robot.txt".

Structure of Robots.txt file

The structure of a robots.txt is pretty simple (and barely flexible) – it is an endless list of user agents and disallowed files and directories. Basically, the syntax is as follows:

User-Agent: [Spider or Bot Name]
Disallow: [Directory or Specific File Name]

User-agent: are search engines’ crawlers or bots and disallow: means the list of files and directories to be excluded from indexing. Also if you want to include comment lines – just put the # sign at the beginning of the line:
# All user agents are disallowed to index the secure directory.
User-agent: *
Disallow: /secure/

Examples of Usage

A few examples will make it clearer to how to properly write contents in robots.txt file.

Exclude all robots from the entire web site

User-agent: *
Disallow: /

Allow all robots from the entire web site

The only difference from above is to omit the trailing ‘/’ in Disallow section. Alternatively you can either create an empty robots.txt file or don’t create any.

User-agent: *
Disallow:

Exclude a part of your web site

e.g. if you wish to exclude some directories (not all), then you may use the following syntax.

User-agent: *
Disallow: /cgi-bin/
Disallow: /private/
Disallow: /secure/
Disallow: /temp/

Exclude a single bot from entire web site

User-agent: Slurp
Disallow: /

Allow a single bot

User-agent: Googlebot
Disallow:

User-agent: *
Disallow: /

Exclude a file from an Individual Search Engine

e.g you want to exclude your mydata.htm file that is placed under ‘secure’ directory from Google. (the name of Google bot that indexes pages is Googlebot)

User-agent: Googlebot
Disallow: /secure/mydata.htm

Exclude a file from all Search Engines

User-agent: *
Disallow: /secure/mydata.htm

Handling Complex Situations

Also you can combine multiple command one after another to handle complex situations. Let’s take a bit complicated example in step by step manner.

(1) First you would ban all search engines from the directories you do not want indexed at all:

User-agent: *
Disallow: /cgi-bin/
Disallow: /private/
Disallow: /secure/
Disallow: /temp/

(2) Next, suppose you want to exclude Yahoo from the entire web site:

User-agent: Slurp
Disallow: /

(3) Further, if you want to exclude Google from indexing the images from your web site:

User-agent: Googlebot-Image
Disallow: /Images/
Disallow: /Public/Images/

(4) Again, if you want to exclude certain files from all spiders:

User-agent: *
Disallow: /private/mybio.htm

Fore further information about robots.txt file you can visit The Web Robots Page

Search Engine Optimization is the process or practice of designing web pages so that they rank as high as possible in search results from search engines. Typically, the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine.

Optimizing a website primarily involves editing its content and HTML and associated coding to both increase its relevance to specific keywords and to remove the barriers to the indexing activities of search engines.

Steps to Follow for Better SEO

A partial list of some important steps that should be followed for better search engine optimization is given below

• Try to get an old domain name. Also make sure that it should not be in blacklist during purchase or anytime in the past.
• Design your site by keeping in mind of your target audience and not the search engines.
• Research extensively to choose your main target keywords. Any mistake or ignorance may lead to unrelated traffic that further may become the major cause of high bounce rate.
• Design and categorize your site architecture and navigation based on your keyword research so that people can find their interesting stuff easily.
• Carefully build the page title and other important meta tags information by incorporating your target keywords into them.
• Make titles and contents of each page unique. Duplicacy of contents or pages may result in lower SEO ranking.
• Validate the contents of your website against industry standards (e.g. W3C validation). Also be sure that there should not be any broken or dead links present on your site.
• Make the navigation of your site crawler friendly so that the search spiders can travel and index them easily.
• Create a sitemap so that visitors and search engines can visit different parts of your website in an easy way.

While the above described steps are not a complete list but may be considered helpful in understanding the basics of SEO. You may consider hiring a SEO specialist to make your site well optimized from SEO point of view.

What is 301 Redirection?

301 redirect is the most efficient and search engine friendly (SEO) method for webpage redirection. One of the biggest advantage is that it also pass on the PageRank value and hence preserves the current search engine rankings for that particular page. It is the best and safest way in case of renaming or moving files to other location. The code "301" is normally interpreted as "moved permanently".

Use this free 301 URL Redirection Checker tool to check the redirection of a webpage.

Benefits of Redirection

A web page may be redirected for several reasons:

• A web site might need to change its domain name.
• An author might move his or her pages to a new domain.
• Two web sites might merge.

With URL redirects, incoming links to an outdated URL can be sent to the correct location. These links might be from other sites that have not realized that there is a change or from bookmarks/favorites that users have saved in their browsers.

Different Methods to Implement URL Redirection

Following are some common ways to do 301 redirection in different languages. The example are taken from internet, so make sure if all the things work well before finally implementing them.

Redirect through .htaccess file
Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^example.com
RewriteRule ^(.*)$ http://www.example.com/$1 [R=permanent,L]
-or-
Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.example.com/$1 [R=301,L]

PHP Redirect
<?
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://www.newdomain.com" );
?>

CGI PERL Redirect
$q = new CGI;
print $q->redirect("http://www.newdomain.com/");

Ruby on Rails Redirect
def old_action
headers["Status"] = "301 Moved Permanently"
redirect_to "http://www.newdomain.com/"
end

Java Redirect
<%
response.setStatus(301);
response.setHeader( "Location", "http://www.newdomain.com/" );
response.setHeader( "Connection", "close" );
%>

ColdFusion Redirect
<.cfheader statuscode="301" statustext="Moved permanently">
<.cfheader name="Location" value="http://www.newdomain.com">

ASP Redirect
<%
Response.Status="301 Moved Permanently"
Response.AddHeader "Location","http://www.newdomain.com/"
%>

ASP .NET Redirect
<script runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = "301 Moved Permanently";
Response.AddHeader("Location","http://www.newdomain.com");
}
</script>

HTML Redirect (Meta Redirect)
To send someone to a new web page or site put this in the head section of your document:
<meta http-equiv="refresh" content="5"; url=http://newdomain.com/">
Here content="5" means the time (e.g. 5) in second the browser should wait before redirecting to new location.

To check redirection of a web page, use this tool : 301 URL Redirection Checker

HTTP, Hypertext Transfer Protocol, is the method by which clients and servers communicate. When someone clicks a link, types in a URL or submits out a form, their browser sends a request to a server for information. It might be asking for a page, or sending data, but either way, that is called an HTTP Request. When a server receives that request, it sends back an HTTP Response, with information for the client. The Response stream also contains a code number usually known as status code or response code, which tells the client in short about what server has returned. There are fairly a large number of status codes sent by servers, and the following is a list of the current ones in HTTP 1.1, along with an explanation of their meanings.

Informational

This class of status code indicates a provisional response, consisting only of the Status-Line and optional headers, and is terminated by an empty line. There are no required headers for this class of status code.

100 – Continue
The status code 100 is used to inform the client that the initial part of the request has been received and has not yet been rejected by the server. The client should continue by sending the remainder of the request.

101 – Switching Protocols
This means that the server is changing to the protocol it defines in the Upgrade header it returns to the client. The protocol should be switched only when it is advantageous to do so. e.g, switching to a newer version of HTTP is advantageous over older versions.

Successful

This class of status code indicates that the client’s request was successfully received, understood, and accepted.

200 – OK
This is by far the most common returned. It means, simply, that the request was received and understood and is being processed. Also the information returned with the response is dependent on the method used in the request, for example:

• GET an entity corresponding to the requested resource is sent in the response;
• HEAD the entity-header fields corresponding to the requested resource are sent in the response without any message-body;
• POST an entity describing or containing the result of the action;
• TRACE an entity containing the request message as received by the end server.

201 – Created
A 201 status code means that a request was successful and as a result, a resource has been created. A 201 response may contain an ETag response header field indicating the current value of the entity tag for the requested variant just created.

202 – Accepted
It indicates that server has received and understood the request, and that it has been accepted for processing.The request might or might not eventually be acted upon, as it might be disallowed when processing actually takes place.

203 – Non-Authoritative Information
It means that the request was received and understood, and that information sent back about the response is from a third party, rather than the original server.

204 – No Content
This means that the request was received and understood, but that there is no need to send any data back.

205 – Reset Content
The 205 status code is a request from the server to the client to reset the document from which the original request was sent.

206 – Partial Content
A status code of 206 is a response to a request for part of a document. This is used by advanced caching tools, when a user agent requests only a small part of a page, and just that section is returned.

Redirection

This class of status code indicates that further action needs to be taken by the user agent in order to fulfill the request.

300 – Multiple Choices
This indicates that a resource has moved. The response will also include a list of locations from which the user agent can select the most appropriate.

301 – Moved Permanently
A status code of 301 tells a client that the resource they asked for has permanently moved to a new location. The response should also include this location. It tells the client to use the new URL the next time it wants to fetch the same resource. This response is cacheable unless indicated otherwise.

302 – Found
A status code of 302 tells a client that the resource they asked for has temporarily moved to a new location. The response should also include this location. It tells the client that it should carry on using the same URL to access this resource.

303 – See Other
It indicates that the response to the request can be found at the specified URL, and should be retrieved from there. It does not mean that something has moved – it is simply specifying the address at which the response to the request can be found.

304 – Not Modified
This is sent in response to a request that asked for the document only if it was newer than the one the client already had. Normally, when a document is cached, the date it was cached is stored. The next time the document is viewed, the client asks the server if the document has changed. If not, the client just reloads the document from the cache.

305 – Use Proxy
It tells the client that the requested resource has to be reached through a proxy, which will be specified in the response.

307 – Temporary Redirect
307 is the status code that is sent when a document is temporarily available at a different URL, which is also returned. There is very little difference between a 302 status code and a 307 status code. 307 was created as another, less ambiguous, version of the 302 status code.

Client Error

The 4xx class of status code is intended for cases in which the client seems to have erred.

400 – Bad Request
It indicates that the server did not understand the request due to bad syntax.

401 – Unauthorized
This indicates that before a resource can be accessed, the client must be authorised by the server.

402 – Payment Required
The 402 status code is not currently in use, being listed as "reserved for future use".

403 – Forbidden
It indicates that the client cannot access the requested resource. That might mean that the wrong username and password were sent in the request, or that the permissions on the server do not allow what was being asked.

404 – Not Found
The best known of them all, the 404 status code indicates that the requested resource was not found at the URL given, and the server has no idea how long for.

405 – Method Not Allowed
A 405 status code is returned when the client has tried to use a request method that the server does not allow. Request methods that are allowed should be sent with the response (common request methods are POST and GET).

406 – Not Acceptable
It means that, although the server understood and processed the request, the response is of a form the client cannot understand. A client sends, as part of a request, headers indicating what types of data it can use, and a 406 error is returned when the response is of a type not i that list.

407 – Proxy Authentication Required
It is very similar to the 401 status code, and means that the client must be authorised by the proxy before the request can proceed.

408 – Request Timeout
This means that the client did not produce a request quickly enough. A server is set to only wait a certain amount of time for responses from clients, and a 408 status code indicates that time has passed.

409 – Conflict
It indicates that the server was unable to complete the request, often because a file would need to be editted, created or deleted, and that file cannot be editted, created or deleted.

410 – Gone
A 410 status code is the 404′s lesser known cousin. It indicates that a resource has permanently gone (a 404 status code gives no indication if a resource has gine permanently or temporarily), and no new address is known for it.

411 – Length Required
The 411 status code occurs when a server refuses to process a request because a content length was not specified.

412 – Precondition Failed
A 412 status code indicates that one of the conditions the request was made under has failed.

413 – Request Entity Too Large
This status code indicates that the request was larger than the server is able to handle, either due to physical constraints or to settings.

414 – Request-URI Too Long
The 414 status code indicates the the URL requested by the client was longer than it can process.

415 – Unsupported Media Type
A 415 status code is returned by a server to indicate that part of the request was in an unsupported format.

416 – Requested Range Not Satisfiable
A 416 status code indicates that the server was unable to fulfill the request.

417 – Expectation Failed
The 417 status code means that the server was unable to properly complete the request.

Server Error

Response status codes beginning with the digit "5" indicate cases in which the server is aware that it has erred or is incapable of performing the request.

500 – Internal Server Error
This indicates that the server encountered something it didn’t expect and was unable to complete the request.

501 – Not Implemented
It indicates that the server does not support all that is needed for the request to be completed.

502 – Bad Gateway
A 502 status code indicates that a server, while acting as a proxy, received a response from a server further upstream that it judged invalid.

503 – Service Unavailable
A 503 status code is most often seen on extremely busy servers, and it indicates that the server was unable to complete the request due to a server overload.

504 – Gateway Timeout
A 504 status code is returned when a server acting as a proxy has waited too long for a response from a server further upstream.

505 – HTTP Version Not Supported
A 505 status code is returned when the HTTP version indicated in the request is no supported. The response should indicate which HTTP versions are supported.

Increasing backlinks helps in improving search engine optimization. This also helps in increased pagerank. The backlinks should be from quality and relevant web sites. There are many ways to increase backlinks to a website.

What are backlinks? Backlinks are incoming links to a website. Number of backlinks is an indication of the popularity or importance of that website. Backlinks are also called inbound links or incoming links. Here are some of the ways that backlinks can be increased.

Blog Commenting – Blog or article commenting is the most effective and easy way to increase backlinks, but it is overlooked more often than not. This also helps in increasing your pagerank. As these pages that you comment on gain their own pagerank, so will your page that links from these pages. Make sure that you do not spam people by commenting on irrelevant blogs or posting non valuable comments.

Wikipedia – Getting a backlink from wikipedia is a reward in itself. Although the outbound links you get from wikipedia are nofollow, but google gives special attention to outbound links on wikipedia. Receiving outbound links from wikipedia are a pain, and you should have a good history before you insert your own links in the wiki.

Article Writing – Writing original, unique and quality articles gets you in the good books of search engines. Providing useful resources that help readers looking for something specific makes your article stand out from others. You can build high quality backlinks and get your pages indexed fast. Building backlinks brings you organic traffic and who doesn’t like getting traffic the organic way? There are many popular article directories like ezinearticles, eHow, articlesbase where you can post your articles for free. All these manually review the articles so these deliver high quality backlink results

Social bookmarking – Many social bookmarking sites have emerged in the last few years and few popular ones help build you backlinks if you bookmark your pages. It helps if you have enough friends in your social bookmarking sites. You can share your pages with them, getting more exposure to your web site as well as good number of backlinks.

Forums Participation – Find forums related to your website’s niche and post often so you will get noticed and build up trust so people will click on the link in your profile or signature and possibly link to your site from their own site or in other forums showing where they found valuable information. Most forums now put a rel="nofollow" on all outgoing links so this may not benefit you other than getting some traffic.

Getting quality backlinks is a constant and lengthy process and can take several months to achieve the set goal. But it pays to have quality backlinks from the authority sites in the long run.

Check number of backlinks

1. Apple Flashy Accordion Sidebar

   Use the Accordion plugin in jQuery UI to create an Apple-alike WordPress sidebar.

   

2. Adding Tabs to Sidebar

   Creating tabs on WordPress sidebar with Yahoo! UI Library

   

3. Sidebar With Dynamic Contents

   Every blog visitor has different habits, but many tend to ignore sidebars because they are always the same. Mixing things up and keeping the contents of the sidebar relevant to the post can make them a bit more likely to be noticed.

4. Allow Users To Submit Blog Post

   This plugin allows you to add highly customisable forms to your website that allows non-registered users and/or subscribers (also configurable) to submit posts.

   

5. Paginated Comments

   Give you the ability to break your comments into a number of search engine optimized pages.

   

6. Image Caption

   Extracts the title or alt attribute from images within your blog post and generates a neat caption directly underneath those images. Supports custom CSS styling for captions.

   

7. Random Redirect

   Allows you to create a link to yourblog.example.com/?random which will redirect someone to a random post on your blog, in a StumbleUpon-like fashion.

8. Google Syntax Highlighter for WordPress

   Easily integrates the Google Syntax Highlighter by Alex Gorbatchev into WordPress. Image below show how codes look like in WordPress with Google Syntax Highlighter.

   

9. Facelift Image Replacement (FLIR) for WordPress

   FLIR allows you to convert text and title into images (better display quality) on the fly without hassle. Now this FLIR WordPress plugin make things even easier for bloggers.

10. del.icio.us for WordPress

    del.icio.us for WordPress displays your latest del.icio.us bookmarks in your WordPress blog.

11. Create Your Own PopURLs Within WordPress

    Like the way how PopURL display contents? Now you can create similar inside WordPress.

    

12. Exclude certain categories from being displayed

    2 ways to hide posts from certain categories to be displayed on the blog. You can either put this code inside the loop

    1. <?php   
    2. if ( have_posts() ) : query_posts($query_string .‘&cat=-1,-2′); while ( have_posts() ) : the_post();   
    3. ?>   
    4.       

    <?php
    if ( have_posts() ) : query_posts($query_string .'&cat=-1,-2'); while ( have_posts() ) : the_post();
    ?>

    or you can use Advanced Category Excluder.

13. Another Date Image Hack

14. Create a calendar view of your article post date.

    

15. Styling Individual Posts

    Styling one post a little different from the rest with the use of the_ID.

16. How To Avoid Duplicate Posts

    Duplicated contents are pretty bad and they somehow affects how search engine weights your site. Here’s how you can avoid getting duplicated contents on your blog.

17. WordPress ‘Page Redirect‘ template

    This template lets you specify a single URL as the page content, then as the page loads, the template automatically redirects the page to this new location, and that includes category or any tag pages you specify.

18. Delicious Save Buttons

    Add badges that encourage people to bookmark your website or blog

19. DesignFloat Buttons, Website & Blog Integration

    Give your website or blog visitors the option to submit your stories to Design Float and "Float" them

    

    1. <script type="text/javascript">submit_url = ‘Your URL Here’;</script><script type="text/javascript" src="http://www.designfloat.com/evb/button.php"></script>   
    2.       

    <script type="text/javascript">submit_url = 'Your URL Here';</script><script type="text/javascript" src="http://www.designfloat.com/evb/button.php"></script>

    

    1. <script type="text/javascript">submit_url = ‘Your URL Here’;</script><script type="text/javascript" src="http://www.designfloat.com/evb2/button.php"></script>   
    2.       

    <script type="text/javascript">submit_url = 'Your URL Here';</script><script type="text/javascript" src="http://www.designfloat.com/evb2/button.php"></script>

    Read here for more.

20. StumbleUpon Buttons & Tools

    Add a Stumble It! button to your site to make it easy for your visitors to submit your content to StumbleUpon.

    

21. Dynamic Highlight Menu

    This allows you to theme/style and control the currently selected menu tab in CSS by adding a class="current" on it.

    1. <ul id="nav">   
    2.   <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ‘ class="current"’; } ?>><a href="#">Gallery</a></li>   
    3.   <li<?php if ( is_page(‘about’) ) { echo ‘ class="current"’; } ?>><a href="#">About</a></li>   
    4.   <li<?php if ( is_page(‘submit’) ) { echo ‘ class="current"’; } ?>><a href="#">Submit</a></li>   
    5. </ul>      

    <ul id="nav">
      <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="#">Gallery</a></li>
      <li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="#">About</a></li>
      <li<?php if ( is_page('submit') ) { echo ' class="current"'; } ?>><a href="#">Submit</a></li>
    </ul>

    Line 2:

    If Home, or Category, or Archive, or Search or Single page is selected, class="current" will be included in <li>

    Line 3,4:

    If Page with page slug about or submit is highlighted, class="current" is added.

    If you are looking at putting categories as menu tabs, here’s how to make the menu dynamic:

    1. <ul id="nav">   
    2.   <li<?php if ( is_category(‘css’) ) { echo ‘ class="current"’; } ?>><a href="#">CSS</a></li>   
    3.   <li<?php if ( is_category(showcase) ) { echo ‘ class="current"’; } ?>><a href="#">Showcase</a></li>   
    4. </ul>  

    <ul id="nav">
      <li<?php if ( is_category('css') ) { echo ' class="current"'; } ?>><a href="#">CSS</a></li>
      <li<?php if ( is_category(showcase) ) { echo ' class="current"'; } ?>><a href="#">Showcase</a></li>
    </ul>

    Line 2,3

    If category with category slug of css or showcase, class="current" is added.

22. DZone Buttons

    Let your website’s users vote for our links on DZone without leaving your site.

    

    1. <script type="text/javascript">var dzone_url = ‘[url]‘;</script><script type="text/javascript">var dzone_title = ‘[title]‘;</script><script type="text/javascript">var dzone_blurb = ‘[description]‘;</script><script type="text/javascript">var dzone_style = ’1′;</script><script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>   
    2.       

    <script type="text/javascript">var dzone_url = '[url]';</script><script type="text/javascript">var dzone_title = '[title]';</script><script type="text/javascript">var dzone_blurb = '[description]';</script><script type="text/javascript">var dzone_style = '1';</script><script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>

    

    1. <script type="text/javascript">var dzone_url = ‘[url]‘;</script><script type="text/javascript">var dzone_title = ‘[title]‘;</script><script type="text/javascript">var dzone_blurb = ‘[description]‘;</script><script type="text/javascript">var dzone_style = ’2′;</script><script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>   
    2.       

    <script type="text/javascript">var dzone_url = '[url]';</script><script type="text/javascript">var dzone_title = '[title]';</script><script type="text/javascript">var dzone_blurb = '[description]';</script><script type="text/javascript">var dzone_style = '2';</script><script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>

    More on DZone Buttons, Tools and Widgets

23. Reddit Buttons

    Similar to the rest, place a reddit button on your site to promote blog post.

    

    1. <script type=‘text/javascript’>reddit_url=‘[URL]‘</script><script type=‘text/javascript’>reddit_title=‘[TITLE]‘</script><script type="text/javascript" src="http://www.reddit.com/button.js?t=1"></script>  

    <script type='text/javascript'>reddit_url='[URL]'</script><script type='text/javascript'>reddit_title='[TITLE]'</script><script type="text/javascript" src="http://www.reddit.com/button.js?t=1"></script>

    

    1. <script type=‘text/javascript’>reddit_url=‘[URL]‘</script><script type=‘text/javascript’>reddit_title=‘[TITLE]‘</script><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>  

    <script type='text/javascript'>reddit_url='[URL]'</script><script type='text/javascript'>reddit_title='[TITLE]'</script><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>

    

    1. <script type=‘text/javascript’>reddit_url=‘[URL]‘</script><script type=‘text/javascript’>reddit_title=‘[TITLE]‘</script><script type="text/javascript" src="http://www.reddit.com/button.js?t=3"></script>  

    <script type='text/javascript'>reddit_url='[URL]'</script><script type='text/javascript'>reddit_title='[TITLE]'</script><script type="text/javascript" src="http://www.reddit.com/button.js?t=3"></script>

    Source.

24. Archive that works

    Noura of Noupe.com shows various ways you can style your WordPress Archive page. Techniques and guides includes:

    • Listing all Posts
    • Display monthly or Yearly Archive
    • Archives Ordered By Category

    Read this entry.

25. Add Breadcrumbs to Your WordPress Blog

    Breadcrumb trails are a good supplementary navigation system that aid in site usability. This plugin allows you to add breadcrumbs to your theme.

    

26. Landing Sites / Pages

    When visitors is referred to your site from a search engine, they are definitely looking for something specific – often they just roughly check the page they land on and then closes the window if what they are looking for isn’t there. Why not help them by showing them related posts to their search on your blog?

27. WordPress Exploit Scanner

    This WordPress plugin searches the files on your site for a few known strings sometimes used by hackers, and lists them with code fragments taken from the files. It also makes a few checks of the database, looking at the active_plugins blog option, the comments table, and the posts table.

28. Buy Me a Beer

    Allows your readers to donate money to you via PayPal. Not something new, but worth knowing.

    

29. Display Feedburner Subscriber Count In Text

    How to display feedburner subscriber count in text instead of using chiklets.

    

30. Notifixious – Notify Users via IM

    This plugin allows you to notify your readers on their Instant Messaging (AIM, MSN, GTalk, ICQ…), Email or SMS when you publish new posts.

31. Installing Xampp and WordPress

    Guide to setup Xampp and run WordPress locally on your machine. You can also install plugins, upgrade to the latest nightly and virtually anything else confident in the knowledge that if it goes wrong, there is no impact on your actual site.

    

32. Create an Ajax-based Auto-completing Search Field

    Why not helping your visitors to find what they’re looking for on your blog, by using a cool auto-completion on your search field?

    

If you want to show your Facebook Statuses and you are hosting on a WordPress.com blog that restricts you from installing plugins, try this. The following method make use of Facebook status feed and WordPress RSS widget. It will also work for self-host WordPress blogs, but you guys who self-host can use better plugins for that.

Step 1

Login into Facebook. Under Profile, look for Mini Feed column, click on See All.

Step 2

Under Mini Feed, click on ‘Status Stories‘ on the right column. Scroll all the way to the bottom, look for ‘My Status‘

Step 3

Copy the link of My Status, and we are about to use this in WordPress blog. Your link will look something like the following:

Step 4 (WordPress)

Under WordPress admin, Navigate to Design -> Widget. Look for RSS Widget, add it to your side bar.

Step 5

Paste the copied URL inside, give it a name, save and your Facebook statuses (or status depends on how many you display) will now appear on your WordPress blog.

All bloggers would like to get more interaction and participation from their readers and visitors. In this post we’ll look at nine different things you can do to your WordPress theme to add the possibility of some type of interaction. Some involves comments, social media, and other ways of getting readers involved.

1. Show Most Recent Comments

One of the most important ways that blogs can encourage readers to get involved is through the comments. There are a number of different strategies for increasing comments and participation from readers, and many of them involve placing extra emphasis on the comments. By displaying the most recent comments (in the sidebar for example) you may be able to encourage more comments because visitors will see that you value their participation.

To display a list of the most recent comments, use the following code in your theme:

Source: WP Hacks

2. Allow Visitors to Email Posts to Their Friends

If your readers enjoy and appreciate the posts on your blog they may be interested in emailing them to their friends. On most news websites you’ll see a link that says “email to a friend,” but it’s not as common on blogs. Adding this functionality into your theme is not as difficult as you might think.

To add an “email this” link, use the following code in your single.php file:

Source: WP Recipes

3. Add a “Share on Facebook” Link

While social media and social networking are commonly integrated with blogging, it’s more common to see a Digg or Tweetmeme button than one that will allow readers to share the link via Facebook. Since Facebook is such an incredibly popular site, it may provide additional exposure for your blog and provide more opportunities for your readers to interact with your content.

To add a “share on Facebook” link, use the following code:

Source: WP Recipes

4. Add Custom Bookmark Links

Many blogs receive tremendous exposure from social media sites, and encouraging your readers to interact by voting or bookmarking can make a big difference in terms of traffic levels. There are plugins and widgets available for this purpose, as well as buttons and badges from the social media sites, but if you’d like more control over the look or if you would just like to do it yourself it is possible.

Bookmark with Delicious:

Digg:

Twitter:

StumbleUpon:

Source: Perishable Press

5. Rearrange the Comments to Show Most Recent Comments First

Having a blog that receives a lot of comments from readers can in some ways discourage others from participating. Some readers will not take the time to leave a comment if they feel like theirs will be buried below 100 other comments. One trick to reward those who are going to take the time to comment is to list the comments with the most recent on top, rather than the oldest one being on top.

Find the following code in your comments.php file (please note that not all themes use the same coding for the comments.php file):

and before it add:

Source: WordPress Forums

6. Add a User-Submitted News Section

User-submitted news or community news sections can be a great way for visitors to get involved at your site. With a news section you will be able to display links to relevant posts at other blogs, and your readers will be able to submit posts that they have found to be helpful, or get some extra promotion by submitting links to their own posts.

I included a news section when I launched DesignM.ag last year and since day one it has drawn significant interest from readers.

The process of adding a news section is more involved than just copying and pasting some code, so I will not be providing code for this one, but Tripwire Magazine published a post a few months ago that will lead you through the process. See How to: WordPress 2.7+ User Link Feed Submit Form and Widget.

7. Add Translation Links

As a blogger, you may be surprised to see how many of your visitors and subscribers come from various countries. While these people may be able to read and understand your posts, there may be some times when they have difficulty or where they would like to share the post with someone who may not be able to read it. In these case, translation can come in handy.

Inserting the code shown below will allow your visitors to easily use Google’s translation services:

Source: Perishable Press

8. Google Custom Search

One of the best ways for visitors to find what they are looking for is to use a site-wide search. Unfortunately, the default WordPress search isn’t much help in most cases. However, you can easily add custom search powered by Google to your blog (plus you can monetize the search through AdSense).

In order to get your own custom search from Google, you will need to sign up with them and they will provide the code. Pro Blog Design has a tutorial that takes you through all of the steps that are involved. See Make a Google Custom Search for Your Blog, and Make Money.

9. Display Facebook Status on Your Blog

Many blogs display most recent tweets, but it’s also possible to share your Facebook status on your blog. There are a few steps involved in doing this with WordPress, and Hongkiat has a tutorial that will lead you through the process. See How to Display Facebook Statuses on WordPress Blog.