By Robert Bowen

Once upon a time, when the Internet was dialed-up and 36,600 KBPS was like lightning, I was living in a small town working for a computer retailer and Internet service provider. My boss at the time was… well, let’s just say that customer service was not his priority. Not only would he berate and verbally assault almost every customer who happened to cross his path when he was frustrated by a computer repair, but his relentless tirades caused customers to leave either in tears or on the verge of them.

I wondered during my four-year stint, attempting to clean up the customer service messes he left in his wake, how he managed to stay in business in the years before and since my employment. And the answer was simple: he was a big fish in a tiny pond.

In a town of 18,000 residents, there were only three computer retailers that had qualified technicians who could handle in-house repairs. He was one of them. But as web freelancers, we are swimming in an ocean that is teeming with qualified fish, all waiting for a hook from clients. So, we have to pay special attention to the customer-relations part of our business if we want to build and maintain our client list. The problem is that many of us have spent most of our time throughout the years working for someone else, possibly far from the reach of our employer’s customers. So, our customer service skills may be rusty, or even non-existent.

Also consider our previous articles:

• Freelance Contracts: Do’s And Don’ts
• How To Persuade Your Users, Boss Or Clients
• 8 Strategies For Successful Client Relations

Does It Really Matter?

Meager people skills and miniscule patience make some of us a business hazard when interacting with clients. Some people may not believe that this could be explosive to a freelancer’s reputation, but according to a 2009 online survey by Tealeaf, there is cause for concern:

The survey results also show that online adults are increasingly turning to social media to share their online experiences with others, while simultaneously becoming less likely to alert a company directly—a shift in consumer behavior which extends the business impact of customer experience issues beyond any single transaction.

Given this trend among consumers, we can assume that the same would hold true for our freelance clients, and that the impact of the customer’s experience will be felt long after the experience concludes. This makes it evermore critical for us to maintain as much control as possible over what that impact is, negative or positive.

This is important for freelancers adrift in the design and development ocean, where even the biggest among us still look small compared to the agency sharks that we compete with for work. If a client leaves with a bad taste in their mouth and decides to portray our business in an unflattering light, we have fewer resources than those sharks to seek out and address these word-of-mouth reviews in social media. Bigger businesses have more time, tools and employees to scour social media outlets for mentions of their companies and to rectify complaints.

This was demonstrated to me recently when we awoke to find our Internet access down. After the standard panic and resetting of system, router and modem, we determined that the problem did not stem from our end but rather from our provider’s. Suddenly, we realized that, without a phone book in the building or access to the Internet or to our invoices (which we receive by email, doing what we can to be as paperless as possible), we did not have the phone number of our provider anywhere in the house. After a frustrating hour, we were finally back online and a bit steamed from our time off from being connected. Did we then contact the provider to vent or inquire about the problem? No. We did what Tealeaf’s survey predicted we’d do: we turned to Twitter.

Having mentioned the company by name on Twitter, we were easy to find. Almost immediately, our provider read what we had to say and responded to us on this social media outlet, making sure we were not experiencing any more problems with connectivity. Overall, it made for an interesting lesson in customer service, and it showed where we as small fish might be missing opportunities to nip bad word of mouth in the bud before it spreads into viral gospel. As freelancers who wear every hat in the business ourselves, our time is limited, so we cannot stay on top of every mention of our business out there.

“The number of consumers who contact a company directly in response to online transaction issues declined:

• 26% of online adults who experience problems conducting online transactions then posted complaints on a company’s Website in 2009, versus 32% in 2008.
• 38% of all online adults contacted a company’s call center after encountering problems using the Website in 2009, versus 47% in 2008.”

(Excerpt from Tealeaf survey)

The survey also reports that more than half of adults who spend time online have been influenced by social media in their consumer choices, which reinforces the importance of customer service to the health and growth of our freelancing businesses. A first impression no longer carries as much weight as it once did; each interaction with our clients bears as much on our business as another. We may think that as long as our business dealings end on a high note, that the rocky road that led there will not play a factor in the success of our freelancing career. A 2007 study released by Harris Interactive says different, suggesting that each dealing with our clients needs to be handled with care:

The study reported that 80% of 2,049 US adults surveyed decided never to go back to a business/organization after a bad customer service experience. The study clearly indicates that an organization’s customer service level is a defining factor that will make or break a company… Consumers have increasingly higher expectations of businesses and are willing to walk away quickly from a majority of businesses if those expectations are not met.

The data shows that each and every interaction we have with a client is an opportunity to improve our business standing. because consumers are quicker to go elsewhere after a negative interaction. Even if our strengths do not lie in customer service, we need to ensure that each experience, whenever it occurs during the course of a project, is an agreeable one. Again, as freelancers, we have to deal with our clients at every stage of the project, and so we have to address not only the requirements of the project, but also any customer service issues that may arise in the process.

What We Can Do?

We can do several things to improve our chances of getting positive results from all of our customer interactions. Of course, no one is guaranteed to satisfy all of their clients’ needs and expectations 100% of the time, but we can take steps in the right direction. It starts with taking as much responsibility as we can for the impressions we leave with our customers.

Be Friendly

This one almost goes without saying, but it should be considered from another perspective. Given that the majority of our interactions with our clients might be online, we need to remember that tone and intent does not always translate well to this medium. So, read through your communications to catch anything that may come off negatively. We always want to be aware of the impression we’re making in these seemingly minor moments. As shown before, the weight of an experience is felt long after the moment has passed.

Be Patient

Remember that your client probably does not share your level of expertise in your field. Their questions may not be clear and their feedback not as constructive as it needs to be. Put yourself in their position and be as patient as you would want someone else to be with you. Even if patience is not your strong suit, your customers want to feel that you are listening to and considering their opinions. If you switch off because they cannot communicate with you in your mode of parlance or you dismiss their feedback because they don’t know as much as you do, you will be hurting your business more than your client.

Be Accessible

Another thing that frustrates clients is lacking access to you when they need it most. As freelancers, we pride ourselves on our flexibility and being able to set our own hours. But we have to respect the hours during which our clients work, too, and make ourselves available at those times, so that they are able to share ideas and discuss progress in a back-and-forth conversation. One-sided conversations can easily be misinterpreted without further explanation and just delay the client from achieving their goal.

