There’s no doubt, that I am my own biggest critic; when I make an error of judgement I am furious with myself but at the same time I realise it is invaluable to make mistakes providing you ensure you know you’ve made them and you learn not to make them again.

My usual business model

For the most part, I work for web agencies. If they have too much work on one week/month or if a staff member is away on holiday and a big project has come in I go in there and help them out. I charge them a day rate and dazzle them with my professionalism and GTD attitude. I tend to shy away from client work because the extra work involved in dealing with clients often leads to less profitable projects (for me anyway).

Despite my business model going so well, I decided to dip my toe back into client work this week and have ended up doing more work whilst earning less money and potentially damaged my reputation in the process.

Along the way, I made the following errors of judgement:

• I didn’t fully scope out the state of the website code I was to be working with
• I didn’t fully research the cost of goods (stock photography) I’d have to purchase for the work
• I certainly didn’t factor the cost of said media into the quote
• I purchased images prior to getting client approval and was left with some expensive (and useless to me now) images

The work involved simple updates of site, a bit of cleaning up of the appearance of the text on the site (to make it more visually appealing) and to update the imagery across the site. However, soon after I’d started the project I realised two things:

1. The cost of the stock imagery was about £3 each (for the right size) from istockphoto.com* - way out of budget for changing 10-15 plus images.
2. The quality of the code was in such a state (thanks DreamWeaver CS2) that I would have to spend the majority of my time cleaning up the code to be able to make simple changes.

In short, a one day job ending up taking 2 and a bit days and still wasn’t finished at the end of it. This lead to other jobs being delayed (albeit only slightly) and this new client being unhappy with my level of service. I’ve had to swallow the cost of images that I should never have purchased and offer the client a discount because not all the quoted for work was able to be completed.

This means, I’ve ended up working for nearly 3 days (factoring in the meetings and communications) and at the end I’ll have made about one days’ pay. This is not good business. Perhaps I should get a job as Woolworths’ or RBS’ CEO - I am now perfectly qualified.

To make matters worse, the client originally suggested the work was about two day’s worth - a suggestion which I laughed off assuming there was barely a day’s worth of work in the whole kaboodle.

What should I have done differently?

I should have sat down and worked out how much images would have cost and factored that into my quote so £30-£50 worth of media wouldn’t come out of my pocket. I should also have fully scoped out the code and worked out precisely how long it would take to get the job done.

If I’d have done those two things I could have provided a much more realistic quote and then, had the client decided that was my price was too high, I could have moved on to the next job.

* istockphoto is not the only stock photography site, I am aware of others - but they do provide high quality, licensed imagery that is affordable. Other sites were either more expensive or not to a high enough standard.

Upon hearing about a Manchester-based PHP conference, I got quite excited; often conferences of this ilk are very expensive and once you factor in the travel/accommodation expense applicable to visiting London/Brighton/Dublin etc they quickly become unaffordable so a relative inexpensive conference on my doorstep was not to be missed.

What was good

• The price: Early bird tickets were only £52.25 - tremendous value
• The freebies: Lunch was provided, lots of people won free books and there was also food and free drinks after the conference (although I had to miss that)
• The organisation: This was a very well run event. I’m no conference whore but I have been to a few before and PHPNW was certainly the best organised I’d been to.
• Two tracks of talks meant that there good choice of what to listen to.
• I won a book (or James sat next to me did, but he already owned it and gave it to me)
• Lots of developers from all over the place. I had expected this event to be Manchester-centric but I met people from Ireland, Europe and I was really impressed by that.

What wasn’t as good

I don’t wish to appear offensive or ungrateful here, as I thought the conference was great but my biggest grumble was a lack of verve from some of the speakers. The topics of the talks were great - I was really looking forward to hearing them, but I found myself struggling to stay awake in some. The speakers were all very professional but I didn’t get the feeling they had done lots of speaking events before - the presentations were mostly bullet-pointed powerpoint slide and a lot of the speakers appeared slightly nervous.

I’m no fool, I understand that the price of the tickets means Zeldman or Kevin Rose aren’t going to show up and wow us but I did feel the presentations that I saw lacked a little personality. Often, the presenters only came alive when the time came for questions at which point they became much more lively and actually seemed to be enjoying themselves.

