How not to alienate visitors who just want to talk

Posted in Marketing on April 7, 2010 by Andy Wickes

Too many websites owners are more concerned with gathering data from their users rather than initiating a dialogue. If your users want to talk to you, don’t make it difficult.

It’s an age old gripe amongst web users. The over-long form. Field after field of questions and tick boxes when all we want to do is ask a question. A simple question:

‘When is this product likely to be back in stock?’

But still we are asked for our fax number, postal address, age, marital status and whether we have any ‘dependents under 18 living with us’ The mind boggles.

Now we’ve lived amongst marketeers long enough to realise that this is their work. This is an opportunity to gather as much profiling data about a consumer as is possible in order to

assist in customer relationship marketing
better inform the brand of their audience’s habits
aid new product development
a combination of the above

While I’m no fan of these forms, I count myself as at least 30% marketeer and am therefore aware that in my experience alone, this data has always gone to good use. To providing a better service / product / experience.

What I find remarkably absent though, is the website owners willingness to engage their audiences in a dialogue on their terms. I accept that I the website owner would like all this information, but do I deserve it? Do I? Well, in a lot of cases, no, you don’t.

If I want to open a dialogue with a brand via their website, I want it on my terms, and I often care little about the future requirements of that brand, no matter how earth-shattering my responses might be to a short questionnaire.
To that end I thought I’d give a few examples of how we can build better websites, where we deliver dialogue to our users, rather than just delivering data to our clients. And then perhaps, we can make people care about our needs, by good old customer service.

Social Networks

If you feel your audience have a significant presence on these networks then be sure you do. Publicise how to get in touch with you on these networks, and when people do respond in a timely fashion. If that is there chosen way to make initial contact, then respect that, and in time you will build their loyalty. Answer queries and in time if that prospect decides to enquire about your product or service then they will call and you can ask all the ancillary questions you might have then. By that point they are a hot prospect and already favourably disposed to you and will do so willingly.

Telephone Numbers

Provide one. Always. There are people out there who will always prefer to call. I know because I am one. And if that is their choice, then do not put obstacles in their way. Don’t make someone search endlessly through the site to find it. Don’t make them read pages of FAQ’s and Knowledge Base articles before presenting a phone number after one last click of a ‘Was This Information Useful – Yes/Know’ button. Make it easy to open a dialogue, and then if you have a genuine need for profiling data then you can always ask if they would mind asking a few questions over the phone.

After you have answered their questions first of course.

Contact Forms

If we haven’t already said enough about these already, then some further observations. Your customer has a query about you. The very least they need to raise (IMHO) are the following:

What my query is:

How would I like to be contacted regarding this?
When am I likely to get a response?

Now this is a very slim form by anyone’s standards. But at its core is the idea that you are putting as few obstacles in your audiences way as possible, and providing them with a chance to choose how they are contacted and informing them as to when that will be. Deliver on those last two and you are in business. Again, the dialogue is made easy, and is delivered on your audience’s terms.

Ask Questions

Why is this one so often overlooked? You have a CMS. You might even have a blog. You might even have comments enabled. You want to know some information about your audience, and yet you still build forms so convoluted that to ask a one line question I must still answer 10 unrelated ones. Ask questions of your audience on your site. Add them into comments on your blog. And provide an email address where if they would be so kind, they might want to send their thoughts / ideas about such and such. Again, any dialogue is on their terms. Entered into at their own will, with as much or as little effort required as they see fit.

Credit Where Credit is Due

Quite often a customer will ask good question about your product. You provide them with a swift answer and then pat yourself on the back for your helpfulness and timely response. The trouble is you have scores of similarly confused customers you could also benefit from the same help. So post the question on your site – ‘Mr Andrews of Lambeth asked a great question – where do I find the off switch on this petrol chainsaw?’ – Well, it’s on the handle, just by the power cord. Thanks Mr Andrews!

Credit your audience with asking a valid question, and then broadcast that to your other clients. Some of the best customer service is born out making public that you are only human and like everyone else, sometimes make mistakes.

Mind Your P’s and Q’s