Be Informative

One of the things Aaron Irizarry said in a recent videocast stuck out. He advised us to mind the skill gap between us and clients and to bridge these informational gaps whenever possible. Help them understand our processes and the reasons for the decisions we make. This gives them more faith in following our advice and increases the chances that they will return as clients.

Keep Track and Get Back

When I mentioned that larger firms have more resources to invest in the customer service outlets that are available to all of us, I didn’t mean that we shouldn’t use those outlets at all. Take advantage of them to track what is said about your skills, or lack thereof, and respond accordingly. You may not be able to respond immediately, but do it when you can. If you find a criticism, consider the points they raise and address them thoughtfully, not dismissively. If they praise you, be gracious and return the gesture in kind.

Be Proactive With Mistakes

As I said in Critical Mistakes Freelancers Make, we are all human, and mistakes happen. Don’t shy away from them or, worse, neglect to acknowledge them at all. Own up to them. This is a time to shine by proactively addressing mistakes before they become an issue that the client feels compelled to bring to your (and other people’s) attention. You’ll show your commitment to the client and project, and it will speak volumes about your character. By owning up to our mistakes, we show pride in our work, and more often than not the client will understand and forgive us.

Go Above and Beyond

Doing all of the above usually puts you in the “above and beyond” category, but you could always push your freelancing business over the top by over-delivering. By giving your client more than they have asked for, you further demonstrate your commitment to making them happy and your pride in your performance. This can be as simple as addressing customer service concerns positively and proactively. It also encourages your clients to come back to you time and again.

Further Resources

Thanks for taking the time to read through the post! Below are a few links to further the discussion of the importance of customer service to your freelancing career. Check them out for a more thorough look at what this topic means for freelancers.

• How to Handle a Missed Deadline
  This wonderful post on Freelance Switch offers some really useful advice to freelancers on how to deal with missing a deadline.
• How To Keep Mistakes From Ruining Your Freelance Career
  This is a great post from Freelance Folder that tells you how to keep mistakes from ruining your business.
• 6 Ways to Kickstart Your Customer Service
  Here is a fantastic post from Webdesigner Depot that looks at a few ways that small businesses can make customer service work for them.
• The Art of Great Customer Service as a Freelance Web Designer
  Dustin Brewer offers some wonderful advice on the subject of customer service for freelancers.
• How to Set Business Boundaries with Your Clients
  Another post from Freelance Switch that looks at a few areas where freelancers need to set boundaries with their clients.
• Tealeaf 2009 Online Consumer Survey
  This full press release discusses the survey about online customer experience.
• Studies Reveal Consumer Reaction to Bad Customer Service
  An article covering the study released by Harris Interactive that discusses the reactions consumers are having to bad customer service.

(al)

  

By Melinda Rainsberger

More and more, designers, illustrators and coders are being asked to animate. Animation adds energy to a brand and heightens a customer’s emotional response. The software to do it is reasonably priced, and Internet connections can now deliver high-quality video. For these two reasons, animation-based advertising is booming on the Web. The makers of a small phone application might even devote a great deal of their budget to a Web animation that explains how the application works. However, animation adds a level of complexity that not everyone is equipped to immediately take on.

Animation is a time-based medium. It has the elements of not only height, width and depth, but also time. In this way, it is more like a website or catalog: it can change from moment to moment. But the difference with animation is that the time element is entirely under the designer’s control, and the viewer is just along for the ride.

Of course, organization is important. But audience profile, screen size and delivery method can greatly influence the visuals and your workflow. In this article, we’ll go over a few guidelines on how to start organizing your animation projects, as well as some tips and tricks to create a leaner and cleaner workflow.

1. Storyboards

Storyboards provide the best means of planning an animated project. They allow you to plan your composition and timing quickly before jumping into the final animation. They let you quickly determine all of the key elements before creating the final renders. This is also the best stage to trim down and make edits. Animation is a time-consuming medium, and you don’t want to give yourself any extra work. Try to define the 10 most important images of you piece, and then add and subtract boards to find the right level of detail to convey the scope of your project.

The first 10 boards are highlighted. The other boards are there to clarify or smooth the transition from one moment to the next.

Sound is another element to consider at this stage. It can give your project a backbone for timing. If you are able to purchase commercially-produced music, do this before you start animating, and then make your images follow the beat of the music. You could also use a song with the right mood and timing as a temp track and then have a musician create the final sound based on your animation.

2. Folders, Naming, Sequencing

Folders

Everything for the project should be kept in one folder. Most animation programs do not paste files into the animation, but simply point to the media. If a file is moved, the program will have a hard time locating the original file and might not display it. Different production houses have different systems, but generally they will sort their files into these folder and sub-folder categories:

• AEP or Flash project files
• Graphics/illustrations
  • Hi-res (screen size or larger)
  • Lo-res (screen size or smaller)
  • Storyboards
• Photos
  • Hi-res (screen size or larger)
  • Lo-res (screen size or smaller)
• Sound
• Text docs

• (Scripts and documents that you may have received from or given to the client.)

This folder structure is very detailed. But not only will you be able to find something easily, but anyone else who comes into the project will also be able to navigate the file structure easily. At ad firms and commercial animation studios, other people may enter the project in process. They have to be able to help you, not fight to learn an unconventional organizational system.

Names

If you can, use some sort of coding system to indicate which project a file belongs to. This way, if it does get separated, you can locate it easily. You might use similar graphics for several projects. For instance, a globe is a common image that I use a lot because I do animations for GPS Web apps. They all look different, so the generic label “globe” would not tell me what the globe in a particular file looks like. Here is an example of a coded naming system:

• ADV_globe_all.ai

or

• Goloco_globe_NE.psd

The code will depend on whether your client’s name is long or short. Short names can be used in their entirety, but abbreviating long names into an easy-to-remember code helps.

Sequencing

If you plan to display one image after another, numbered file names can speed up your workflow. Most animation programs recognize numbers and will line them up one after another if you number them properly. Examples are:

Traditional frame-by-frame animation:

Carousel of images:

Photo slideshow:

Mouths for lip syncing:

Title sequences:

Because of the high volume of frames in animation, use a three- or even four-digit naming system. Spacing, underscores and dashes do affect how programs understand the files. Below are examples of correct and incorrect numbering:

Correct:

• face_001.jpg
• face_002.jpg
• face_003.jpg

Incorrect:

• image1.jpg
• Image_02.jpg
• image__003.jpg

Lower numbers should have zeros placed before them (so that number 1, for example, appears before number 10). Programs like Photoshop and Adobe Bridge can help with the batch renaming process.

3. Vector And Bitmap Graphics

Vectors have an infinite resolution, which is great for animation. Whether you use bitmap or vector, the images should be 72 DPI and RGB.

Computer and television screens both use these specifications. 72 DPI is the only DPI for video, and higher and lower quality videos will differ only in aspect ratio. Adobe programs have been constructed for a cooperative workflow; the names you give layers in Illustrator and Photoshop will carry over to AfterEffects and Flash.

In Illustrator, put elements that you want to animate separately onto separate layers and not paths.

4. Photos

For best results, resize your photos and bitmap images. If you will be zooming into your pictures, make them bigger than your overall frame size. If you will zoom in by 50%, then the dimensions need to be only 150% bigger than your overall frame.

If we want to zoom in on this character, we will need to make him bigger than the overall screen size, otherwise he will look pixelated.

If the images will be smaller than your screen, shrink them. Because all of the images are dynamically loaded, this will reduce the rendering time. Small images load faster than large images, so re-scaling before animation is a best practice.

Our thumbnails here will never be more than 50% of the screen size. Scaling elements to the appropriate size in Photoshop saves time later when rendering.

This may be a little confusing, but it is important; because rendering can take hours, and a bit of resizing can save an hour or two of rendering time and make a lot of media more manageable. Digital cameras all take pictures at 3000 pixels wide or more, but the largest video frame is only 1920 pixels wide.

5. Composition And Color

This is where knowing your delivery method and audience comes in handy. Images intended for a theatrical release won’t necessarily work on a smaller screen, and vice versa.

Screen-Size Comparison

Small objects can be too tiny in a Web video and become unreadable. Most Web videos use a smaller range of sizes so that the audience can properly view the elements. Elements that are too small on the Web can cease to be recognizable. A hairline turns into a line of pixels and a pupil becomes a black hole.

Web Scale

In any medium, color is important, but especially on the Web, where it is essential for creating contrast and guiding the viewer’s eye. Think of your composition as a set of shapes rather than characters and scenes, and you’ll be able to more easily produce effective graphic compositions that can be read at a variety of scales.

Using Color to Emphasize Elements

The area of greatest contrast is between the light-yellow shirt and dark-green bushes. The eye is naturally drawn there. However, consider those with color-blindness. Colors that “pop” for most people might not someone with impaired color perception. Throwing a quick desaturation filter over the project will highlight the weak areas of your color scheme.

Incorrect Use of Color Contrast

Though the orange and blue are complements and do attract the eye, they are the same value on the grayscale. By desaturating the image, we see the grayscale value of the colors. Someone with color-vision issues would not see this area as being the most distinctive.

6. Aspect Ratio And The Web

Most Web videos have a 16:9 aspect ratio (i.e. widescreen). Services like YouTube or Vimeo encourage this format. There are many “standard” sizes, but the most useful two are HDV/HDTV 720 and HDV 1080.

Both formats are widescreen, and both have square pixels. Computer monitors have square pixels, which means viewers will see a true representation of your final image. Programs like AfterEffects can simulate other screen types, but if your project is for the Web, make it work with square pixels.

If you are doing a project for broadcasting, consult your client, the venue or the broadcaster that will be presenting it. They all have different sizes and specifications to adhere to.

7. Where To Type

Animation programs have their own typography tools, or you can create your own in a program such as Illustrator or Photoshop. With Illustrator, you don’t have to worry about your text being too small or large because it will be a vector image. You can infinitely scale the type without losing quality or increasing rendering time.

For ornate titles or long scrolling credits, laying these out in a program designed for text is best. AfterEffects and Flash can do pretty much anything Illustrator can do, but in them you will not be able to see when text runs off the canvas, which makes it difficult to plan scrolling or zooming credits without constantly moving the text or rescaling to get a better view. Illustrator and Photoshop allow have more sophisticated tools for outlining and customizing the style of your type.

In addition, designing in Illustrator or Photoshop lets you focus on the design of the type. You can more fully concentrate on making your typographic design cohesive and interesting.

For small bits of text, though, you can type directly in the animation program.

8. Pre-Rendering

Creating “Proxies” is a great way to reuse elements and cut down on rendering time. They allow you to render a single layer or many layers. If the elements are finalized and you don’t need to change them, you can render them as a single video file with an alpha channel. You can even render animation with an alpha channel.

A field of twinkling stars becomes much simpler with pre-rendering. The field of stars can then be combined and pre-rendered again, thus making one video file of a starry sky that is easy to use again and again.

Most animation programs can handle video, as well as Photoshop and Illustrator files.

Programs such as AfterEffects easily handle alpha channels without any rasterization or dithering. This is especially useful if the elements have a lot of rendering-intensive filters. Effects such as layers are dynamically loaded into each frame. Video is usually 30 frames per second, so a simple blur filter will render hundreds of times in just 10 seconds. If you think about how long it takes to put a filter on a layer in Photoshop, you have some idea of how long it takes for the same filter to be applied to many frames in Photoshop.

1 second to render an effect x 30 frames / second x 10 second = 5 minutes of rendering.

You can also duplicate any animation or layer and use it over and over again. This makes kaleidoscopic animation much easier, and pre-rendering cuts down on rendering time. Programs such as Flash are good at nesting and handling “instances” of the same animation, but the equivalent in AfterEffects is pre-rendering and using a new video layer.

Flash and AfterEffects both have features that allow you to take complex animations and reduce them to a single layer.

Complexity can be built from a few simple elements with spectacular results.

9. Organize For Your Future Self

First, create a group in your project with the “Timelines,” “Scenes” or “Compositions” that are the final renders. This way you, or anyone, will be able to easily locate and render them again. Most video and animation programs have a bin or library and allow for easy internal folder creation.

