How to Fire Bad Clients

We are used to reading advice on how to attract and keep clients, but sometimes things don’t go exactly as planned in a business relationship. The more common scenario of a relationship gone bad is when the hired person (the web professional, in our case) is fired because they didn’t render the services as expected.
It’s more unusual to hear stories of the hired professional walking out on the client. We don’t hear about it because the client is supposed to be king, and we are supposed to keep them satisfied.
But what do you do when the king becomes a tyrant? You may decide that it would be best to fire them.

Under what circumstances should you stop working with a client? Can terminating your business relationship with someone be done gracefully? Most importantly, what can you do to avoid such unfortunate working situations?
In this article, I’ll talk about the sensitive issue of letting go of problematic clients.

How to Recognize Bad Clients (The Usual Suspects)

First off, let’s define what we mean by client. The client is the person you’re already working for, with whom you have some sort of agreement with to work on a project-by-project/contractual basis.
If you haven’t settled on the project’s main terms (such as timetable, communication methods, project outline, payment rate and methods), then the person you’re dealing with is just a potential client.
This, too, is a critical stage; you should try to learn as much as you can about them before they become your client so that you can properly decide whether they are the right person to work with, and whether you’ll avoid trouble later on.
The threshold for firing a client is different for every working professional. However, there are some fundamental things that must be present and maintained in any working collaboration and some things that shouldn’t be tolerated.
Below are a few client types that might sound familiar to you.

The Unreachable Client

A project cannot materialize if the client doesn’t communicate with you. If the client doesn’t return any of your calls or email within a reasonable amount of time (say, five work days — but this duration varies depending on your work style and client agreements), one of the following might have happened:

• Something unforeseen might have happened (for example, an illness)
• If you have delivered the project, the client might be avoiding payment
• The client might be experiencing financial difficulties and wants to discontinue the project, but either wants to avoid the penalty (in case one is stipulated in the contract) or doesn’t know how to tell you (this has happened to me, and it’s usually small businesses that have this issue)

The Procrastinating Client

Another issue is when the client doesn’t communicate with you often enough or according to the project’s timetable. This can prolong the project, sometimes way past the timeframe you set at the beginning. It could also start to eat into the time that you were expecting to devote to other work. Such situations can really mess up your schedule and work efficiency.
Clients who don’t communicate often enough might be experiencing the following:

• Not consider this project important enough to adhere to the timeframe you’ve agreed on
• Arranged this project at a bad time, when they’re distracted by other important work
• Slow in making decisions
• Does not appreciate the trouble they’re putting you in by slowing down the project

The Absurd Client

There is sometimes a fine line between keeping a client satisfied while maintaining your professional identity versus letting the client behave like a spoiled brat. (The Oatmeal offers an accurate comic depicting an absurd client).
An absurd client usually combines some of these behaviors:

• Rejects several demos without giving sufficient criticism or suggestions, leaving you to guess what they dislike ("I don’t know what’s wrong. I just don’t like it.")
• Requests features that were not in the original agreement, and then refuses to pay for extra services rendered
• Makes unreasonable requests, usually with delivery time ("I would like four different versions of the website by tomorrow night, thank you!")
• Is unable to make decisions, forcing you to make constant changes to the project. Even if you are being paid for these endless changes, focusing on and delivering a project that doesn’t have a stable foundation is impossible.

The Disrespectful Client

" My teenage kid could do this!" We’ve probably heard something like this before. Frequently, our job isn’t taken seriously, even though we’ve been hired and paid to do something the client is unable to do so by themselves.
In your career, you’ll come across people who don’t quite understand what you do. A disrespectful client does not treat you like a professional and does not understand that you want to collaborate and offer your knowledge to the project.
They will act bossy, insist that they know what’s best for their web presence, assign you tasks without consultation, and neglect to ask your opinion on key matters. Even worse, they might communicate with you disrespectfully.

The Disappearing Client

This one is plain and simple: the client refuses to pay you, whether for the deposit, an extra feature, the remaining balance or the whole thing. And they give no explanation for this delay or refusal. It’s one thing if the client says that they can’t pay you yet because of some unfortunate turn of events and reassures you that you will get your money in a set period of time. It’s quite another if you deliver the project and the client disappears from the face of the earth.
Some client will string you along, always postponing payment, using insufficient excuses, and generally avoiding communication, usually hoping that you’ll get tired of waiting and give up.

How to Avoid Bad Clients (Reducing the Risks)

You can do two things to minimize such conflicts with your clients. First, learn as much as you can about a potential client, and consult with them thoroughly beforehand.
Secondly, be very precise about the project’s terms.

 