It takes a lot of balls, to stand up in front of room of nerds and present your expertise - it isn’t easy and I respect all the people who did it on the day.

Disclaimer: The conference had two tracks and for all I know, the talks I didn’t go to could have been fascinating and full of beans.

PHPNW 2009

I hope there is a PHPNW 09 conference, I think the inaugural event has set some great groundwork and I fully believe any teething problems will be fully ironed out for next year.

There is also undoubtedly scope to increase the capacity of the event: I named-dropped PHPNW 08 quite aggressively to as many PHP developers that I came in to contact with prior to the conference but in the end I only saw one developer I knew there. I’m not sure what happened there -  maybe people didn’t get to hear about this conference in time, but by next year I’m sure a bit of buzz will have been created by PHPNW 08 and the interest will be much higher.

Your opinion

Did you go to PHPNW 08? What did you think of it? Will you be attending PHPNW 09?

Whilst developing, Bean Counter, the one feature I’ve been most paranoid about is the PHP code quality. I certainly don’t consider myself to be the greatest PHPer in the world and I have this sense of foreboding, that when I finally release this app, the general consensus would be ‘Phil Thompson writes rubbish code’. If this app is successful then its code will be exposed to the criticisms of lots of PHP developers and they can be a cruel and unforgiving bunch.

These past two weeks, I’ve gone some way to ridding that feeling in the pit of my stomach by improving the app’s folder structure by I’ve turning it into a far more MVC-styled system. To be fair, it always was leaning towards MVC (even now it isn’t 100% of the way there) but I feel a lot more confident in it - it’s certainly a lot cleaner to look at.

Bean Counter file structure

• application
  • .htaccess
  • ajax
  • behaviour
  • class
  • controllers
  • images
  • inc
  • style
  • views
    • common
    • forms
    • layout
• site
  • .htaccess
  • cache
  • downloads
  • index.php
  • local_files.php

You may notice it takes a lot of inspiration from frameworks like Zend, Cake, etc. There is a solid reasoning behind this wholesale thievery;  its familiarity should hopefully make developers, who download it, feel more comfortable with the codebase.

The idea behind this app is that it should allow easy updating/editing for people’s individual requirements so modelling it on a conventional MVC structure makes sense.

Some weirdness explained

The images, style and behaviour folders are in the application folder whereas the cache and downloads folder are in the site folder - they should be the other way around (and would be in normal circumstances) but all the beta testing so far been on my server and so by swapping these folders around, from their usual location, has allowed me to share the application folder between multiple installs whilst making sure the cache and downloads folders are unique to each install.

The file local_files.php takes requests for CSS, JavaScript, and images from mod_rewrite and routes them through the application folder’s relevant structure.

What no models folder?

Models live in the class folder. Not all classes relate to models so, yes, I know this is bad form and I should separate them out again but at this stage I think classes that relate to database models and classes that relate to the application’s functionality are best left together.

So when is the release date?

After months of inactivity, I’ve started working on this app again and its currently in another round of beta testing which I hope will only uncover minor bugs. I think I’m quite close to a release date, I have the following things left to do:

• Finish the sales site
• Write help documentation
• Decide whether it’ll be free or not
• Beta test people installing the app locally/on their own servers

Prevention is better than a cure

If I have to spend a long time debugging IE6, it’s likely it’s because I’m fixing someone else’s code. There are certain procedures you can undertake when writing your CSS which will make sure IE6 headaches are kept to an absolute minimum and unfortunately, not everyone knows about them.

Rule 1: Reset those default styles

Prior to resetting styles, I used to get all kinds of problems cross-browsers with IE and Firefox. I started off using this:

*{
margin: 0;
padding: 0;
}

before moving on to the YUI reset and then finally settling on Eric Meyer’s Reset.

Rule 2: Don’t declare margin/padding and width on the same item

You must have been living under a rock, if you don’t know about IE6’s crappy box model. If you need to set a width on an item try not to set a margin/padding (on the left or right) on it too. I get round this by declaring padding/margin (depending on the design) to my <p>,<ul>,<table>,<hr> , etc elements.