Be grateful. For goodness’s sake, be grateful. As Paul has said in the past, people are aware that their opinions and their data has a value to brand / business owners, and so if they give their time and their opinions to you free of charge then the least you can do is be grateful. If you are a small business or a start-up, then this could be the only chance you might have to have a one-on-one relationship with your customers. If you deal only to 10 or 20 clients then you have no excuse really not to have a close relationship with them and to provide a good customer experience. Larger organisations have to use a more automated approach down to sheer volume. But even these, in fact primarily these, can benefit greatly from making their experience suit the user, rather than the website owner.

So there it is. Think for a minute about what is really going to drive the sales process. Are you a more profitable business because you know all there is to know about your prospects, or because you are accessible and helpful when dealing with your customers? Do you deliver what they want, or what you want? Is your website a barrier to real contact, or is it a conduit for it?

Food for thought.

Your Starter For Ten: 10 things never to leave out of a web design brief

Posted in Web strategy on February 25, 2010 by Andy Wickes

Writing a web design brief that is genuinely useful is extremely hard. In this post Andy Wickes takes you through the process to ensure your web designer is as informed as possible.

Brief writing really is a tricky skill to master.

Some agencies like to receive a brief that gives a steer as to the feeling, tone and style of a creative project. Others are far more concerned with the minutiae. And some prefer to write their own briefs based on a consultation with the client.

There is no right and wrong way to draw up a brief, save for the fact that good briefs will provide clear and detailed guidance to an agency, and in doing so produce good results. Bad briefs will do the reverse, wasting time and money and no doubt fraying nerves and tempers to varying degrees.

Web projects in particular have peculiarities all of their own, and in my experience this is for two reasons.

Firstly they are a hybrid of pure design and technology. Most project managers will be well versed at briefing in creative projects such as print, but not all will have had experience in web projects.
Secondly, it is often hard to know what level of detail to provide a web development agency when it comes to your technical requirements. Should all the guidance come from the agency? How do you know what you want when you have never been in this position before?

The simple answer is you can’t. But you can still write a detailed brief by following these simple steps, and vitally by knowing your own business. Whether you have managed a web project before or not, you will always know a lot more about what you do and don’t want than you might think. Crucially, don’t focus on the technical detail at the expense of the obvious. The list below might form the basis of your briefing document, with all the detail specific to your project tacked on as additional points.

In no particular order, here are ten ‘ignore them at your peril’ tips that any relative novice to a web project ought never to exclude from a brief.

As ever, we’d love to hear yours, so be sure to add them to the comments at the bottom of the page.

1. Budget

There really is no benefit in withholding something as crucial as this, and yet very often that is the case. If you don’t have a fixed budget then perhaps specify a price bracket that you are comfortable with – “between £10,000 – £15,000.” The real reason an agency will want to see a budget is so they can better tailor their recommendation to your expectations. It may be that the best solution to your problem is a site with online ordering, or perhaps a community forum, but if this is not within budget it is therefore discounted. With this, as with every other element of a briefing document, it makes so much sense to be open and honest. It will save you a lot of time in the long run.

2. What do your users want?

It might sound like a simplistic statement, but it is rare brief indeed that is written from the perspective of the users. More often a website is built based on what the client wants the public to see of them and their services, rather than thinking of how the site might better aid their customers or prospects. Again, this is a simple wrong that you can right just by knowing your business. Speak to your customers and get them involved in the briefing process. Ask them how your new website might improve your working relationship? Could it offer functionality to make processes easier? Ask as many of your customers as you are able and I think you’ll be pleasantly surprised as to how keen they generally are to be consulted in such a process. When you put this down in writing to your agency, think about creating a pen portrait of your typical customer. Typically what are they like, what do they do with their spare time and their spare money. Bring them to life a little.

3. What do your staff want?

Again, very often overlooked. If you work in a medium to large sized organisation, I would put money on it that you will have numerous processes that could be made easier or even automated by the clever use of a website or an online application. And all you have to do is take the time to consult your staff and bring them into the project planning process. Perhaps you have staff who spend time posting details to customers – this could be handled online with a support section or with downloadable documents. For companies of 50 staff and over I’d strongly suggest consulting all team leaders or managers as to how a website could free up their staff’s time, allowing them to focus on other more vital tasks. You need to ensure that by the time you consult an agency to design and build your site you have considered every way in which that site can streamline back office functions.