Step 1: Education

To learn about a potential client, try to meet with them at least once before agreeing to work on their project. Give them the freedom to ask whatever they want about your work (projects, education, philosophy, style, technical matters), and still cover the areas that you believe are important but weren’t asked by them.
For example, I don’t work with Flash websites. Some of my potential clients have seen Flash websites but didn’t know that’s what they’re called or didn’t know that each website is built on different technologies, and so they didn’t ask about it.
I always inform them right from the start that I don’t do Flash websites, as well as other things that I do and don’t do, so that they know not to request it later on.
The initial meeting is also crucial to identifying how the person views your work and what priority they give to it. They should be interested in knowing about you and how you work, and they should give you the feeling that they trust you and value your opinion and assistance as a professional.
You also ought to ask your own questions of the client, to get a feel for their organization.
Ask about the client’s history, products, philosophy about the market, and current projects.
Be delicate in asking about their financial status; you could make a general inquiry about it when they ask about your pricing. For example, you could mention that you have flexible payment plans in case they are financially constrained; they will usually volunteer some information from this.
Also, don’t forget to ask whether they have worked with other designers or developers on a web project. If so, inquire as to why they are switching service providers, rather than giving this project to them. The reasons could be simple, perhaps they are looking for something more creative or technologically complex, or it could be complicated, such as payment issues, disagreement about pricing or dissatisfaction with the service.
If the client has been fired by a web professional in the past, you should try to learn the reasons why.

Step 2: Precision

After you have decided to work for a client, try to be as accurate as possible about the project’s timeline, services and deliverables you will provide, areas for possible expansion, communication and pricing. Both sides will have to adhere to a schedule in order to maximize efficiency and meet the delivery dates.
To reduce the risk of the client going AWOL, make sure to have more than two contact people for the project, and at least a few ways to contact them (email, phone, physical address, etc).
If the client is self-employed, don’t be embarrassed to ask for the email address and phone number of a close relative or friend. Explain that you need this in case something comes up and you can’t reach them as soon as you need to, or in case of an emergency.
You can reduce the risk of the client procrastinating by clarifying the importance of sticking to the timeframe you’ve set. Both sides should be realistic about the delivery dates. If your client is involved in another project at the same time — make sure to ask them what other things they have going on that might detract them from your project — expect the delivery times to be looser.
If you get the sense that the client is not very decisive, try to guide them in making decisions. If their indecisiveness is really slowing down the project, tell them that you have other projects coming up and that it’s critical that you finish this project on schedule.
Setting financial penalties for timetable changes might sound strict, but it’s a way to convince the client of the importance of following the schedule. Put these financial penalties in the contract before you start working; you cannot add them later, and you cannot oblige a customer to pay a fine unless it’s in the contract.
If you’re working for a small business that doesn’t seem financially stable, try to balance being both precise and flexible with the timetable. Don’t scare them off by making overly strict stipulations. If they will need time to get the money for this project and you can afford to do this, give them wider payment deadlines. Suggest, for example, that they pay the total sum over a few months, rather than in one- or two-time payments.
Having a contract is absolutely necessary. Draw up a document before the project starts that clearly defines the following:

1. The project’s nature and scope
2. Approximate timetable and expected deliverables
3. Agreed-upon features
4. Approximate total cost, according to the original plan and features
5. Requests for new features and their cost
6. Terms in case you or the client cancels the project before final delivery

Be as precise and as realistic as possible with the figures. Instead of telling the client that you’re willing to try several designs to see what fits or that you’re willing to make no more than two designs, you could say that you will deliver, say, two demos, and in case neither works, you’re willing to do a third design. This way, you remain both flexible and specific, and the client knows that you’re willing to try ideas, but to a limit.
The same goes for the timetable. Help the client decide on designs, but not too hastily and not too slowly. Require that they spend a couple of days checking your demo before replying. This way, you avoid hasty enthusiasm or criticism, which could lead to a lot of unnecessary changes.
If the client takes too long to respond, offer to help them make their decision, saying that they can have an extra day or two to think it over but that you will need to move on to the next step according to the schedule.
Last but not least, a reminder about the contract. Having a document that legally proves that you and the client have agreed to a certain payment by a certain date is the only way to protect yourself against a client who is unwilling to meet their financial obligations.
If you don’t have a contract, there is no certainty you will ever get the payment if the client refuses to pay. Also, keep every important email and document that you have exchanged with the client until the project ends.

Ready, Set, Fired!