In most cases, a designer will set the same guttering on all text on a page - anywhere from 8px to 20px (but often 10px) so:

p{
padding: 0 10px;
}

is often a great trick. Sidenote: I’ll always use pixels for the left/right margins/padding because as soon as you start to use ems, you can get discrepancies when you have items in the same <div> with differing fonts sizes.

Rule 3: Use valid XHTML/HTML

I’ve lost count of the times, when I’ve struggled with a layout that looks perfect in Firefox/Safari but awful in IE6. If it also looks crappy in IE7 then more often than not the HTML will be invalid with a > or a < missing. For some reason, the other browsers allow this kind of thing to go by unpunished by IE is a stickler for the rules.

I use the HTML validator Add-on for Firefox to let me know if my pages are valid.

Rule 4: Float nearly everything

When I write CSS I make sure virtually all my elements are floated - this works fantastically provided designs are of a fixed width - if they’re not a fixed width (they should be - but let’s not get into that) then you’ll need to use the clearfix solution (a lot) because if an item is floated and its parent element isn’t floated too, the parent element will forget its responsibility to be at least long as its child elements.

Debugging

I have over 3 years of IE6+CSS experience so I’ve seen most problems - and instinctively I know how to fix a most issues I stumble across but there are times when I can’t fathom what’s wrong. When that happens here’s what I do:

• Load up Windows XP in VMware Fusion (OS X) which is better than Parallels
• Load up Internet Explorer 6
• Make sure the IE Accessibility Toolbar is installed
• Use the Edit CSS option in the toolbar
• Then I start the ‘magic’

Trial and error

More often than not, problems in IE6 are caused by the width of items. An item one pixel too wide will knock columns underneath each other, but it can be hard to work out which element is causing the extra width.

Background colours

I’ll often set a backgroud colour on big elements

#content{background-color: red;}
#sidebar{background-color:blue;}

This let’s me see which element is the problem element

Hide elements

Then I’ll start to hide elements, starting with the biggest surrounding ,div> and working my way in. So if I start with:

#sidebar{display: none;}

the problem should vanish (along with most the of the page) but does the problem still go away if I try the following?

#sidebar .sub-item{display: none;}

or

#sidebar .sub-item .sub-sub-item{display: none;}

Using this method I can establish which item is causing the problem. Often it may be a <div>, a <p>, or another item nested several layers deep.

Checking for solutions

IE6 is an outlaw; it often invent its own rules by which to render CSS. Once I’ve discovered a problem element, there is often no rhyme or reason why it is causing a problem so I’ll try the following rules:

#sidebar .sub-item .sub-subitem{
position: relative; /* <-  try setting this if it’s not already set - it sometimes works wonders */
display: inline; /* display: inline often fixes the double margin float bug and */
display: inline-block; /* Sometimes this just fixes problems - no idea why */
margin: 0; /* margin can be a killer so take it off completely see if the problem goes away */
padding: 0; /* same as margin */
background-color: transparent; /* Sometimes IE6 hates background colours not being declared */
overflow: hidden; /* can sometimes stop columns too wide from breaking a layout */
zoom: 1; /* Sometimes forces hasLayout and fixes things */
}

I’ll often experiment with a few of these different rules with margin or display being my most popular problem solvers. I’ll also check Google for answers to see if anyone else on the web has encountered a random bug.

Fixing

Once I have my solutions I’ll put them in a separate stylesheet often called ie6.css and include it onto a page with a conditional comment. Making sure it is the last stylesheet imported/linked on the page. This is better than putting your fixing in with the rest of your CSS as it allows you to manage it better - that’s my opinion anyway.

Summary

That’s how I debug CSS in IE6. Do you have a similar method?

Since becoming freelance fulltime, I’ve probably worked about the same amount of time as I did before. I suppose I’m writing and chasing invoices as well as finding time to market myself but in the grand scheme of things I’ve not seen a tremendous increase in the number of hours I’m putting in.

Making those connection

Reading the comments on Elliott’s post, you’d think freelancing was the hardest thing in the world to do and he’s only making a success of it because of his high profile. The truth is that, Stocks’ high profile and freelance success undoubtedly owe more to his strength of character than a string of good luck and coincidences.

