As designers and developers our clients are our business, so a key part of being successful is cultivating a healthy relationship with them. We are usually so caught up with the “project-in-project-out” mentality, we forget that one of our greatest assets as freelancers is a reoccurring client. In this 3rd article of Client Tactics series, we will discuss the reasons for managing existing clients. We will also see how to manage them effectively.

Reasons for maintaining clients.

Statistically it is seven times easier to maintain an existing client than is to go out and get a new client. On a common sense level, it just makes a good business strategy to try to maintain as many existing clients as you can. This will allow you to plan ahead and budget more for the future. The following are a few more reasons for maintaining existing clients.

1. Rapport is Already Established.

The hard work of getting to know your client has been done. You know their corporate strategies, their ways of thinking, and ways of doing business. Heck, you even know how many olives they enjoy in their martinis. Having worked together before, everyone involved is more comfortable during the new project. Already having rapport with the client means that they trust your judgment and input, they know that their project is in capable hands. With the proverbial ice being broken, you can skip the first step of client-freelancer-posturing and get down to the matter at hand: making a great project.

2. Lower Cost of Retention vs Marketing.

It costs less to keep an existing client content, over marketing your services to a new client. This is true in almost every other business model known to man, and it especially holds true for freelancing. If an existing client has a concern with their e-commerce site that be solved with a quick email, what did that email cost you? Five minutes away from watching ‘Lost’? Your five-minute email just saved your client five hours of headache and worry. That five-minute email is worth its file size in gold to the client. It keeps your existing client content and didn’t cost you anything. The next time you pay for advertising, think of how many new clients you attract for $100 and how many existing clients you keep content for free. The little things you do for existing clientage can really add up.

3. It Keeps Your Name in Their Mouths.

By keeping in touch with existing clients, it keeps your name in their mouths, of course I am talking referrals! A happy customer is the best marketing that anyone can have. Michael LaBoeuf said it best, "A satisfied customer is the best business strategy of all.". Think back to our five-minute email scenario, the existing customer knows you saved him time and worry. He will tell anyone who is willing to listen about his awesome customer service experience with his web designer. That kind of candid testimonial reaches farther than any advertising dollar you have to spend.

Keep the Lines of Communication Open.

In this day and age, there are almost limitless ways to keep in touch with your existing clients. From old school mailers and newsletters to a quick twitter direct message, reaching out to a client should be quick, thought out, and never perceived as a tedious task.

Newsletters

Since moving into the 21st century, the amount of snail mail a business receives is on the decline. One way to set yourself apart from the pack is to design a mailer. It could be an actual newsletter or perhaps even a postcard with a promo code. Another good idea would be sending a holiday card or birthday card to your client.

Email Campaigns

Since everyone (including my grandmother) has an email address now, an email campaign to contact is easier and more effective than ever. Most e-mail newsletter software is affordable, if not free, and will allow for mass communication to clients.

Phone Calls

While this part of the game may make you feel like a telemarketer, calling your existing clients during their major milestones will lessen the “I’ve got something to sell you” speech and seem more genuine. Even if you get the voice mail of your client, leave a quick message congratulating them on their recent success.

Commenting on Blogs

If some of your clients have blogs, subscribe to their RSS feeds and categorize them under ‘Clients’. Check it every few weeks, read an article or two, then leave simple constructive feedback in a comment. Try to refrain from the typical “Nice Post!”, “Interesting read.” or “First!”. Remember everyone needs a little comment love every now and again.

Social Networks

Right after my grandmother got an email account, she signed up for Facebook. I wish I was joking. Social networks are the hot, “in” thing now, some people even communicate through social networking channels more than standard email. Social networking is changing the way people communicate online. So it only stands to reason that one should contact your clients via their social network of choice. While social networks are often less formal than email or other means of contact, one should still exhibit a professional customer driven persona.

Direct Contact

While all the means of contact above work. The most direct way of contact is physical face-to-face contact. This could be a planned “I was in the neighborhood” visit or could even be a chance encounter while shopping with your family. Now with some clients this is impossible; say the ones in different time zones but, if they are local to your area this method of contact is a valuable tool.