If, despite your efforts and warnings, you find that you no longer want to work with the client, consider discontinuing your service. Firing the client is a delicate situation, especially if they still owe you partial or full payment or if you don’t have a signed contract. Try steps below.

Be Calm: Don’t Act Rashly Out of Frustration

Take a few hours or a day off work, relax, and consider the situation. Carefully go over every single line of the contract before approaching the client.
If you don’t have a contract, then gather any documents that describe the project’s main terms and that refer to deadlines, deliverables and payment. Make sure you have completely lived up to your responsibilities throughout the collaboration, and don’t demand penalties unless you are certain and can prove that they have violated what was agreed on from the beginning.

Find the Appropriate Time

Timing is everything. Set an appointment with the client on a day when you won’t be stressed by other tasks. The conversation should be serious yet calm, professional and not aggressive.
Inform the client that you would like to discuss the status of your collaboration. Bring the contract and/or the other documents you have gathered (emails, receipts and such).

Let Them Explain

Even if you’re certain that you don’t want to work with this client any longer, do give them a chance to explain their point of view. They might not have been able to pay you because they’re short on money or are overloaded with their own customer issues; perhaps they would like to postpone the project and just didn’t know how to tell you.

Discuss Your Reasons

No matter how delicately you say it, be forthcoming about why you want to discontinue working with them. If the reason is your different views on the project — for example, they want a loud animated website, and you want something more minimalist — suggest a designer who would better suit their style  (after having discussed it with that designer).
Of course, you shouldn’t refer them to a colleague if they have been disrespectful or refuse to pay; you shouldn’t offload that burden onto other web professionals.

Take Care of Loose Ends

Sort out the remaining obligations of both parties. If the client has already paid for certain parts of the project, make sure you have delivered them. Be clear about their financial obligations, and let them know you’ll give them a receipt once you have been paid. A prearranged cancellation policy can save both parties time, effort and misunderstanding.

Possible Issues Resulting from Firing of Clients

Unfortunately, not every client will be cooperative. More than one meeting might be necessary. Some clients might get too emotional. Some might be slow to conclude the process.

If you do have a contract, you can take legal action to secure payment. But before you get to that point, or if you don’t have a contract, you could try some other tricks to put pressure on them.
If you haven’t yet delivered the project, you could refuse to launch until you’re paid. Your client will have to choose between, on the one hand, paying and getting the deliverables and, on the other, refusing to pay and finding someone else to take over. Either way will be a waste of money for them if they have already made partial payment.
If you have already delivered the project and don’t have control over the website, you could try using CSS Killswitch (but many find this sort of tactic to be unethical). Or, if you have access to the control panel, you could put the website in maintenance mode.
You could also go about this much less politely, which you might be tempted to do if you don’t have a contract and the client’s rudeness is pushing you over the edge. You could start publicly rebuking the client on social networks.
I even witnessed a colleague take it one step further. Their client wasn’t computer-savvy, so the designer locked them out of the control panel and then rebuked them on the client’s own home page, ranting about how they were never paid for the project and what a nightmare they were.
But I would personally suggest avoiding this type of behavior, no matter how mean they have been to you. You will be tarnishing your own image, and you will come off as being unable to handle difficult situations.
The same goes for after you have finished with the client: don’t gossip about them. If you want to steer a colleague away from the client, refer to your experience objectively and honestly, and then let them decide for themselves. If someone asks about your work with the client, be concise and explain that you didn’t manage to finish the project due to different perspectives.

Happy Ending?

You can increase the likelihood of a happy ending by properly communicating with the client, planning ahead (to avoid disasters such as cancellations) and focusing on the little details. Try to protect yourself without suffocating the client with excessive or overly strict terms.
If things go wrong, clearly explain to the client the trouble they are causing you, and try to discuss the matter before deciding to terminate the relationship.
Above all, remain calm and maintain your professionalism and integrity (which take time to build, but can fall apart in seconds).
Have you ever had to fire a client? If so, how did you resolve the situation in a way that was fair to you? Have you ever continued a collaboration that you felt just wasn’t worth it? If so, what kept you from firing the person? Share in the comments.

How to Build a Popup Help Center for Your WordPress Site

Have you been wishing for a way to give users of your WordPress site easy access to all the help and support they need to fully appreciate everything your site has to offer? Well, you can start smiling now, ‘cuz your wish just came true. This tutorial will show you how you can truly enhance their experience with a cool popup help center. Once we finish this project, your users will be able to…