Image of company HQ

4. What Sites You Like

And not just a page of links please. Do some structured online research of what websites might be useful to present to the agencies. This should not be seen solely as a beauty contest where you just present designs that you like. Try to find sites that meet some pre-determined criteria. For instance:

Links to your competitors’ sites
Which of these have clever functionality (which, what, and why is it of interest?)
What sites have design features that I like (any sites, what features do you like and why)
What sites have a photographic style that you like?
Any sites that have a typographic style / tone of voice that appeals

In all cases be as specific as you can as to what it is that appeals to you about the sites you list, being mindful at all times as to how these design features or functions will benefit your users, rather than letting your own preferences get the better of you. If your marketing team have a style guide detailing how your branding must be used then that will clearly need to be sent to your agency before they put together designs.

BBC homepage

5. How Do You Update Your Site?

Copywriting book

It’s a given that a site that is regularly updated with useful and interesting content will attract attention and drive brand allegiance. This much we know. So with that in mind you need to think practically about how you and your business plan to produce this content. As Paul Boag has pointed out, as a project manager your role needs to be one of a ‘brand evangelist,’ encouraging people at your organisation to get behind the website and to produce content and ideas that keep it fresh and engaging. Being clear about what content you are able to produce, what content you need to produce, and specifically who will be doing it, will be invaluable when you scope out what Content Management System you require. It will also help you put in place a web editor or editorial team within your organisation that is already gathering material ready for launch, while the site is still in production.

Do you have any provision in house to resize graphics? Can you source and edit photography if you need to update images? If not then you will need to be mindful that your agency doesn’t produce a design that relies on retouched photography that you can’t maintain. All this detail is, as I hope you can see, crucial.

6. Content Management Systems

Now it’s quite possible that you have either never even heard of branded Content Management Systems, or if you have your experience of using them might be limited. And that’s fine. Being realistic about exactly what level of control you require over a site is fundamental to ensuring that you (a) get the system that is right for you and (b) save money by not developing unnecessary features. So often I hear that question asked ‘What level of control do you want over your sites contents?’ to which the reply is always the same – ‘total control.’ The questions ought to be ‘what level of control do you really need over your sites’ content?’ Hopefully you now know exactly what content you will be producing in which case you will know what level of CMS edibility you must have, and any further functionality you can afford is a bonus. This level of detail is essential for an agency to accurately price, and there is little point in them spending weeks (as they may do) constructing a CMS where only a small percentage of its capabilities are actually used.

Here more than anywhere the devil is in the detail. Think about exactly what control you need. Is it just over text? Do you need to update images? If so, on what pages? Do you need to add files for download, create links, create pages, restructure pages, display news or content from third party sites or provide a facility for customers to comment or get in touch? Don’t assume that any of the above comes as ‘standard’ with any website. Granted they are common requests, but if you are to give clear instructions to an agency, and vitally get value for money, think about exactly what you want well in advance.

WordPress.org

7. Timings

OK, another obvious one. And one that is common to any endeavour right? Building a website, producing a brochure or building a shed. You need to know what is involved and when it’s needed. But websites still often catch people out. More so than any other project they tend to invite opinions from all corners. Some advice to help you on your way with this one; be clear from the beginning who makes up the website project team at your organisation, what the process of approval is, and who is sourcing content. Note the last point. Who is sourcing content? Possibly the greatest cause of delays in web projects come from an under-appreciation of just how much time it takes to source images, text and quotes for the site. Bear in mind that this goes on alongside your day job. Ensure you allow time for sourcing the material and getting approval from your management team. You may also wish to show any new designs to customers to source some opinions from those people who matter most. Presenting accurate timings to an agency will result in a far smoother project. Agencies can anticipate work better, and therefore allocate the best resource to the project.

8. Measure your Success