Client Stalking is Bad.

During your initial project with a client, ask if it’s alright to contact them in the future after the scope of the project has been completed. I have never had a client tell me no. Most clients will like the upfront nature of this comment, it shows you value their time and respect their privacy by only contacting them if they wish. If the client does give you permission to contact them, that doesn’t mean contact them every time they issue a press release or stop by their shop every Thursday. Limit your interaction to big events, such as:

• A new store location.
• Your contact at the client’s office getting a promotion.
• If local and announced to the public, the client recently had a new child.
• Major holidays (keep the card generic, “Happy Holidays” not “Merry Christmas”).
• Contact or client’s birthday.

In Closing.

Maintaining existing clients is a reward experience for any freelancer. The key to keeping any client happy albeit, a full service web design client or a ‘mom-and-pop’ start-up needing help with social networking for the first time, is customer service. So keep your customer service kung fu strong until next when talk about essential contract basics for freelancers.

AJAX(Asynchronous JavaScript And XML) as we all knows is a very democratic technology in web development that allows a web page to update the content without page reload or refresh. And WordPress is widely being used not just for Blogs but for CMS's as well. I have used WordPress many times in my Projects and Built web applications by using WordPress as a CMS. While using WordPress for your websites or web applications you will need to use Ajax in your WordPress themes or plugins etc.

Today, I am going to show you how we can implement Ajax in our WordPress themes with the help of simple example.

Task:

Suppose Our task is to show the categories in a drop down box and upon selection of Parent Categories, Sub Categories should appear in another drop down box depending on the selection of main categories.
To achieve our task let's take a walk through step by step.

Step 1:

At first, Create Categories: Parent and Sub as well as shown in figure below:

Step 2:

Create a template in WordPress( I am not going in details of what are the templates of WordPress and how they process in WordPress themes) in which we will implement ajax functionality. Open a new php file and save it with any name like I saved it with implement-ajax.php
Add the following code in the newly created page.

 <?php /* Template Name: Implement Ajax */ get_header(); get_footer(); ?> 

Above code is self-explanatory. Template Name: Implement Ajax is the name of the template in wordpress and functions like get_header(); and get_footer(); are used to display the header and footer of the page.
To add the ajax stuff you will first need to include the jQuery library file in your page. You can use any JavaScript library or can call ajax stuff with RAW JavaScript too. In our example we are implementing ajax with jQuery JavaScript Library which is very popular and very active in community.

Step 3:

Lets include the Jquery file in our template and call the wp_dropdown_categories function to retrieve the Parent list of Categories in a drop down.

 <?php /* Template Name: Implement Ajax */ get_header(); ?> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>  <style type="text/css"> #content{width:auto; height:400px; margin:50px;} </style> <div id="content"> <?php wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat'); ?> <select name="sub_cat" id="sub_cat" disabled="disabled"></select> </div> <?php get_footer(); ?> 

To understand about the arguments of wp_dropdown_categories look at here
I added second dropdown to display the sub categories in it.

Step 4:

Let's add the Jquery code to get the ID of selected main category and then pass it on to the functions.php file where we will get the sub categories of that parent category ID and then send the results back to the page without refreshing.

  $(function(){ 			$('#main_cat').change(function(){ 					var $mainCat=$('#main_cat').val();  					// call ajax 					 $("#sub_cat").empty(); 						$.ajax({ 							url:"/wp-admin/admin-ajax.php", 							type:'POST', 														data:'action=my_special_action&main_catid=' + $mainCat,  							 success:function(results) 								 { 								//  alert(results); 				$("#sub_cat").removeAttr("disabled"); 				$("#sub_cat").append(results); 										} 								   }); 						  } 									); }); 

In the above jQuery code we added the code at change event of main categories drop down with Id #main_cat.

 var $mainCat=$('#main_cat').val();   

.val() function gets the value of the selected option from drop down and stores in $mainCat variable.

$("#sub_cat").empty();

Now before calling ajax we will empty the sub category drop down #sub_cat with previous values if any.
Our next jQuery lines are for calling ajax jQuery Function. Look at the parameters of the ajax function below:

 url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php", type:'POST',														data:'action=my_special_action&main_catid=' + $mainCat, 

url parameter is used to make ajax working in WordPress. So, requests will be sent to admin-ajax.php file and then we will call the hooks in our functions.php file to get the posted data that is sent to the url:”/wp-admin/admin-ajax.php”

data parameter is used for sending the values along with request.
We have used 2 arguments with data parameter
1. action
2. main_catid

Step 5:

In functions.php file we will hook an action like below:

add_action('wp_ajax_my_special_action', 'my_action_callback');

above action hook has 2 arguments. Wp_ajax_[here will be the value that is sent with data parameter "action"] so it will be wp_ajax_my_special_action while second argument is the callback function which will process the data and send the results back.
Above action hook works with logged in users. Suppose you have something to show non-logged in users you can hook an action like this

add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');

what will be our final code after adding hooks for logged and non logged users and callback function

 function implement_ajax() { if(isset($_POST['main_catid'])) 			{ 			$categories=  get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0'); 			  foreach ($categories as $cat) { 				$option .= '<option value="'.$cat->term_id.'">'; 				$option .= $cat->cat_name; 				$option .= ' ('.$cat->category_count.')'; 				$option .= '</option>'; 			  }  			  echo '<option value="-1" selected="selected">Scegli...</option>'.$option; 			die(); 			} // end if } add_action('wp_ajax_my_special_ajax_call', 'implement_ajax'); add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//for users that are not logged in. 

Step 6:

Now create a new page in the dashboard and assign the template to it like shown in the figures below:

Load the page in the browser and you will see first drop down with parent categories loaded in it.

Second drop down is empty and not loaded yet. Select any value from the first drop down and see how it works.

Summary:

This was a simple example I used for showing you how to implement the ajax in WordPress themes. You can fit this implementation of ajax in any of your needs. If you have any problems regarding WordPress implementation you can ask me in comments. I may come up with solutions in my next tutorials. So, don't be afraid from developing advanced themes or use it as a CMS for your Projects.

In this tutorial, we will create a highly realistic and Sleek Wacom Bamboo. The process on creating this image is quite complicated but I’ll try to explain it as clear as I can. Each step will be accompanied with screenshots and sometimes I will add notes for better understanding.

Before we start, let’s see what we’ll be creating below. Notice that you can even see the USB symbol on its cable. As I said, highly realistic.

Our Final Output

Step 1-Creating Wacom’s Base

Start by creating a new file, 512×512 px, RGB, 72 dpi, white background. Create a rounded rectangle with 5 px radius. Add some drop shadow. This will be our Wacom’s main body.

Step 2

Create new layer above it. Click Filter > Noise > Add Noise. Give a small amount of monochromatic noise.

Step 3

Hit ctrl+alt+G to turn layer into a clipping mask. Change blend mode to Multiply and lower its opacity to 50%. This way, our Wacom will have a bit of texture on it.

Step 4-Add 3D Look

Currently, our Wacom looks very flat. It’s just a 2D rectangle. To turn it to a 3D shape we can’t just use a bevel and emboss style. We’ll play with lights and shading to do that. In new layer, create a transparent to white gradient in lower part of wacom. Change its opacity to 20%.

Step 5

Draw another gradient to the other side. See picture below to see light direction for each side.

Step 6

Draw a black rectangle with 20% opacity. Add layer styles Bevel and Emboss and Outer Glow.

Step 7-Separating Buttons

Now, we need to create gap between Wacom’s panel and its body. The trick here is using thin line in white and black. Together, these two lines create depth and make our brain thinks “It’s a 3D shape!”

Create new layer. With pencil tool, diameter 1 px, opacity 70%, draw a black line. Underneath it, draw another line, this time white with 50% opacity.

Step 8

Draw another black and white line to separate other panels.

Step 9-Scroll Area

Next, creating big scroll area. Using ellipse tool, shit+drag to draw a perfect circle. Add some layer styles.

Step 10

Draw smaller circle inside previous one. Add another layer style.

Step 11

Use polygon tool with 3 sides to draw two triangles.

Step 12

Inside the scroll area, draw a circle. Select the path circle, hit ctrl+C and ctrl+V. Press right and down arrow few times to move it. In the option bar select subtract to create a crescent shape. Next, draw path to remove top part of the crescent.

Step 13

Duplicate crescent layer. Move it to other side of the scroll area. Hit ctrl+T and right-click choose Flip Vertical.

Step 14

Write FN1 and FN2 in lower button. I use a bold italic Helvetica here. If you don’t have Helvetica, you can use similar sans-serif font like Arial. Add layer styles shown below.

Step 15

Next step is creating arrow for next and previous button. Draw arrow directly using pen tool is not recommended. It’s just too hard.

Here’s what I prefer to do, create a blue rectangle then using pen tool click one of its top corner. We have a triangle now.

Select the path and duplicate it. Move it by pressing left and top arrow a few times. Choose subtract from the option bar.

Last thing to do is select both path and rotate it -45 degree.

Step 16

Duplicate the arrow and flip it vertically to create arrow for opposite direction. Give both arrow these layer styles to make them glow.

Step 17

Wacom put a small light under the button and it make the indicator really glow. So, create a new layer. Activate brush tool and choose star shape brush. With foreground set to light blue, click once on top of every button indicator to give them subtle sparkle.

Step 18

Upper part of bamboo and its lower are different. The upper part is very slick and glossy. Select the upper part and add adjustment layer Curves. In the Curves dialog box create a small S curves and hit OK This will increase its contrast and give it a glossy look.

Step 19

To make it looks more glossy, we’ll add some reflections. Again, select the upper part and add a transparent to white gradient.

Step 20

Don’t forget the brand. Here, i just use a light italic helvetica and wrote BAMBOO. Then I add a layer mask and paint the line inside B with black.

Step 21

So far, here’s what we have.

Step 22-Creating Cable

Move on to the detail. Draw a black rectangle in top right corner. This will our cable’s head.

Step 23

Draw a smaller rectangle. Use gray color and add Inner Shadow.

Step 24

Inside the gray rectangle draw a USB symbol.

Step 25

Duplicate the gray rectangle.

Step 26

Add a bold B. Hit ctrl+T and flip it vertical and horizontal. Add Drop Shadow and Outer Glow.

Step 27

Finally, draw a triangle shape. With tool brush hardness 95% draw a black cable. Underneath it draw the shadow manually.

Step 28-Drawing Pen

To make things easier we’ll create pen in a separate file. We start from a simple gray rounded rectangle with 5 px radius. Select some points using white arrow tool and move it until we have basic pen shape. To give a 3D look add gradient overlay.

Step 29

Upper part of the pen is very slick and glossy. Draw a black shape, hit ctrl+alt+G to create clipping mask. Add gradient overlay.

Step 30-Creating Pen’s Button

Draw a rectangle in lower part of the pen. Add layer styles shown below.

Step 31

Draw smaller rectangle in the middle of the pen’s button and add a gradient overlay.

Step 32

Almost done! Draw a very small rectangle at the end of the pen.

Step 33

Draw a black rounded rectangle on top of the pen. I also draw a very small reflection on it.

Step 34

Our pen is done! Now, we’ll import it to our wacom picture. Select all layers and right-click choose Convert to Smart Objects.

Drag our new smart object to Wacom file. Hit ctrl+T and rotate it.

Step 35

Duplicate the pen, right click and choose rasterize layer. Hit ctrl+T and distort it until it seems laying on our wacom. This pen will be our shadow.

Step 36

Hit D and shift+alt+Delete to fill the duplicated pen with black.

Step 37

Give it a Gaussian blur and add a layer mask. Draw a white to black gradient until the shadow gradually fades away.

Step 38

Here’s our wacom right now.

Step 39

I don’t really like the plain white background. So, I found this texture and paste it under the Wacom.

Conclusion

For final touch, i want to make Wacom really stands out from the background. I create a new layer. Fill it with a radial gradient gray to white. Change the blend mode to Overlay. That’s it! I hope you have some fun with this tutorial and learn something new.

Free download PSD file

Wait! To help you following this tutorial, I also give you the psd file. Click here to download it.