• pop open your help center by clicking a link or button that you can make as prominent or as discrete as you like
• select the appropriate help subject from a scrollable, and dynamically updating table of contents
• view expanded lists of all related sub-topics any time they click on a subject they’re interested in

As admin of your WordPress site, you will be able to add and edit all your help content via the WordPress page editor. That means that you can…

• include images, videos and links to other sites in any help content
• include things like a contact form or live chat support
• use any shortcodes you like or need
• add content via content buckets
• manipulate the help content just like you normally do on any page of your WordPress site

Once we’re done, your popup help and support center will look much like the example below.

The popup help screen will be divided into 2 scrollable frames: help content on the right; and a dynamically updating table of contents on the left. Your users will be able to scroll either frame independently as seen below. The table of contents will keep itself organized and updated according to the page order you set in the back-end of your WordPress site. Clicking any item heading in the table of contents on the left of the popup will bring up that content in the right-hand pane.

What we’ll need to get this done

As I like to make stuff as easy as possible for novice WordPress users, this tutorial is divided into 5 parts so you can get stuff done at your leisure.

1. We’ll create a custom page template for our help content
2. We’ll register a new sidebar to use in our custom template
3. We’ll use a cool plugin called Hierarchical Pages Widget for the dynamically updating table of contents
4. We’ll add a bit of javascript magic to create the popup
5. We’ll write some custom styles to create the layout we want

Before proceeding with any theme customizations, I highly recommend the use of a child-theme. If you’re already using one, great! If not, please create a child-theme of the theme you are using now. If you’re not sure how to create one, see http://codex.wordpress.org/Child_Themes and What are Parent and Child Themes?

1) First up: a custom page template

The first thing we need for this is a custom page template with no distractions for your users. We want our help content to be displayed in our popup with no banners (that means no header or footer), and navigation designed specifically for it. In our template, we’ll be including calls for the header and footer, because you likely have some essential code in there. But we’ll be hiding them from view later on when we get to the CSS part of this tutorial.
Open a new document in your favorite text editor (mine is by far Notepad++). Copy the code below and paste it to your document. Save your document as template-site-guide.php and upload it to the root of your child-theme folder.

<?php
/*
Template Name: Site Guide
*/
?>

<?php get_header(); ?>

<section id="content" role="main">

 <?php the_post(); ?>

 <article id="<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="post-header">
   <h1 class="post-<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', TEMPLATE_DOMAIN ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
  </header>
  <div class="post-body">
   <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', TEMPLATE_DOMAIN ) ); ?>
  </div>

 </article>
  
</section>

<div id="help-sidebar">
 <?php dynamic_sidebar( 'help' ); ?>
</div>

<?php get_footer(); ?>

As you can see, this template is a very basic loop that only calls the post title and post content. We don’t need any more than that for our popup help center. To test that the template is working properly, create a new page for your WordPress site. In the “Page Attributes” section of your page editor, select your new template from the “Template” drop-down menu. When you publish or preview your new page, you should see only the post title and content in the post area, with nothing else (no meta-data, author, date, etc.). The template looks OK? On to the next step then…

2) Register a new custom sidebar

You surely noticed the call to the custom sidebar in the template. In this step, we’ll register a new sidebar to be used only in our help popup. Open your child-theme’s functions.php file, and paste the following code just after the opening <?php tag.

// Register our custom sidebar for the help popup
register_sidebar(
 array(
  'name'          => __( 'Help', TEMPLATE_DOMAIN ),
  'id'            => 'help',
  'description'   => 'Help',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',    
  'after_widget' => '</aside>',
         'before_title' => '<h3 class="widgettitle">',
         'after_title' => '</h3>'
  )
);

That’s it… were you expecting more? Now, when you go to “Appearance” > “Widgets” in the back-end of your WordPress site, you’ll see a new sidebar called “Help”. That’s where we’re going to drop one of the widgets from the plugin we’ll be using for the table of contents.

3) Our table of contents

To create a table of contents the way we want, we’ll be using a really cool little plugin: Hierarchical Pages Widget. You can either download the plugin and FTP it to your site, or use the automatic install in the Plugins section of your site’s back-end.
Activate the plugin on your site, then go to “Appearance” > “Widgets” and drag the “Hierarchical Pages” widget to your new “Help” sidebar. To set up the widget for our help navigation, simply tick the first 2 check-boxes (Show siblings & Show top-level pages), then enter the ID of the page you created earlier. That will be your top-level help page. All other pages you create for your help popup must be set as children of that page for this to work properly. Save the widget settings.
Now go ahead and view the page you created earlier once again. You should see the page title has been added as a link, probably below the content. Don’t worry about that right now; we’ll fix up the layout in the last step.