However, making good connections in the industry, is certainly the way to go if you wish to stay employed, but until you actually start freelancing, getting out there and meeting people - those connections will only trickle through slowly.

Talking yourself out of it

People will always find enough reasons not to go freelance:

• I won’t be able to find the work
• I’m not good enough
• I don’t have the connections

Those concerns are all valid and I’ve felt them too but there comes a time when you have to take the plunge. I decided to make the switch after getting my first on-site freelancing gig and realising that there wasn’t a magical trick involved - I met the agency convinced them I could do the job, then a week later I turned up and did a job I knew I was good at. Once I had that confidence, it was easy to start marketing to other agencies that I was a freelancer and was available for hire. It’s not easy but it certainly isn’t hard either.

Are you a freelancer? What made you decide to take the plunge and how have you found it?

1. Getting paid (on time)

The first fulltime freelance gig I did started towards the end of July 2008: my first freelance payment came two weeks ago (late September 2008). The job was two weeks long, so I started the job, invoiced after two weeks and patiently waited thirty days for payment like a good freelancer. Thirty days came and went with no payment so I got in touch with the accounts department and was greeted with a lie about about how one of my other invoices had the same reference number on it so my invoice would be paid only be paid that week.

Companies pay people to prevent people getting paid. Sound strange? A good accountant keeps as much money in the company as possible because they have to make sure wages and utility bills get paid first. For a relatively insignificant freelancer, getting paid can be an arduous task.

Solution: Make sure you contact the payment department before those thirty days are up and keep the relevant people on their toes.

2. Remembering people’s names / brew requirements

I work onsite (most of the time) and I really like getting to know other people, but it can be really hard remembering the names of the 30 people in each office of 10 clients - let alone trying to remember how they all like their tea/coffee.

Solution: Draw a little desk plan and write people’s name on it and where they sit. Yes, I am a nerd but this really does work.

3. Music (or a lack thereof)

The only thing worse than a musicless office is an office with awful music. I once listened to the soundtrack to karate kid at one place and I’ve spent the last three weeks near constantly listening to the Kings of Leon’s new album - not in itself awful but very tiresome after 3 plays a day.

Solution: This isn’t the 6th form common room so you can’t just commandeer the communal stereo and headphones make you look rude. This is something you have to live with until you feel more comfortable to suggest some musical rotation.

4. Different coding practices

I have a set way of doing things that has made me good at what I do so when you go to a different agency and find they want to you to completely change the way you code it can be a nightmare unless those coding practices make sense and are equally good if not an improvement on your own.

Solution: If their coding is better than yours, soak it up but, if they’re code is awful and they force you to lower your standards - you need to educate them on best practice. If they won’t listen to reason, they can’t be helped.

5. A lack of trust

I’ve been refused FTP passwords before and had a Lead Web Developer stand over my shoulders and type in the password onto my machine. My accent may have a Liverpudlian lilt, but your web server is not a Ford Escort and it will be perfectly safe in my hands.

Solution: Don’t work there again.

6. Not being allowed to use my own equipment

If you have good equipment, then I don’t mind if I have to use it - actually I’ll probably enjoy using it, but when you force me to use a 5 year old PC or worse a new PC running Vista with no applications installed then my work may suffer. I have a macbook, please let me use it - I’ve spent a lot of money setting it up so I know it gets the job done.

Solution: Make friends with the IT department and let them play on your macbook once they see you’re not a virus peddling fiend they may let you use your mac.

7. Isolation

Working from home (when I do) can be quite lonely. There’s no idle chit-chat between colleagues and the only way to get help on a coding problem is to Google for answers and no-one makes you brews.

Solution: Try to work onsite where possible

8. Trying to appear busy but not too busy

Here’s the big catch22 of freelancing - if you’re too busy (or appear too busy) no new clients can book you but if you don’t appear busy enough then no-one will want to book you either. Often clients want you to drop everything and work for them at a moment’s notice but if you already have bookings that can be really bad for your reputation to simply drop one client or another.

Solution: I haven’t found it yet.

9. A lack of instructions