Has it worked? How will we know? Has it addressed the problem we had before, or do we have the same problem only with new pictures and copy? Put simply, this part of the brief will encourage you to distil precisely what the problem is that you are addressing with a new site. Then you need to address directly how you will judge whether the new site has been a success. That might be an increase in enquiries, newsletter signup, sales, visits or a drop in telesales calls as people rely on online ordering. Either way, be clear about this so you can put in place a method to record this data. It might be an analytics package that does this, or it might be training for telesales to encourage them to ask how a customer learnt of a promotion. Either way, this needs to be thought about in advance and communicated to the agency so they fully understand all factors they need to consider to achieve your goal, and then provide clear evidence of that.

9. The Future

How do you see the site progressing in the years to come? This is another reason why it is so crucial to have a website working party within your organisation, and for you to encourage people to take part in the sourcing and publishing of new information. If you have a vision for the future of the site then communicate this to your agency, as they can not only make recommendations as to how this might be achieved, but they can also factor this in to their initial designs. Have you scheduled any surround activity that will promote the launch of the site? Perhaps you have PR launching, radio, advertising or e-marketing all set to coincide with the live date of the site. For goodness sake don’t keep this a secret as all of this will be crucial for you web agency to know.

10. What exactly is it that you do?!

Never assume that your agency will simply understand what it is that your business or product does! And never assume that they don’t need to know what you do because they are simply building a site from copy and images supplied. Take time to give a short(ish) description of what your business does. Explain what sets you apart from your competitors, and what is special about your approach to your work. Agencies will work with a lot of customers who each offer a variety of services, and once they understand exactly how your business operates you can benefit from their experience in servicing similar operations online.

Pile of smarties with one odd one

More advice

Writing a good brief is just one of the challenges faced by website owners. For more advice on everything from hiring a web designer to planning the long term future of your website, buy the Website Owners Manual by Paul.

The Ultimate Website Prelaunch Checklist

Posted in Mobile, Web strategy on February 8, 2010 by Andy Wickes

All of a sudden the site you have been working on for months is approved and the client wants it live. However, things can still go horribly wrong if you are not prepared.

We’ve all been there.

After months of development, meetings, conference calls, protracted arguments over typography, photography, colour ways and copy. All of a sudden the site is approved and the client wants it live.

Do you think to yourself, ‘I know every pixel on this site inside out’ and put it live?

Hopefully not. You’ll have a printed checklist which you complete before you go public.

By no means is this an exhaustive list. Neither is it presented in any particular order. Your own checklist will be very much tailored towards your own individual clients and the type of project you are delivering. Be sure to add your thoughts and suggestions to the comments at the bottom of the page.

Either way, get your team together, get out the red pen and start ticking them off.

Copy Checks

Check your spelling.

If it comes down to a web designer to highlight the smelling pistakes of a copywriter then so be it. Show the world you are no slouch and run a spell check. Better still, get your copywriter / project manager to do this. Be sure you check for widows or orphaned items in important paragraphs too.

Check your tone of voice.

Ensure this is consistent across all your pages, that your audience is being addressed the same way throughout the site. If your services include ‘Research & Development’ ensure it is expressed using ‘&’ everywhere it appears, always with capitalisation, and if you display times and dates be sure to express them the same way throughout. This is a cornerstone of well-crafted, easily scannable copy.

Check your details.

I’m quite serious about this. Phone all phone numbers you have been supplied. Do they work? If you’re building a site for The Royal Albert Hall, do they answer? And are they aware you are shortly going to launch a site, with their number on it, inviting thousands of people to call for more information? These are crucial checks to ensure that the entire marketing process, right down to (phone) calls to action are prepared for the site going live. Check email addresses you have been supplied and make sure they work and are being received by someone. Oh, and check they are not still pointing at you for testing – make sure the clients email address is specified when the site goes live.

Check through any ‘hidden’ copy on site.

Look at ALT text and ensure it is descriptive and not just ‘XXX’ – read through any text within Javascript functions, failure or alert messages, and also and remove anything potentially embarrassing or plain unnecessary.

Make sure you are not going live with any test copy on your site.

Check for instances of ‘For more information call XXXX,’ or worse still, ‘At ACME and Co we pride ourselves on [Dave, has the client approved the mission statement yet]‘ You get the picture.

