‘Post’ to ‘Article’ in the back-end

Most of the blog-type themes I’ve built have been designed to replace an existing (usually bespoke) archaic CMS, where the editors refered to (what we know as Posts) as Articles. It’s easy to add and helps people understand what things are.

// functions.php
// hook the translation filters
add_filter('gettext', 'change_post_to_article');
add_filter('ngettext', 'change_post_to_article');
function change_post_to_article($translated) {
     $translated = str_ireplace('Post',  'Article',  $translated);  // ireplace is PHP5 only
     return $translated;
}

/?s= to /search/ in URLs

It seems silly that WordPress gives us a powerfull pretty-url system, but still shows the get var name in the URL for searches. Let’s fix that.

// functions.php
// Changes ?s=term to /search/term
function change_search_url_rewrite() {
    if (is_search() && ! empty( $_GET['s'])) {
        wp_redirect(home_url("/search/") . urlencode( get_query_var('s')));
        exit();
    }
}
add_action( 'template_redirect', 'change_search_url_rewrite' );

Note, this will only work if you aren’t using the default ‘out of the box’ URls. Meaning, if you see ?uestion marks in normal page URLs, this won’t work.

Change default Gravatar

So we all know that WordPress uses the Gravatar system for avatars, that makes complete sense, the same company make it, but not everyone has a gravatar. I’d suggest most people don’t. The grey default WordPress provides for those people probably suits most ocasions, but when it doesent, another snippet will rescue you. You can set the source for the image as well as its name which appears in the ‘Discussions’ page in the back-end.

// functions.php
// Change default gravatar
if ( !function_exists('custom_gravatar') ) {
    function custom_gravatar( $avatar_defaults ) {
        $myavatar = get_bloginfo('template_directory') . '/images/gravatar.gif';
        $avatar_defaults[$myavatar] = 'Custom Gravatar';

        return $avatar_defaults;
    }

    add_filter( 'avatar_defaults', 'custom_gravatar' );
}

Define URLs

I’m sure we’re all migrated a WordPress site before, and needed to go into the SQL mid-migration and find & replace the old URL for the new one. It’s a pain in the ass. This will help.

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'] . '/wp-content');

What it does, is makes every reauest for a URL use the one you provided. The code above takes the domain from whatever is in the URL and uses that, ideal for using the same database on multiple enviroments where everyone will have their own local URL for it. You can of course set it to use a hard-coded URL too.

Get the template name

This is a rather niche thing to do, but let’s say you need to know what template a page is made to use.

$template = get_post_meta($post->ID, '_wp_page_template', true);

That’ll return ‘page-my-special-template.php’.

Hide ‘Posts’ menu in the back-end

Not every WordPress site will have a blog in it. To make it easier for the admins to use, we should really clean up the menus.

function remove_menu_item() { 
    global $menu;
    $restricted = array(__('Posts'));
    end ($menu);
    while (prev($menu)){
        $value = explode(' ',$menu[key($menu)][0]);
        if(in_array($value[0] != NULL?$value[0]:"" , $restricted)) {
            unset($menu[key($menu)]);
        }
    }
}
add_action('admin_menu', 'remove_menu_item');

Remove other menu items in the back-end

On a similar vein to the previous snippet, we should remove other menu items we know arent going to be used.

add_action( 'admin_menu', 'my_admin_menu' );
function my_admin_menu() {
     remove_menu_page('link-manager.php');
     remove_submenu_page('edit.php?post_type=standard', 'post-new.php?post_type=standard');
}

To remove other menu items, you just need to add the URL for it. It works on default pages as well as submenu items, even in custom post types. To remove a submenu, you provide its parent URL and then the child you want to remove.

Add a TinyMCE editor anywhere

People like to be able to add links, bold stuff & what-have-you themselves, without writing code. So if you’ve added a textarea to anything, anywhere, help them out a bit by making it easy for them to format text.

So this gets the data, either from a global option (the first one) or from a posts meta data, or custom field data (the second one).

// Using option data (global)
$data = get_option('standard_intro_copy');

// Using post meta data
$data = get_post_meta($post->ID, 'home_video_text', true);

And this below is the editor its self. standard_intro_copy is the field name, be it global of meta data. Set media_buttons to true if you want to enable admins to add images & such. Also, set teeny to false if you want to give them full controll over things like colour. Screemshots below of teeny set to true and false.

$settings = array(
    'teeny' => true,
    'textarea_rows' => 12,
    'tabindex' => 1,
    'media_buttons' => false
);
wp_editor($data, 'standard_intro_copy', $settings); // data, textarea name, settings