Let’s do a quick recap before we continue

• we’ve created our custom template to display our help content
• we’ve created our top-level help page (to be edited later)
• we’ve created a sidebar to use only with the help content
• and we’ve activated and configured the plugin that builds our table of contents.

Got all that? Now let’s get to the really fun parts: the JavaScript that will create the actual popup, and then it’s on to adding custom styles to our style-sheet to get everything formatted and looking awesome!

Now to work some JavaScript magic

Rather than copying some code from this article and then futzing with it to fit your site, I’ve found a really cool alternative for this purpose. One of my favorite sites for code snippets is DynamicDrive.com. They actually have a code generator to build your own custom popup. How cool is that? Click the link below to create your own code, then come back here.

• In the field where you’re prompted to enter the “URL of window”, enter the URL of your top-level help page.
• You’ll also want to set “Scroll bar” to “Yes”.

Generate popup JavaScript
The 1st part of the code you just generated must be pasted to either the header.php file or the footer.php of your child-theme (it’ll work just fine in either one). If you paste it to header.php, be sure it’s just before the closing </head> tag. If you add it to footer.php, be sure you add it before the closing </html> tag.
Save the file you added the JavaScript to, then upload it to your site. The next step is to add the 2nd part of the generated code where you want your “Help” button or link to appear on your site. That is entirely up to you, but for now, simply add it to a text widget in your sidebar, or anywhere on a test page. If you want a button, and want it to look exactly like all the other buttons on your site, simply change <a href to <a class=”button” href in the 2nd bit of code.
Now, wherever you put that link or button, click it and watch your popup appear. If you want to modify the dimensions, or any other setting, simply generate a new pair of code snippets and replace them. Cool huh?

Finally! Let’s make it look snappy!

Below is the basic CSS you’ll need to get a popup help center for your WordPress site just like the examples in the images above. The max-height value in the 1st part should be equal to the height you set for your popup window in the JavaScript you created earlier. The position:fixed and overflow-y:scroll in the 1st part are the all-important bits that create the scrollable left-hand pane (our custom sidebar) that will contain the table of contents.

.page-template-template-site-guide-php #help-sidebar {
  max-width:36%;
  float:left;
  overflow-y:scroll;
  position:fixed;
  max-height:350px;
  margin-right:2%;
  font-size:11px;
 }
.page-template-template-site-guide-php #help-sidebar ul {
  margin-left:0;
}
 .page-template-template-site-guide-php #help-sidebar ul ul {
  margin-left:1em;
 }
 .page-template-template-site-guide-php #help-sidebar ul ul li {
  list-style:disc inside none;
}
 .page-template-template-site-guide-php #help-sidebar ul ul li.current_page_item {
  font-weight:bold;
 }
.page-template-template-site-guide-php #content {
  width:60%;
  float:right;
  margin:2%;
}

Now, depending on the theme you are using, portions of the following code may need to be modified. This bit of CSS applies specifically to my child-theme of SimpleMarket from WPMUdev. The 1st part (branding, top-nav, bottom-footer) hides the site header and footer in the help popup, and the other 3 parts style the main page wrappers. If you are not using SimpleMarket, you will need to adjust or delete stuff to reflect the actual container IDs of your theme. If you need help with this part, please leave a comment below with a link to your site, and I’ll do what I can to help you figure stuff out.

.page-template-template-site-guide-php #branding, .page-template-template-site-guide-php #top-nav, .page-template-template-site-guide-php #bottom-footer {
  display:none;
}
.page-template-template-site-guide-php #site-outer {
  box-shadow:none;
  moz-box-shadow:none;
  -webkit-box-shadow:none;
  margin:0;
}
.page-template-template-site-guide-php #site-wrapper #main {
  border:none;
  padding:0;
}
.page-template-template-site-guide-php #site-wrapper #main-inner {
  padding:0;
  margin:0;
}

Once you’ve added the styles you need to your style-sheet (and have uploaded it to your site, of course), click your “Help” button again and watch the magic unfold.

Final step: create your help pages!

Now that you have a cool container, you get to let your creativity really fly as you build all the help pages you ever wanted on your WordPress site. Be inventive and include example images or screenshots to help your users understand each point in your help content. Experiment with short-codes from other plugins to include a contact form, or even a chat feature. For example, you could try WPMUdev’s own WordPress Chat; you can add it directly to any page without shortcodes.
As always, I hope you enjoyed this tutorial and find use for it!