SEO

Check your keywords.

Ensure you have your meta description in place, and that any keywords are suitable for the site. Do the keywords appear in your site copy where appropriate? Turn off your style sheets and read your site as a search engine will, and check your keywords are written in HTML and not all contained within images.

Check your titles.

Do you pages have relevant and descriptive title tags, and are your page names suitably descriptive.

Check your URL structure

Google has taken considerable steps within Webmaster Tools to reward site owners for declaring, and being consistent about canonical URL’s. That is to declare to Google which URL structure you will maintain on your site, to avoid the duplicate content penalty. So if you choose example.com/products over www.example.com/products, then check to ensure the links within your pages follow this convention.

Check you have a sitemap.

Generate an XML sitemap and submit it to Google, Bing, and Yahoo. Gsite Crawler is a great tool to help create these automatically for you.

Set up analytics on your site and schedule any weekly reports that might need sending to your clients, and also set up any statistical alerts you might need to notify you of any spikes in traffic that might signify malicious activity. Stats packages worth your attention are listed in the URL’s below.

haveamint.com

Standards and Validation

Clearly this is not something that should be left until the last few days prior to launch. But you should always make one final sweep through your content to check for validation issues. You should be checking your HTML, CSS, Accessibility and your Javascript. Quite often you can encounter validation issues late in the project with the addition of javascripts from a third party if a client has reporting software they wish to use, or if you are carrying advertising or inviting referrals from an affiliate network. As these are so often just thrown in to the code at the last minute it is vital to check that they don’t interfere with functions that were (up until then) working just fine. The Developer Toolbar for Firefox is a great time saver when it comes to validating your HTML and CSS, with the WAVE toolbar being similarly indispensable for checking against WCAG guidelines. That said there is no substitute for a good working knowledge of the WCAG guidelines as so much of them cannot be checked against by a plug-in, and requires common sense and a keen eye to avoid problems.

Web Developers Toolbar

Site Functions

Does everything work?

Again, this should have been tested long before now, but don’t go live without checking it. Often you will have moved a site from a development server to a production server in the run up to putting it live, and that may have upset your file structure. Maybe you have an API which relies on the address of a development server to work and will need altering if it is to work at the live address.

Check your search facility

Check your search facility if you have one and make sure that is pulling in results. Also check for dead links across the site with something like Xenu’s Link Checker.

Screenshot of Xenu

Check all browser variations

Check all browser variations that you promised to support, all screen resolutions and ensure that your site degrades gracefully without the support of Javascript and Flash. Your site should be easily interpreted by a screen reader with CSS switched off, and this can be checked by downloading a text only browser such as Lynx for the PC.

Think about common web conventions and whether your site breaks them. Are all your links consistently styled? If all links are underlined, check that no text is underlined for presentational reasons that people might mistake for a link.

Don’t forget to set up a print style for your site.

It is stunning quite how often this ignored. Insert this line into your <head> tags and create your print style sheet.

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

Security

Ensure you have your site files backed up, but assuming that this is something you do as a matter of course, ensure that you are backing up any databases on the website that might contain important customer data. There are services and applications who can automate this for you such as Site-Vault and Iron Mountain, providing you with the peace of mind that only a reliable backup can bring.

Screenshot of Site Vault website

Check your form fields against SQL injections, and test any anti-spam functions you have in place to prevent spam bots.

Protect any sensitive pages

Protect any sensitive pages or folders from being indexed on search engines by putting in place robots.txt files and by excluding them from within Webmaster Tools / Bing / Yahoo Site Explorer and also consider whether you need to use an htaccess file to disable folder view within directories.

Performance

Increasingly this is becoming more an issue. With rumours of Google rewarding faster sites with better rankings it is crucial that your pages load as swiftly as possible.

Safari 4 has a great tool within its developer menu which checks the speed of your pages downloading, and highlights which elements take the longest and therefore might need attention.

Check your image optimisation with a tool like Smushit.

Smush.it website

Check you have caching enabled if appropriate.

If possible consider the use of image sprites to reduce http requests to your site. SpriteMe.org offers simple online solution that might get you started.