Teeny: true

Teeny: false

Hopefully some of those will help you out. :)

HTML5 Forms

There’s a load of new form elements that came in HTML5. Here’s most of them. Each has a slightly different way of entering data and looks slightly different in the browser.

• file
• text
• url
• checkbox
• hidden
• tel
• email
• range number
• search
• date
• password
• radio
• color
• time

<input type=”email” />

Mobile devices make good use of these, changing the keyboard layout to make entering the data they’re meant to accept, easier. Notice how the @ symbol and the dot are already there? It just makes entering emails a little easier. Browsers also do a little validation on these too.

<input type=”tel” />

Other things happen when the input type is set differently, such as a number pad showing then the input it set to ‘tel’.

<input type=”date” />

Now, this is fairly common knowledge. We’ve been able to do this for a few years now. Where things get interesting is when using things like <input type=”date” /> You’ve all seen one of those popup boxes where you can select a date. It works fine on the desktop where you have a mouse and can precisely select what you want. Ever tried to use one on a phone though? It’s just painful. Same goes for dropdown boxes, or select elements if you know some code.

This is where JavaScript comes to play.

if (!Modernizr.inputtypes.date && !Modernizr.touch) {
    // Load your JS date picker
}

If you’re a developer, you’ve heard of Modernizr, i’m sure. For those who haven’t, it’s a library that detects if the browser supports certain things, letting us add or remove functionality, depending on the capabilities of the browser.

In this case, it means the date picker that’s really made for mouses, only gets loaded on devices that don’t have a native date picker, and aren’t touch devices. So, basically, a normal generic desktop.

You could omit the touch detection, but chances are, on the desktop, you’d want the date picker to be the same. Native date pickers are bloody hard to style.

The moral of the story here is, if the browser has a far better method of inputting data that’s better suited to the device, use it. Desktop == mouse, mobile is touch. Detect it, don’t assume anything, and you’ll have happier users.

CSS3 Columns

Next up, columns.

The feature you really want here, is the ability to split what would normally be a single vertical column of content into more than one.

<div class="content">
    <div class="item">
        <!-- Stuff -->
    </div>
    <div class="item">
        <!-- Stuff -->
    </div>
    <div class="item">
        <!-- Stuff -->
    </div>
    <div class="item">
        <!-- Stuff -->
    </div>
    <div class="item">
        <!-- Stuff -->
    </div>
</div>

So imagine how these boxes would stack up if they had no style. They could be paragraph elements, lists, images, almost anything.

With no styling, they stack up on top of eachother. Let’s do something interesting.

.content {
  column-count: 2;
  column-gap: 20px;
}

CSS3 gave us columns. This is as basic an example as you can get.

It’s kind of like floating elements to the left, but horizontally, kind of. An example will help.

So this is what it gives us. It may be what you want, but notice how the 3rd box is split to make each column the same height?

.item {
  display: inline-block;
}

This one chunk of CSS will help. It could be applied to each block of content, or just specific things like lists. Some slightly older browsers will split images too, so you might as well as it there as well, just to be sure. Let’s see what it does.

Ah. Brilliant. Just what we wanted.

Of course, the columns are horizontally fluid too. But they will get too thin at some point. So media queries to the rescue! We’re just setting the column count to one on screen widths less than 400px wide, or most phoned these days.

@media (max-width: 400px){
    .content {
        column-count: 1;
    }
}

:hover on mobile

The hover psdueo selector doesn’t exist on touch-only (apart from one device now) devices like the phone you have in your pocket. You’ll probably see the effect, after you’ve clicked on something. On mobile, we have tap events instead, which exist in both CSS and JavaScript. If you wanted the tap instantly, use this:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Here’s the 3 events you’ll care about in JavaScript. Take a look at that link for a little more info, if you’re a developer. You can do amazing things when combining them like detecting swipes in any direction, and how long something is tapped for, for drag & drop interfaces.

touchstart
touchend
touchmove

Here’s how you’d apply those in jQuery because jQuery is JavaScript these days.

We’re just detecting a tap event on a element inside a container. The tap is detected immediately, therefor, there’s no delay at all, where as with a traditional desktop click event, there’s a delay of approximately 300 milliseconds which feels like an eternity sometimes.

$(“#container”).on(“touchend”, “.element”, function(){
    my.awesome.function();
});

Retina