Second, have a good incremental naming system for renders. Very often, the “final” render is not really final. Using numbers or letters, the computer will automatically order the files for you; and again, anyone will be able to figure out what was the last render. Your_project_final_Final_FINAL_v4.mov won’t clarify anything for anyone. In AfterEffects, movie files are named after their Compositions. I put a “v” at the end of each one so that I can easily insert the right number just before I render. When making Web versions, I change the “v” to a “w” to indicate that this is the Web version. A list of renders would look something like this:

• CI_TCfIH_edit_v1.mov
• CI_TCfIH_edit_w1.mov
• CI_TCfIH_edit_v2.mov
• CI_TCfIH_edit_w2.mov

Computers like numbers, letters and order. Exploiting this proclivity frees you up for more creative endeavors. Because animation can take up thousands of files, organization is critical.

10. Incorporating Live Action

If you need to incorporate a green screen or other live action footage, shoot in an HD format if possible. These tend to have larger aspect ratios than standard television sets, which leaves room for some cinematic tricks later when you’re working in the animation program.

We won’t get into lighting, editing or shooting in this article. But once you’ve mastered this considerable set of skills, you can bring those elements into your animation and make your live action elements interact with the animated ones.

Web videos, like the ones on YouTube, are 640×360: well below standard video HD sizes. This means you will have “extra” video. By filming your live-action with a locked-down (i.e. non-moving) camera, you will get the best of both a steady shot and a perfect pan. Simply insert your footage into a slightly smaller composition and animate its position. Motion also guides the viewer’s eye and highlights certain parts of the screen. But panning the camera can make it hard to line up live-action and animated elements.

These images are shown to the correct scale. We could shrink the large video even more for better framing.

11. Have Fun And Experiment

Animation programs are a combination of two to three smaller graphic design programs plus a video editor. They have a wide range of effects, tools and capabilities. Only by playing around with it will you really learn what the program can do. However, only by trying something you’ve never done before will you find out what you’re truly capable of (i.e. turn it up to 11).

(al)

  

The market for freelance web design is huge. Being able to design a beautiful site in Photoshop is one thing. Programming a website is a whole other story.

So when clients come knocking at your door asking for web design services, what do you, the non-programmer but rockstar designer, tell them? “Sorry, I only design, I don’t code.” No! You take the job, and team up with an equally rockstar-esque programmer to develop the site that you design.

Easy, right? Well… not exactly. In case you haven’t noticed, there are many (too many) “hack” programmers out there. They talk up their capabilities, techie background, and all powerful programming skills, but just can’t deliver the quality results your project and your client deserve. Finding the gem in the bunch can be a tough task.

Sub-contractors can often make or break a client project. It takes a high level of trust, communication, and organizational skills to make your working relationship a success. For designers, programming can quickly becoming a confusing mess of code and technical jargon. I aim to clear things for you in this article.

As both a designer and a programmer, I have experience working in both ends of web development. Today, I’d like to help designers bridge the gap between the design side and programming side so that you can tap into the massive pool of web design clients. Here’s what we’ll cover:

1. Searching for programmers: Where to look?
2. Hiring the right programmer: Things to look out for.
3. Working with a programmer: Tips for success.

Searching for programmers: Where to look?

There are tons of places to search for a programmer, many of which should already be familiar to you. Here’s my list of go-to resources with the preferred outlets listed first:

1) Referrals from your trusted network.

Before you hit the job boards, it’s best to reach out to your co-workers, friends, or anyone you trust within the web industry. Going with a trusted recommendation is always your best starting point – especially if the the recommendation comes from first-hand working experience with the programmer. Your trusted network can even extend into your social media ring on Twitter, LinkedIn or Facebook. Reach out to those you have conversed with and gained trust in.

2) Recognized industry experts.

If your budget allows for it, reach out to the most visible and trusted industry experts. The big "names". I’m talking about those who speak at conferences, author well-known books, or have popular blogs. Of course, these are not the only super-talented programmers you can hire (there are many lesser-known but equally rockstar web devs out there). But the “names” have earned their credibility with proven success and recognition.

3) Job boards

When you’ve exhausted all other channels, it’s time to hit the online job boards. There are lots to choose from. Here are some of best places to look:

• FreelanceSwitch Job Board
  I like this one because it requires applicants to pay a low monthly fee. This helps to weed out the “hacks” from the reliable web workers.
• Elance
  A popular job site for freelancers. You can read reviews and ratings for each worker, with a visible work history.
• Odesk
  Similar features to Elance, plus a built in time tracking component. Odesk allows you view hours worked plus see screenshots of your worker’s activity. This one is good for smaller, hourly jobs.
• Authentic Jobs
  Postings for both full-time and freelance positions. Great for larger jobs with higher budgets.
• Sortfolio
  Here you can browse portfolios of designers, developers, and agencies.
• Smashing Jobs
  Of course, you can post your job listing here on Smashing Magazine for massive exposure.

Hiring a programmer: Things to look out for

Now that you’ve found a list of applicants, here’s what you should look out for when sifting through their responses:

1) Referrals, References, and Portfolio (in that order)

This is true when hiring anyone, really. Hiring a programmer based on a personal recommendation from someone you trust is always your best bet. If you don’t have a personal referral, ask your potential programmer for references (with current contact info) from past clients, and contact them.

Portfolios are important too. Click through to the sites they’ve developed and review the functionality. Question them on what exactly their role was in building these sites. Sometimes programmers might have coded the front-end CSS but left the database interaction work to someone else, or vice versa. It’s important to know which core skill(s) are needed for your project and seek out this type of experience from a programmer.

2) Communication skills

This is among the most important qualities to look out for. A successful programmer must have the ability to communicate in clear terms all of the technical issues associated with your project. That means breaking down all of the intricacies, walking you through the processes, and detailing the problems and solutions associated with each process.

They must also be good listeners and follow your instructions to a tee. Look for strong phone and email etiquette.

In the end, the communication between you and your programmer will be what makes or breaks your project. A breakdown in communication can throw your project off track (and off budget). A strong working relationship will result in a happy client and future work for everyone involved.

3) Specific expertise

Not all programmers do the same thing. You want to find a programmer who specializes in the type of programming your project requires. If you’re designing an E-Commerce website, you should hire a programmer who has E-Commerce experience, not simply website experience in general.