Minify your Javascript and CSS files using a tool such as YUI or YSlow from Yahoo to ensure your code is delivered as swiftly as possible. Firefox add-ons such as Dust Me Selectors can help to remove unused selectors from style sheets, helping to keep file sizes down.

Legal

Those lawyers get everywhere. Links to legal policies are so often added to a footer element on a website and then given no further thought until moments before go live.

Copyright

Check that this is set to automatically refresh from the time stamp on the server, and that the copyright owner stated is correct. It won’t always be the client or brand who should be credited.

Terms and Conditions

If your site has a promotional element or takes payment then you will need to make available t’s and c’s. Always consult either the Institute of Sales Promotion or a lawyer for the best advice on these, or if they are supplied to you then make sure they have been checked.

Privacy Policies

If you use cookies, capture data, or distribute data, then you need one. The best advice is always to be honest, and to state clearly what you collect data for, how it is stored, and to whom might it be passed. So if you this might be you then be sure you have a clear statement explaining all of this, or least provide details of how you can be contacted for further information.

Company Registered Information

If you are a registered company then you must display on your website the registered company name, number, and address. Simple, but so often forgotten about. For more information visit either Companies House or Business Link online for more information.

Companies House website

Add icons and error pages

Add your favicon.

And while you’re at it, do you need one for mobile devices such as iPhones? Add this into the <head>

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

And this for an iPhone

<link rel="apple-touch-icon" href="/favicon.png" />

Create 404 pages.

Crucial for so many reasons. If the project is a re-design then search engines will have cached links to pages that will no longer exist. Use 404 pages to present users with links to where that information is now located. Webmaster Tools provides an easy way to produce 404 pages if you aren’t an experienced developer, but ignore these at your peril.

Example error page

Great Free Software for Web Designers

Posted in Reviews on January 18, 2010 by Andy Wickes

Ask anyone who has just upgraded the software on their Mac to the latest version, or even splashed out on the latest Creative Suite and they will say the same thing: Software is EXPENSIVE.

Now imagine you are an agency with 12 designers who all need (want!) to move to the latest version of Creative Suite. Even more expense.

Now imagine you are a looking to learn web design and don’t have pots of cash to spend on the industry standard software. How can you get your hands on a suite of software tools that will help you plan, design, build, debug and deliver a website without spending a penny?

Here’s how.

We’ve compiled a list of free software, mostly for the Mac, but with a few exceptions where absolutely necessary! We’ll take you through the process of planning, completing and delivering a project, and what free software is available to you at those stages.

Be sure to add your comments below and let us know of anything we have missed.

Messaging & Communication

For email on a Mac, Apple’s Mail application is pretty faultless. Good alternatives are out there for free such as Thunderbird from Mozilla, but the trainable Junk Mail filter in Mail and recent improvements in handling multiple accounts keep it head and shoulders above any competition here. Integration with iCal and Apple’s Contacts application add up a pretty solid messaging suite.

Apple’s Mail is also great at handling RSS feeds, but if you prefer a separate RSS reader then try NewsFire RSS. Designed squarely with the Mac in mind it allows you to organise multiple feeds into neat, manageable views and label your feeds according to pre-determined criteria.

If you need an instant messaging client then look no further than Adium. With support for a wide choice of account types, regular nightly builds and the latest release being optimised for Snow Leopard, this really is the best IM for the Mac. Don’t forget that Skype still offers a free service and so cost need not be a worry when keeping in touch with clients.

Lastly I’m going to mention DropBox. Not that it needs further plugging, but it is still a fabulous free service that simplifies not only file synchronisation across multiple computers but file delivery as a whole. 2 GB of free cloud storage gets you up and running and the ‘Public’ folder system allows you to provide large files for clients to download, rather than clogging up email with large attachments.

Project Planning & GTD (Getting Things Done)

If your clients are working on PC’s then the chances are you will be receiving emails with Microsoft Office attachments. Fine if you run iLife, but if you don’t you will need NeoOffice. Much like Microsoft Office, this equips you with applications for Word Processing, Spreadsheets and Presentations, but vitally the ability to open, edit and save back to the common .doc, .xls and .ppt format. The latest build even supports the .docx, .xlsx and .pptx formats.