You’re here, so I’m just gonna guess that you understand the importance of resolution independence. The ‘too long, didn’t read’ version would be, ‘non retina sites look like junk on my Mac, get with the program’.

Resolution, size, device & input independence is kinda why we’re here. Let’s talk about resolution though.

Icon Fonts

I would take a guess and say most of the images on the web these days are icons for things, like social icons, the house and search icons. This is where icon fonts can help. For content images, photos, we have other options. More on that later.

Icon fonts are by far the best way to make your site somewhat resolution independent. For those of you here who aren’t too clued up on this, icon fonts act the same way regular text does. It’s like an infinitely scalable icon, just the same way text it. It is text, but shaped like an icon.

If you have the skills or have access to someone who can make fonts, you’re in luck. You can have a complete bespokely designed icon font. That said, you can convert vectors to fonts.

The alternative for most people, is using a pre-made icon font. I’m a strong advocate for GitHub’s Font Awesome. It’s aimed to be used on GitHub’s own apps, but, being open-source, others have added icons and it’s very usable for many types of websites.

I mention this, because wouldn’t it be great if non-coder designers, knew about this font and used it in designs? It’s almost like retina assets for free!

The downsides? Tricks?

I guess that icon fonts are inherently flat and need a solid colour.

You can do some great stuff with CSS gradients & shadows. That said, if you’re sneaky, you can layer them up. If you use pseudo elements with the icon character’s unicode value as its content value, you can give different icons different colours and other treatments. You need a font that’s made for this though.

Image Sprites

Chances are though, you’ll need to add an image fo r things like the logo and maybe some other icons, or all of the icons.

Depending on how anal you get about serving the right assets to the right device, you could serve sprites for each pixel density to each device, or if you want to, you can group them, so send a 2x sprite to every device above a certain density (say, 1.3x). if you set a background-size on the sprite, you’ve covered all bases.

Pretty much every mobile browser in common use today will know what to do with background-size property in CSS anyway. For desktop though, older browsers, namely IE 8 and below, don’t know what it is, so it will show sprite assets at the resolution they are in the sprite, which would be twice as big in this case.

if you use a CSS pre-processor like Sass, it handles image sprites at different resolutions for you, providing you add the correct modules to Compass. That’s another talk altogether.

@media (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    background-image: url('sprite_2x.png');
}

Content Images

So that’s icon fonts & sprites covered, what about the rest of the images of people in suits standing around a computer smiling?

Well, there’s still a lot of arguing about this happening around the web. Rather than talk about all of them, I’ll quickly touch on the proposed spec as it stands today.

<picture alt="Description of image subject.">
    <source srcset="small.jpg 1x, small-highres.jpg 2x">
    <source media="(min-width: 18em)" srcset="med.jpg 1x, med-highres.jpg 2x">
    <source media="(min-width: 45em)" srcset="large.jpg 1x, large-highres.jpg 2x">
    <img src="small.jpg" alt="Description of image subject.">
</picture>

This is an example lifted directly from the spec, it’s a new element, the element. The alt tag that ordinarily goes on tags goes on the tag and the different sized images go inside it.

As is now with HTML, if an element isn’t supported, the browser skips it and jumps straight inside it and renders what it can.

One day, browsers will natively support it, but if you added this to your code now, the element inside the element would be shown, as it’s all the browser shows you.

You can polyfill it with JavaScript, but you’ll end up doubling the HTTP requests and ultimately slow the site down. And if the JS is slow to load, uses will see tiny images until the JS kicks in.

I’d just say leave normal square content images as 1x. Photos don’t look that bad at all when views on a higher DPI screen.

Vertical Alignment, sans floats

Quite often on product feature pages, you’ll have a list of stuff the thing does, usually in the form of images next to a bunch of text. If you’re only supporting IE8 and up, which you should, you can use tables to do this. Now, before you scoff at me for suggesting table layouts are a good thing, I do mean CSS tables, not HTML tables. Your regular, semantic markup structure can remain. :)

Now, It means whatever is in the box, be it an image, list, text or video, is in the middle of the box, vertically, without you needing to set where it sits.

Let’s see an example.

This is from the iPad mini overview page. It’s a perfect example of what I mean. And it’s check off the requirement of an obligatory ‘Apple in a slide deck about design’.

I would’ve used animated cat gifs, but I’m not gonna sink that low.

So how do we do it.

So this is how it may look if you hard-code it to sit, say 100px from the top.

But if you re-size it, the text still sits 100px from the top. Yes, you could fix it with a media query, but that’s a pain in the ass and ultimately, not very flexible or maintainable, especially if the content is controlled by a CMS.