The key is to find a specialist. Beware of programmers who say they know a technology, but haven’t really worked with it. You’re better off going with someone who has a proven track record in a specific skill than hiring a “jack of all trades”.

A programmer who keeps a public blog is always a big plus in my book. That’s a great way to read up on what they specialize in. It also shows they are passionate about their work and expertise.

4) Availability

You want to make sure your programmer is available, not only to do the work but for regular chats and progress updates. Nothing is worse than a programmer who disappears for days or weeks at a time. Most web workers use IM or Skype. It’s good to know that your programmer is signed in and available for email / IM on a regular basis.

Question them on what else they have on their plate during the time frame of your project. Does your project require full-time availability (not shared among other projects) or is it small enough manage alongside other projects? These availability issues are important to clarify before starting work because you’ll have additional assurance that deadlines will be met.

5) Price

Obviously, staying within your budget for the project is important. However, focusing solely on the programmer’s price quote will not result in the best hire. You should consider all of the above criteria along with your project budget to determine the best match.

It’s easy to choose the programmer with the lowest rate. But are they the right person for your specific task? With such a wide spectrum of price comparison in the programming field, there is no way to direclty relate price to results. Some programmers under charge and over deliver while others overprice themselves and turn out to be hacks. Once again, you must take all things into consideration when choosing the right programmer for your project.

On the subject of price, most freelancers fall into two groups: Bill by the hour, or charge a flat fee. If they wish to bill you hourly, be sure to get an estimate of hours before beginning work. A good idea would be to set milestones for updates. For example, a progress update and review when 10 hours have passed, and again at 30 hours.

A flat fee may be preferable because you know exactly what the cost will be. In this case, be sure to clearly map out all of the deliverables to be covered under the agreement. That way there are no discrepancies when it comes time for settlement.

Working with a programmer: Tips for success

So you’ve hired a programmer and your project is underway. Here are some things to keep in mind to ensure your project goes smoothly:

1) Articulate every detail

Don’t assume the programmer knows what your goals are just by looking at the PSD. Take the time to discuss every functional detail, exactly how you envision it.

What happens when the user clicks this button? What steps will the customer see as they proceed to checkout? What should happen when you roll the mouse over links? These are the types of questions that should be cleared up at the beginning of the project.

It also helps to document the design notes, such as page and paragraph margins, line height, font choices, etc. A good programmer should match the details perfectly to the provided PSD, but don’t assume. It’s always better to be thorough in articulating the details.

LittleSnapper
A fantastic tool for taking and marking up screenshots

2) Provide web-ready designs

Some designers don’t fully understand the structural constraints when designing for the web. The unit of measure on the web is pixels, and resolution is always 72 pixels per inch. If you provide a document at 300 pixels/inch resolution (as many print designers tend to do), it will be too large for the web browser.

Most web programmers prefer to work from a Photoshop or Fireworks document. In Photoshop, when viewing your design at 72 pixels/inch and zoom set to 100%, the layout and proportions should appear exactly as you intend it to appear within the web browser.

Setting up a new document for the web in Photoshop

It also helps to provide un-flattened documents. This way programmers can disable / enable layers when cutting all of the necessary images to construct the website. Also, if you need the text taken straight from the PSD, it’s best to easily cut and paste text rather than retype it.

3) Check the website in all browsers

This is what separates the pros from the Joes. Web programmers should be able to produce a functional website that displays correctly across all major web browsers. That list includes at least the following: Internet Explorer 7-8, Firefox 2-3, Safari 3-4, Google Chrome, and Opera. There’s a growing debate over whether or not Internet Explorer 6 should be included here. My take is that it depends on the project, and the browser statistics for the intended audience.

Check the site in all of these browsers and click around to every page, action, and user process. Make sure all of the margins, graphics, and features display and function correctly. Confirm that the programmer will be available to troubleshoot any issues that (inevitably) arrive, both pre and post launch.

4) Test and test again

Checking all browsers for display issues is only part of the testing process. You need to test every piece of functionality as well. Of course, thorough testing should be part of the programmer’s responsibility. You should clarify exactly which testing standards are required for the project. After the programmer fulfills his testing responsibility, it’s up to you to go through and check everything yourself.

Click every link to avoid any broken connections. Fill out and submit every form, with every combination of options to make sure the desired result happens. If it’s an E-Commerce website, purchase a test product using a real credit card. If it’s a blog or CMS, go in and create posts, edit content, and fully test the system that is in place. If you’re able to break something, you can be sure your client will be able to as well. Ironing out the bugs is a crucial part of every website development project.

5) Set reasonable deadlines

Nobody likes the added pressure of looming deadlines, especially when they’re set too tight. Deadlines create more stress and affect the overall quality of our work. That’s why it’s crucially important to set timelines that are reasonable and allow for ample room to work through the project.

When managing a web design project, the timeline often involves several components:

• The date you deliver designs to the programmer
• The date the programmer delivers functionality back to you for review
• A period of internal review and revisions between you and the programmer.
• A period of review with the client.
• Another round of revisions for you and the programmer.
• Final delivery and website launch.

When mapping out these milestone dates, it’s important to effectively manage the client’s expectations. You should first consult with the programmer to determine how long their end of the project will take. Only then should you relay the final timeline to the client. Always pad your time estimates to allow for flexibility. Inevitably there will be technical bugs to squash and unexpected hurdles to overcome. Anticipate these to make for a smooth final delivery to the client.

Too often our project time lines are determined up front by the client, who often expect a turnaround time is too fast fully deliver on the requirements. Be sure to avoid this by setting milestone dates that are acceptable to everyone involved.

Conclusion

Once you hire a sub-contractor, you’re effectively taking on the role of project manager. This role involves additional skills beyond the realm of design. Communication is key. Learning to work collaboratively with a programmer will prove to be a valuable way to advance your career as a web designer. Along the way, you’ll learn all sorts of new skills and evolve your designs in ways you may never have envisioned before working on the web.

In the end, hiring a programmer for your designs comes down to professionalism and teamwork. It takes time to seek out the right programmer and develop your working relationship. If you find a good fit, stick with it, nurture that relationship, and watch your web design business flourish.

Additional resources

Project management / Freelance business:

When You Need to Subcontract
Tips for sub-contracting your client projects.