Wireframing page layouts and even the creation of site maps can be handled in the brilliant Go Mockingbird. This online app allows for site mockups to be created with page hierarchies that link to each other, and for completed projects to be shared online. My advice is to secure an account for this app while it is still free.

Mockingbird

To keep you focused on tasks and deadlines we’d recommend a look at TaskMate. It is refreshingly simple to use and its devotees (of which there are many) tend to stick with it despite the increased uptake of more feature-rich, paid-for applications such as Omnifocus.

Another name that keeps cropping up is Xpad. This hugely popular app allows you to create ‘drawers’ for each new project, into which you drag and drop files of any type to keep them organised against pre- defined categories.

If you are on the move and have an iPhone then free apps such as Evernote and Remember the Milk allow for note-taking, as well as images and audio files (in the case of Evernote) to be stored in the cloud for reference later on.

Keeping track of time while you work is made easier with Lumina (recently renamed from iClockr) So simple it barely warrants explanation, but essential if you are to keep track of resource on each project and bill for time accurately and efficiently.

Image Editing & Design

This was probably the trickiest area historically to source really good software for nothing. Not least due to licensing issues surrounding some of the proprietary file formats within design. That said there are still some great products out there if you know where to look.

First off, a free equivalent to Photoshop.

Due to its support online, large community of developers producing regular nightly builds, and not forgetting its feature rich tool set, GIMP (the GNU Image Manipulation Project) is head and shoulders above the rest for image manipulation. Running on the X11 windowing system (be sure to install this first) GIMP offers layers, colour correction, filters and support for a wide array of file formats. Cinepaint, Chocoflop and Paint.NET (Windows) are all also popular options, some perhaps with a more satisfactory GUI, but they all fall short of GIMP’s impressive feature list.

Paint .NET

For vector graphics we’d recommend a look at Inkscape. Inkscape is an open source project that supports the W3C standard SVG (scalable vector graphic) file format. Thanks to the dedication of its community its latest release already supports Snow Leopard happily.

Two other useful additions to your arsenal would also be Smush IT and Sprite Me. Smush IT from Yahoo is a lossless online image optimiser which is fast gaining popularity. Image optimisation is an art form few wish to master, and with Smush IT at hand there is no need. It analyses images and uses the most appropriate algorithm based on the pixel data, outputting very small file sizes without loss of quality. Bundled with YSlow, a plug-in that analyses the speed a page loads, its one to watch. Sprite Me is a bookmarklet that aims to reduce http requests to your server for images, by suggesting where multiple images may be combined into sprites.

ySlow

Coding & CSS

Interestingly enough, two of the most popular coding suites (Coda and Espresso) are very cheap to purchase, compared with the industry ‘standard’ Dreamwea

ver for example. Coda weighs in at around £60.00 and Espresso £50.00, compared with Dreamweaver at around £420.00 for a full version. Good free options are around though, and Text Wrangler is up there as our key recommend. From the people who brought you BBEdit, Text Wrangler features syntax coloring for most popular programming languages, integrates with Python, Perl and even Xcode. You can compare two files and integrate changes, and even FTP to remote hosts. Not at all bad, and with the reputation of Bare Bones software behind them, you can be sure this is a robust and user friendly programme.

You might also consider Smultron as a solution. Though no longer developed, this app has a beautifully simple interface which has the benefit of both a low barrier to entry for newcomers, as well as not being off-putting to veteran programmers.

If you prefer a separate environment for producing CSS then Simple CSS might be for you. Currently only supporting CSS2, Simple CSS provides either a guided interface for CSS creation, or if you prefer you can code by hand with colored syntax to highlight mistakes or invalid declarations.
Coding in the cloud has been much in the news recently due in no small part to the advent of HTML5 and AJAX. Web applications are now able to behave more like their desktop counterparts, and this in part explains the recent release of a number of exciting solutions to coding in the cloud. The collaborative nature of working this way is also appealing as the development community pool their knowledge on projects.