So this is out intended result when the box is a little smaller. So how do we do it? Out good friend, tables!

CSS tables that is. A very different beast to HTML tables, but the same kind of power that we want, with none of the extra fluff.

The HTML

<div class="table">
    <div class="cell">
        <img src="me.jpg" />
    </div>
    <div class="cell">
        <p>Lorem ipsum dolor sit amet, consectetu.</p>
    </div>
</div>

The CSS

.table {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
    vertical-align: middle;
}

This is the equivalent HTML table, it should help you understand how the CSS related to the divs we had a moment ago.

Don’t use this, unless you’re doing emails or something else hacky.

<table>
    <tr>
        <td>
            <img src="me.jpg" />
        </td>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetu.</p>
        </td>
    </tr>
</table>

So there we have it. Hope you learnt something new. :)

What use is ranting going to do? We all know there are prehistoric-idiots out there. Giving fuel to their fire isn’t gonna help. We know they’re idiots, we know to ignore them. Don’t give them they attention they crave.

The Work

I’ve learnt a lot about code in the last year. Not just bullshit ‘look at this great plugin’ crap, but real code that makes my clients money.

I structure my code in a set way, make it as object-orientated as I can, and comment well. Starting a complete new build every few weeks means I need to code as best I can. That said, I don’t do it perfectly. I just don’t have time to follow the latest & greatest method some designer thinks I should follow.

My side projects like Kodery and a couple templates I use for daily work have fallen by the wayside. They get updated, I use them but I’m yet to combine the various improvements and add to the GitHub repo.

Getting Work

All of my work is for design agencies and full-service agencies who need a little more specialised skill. This has been the same for a year and I intend on keeping it this way. I can manage teams of people I have close contact with and have done this in a past full-time job, not managing a clients expectations and keeping on the right side of them. (Aside, my first hire when I start my agency is someone who is good at client management.)

I was unfairly lucky when I started freelancing. I still had good press from getting that award. The attention slowly disappeared and I had the same struggle as everyone else, albeit with a decent head start.

Around June, 3 months in, I had a steady stream of work coming in, some jobs which spanned a couple of weeks, most a few days. Nowadays, I tend to work on projects spanning a month or so, sometimes a week or so. It’s rare I do a tiny job now.

I like it this way. Longer jobs mean less time switching my brain around, less admin, less talking to clients about possible work, and therefore, more money because I’m working, not pitching. A year in, I’d say my monthly income is around 50% higher than it was last year, almost all due to having longer projects.

Now, I don’t need to find work. It finds me. I like to think that’s a combination of good work, good reputation, casual attitude, and consistent recommendations from existing clients.

Scheduling & Quoting

I’ve said this a lot in recent months; quoting is hard, it does get easier. Make no mistake, it does take time, but it does get easier. I’m still getting better at it now. I’m still not great. I tend to work a day or more over my quoted time on projects, but that’s fine. It’s my fault for under-quoting on my time. I learn from it still. I was far worse to begin with, like all new freelancers. My 3 years agency experience somewhat helped, but not that much. I know my estimates there a little low there too.

Scepticism

I hinted at this earlier, but I am very sceptical about adopting the latest & greatest techniques. I don’t have time to piss around implementing whatever the cool kids are doing, then the fallback to it for every other browser. I need things to work first time, solidly across many browsers. Don’t get me wrong, I do use many features of CSS3 and parts of HTML5, but those are (more often than not) visual, and fallbacks are easy to provide. Implementing new units like rem and vw require a few fallbacks for most browsers. I just don’t want the hassle.

I am also sceptical about outsourcing stuff now. I’ve done this a couple of times and always had bad experiences, loosing a long-term client in one case. The lesson here is don’t guess that someone who apparently knows their stuff actually knows their stuff. Of course, no names and no specifics here. I may be a cunt sometimes, but y’know, I’m not that much of a cunt.

In the interests of disclosure, I have also been on the other side of the outsourcing fence. It wasn’t pretty, none of it sits in my portfolio and I found the whole experience tougher than working with my regular agency clients.

Cashflow

Doing slightly longer projects spanning between a couple of weeks and a month means I get paid more, but not as often. I would guess I’m typical in not having the well-proposed 3 months of cash. I would love to have that, but I started freelancing on a rather bad financial note. I’m in a little bit of debt from a prior life. I’m getting better and saving more, but it takes time to save the £8k I’d need to live comfortably for 3 months.