Sometimes, it’s obvious what you’re supposed to be doing and othe times you’ll be asked to get on with X with no clear instruction fo what it is you’re actually suppsoed to be doing or how long it is supposed to take. I’ve finished jobs meant for a full week in under 2 days and I’ve laboured over for a few days that the client thought would only take a few.

Solution: Ask client what they want exactly and when they want it by. You can potentially sound like broken record if you keep asking the same question but needs really must.

10. You don’t get sick pay

Last Friday, I was sick as a dog but I had to go to work. If I get sick in the middle of a freelance gig I’m f**k’d because I won’t get paid. Luckily, I don’t get ill that often. Although, in the past, I’ve had fulltime jobs that didn’t pay sick pay.

Solution: Don’t get sick

Do you freelance? What do you find are the worst things about it?

Organised by local freelancer Matt Booth, the meetup promised to be less geeky than other similar events across the city and it did seem to be populated by a nice hybrid of front-enders, back-ends and er, flash(ers).

Meeting people is easy

I met quite a few new people including, Paul Smith, some guys from Fudge, some people from Reading Room and some more people from LOVE. but, to be fair, I went with them so they don’t count.

I didn’t exchange any business cards; not that I have any anwyay, but it didn’t feel, like the forced breed of networking shindig where business cards and cheesy elevator pitches get exchanged between goons in suits. It felt more like a night at the pub with the twist that striking up a conversation with a group of strangers was made much easier due to a combined interest in… web design.

The meetup mostly took over the population of the bar but there were a few non-digitals in there - poor them, if they wandered into a conversation about Actionscript or CSS and got stuck.

Summary

Networking can often be fantastically dull, but it is important for both freelancers and fulltimers to actually get out there and get on with it. I’m grateful a local meetup of this calibre now exists which allows us all to get to know our peers a bit better.

Every business, even freelancers, should fully catalogue what their expenses are: for the one big reason - taxes, but it it’s also really helpful to know how much things are really costing you so you can work out how much you need to charge, and how much work you need to do to break even.

Here is a short list of of my outgoings over the last 18 months:

At the time fo writing this, £1GBP is worth about $1.84USD (source: XE)
* Yes a PC/laptop would be cheaper but it would be less fun.
** Don’t buy RAM from Apple direct - always get from someone like Crucial - it is so much cheaper. I’ve made that mistake in the past.

More costs

I could go on and provide more and more costs, for heating/lighting, networking events, print cartridges, etc but I don’t want to bore you to tears. However, I will try to give you a brief insight:

Software

Adobe Web Premium CS4 costs around £1500 - and needs to be updated every other version - meaning if you have CS3 now you can probably get away with waiting for CS5 before upgrading. Some of the software you need to be a front end web developer include:

• Design & Development
  • Adobe Photoshop
  • Text editor e.g. Coda ($99) which is much cheaper than DreamWeaver
• Browser testing software
  • VMWare Fusion/Parallels for testing sites
  • Windows XP
  • Windows Vista
  • Litmus app
• Communication / Project Management / Finances
  • Microsoft Office/iLife
  • Gmail
  • Basecamp (Project management)
  • Campaign Monitor (Email sending)
  • Beanstalk (Hosted SVN) with Versions (SVN GUI)

Conferences

Conferences can cost anywhere from £50 (PHPNW) to £125 (dconstruct) to £395.00 (Future of web apps) and then you have to pay for your accommodation and travel.

Conferences can be invaluable, you meet like-minded people and make connections, discover new ideas and can leave you feeling very motivated, but come on £395 to feel motivated is a bit much.

Summary

This article is not meant to be a ‘oh woe is me… it’s so expensive to be a web developer’ moan, I’m merely pointing out the costs that a lot of people (myself included) overlook when they set out to work on their own. It is so important that you fully comprehend what you’re spending to ensure you can still afford to buy food and pay the mortgage.

Please feel free to comment on what you’ve found to be cheap/expensive when starting out on your own. Money saving tips are very welcome… unless you’re going to tell me I should use the GIMP instead of Photoshop or Linux instead of OS X. Although I am open to some alternative free/cheap software provided it does the job well enough.

Strategy 1: the giveaway