Replace Yourself
A Guide to Delegating Your Workload – Excellent article about hiring employees and contractors.

Essential Project Management and Collaboration Tools for Freelancers
There are many options to choose from. Basecamp is among the most popular.

LittleSnapper
Fantastic tool for taking and marking up screenshots.

The Secret to Finding and Keeping Clients
It’s all about reliability and building your network.

Design and development resources:

Setting up Photoshop for Web, App, and iPhone Development
excellent post about color settings, resolution and preferences for web design documents.

Mastering CSS Coding
Getting Started – If designers should choose one programming skill to learn, it would be CSS. Here’s a great starting point.

13 Ways to Browser Test and Validate Your Work
Here’s a useful list of resources for testing your website across all major browsers.

A List Apart
One of the most popular and trusted blogs for web designers and developers. If you don’t know it, now you do.

About the author

Brian Casel is the founder of ThemeJam WordPress Themes and CasJam Media. He blogs about freelancing and entrepreneurship at briancasel.com. Brian loves to talk shop with fellow web workers on Twitter: @CasJam

  

By Alyssa Gregory

The ability to communicate, and communicate well, is one of the biggest factors in business success. You could be an excellent designer, but if you’re unable to promote your services and communicate effectively with clients and colleagues, your potential is limited. The principal areas where communication is essential include:

• Pitching potential clients,
• Client meetings,
• Customer service,
• Face-to-face networking,
• Marketing your business

Pitching Potential Clients

When you freelance or own a business, your livelihood depends on your ability to sell your services. You need to be able to convince prospects that you are the best person for the job, and the communication secrets in this article will help you do this successfully.

Image by Mart1n.

1. Ask the Right Questions

Part of selling your services is being able to understand the client’s unique needs. You can do this only by asking questions that get to the heart of the challenges they are facing. Once you have a clear understanding of the problem that the client needs to solve, you can pitch your services as the best possible option for the client, outlining how you will meet their needs.

For example, when I am contacted by a prospective client, I have them fill out a website requirements document that poses various questions to help me better understand what they are looking for in a website. Some of the questions I ask are:

• Describe the nature of your business.
• Who is your target audience?
• What is the background on the project? (Is it brand new? Has it already begun?)
• What are the goals and objectives of the project?
• What is the timeline for the project?

2. Communicate Professionally

Your professionalism can win you contracts, and your communication skills add to the complete package. Take time to proofread all emails prior to sending; use a business email address with a proper signature; answer the phone professionally; and speak articulately and competently at all times.

While my email signature has evolved over time, below is the general format I follow, which has worked well for me:

–
Name
Company | Website
Email | Phone number

Client Meetings

Client meetings, even those that take place over the telephone, are an integral part of every successful business. Follow these tips to make your meetings as productive as possible.

Image by murielle.

3. Schedule and Prepare Thoroughly

We’re all busy these days, so scheduling your meetings in advance ensures that you and your clients have an adequate amount of uninterrupted time to speak. Once your meeting is scheduled, take time to prepare an agenda that outlines focus points and sets a structure. Sharing the agenda for the meeting gives both you and the client an opportunity to fully prepare.

Because you may not be using the same calendar or scheduling program as your client, confirming the date and time of your meetings in an email and sending a reminder and the agenda the day before is good practice. If you are unsure how to format an agenda, plenty of templates are available for free online.

4. Speak, Pause, Listen

When you have several topics to tackle, rushing through them to get all of your ideas out may be tempting. But this causes confusion and makes the client feel that their input is not important. Slow down, and remember that communication is a two-way street. Establish a give-and-take that allows both parties to have their say.

One way to become a better listener is to limit or eliminate distractions during your conversations. That may mean closing your email client, turning off the television and closing the door to your office. By doing these small things, you ensure that the client has your full attention, and they will sense that, too.

5. Follow Up in Writing

While you may be taking notes during phone or in-person meetings, the other party might not be, so follow up after the meeting with a written message, giving an overview of the discussion to make sure you are both on the same page. Summarize what was agreed, repeat questions that were raised and outline the next steps and responsibilities for both parties.

In addition to sending your notes, invite the other party to give their feedback on what you have sent. This way, it becomes a collaborative document and not just one person’s view.

Customer Service

Your clients want to feel that they are your priority. You can make them feel so by providing exemplary customer service. Try these communication-focused actions to improve your customer service.

Image by Oreckel.

6. Ask for Feedback

One way to maintain long-term relationships with your clients is by keeping open lines of communication. This means asking them for their input on how things are going and how they feel about the service you’re providing. This can be accomplished by inquiring at the end of a project, during day-to-day conversations or through formal surveys. The format matters less than the actual act of it, so work it into your business and fine tune as you go along.

When conducting surveys, use an online service that tracks responses for you. There are several online services that should give you enough functionality to conduct client surveys. Here are a few worth checking out:

• PollDaddy
• SurveyMonkey
• Zoomerang

7. Address Problems

If a client is unhappy, don’t ignore their complaints. Ask them why they are unhappy and what you can do to fix the situation. The longer you wait to bring it up, the worse it will get. Addressing the issue and being accountable when appropriate puts you on the path to resolution. And your willingness to face the problem head-on tells the client that you care about the project and their satisfaction.

If a client complains about your turnaround time or responsiveness, you may need to create a more formal project plan to clarify expectations. A working document like this can also eliminate some of the uncertainty regarding responsibilities and keep everyone on track.

8. Try a New Format

If a problem with your client stems from miscommunication, try a different method of communication. If you have been handling everything via email, schedule a phone call to see if that clears things up. After the call, you can summarize the conversation in an email to the client, which will give you another opportunity to get both of you on the same page again.

Today, so much communication is done via email that the opportunity for major miscommunication is almost inevitable. A rule of thumb is to limit your email to one screen-full (i.e. above the fold); anything that requires more space than that should be handled by phone. This should help you avoid some of the pitfalls of relying on email alone.

Face-to-Face Networking

Networking events, conferences and other face-to-face opportunities can take your business to a new level. These tips focus on helping you get the most from in-person networking activities.

Image by trublueboy.

9. Communicate Confidently