Room For Improvement

I want to improve a lot over the next year, who doesn’t. I actually have a list, which should be fairly self-explanatory.

1. Get a saving account and fill it to the brim for rainy days
2. Work more common hours and only work in those hours. Leave procrastinating to out-of-office hours
3. Move out of my parents house and rent somewhere cool
4. Save £15k and buy a newer car. (BMW 335i convertible for those who care)
5. Work on things that provide a passive income

Some things on that list require time, some require effort and a change of thinking. I have no idea what will happen with that list, and what order they will happen, or even of any will happen. Time will tell, but without big goals, what do I have to aim for. I have always dreamt big, with an even split of success and failure. I must try though.

I want designers, developers, UXers, IAers, copywriters, nerds, and people with other regular jobs to join me for the journey.

The Route

Here’s the alpha route. It’s around 2000 miles. (The green points on don’t have any real meaning.) I want suggestions on great roads we need to drive down and points of interest along the way.

How It’ll Work

I imagine there’s be more people signing up in groups for one car, so that’s all fine. But for those who want to drive but have no one to come with (either as a driver of co-pilot/passenger), i’ll make a list of each so you can pair up. Drivers will of-course have the right to refuse and limit the number of people in their car. I myself will have one passenger.

There will be no entrance fee, no money will be given to me for this whatsoever. I would like to list a few things for passengers though.

• Pay your petrol share for every leg of the journey you make, to whoever drives you, or at least buy them dinner. You can agree the details between you.
• Don’t be a bad passenger. No one likes a sticky person.

Joining & Leaving

I can fully appreciate a few people might not want to do this from start to finish. I have no problems with people wanting to join further up the country, we just need to know before we leave each morning so we know where to stop off for lunch for you to join us. Or you can meet up wherever we end up staying that night and start the next day. We will be tweeting the whole thing.

Costs & Timings

In my car, a fairly typical 2.0 petrol, Google says it’ll cost about £460. And food, hotels, beer and daily snacks, I estimate this will cost about £1000 over all, and would ideally take a week.

I know this will not be the cheapest of weeks, but I really hope it’ll be one to remember as a week of camaraderie, laughs, good sights and great roads.

I reckon this will be a lot of fun in the summer. So maybe mid July would be ideal. That works well for me at least.

Communication

The whole thing will be posted on Twitter for anyone who wants to join us, either digitally or actually come along for the ride.

For drivers talking to each other , I thing it would be amazing if each driver had a CB radio, so if someone breaks down, we can all stop and help. Whatever happens, driving keeping in contact would be rather crucial. A basic CB radio can be purchased quite cheaply. They are UK road-legal too. I’m open to advice here. Comment please. :)

Interested?

Pop me an email to pauladamdavis@gmail.com with the subject ‘Dev Drive’. Just tell me where your from, whether you’re a driver or passenger.

I may have forgotten some crucial details, so please chime in with the comments and let me know. I want to flesh-out the idea before I solidly set the date, route and stop-offs.

Update 1 – 17:48 – 18th March 2013

Stephen Fulljames has suggested a route through Wales

Disclaimer: This post details how I work as a freelancer. There may be better ways, mine may be the wrong way, but ti works for me as a full-time freelancer and has done for well over a year. Now…

First Contact

I’m very lucky that I never have to actively look for work, though I sometimes reach out to cool people & agencies, but inly to get my foot in the door. I have made good connection with a lot of people over the years of going to conferences, pads clients recommend me a lot, and add my clients are generally design agencies, their friends are design agencies too, so the pool of people who might want to work with me is ever-growing. But like I say. I have been lucky.

When I get that first email with an introduction, I typically read it over a few times and try to work out if it’s a blanket email sent to many people or a personal one to me, then I try & work out if they’re just fishing for prices.

If all is well, I take a look at any links or assets they may have sent then briefly reply, mentioning what they have said & shown to show them I did actually read what they said. I include my rate (even if they don’t ask, £1600 a week scares lots of people away), availability, any thoughts I have about their project.

I’m try to always fit in a little joke or smiley face somewhere. This breaks the ice a bit and tells them I’m very casual about it all. I know they’re spending a lot of money with me, but it’s nice to know I’m not a corporate stooge about it all. But the casualness needs to be kept at a maintainable level. You may need to be an arse at some point. More on that later.

If they don’t seem that good and wrote a personal email, I reply with something like:

Hello Name,

Thanks for getting in touch.