I keep in contact with all my clients via an (admittedly quite sporadically-sent) email newsletter. This is basic marketing and something that is often recommended for businesses. Thing is, nobody actually reads these emails - at best they skim read them.

The first email newsletter I sent out went to around 10 clients and it mentioned my comings and goings, some links to the blog, some industry news, yadda-yadda-yadda. I got maybe one response from email.

For the next email newsletter, which was sent out 6 weeks later, I told you they were sporadic, I resolved to do something a little different. I announced that I would reward any existing clients, who referred me to a new client, with an iPod Nano. The theory was this: people like free stuff, people like free iPods even more and if someone was thinking of recommending me or another guy they might swing for me instead. That email went out to around 15 clients and roughly 6 people emailed back within a day telling me they were intrigued about the offer - wanting to know why I was doing it and they all asked to be kept informed as to how successful it was.

So was it successful?

It all depends how you look at it. I got only one new client via the offer but I was more impressed by the increased contact with my existing clients - it got them talking to me again, inbetween jobs, when otherwise they may have forgotten about me. The picture to your right shows me giving away the iPod nano to fellow freelance web developer Chris Gibson who referred me to a client in July.

Chris Gibson, he of iPod winning fame, said:

‘One of my clients needed a freelancer to help out on some projects while I was away, and I passed on Phil’s details because I knew he’d do a great job for them. I was delighted when Phil told me about the iPod, but I recommended him because of his ability and his professionalism. I wouldn’t hesitate to recommend Phil to other clients and contacts in the future.’

Strategy 2: the interesting email

My target market, for the most part, is bigger web agencies who need freelancers who work when they get too busy or when their permanent staff are away/sick. These guys are usually very busy and often sending them a generic email telling them who I am and what I can do can get overlooked.

Bearing in mind, that these agencies are often creative at heart, I came to the conclusion that they’d appreciate something a little different than a run of the mill plain text ‘hello my name is Phil, I’m a freelancer email’. So I designed a HTML email based around the theme of a lonely hearts column with the tagline:

Has your heart been broken by one too many bad-boy freelancers?
Get in touch with Phil Thompson… he’ll make you feel like a start-up all over again.

Once again, this increased people’s reasons to talk to me - with quite a few new agencies responding to my email asking me questions about my availability, services and rates.

Summary

The iPod giveaway was a pure gimmick and maybe I’ll come up with more gimmicks in the future, but the HTML emails was certainly more successful in terms of gaining new work. I intend to follow up the HTML email with other themed emails in the future - I see them as a great way to get people interested in my services at very little cost. Especially when one of my services is email marketing.

What ideas have you come up with to try and get new business?

Google Chrome is only available for Windows right now so Mac users will have to wait for the time being. Although to be honest, Google Chrome isn’t enough to switch people from Safari nor Firefox for that matter. However, it is more than enough to encourage people to switch from Internet Explorer 6 and 7.

As a developer, I’ll continue to use Firefox (for now) because the Web Developer toolbar, Firebug, LiveHTTPHeaders and all the other add-ons are just too good to be without.

Target market

Where I hope Google Chrome (terrible name by the way), will catch on is with a less technically-minded audience. Provided Google can convince them to download it (and if anyone can Google can) then this will be a major success that could really reduce the number of people using Internet Explorer to the minority.

Appearance

Some people have criticised the new browser’s looks but, for me, I think it looks just fine. It doesn’t look garish nor does it look boring and I think it will appeal to the audience it is aimed at perfectly.

I do think that the choice of name, Chrome, is a bit bizarre. Safari, Netscape and Internet Explorer are great browser names - they give the user the idea that they are exploring the world which is what you do when you go online. Internet Explorer is an especially great name, because it literally tells the user what it is for whereas Chrome doesn’t at all but as the Chrome brand develops this will probably become a trivial non-issue.

Usability and speed

I can’t really fault Chrome for how it works. Prior to downloading it I thought having the tabs above the address bar would be weird but it isn’t at all. In fact, it may more sense in many ways. In terms of speed, I haven’t noticed it to be particularly quicker than other browsers but then I haven’t used it extensively yet.

What do you think?

Have you downloaded Google chrome yet? What are your thoughts?