Be confident and use body language to support that confidence. Shake hands firmly, smile and make eye contact while communicating at live networking events. Don’t forget to bring business cards to hand out to everyone you meet, and remember to relax and be yourself.

Before heading out to a networking event, practice introducing yourself to new people to gain confidence. Working on your introduction with someone you trust and asking for their feedback also helps.

10. Prepare an Elevator Speech

An elevator speech helps you make the most of a first impression, while making networking situations easier and more productive. Be prepared with your speech and ready to answer common questions about your business and what you do. Practice your elevator speech ahead of time so that you are relaxed and comfortable with introducing yourself.

Your elevator speech should last no longer than 30 seconds and should convey how your product or service solves a problem for your target audience. An elevator speech could go something like:

Have you ever gotten completely lost on a website because the navigation was inconsistent, confusing and disorganized? What I do is redesign websites for small-business owners who need a stronger, more coherent online presence. By learning as much as I can about the company, I create a strategic plan for reinventing an existing website to be more functional and user-friendly.

Marketing Your Services

Whether you market your business online, in person or through traditional advertising, communication is key to brand awareness. Here are two secrets to magnify the impact of your marketing across the board.

Image by ralaenin.

11. Be Responsive

A big part of marketing is being available to your target audience and following up when necessary. If you market your business through social media outlets—including Twitter, Facebook and blogging—watch for and respond to comments, questions and especially complaints. And when you are contacted as a result of offline marketing activities, respond quickly and professionally.

Plenty of recent examples on Twitter show how certain brands have been slow to respond to criticism, hoping it would die down, only to see it spin out of control. Also, when you do respond on social media websites, keep it professional, and avoid confrontation because that would only spread the fire.

12. Write Well

You can’t successfully promote your business if your marketing copy is not clear, concise and action-provoking. If writing is not your forte, consider hiring someone to help you craft copy that attracts potential clients, generates interest in your services and motivates potential clients to action.

To strengthen your writing skills, start a swipe file of marketing copy that you like and have found inspirational. Read through it and make notes of what you like in particular and what pulls you in. By making this a frequent exercise, you should be able to learn what makes good copy good and bad copy bad.

Your Turn to Weigh In

Being a tolerable communicator and an effective communicator is the difference between being good and great at what you do. If your design skills are up to par with your competition’s, then strong communication skills can put you ahead. Strengthening your communication skills is worth the time and effort, and you may be surprised by how much you benefit from more polished and professional interaction.

What do you think? What impact has communication had on your success? How have you improved your ability to communicate with clients and colleagues?

Related Reading

• Communications Guide: How to Improve Your Communication Skills, by Inc.com
• Use the 3 C’s of Communication, by Entrepreneur.com
• Improve Your Communication Skills, by Mind Tools

About the author

Alyssa Gregory is the owner of avertua, LLC, a full-service virtual assistant firm. She has a passion for supporting small businesses, and provides business tips, advice and news through her business blog, the Small Business Idea Generator, and as a regular contributor on SitePoint.com. You can follow her on Twitter at @alyssagregory.

(al)

  

By Cameron Chapman

Many designers enjoy creating WordPress themes. And creating a theme isn’t that difficult if you have a basic grasp of CSS and can follow directions (WordPress’s Codex has extensive documentation). But that doesn’t mean that every designer out there who can create a theme has created a good theme. In fact, really poor themes abound.

But what exactly makes a WordPress theme great? How does one go about creating a quality theme? In fact, it’s not that difficult. You can do a few simple things while developing your theme—from the planning stage right through coding—to make it stand out from the legions of average (and below-average) themes out there.

1. Complies With Standards

Whether you plan to customize it, use it straight out of the box or build your own, getting a theme that’s standards-compliant is important. Standards-compliance ensures that your theme will appear as it’s supposed to across most modern browsers.

Standards-compliance also makes future maintenance and modification easier. If your code is written to Web standards, it also less likely to break when you modify it later on. It also makes for a better foundation on which to create new themes, based either in whole or in part on the existing one (and saving you a lot of time and effort).

Example: Intaglio Theme

The Intaglio theme is XHTML and CSS standards-compliant.
Demo | Download

2. Helpful Comments

When creating a theme, add comments to your code so that the people who use it can figure out how or why you did a particular thing. Quality comments need not be long but are often most helpful if you provide structural clues to your CSS and HTML. In many themes, we see comments in the CSS files that distinguish between styles for the header, footer, sidebars and content. You might also see commenting in the HTML files of some themes, especially if some of the coding is uncommon.

If you’re looking to customize a theme, make sure the code is commented well enough so that you can understand it. This will save you many headaches down the road, especially if you want to do extensive modifications.

Example: Thematic Theme

The Thematic theme framework is fully commented in both the CSS and HTML files, making it much easier to customize and modify.
Demo | Download

3. Optimized Graphics

Graphics in themes should be optimized for Web use. This includes using proper file types and compression levels as well as avoiding graphics where they’re unnecessary. Combining graphics where possible is also a good idea, because it reduces the number of HTTP requests for the page.

If you’re creating a theme, make sure to save all of your graphics at appropriate quality levels and in appropriate file formats. Educate yourself on what various file and image types are good for.

Example: Royalle

The Royalle theme has a number of images but keeps the file sizes small.
Demo | Download ($70 and up)

4. Minimal Required Plug-Ins

If a theme requires certain functionality, coding the functionality right into the theme rather than relying on plug-ins is usually best. There are a couple of reasons for this. First, if the theme is applied to an existing website, a required plug-in could conflict with another plug-in that’s already in use.

The second reason is that relying on third-party plug-ins will likely cause headaches down the road. If you decide to change the functionality of your plug-ins down the road, that could end up breaking your theme. Is that really something you want to deal with?

Rather than rely on plug-ins, code the required functionality directly into your theme. This will save you and your theme’s users trouble down the road and will likely make the theme easier to maintain.

Example: Atlantica

The Atlantica theme has a number of extended functions coded right into it.
Demo | Download ($32)

5. Easily Customizable

I’m not talking here making the code easily customizable. I’m talking about making customizations in the admin area of WordPress easy to do. Options for customizing things like the color scheme and header image are often looked upon favorably by people in the market for a theme.