After reading your message and doing some thinking, I’m not sure I am the right freelancer for you. I’m not the guy you need to build a Facebook clone for £50, even if the exposure if great.

All the best. -Paul

If they sent a blanket email with no reference to who I am at all, I just delete it. If I wasn’t worth their time to at leaf put my name on it, they’re not worth my time in replying, no matter who it is.

Agreements

When the email chain has increased in size a bit and the ideas & rates are flowing freely between us, I ask them to check and agree to my terms in writing. An email is suffice. This just makes sure they know how I work, and even if they don’t read them but agree, you have them agree in writing; protecting yourself. If they don’t agree, you can either kill off the relationship or adjust the terms to fit the project.

Sometimes I need to sign an NDA (Non-disclosure agreement) which generally means me sending a letter with a few duplicates of the NDA to the companies legal team.

Don’t see the words NDA and cower in fear. More often than not, it’s a company policy, not them distrusting you.

Spec

Quote often, I go to see the client at their office, this helps me get a sense of scale to how they work. Seeing them face-to-face and meeting the team is great too. When we have that meeting, we generally go over the project again ion person as things may have changed from when we first chatted in email. At this point, I would get a full spec and designs.

When I return to the office, I would go over the files and write my own technical specification and then go through that and write a full quote for the client with a timeline and cost. I would then email this to the client. Quote often, I get a one work reply either saying “Awesome!” or “Shit.”. Depending how that goes, I go onto invoicing.

Invoicing

I generally work on a two-part payment. Before the project starts, even before I open a code editor, I fire off an invoice for 50% of the total, this should be paid before I start any work. Some clients are awesome and pay the our they get the invoice, some are not so awesome and insist on having a 30 day buffer. This scares me, says they don’t have the cash flowing around. Upon insisting I won’t start work until I see that cash though, shows them I mean business. Insisting usually works.

The build goes on and a tremendous amount of email happens between us through the project. Then comes the nit-picking. bug-fixing stage, the it goes live.

After the go-live, I send the second 50% deposit. I always have control over the hosting environment, so if they don;t pay the second invoice in a reasonable time, I can always close the site. This hasn’t happened yet, but if the client even needs a kick in the arse to pay me, this will work.

Even if the clients client has not paid them and therefore not paid you, don’t be afraid to be a dick about payment. Your client has hired you, not their client. They knew before the hired you how much it would cost, they should have that cash in their account them they agree to hire you.

Sometimes the work spans are long enough time that invoicing in two parts isn’t really practical, which I can understand. Or it may be that you’re working on-site and nobody is entirely sure how long you’ll be there. In this situation, I would invoice weekly, ideally with the payment on receipt mentioned earlier.

If the client goes silent on you, do you best to get in con act with them. Tell them you’re going to et in contact with others who work with them, ask those others if they have has trouble contacting them. The prospect of being made to look like an idiot will scare people into contacting you or just silently paying you. Keep professional though, you don’t want to give them any reason to ignore you further. I for one hate abusive emails. I just delete them as soon as I see anything bad in there.

Bad clients

Sometimes the working relationship can go sour. Here’s a list of reasons I would call a client bad:

• They keep slipping in little features that are significantly add to the build time
• The spec wasn’t as tight as you thought and they keep changing their mind
• Cultural or political situations have changed and working with them goes against your beliefs
• They demand more of your time than you can give
• They treat you as an on-site employee

If any of the above happen, I finish the feature I’m working on (if I can) and confront them highlighting the issue. There may be chance you can fix the issue and continue work. If not, leaving the project at that point may be the best thing to do. I’ll leave the decision as to whether to bill up to that point or not up to you.

I have been in this situation before and personally felt invoicing for three days work after dropping them into a pile of shit (needing to find another dev willing to take the build on, mid way through) a bad choice, so I didn’t.

Some clients will take being fired rather badly. Deal with it as best you can, but remain graceful. You’re stopping the working relationship for solid reasons, stick to them.

Some clients will take being fired better than other and have a backup plan. The nice people will be gracious and ask for help in finding someone to help where you left off. I would try to help them out as best as I can. Don’t do any more work though, unless you figure something out like a new spec, in which case the working relationship is back on.

After

With some projects, the email I send thanking them for paying the final invoice will be the last communication between us. But most of the projects I’ve been involved with, the last email usually involves an introduction to the next project with them, see my introduction.

If I’m proud of the project and it looks great, I ask if I can feature the project in my portfolio. If they say yes, I them go and do this and tweet about it.

The cycle happens again.