The two front runners seem to be Mozilla’s Bespin project and CodeRun. Both look very promising solutions indeed with the ability to create multiple projects, to preview, compile, debug and deploy projects all from within your browser.

CodeRun

Database developers should definitely give Sequel Pro a look as this app makes MySQL administration simple and quick. Aimed as a straight replacement to tools such as PHPMyAdmin, Sequel Pro supports
MySQL 5 and is fully customisable to suit your needs, from those favouring a simple interface, to more advanced users who wish to hand code SQL queries. An incredible product when you consider it is free.

FTP

Long the preserve of free software, with paid for apps being a relatively new occurrence. FTP applications, like the protocols which they serve have come on a pace in recent years. One of our favourites is Fire FTP, a free plug-in to Firefox which loads a neat little ftp client into a new tab in your browser. Supporting networked shares on your local machine, permissions changes, passive mode and SFTP, Fire FTP is a fantastic plug-in.

fire ftp

Another excellent candidate worth your attention is Filezilla. Built originally for Windows, this might not have the feel of a Mac app, but it has been cross platform for a number of years now and has some classy features that make it a great choice for someone administering FTP on across a variety of servers. Filezilla supports, FTP, FTPS and FTP over SSL so can handle most server requirements with ease.

And for those who might want an app which feels Mac through and through then Cyberduck is still there for you. With recent improvements covering connection protocols for Amazon S3, WebDAV and CloudFront as well as support for Quick Look and Spotlight searches, Cyberduck integrates seamlessly with Finder and is a stable candidate and a fun addition to anyone’s dock.

Debugging & Testing

Perhaps unsurprisingly, the top two plug-ins for debugging sites are Firebug and the Web Developer Toolbar for Firefox. If you don’t already have these, then where have you been?! A great find however is Q Emulator which is an open source, free of charge emulator for running Windows on a Mac. This is crucial for testing sites in IE on a PC and all the other Windows versions of browsers, not to mention the ability to run IIS as a web server if the need arises.

Firebug

For your local web server there is MAMP. It is still unsurpassed as a local testing server running Apache, MySQL and PHP and now easier to install than ever. Previous releases were notoriously troublesome and required tweaking to get services running reliably)but not anymore. MAMP has a very small footprint at 165Mb, comes bundles with PHPMyAdmin supporting version 5.2 and Apache 2.0.63.

Site Promotion

Two good tips here are the Xenu Link Checker and the GSiteCrawler. Both sadly are not the most attractive of applications, and require Windows to run – that said, they do perform their respective jobs very well indeed. Xenu Link Checker is a simple application that crawls a web site from a URL, and reports back on any dead links it finds. It is a great labour saving tool if you are working on a large, link- intensive site, or if you inherit someone else’s project and need to check the integrity of the structure or why specific pages might not be indexing as well as others on search engines. Xenu generates a report of dead links and error codes received, allowing you to quickly correct and run the test again. GSiteCrawler does a similar job for creating XML based sitemap files for submission to Google, Yahoo and Bing. Direct the application at your URL and it will generate a sitemap file for you – simple as that. Apply the appropriate charset based on which search engine you are submitting it to and there you have it. Lastly it is worth mentioning the Webmaster Tools available from Google as a vital part of both monitoring your sites indexing, producing robot.txt, blocking folders, checking incoming links, and much much more besides. Coupled with Google Analytics and Google Intelligence and you can see why the world’s most popular search engine invokes such a fanatical following amongst the development community.

Billing / Invoicing

FreshBooks

Show me the money. Surely this is the most important bit? From the list of possibilities we have drawn up two options. One an online solution, perhaps better suited to someone freelancing at client sites and not necessarily using their Mac at all times. The second is a desktop application for someone working from home, or at least from the same Mac. Our online solution is Freshbooks. This fully integrated suite of tools for creating customers, generating invoices, managing payments, and scheduling regular billings operates from within a browser or via an iPhone. Freshbooks offers a free startup account with a maximum of 3 clients allowable, which might just be enough if you are starting out. If you require more flexibility then Express Invoice is a desktop application that is certainly man enough to get you up and running as your own ‘accounts payable’ department. All without putting your hand in your pocket.