In many cases, it’s not that difficult to make the header image or color scheme customizable (for example, by letting users change the post’s heading color or providing a variety of pre-set color schemes). While these options aren’t necessarily vital to a good theme, they’re a nice touch and can set a great theme apart from good ones. Just make sure your design still holds up when someone opts for a hideous shade of puce or an ugly header image.

Example: Blixed

The Blixed theme allows users to upload a custom header image in the WordPress admin area.
Demo | Download

6. Semantic Mark-Up

Semantic mark-up has a few positive effects on a WordPress theme. First, it makes it easier for those who didn’t design the theme to decipher the code. If elements in the design are named logically, figuring out which elements in the code correspond to which elements in the design becomes faster and easier.

Secondly, semantic code improves search engine optimization. Heading and other standard tags tell search engine spiders what parts of your pages are most important. Combined with good keyword usage, this could greatly influence your website’s ranking.

Yet another reason to use semantic code is that it makes websites more accessible to people who require special browsers (such as the visually impaired). These browsers have a hard time wading through code, but semantic code makes it easier and improves the experience of these visitors.

Example: Stakers

Starkers is a completely “naked” starter theme upon which other themes are built, but one whose mark-up is fully semantic.
Demo | Download

7. Well Supported

The best themes are well supported by their creators. When WordPress issues an update, they make sure that their themes still work properly, both aesthetically and functionally. If administrators find a security hole in the code, they fix it. Basically, they’re there to resolve any problems that may arise.

Premium (paid) themes are the most supported, though some designers also support their free themes, at least partly. If you pay more than $10 or $15 for a theme, you should expect at least basic continued support (but check the terms of use). Support may even include free help if you’re customizing a theme or having problems implementing it. Some theme creators have dedicated forums where you can get help, either from the designers themselves or from other users.

Example: Delegate

Delegate was created by WooThemes, which supports all of its themes via its support forum, and it provides free updates.
Demo | Download (starting at $70)

8. Purposeful

The best themes were made for a specific purpose. The purpose could be as simple as being for text-heavy websites, where readability is key, or for image-heavy websites—or it could even be more specific, such as for children’s writers, car enthusiasts or artists.

The reason that a purposeful theme is superior to a generic theme is that it does not try to be all things to all people. It excel where necessary and puts secondary functions on the back-burner. This usually results in a theme that does one or two things very well, and other things adequately.

Premium themes usually excel at this specialization. But plenty of free themes out there have clear purposes. Photo-blog themes, video-blog themes and themes for particular professions are most common.

Example: AutoFocus

The AutoFocus theme is very good for showcasing photos and places, with little emphasis on text.
Demo | Download

9. Uses As Few CSS And JavaScript Files As Possible

Sometimes there’s a valid reason why a theme would have more than one CSS file or JavaScript file. But usually these separate files only confuse the person looking to customize or tweak the theme. Nothing’s worse than having to look through four different CSS files just to find where to change the link colors or line height. And multiple JavaScript and CSS files add to your website’s loading time and increase the number of HTTP requests.

Unless you have a specific technical reason for using more than one style sheet or JavaScript file, condense your files into one. Many designers include multiple files because they reuse bits and pieces of code from one theme to the next. Take the extra five minutes to combine your files into one. It will save headaches down the road for anyone who customizes your theme (including yourself, if you come back to the code after months of not looking at it).

Example: Simplicity

Simplicity is available in light and dark versions and has a single style sheet for each.
Demo | Download

10. Well Structured

By well structured, I’m not just talking about the visual appearance of your theme. It’s also important to make sure that your theme’s files load in the proper order. Ideally, your header should load first, followed by your content, and then the sidebars and footer. This structure gives more weight to the content of your website in the eyes of search engine spiders, which generally results in better rankings.

Of course, front-end structure is important, too. Make sure your sidebar(s), header, footer and content areas are laid out well on the page and that none of the elements break if the length or type of content they contain changes substantially (for example, very short content or very long sidebars shouldn’t create issues with the placement of the footer).

Example: Cutline

The code for the Cutline theme is structured so that the main content loads immediately after the header.
Demo and download

11. Works Well In The Test Run

The Test Run area of WordPress.org’s theme directory can put a lot of strain on a theme. WordPress showcases free themes by basically throwing a variety of elements at them, including headers, images, lists (both ordered and unordered), long post titles and combinations of all of the above.

Make sure your theme looks as good in this test run area as it does in your own environment. Because many users find themes through WordPress.org, this is more important than many designers realize. Of course, depending on how varied your own sample content is, making your theme work properly in the directory could be easier said than done. Hint: make your sample content mimic the content on WordPress.org’s theme directory so that you don’t get any nasty surprises later.

Example: Pixel

Pixel performs very well in the test area of Wordpress.org.
Demo | Download

12. Makes Good Use Of Existing Template Files

WordPress can use a variety of template files to display different types of content differently. These template files include home.php, index.php, single.php (for posts), custom templates (which must be assigned to the page in the admin area), page-slug.php, page-id.php, page.php, category-slug.php, category-id.php, category.php, archive.php, tag-slug.php, tag-id.php, tag.php, author.php, date.php, search.php, 404.php and attachment.php, among others. Some page templates are only available for WordPress 2.9 and later.

These page templates let you completely customize the way your template behaves. For example, you could have a custom “About” page template that’s entirely different than other pages. You could have a customized contact page or store page or any other kind of page you can imagine.

Setting up individual template pages is no more difficult than setting up your index.php file; it just takes a bit more time. But it’s well worth it if it sets your theme apart from competitors.

Example: Ashford

Ashford makes use of custom page templates as well as standard WordPress templates.
Demo | Download

Conclusion

Creating a quality WordPress theme isn’t that difficult, and there’s no reason why any theme designer out there couldn’t create a theme that follows the guidelines above. All it takes is a little extra planning and effort, but the results are well worth it.

Further Resources

• 11 Principles to Design a Great WordPress Theme
  A great post from Daily Blog Tips that lists guidelines for creating a WordPress theme.
• Theme Development General Guidelins
  Part of WordPress’ theming documentation, which covers a few best practices for creating themes.
• Designing Themes for Public Release
  Another guide from the WordPress Codex on designing themes for public distribution.
• W3C
  The World Wide Web Consortium’s website, which has information on Web standards and semantic mark-up.

(al)