Join 9,000+ Readers

How to Avoid Client Chaos With Effective Screenshots

by Jessica Albon

on September 15, 2009

in Articles Web Design

Some days, it seems like clients are just trying to be impossible. You ask them to click a screen shot image to see it at full size, and they continue talking about how the font in the thumbnail is too small to read. Or, you explain to them that the color calibration on their monitor is clearly off if they’re seeing everything in black and white, and they continue to ask you to add some color to the site.

But, the truth is (save a few, very rare exceptions), clients aren’t stupid. It’s just that this process of working with a web designer is one that they’re not used to. And because it’s what you do all day, it can be easy to lose sight of the way they approach the process.

Fortunately, there are some really easy ways to approach the design process that will smooth things over for both you and them. Here’s how you can handle screen shots so that clients are better able to imagine their new website.

Don’t Email Screen Shots to Your Client.

Working with a lawyer on a site design, he asked if I could email the designs to his assistant instead of posting them to our client area. He thought it would be more secure, and I figured there’d be no harm.

But, when all was said and done, it turned out the client was looking at the designs I sent at 200% zoom instead of at full size, so there were parts of the finished product that were “way too small.” (Turned out, they wanted the body text at 20px, not the much-more-normal-looking 10px.)

You never have complete control over what the client is looking at on their monitor. From color to resolution, to buggy IE vs Firefox differences, there’s a lot that’s beyond your control. But, you can exercise a bit more control by doing two things:

  1. Asking what the clients’ resolution is before beginning work. It’s a big time saver to always make sure your screen shots will fit well within the boundaries of the client’s monitor. and;
  2. Never uploading an image bigger than their monitor. That way, IE won’t shrink the image down without their knowledge; and;
  3. Sticking with your client area to show them designs.

Don’t do Anything Fancy.

I’d seen another designer deliver screen shots with “fancy” effects about five years ago (in this case, a drop shadow and one pixel border). I thought it looked nice and made the site seem more real.

In fact, it simply confused the client who called me on the phone and spent fifteen minutes explaining that her boss hated drop shadows and could I please, please, please remove it before he saw it.

Stay away from fancy. Just keep ‘em plain. In your portfolio, sure, decorate away. But, when you’re showing it to the client, anything extraneous will only distract.

fancy

Set the Background Color.

I used to always display screen shots on a white background and just explain to the client that the background would extend.

They never quite understood, and when I’d post the final code, they’d say, “But we thought it was going to have that white border all around it. We liked the white border.”

This one’s not the end of the world, certainly. You can always add a “white border” to the finished product. But, it’s far better to simply set the graphic on a background that’s the right color so that there’s no room for confusion.

If you’re displaying multiple design options, crop them into thumbnails, don’t shrink them into thumbnails.

I like to give clients a full page where they can see everything we’ve done so far so they can scroll back. But, I used to simply shrink the full size mockups down into smaller-sized images.

Don’t do it that way. Even though I told clients to click on an image to see it full size, they would still talk about how the shrunken image was too small. So, instead, crop it so that it is an unmistakable thumbnail, and your clients will understand that they need to click to see the full size version.

thumbnails

Ask lots of questions before making changes.

Sometimes, clients really do say things that are nonessential. (Like the client who wanted the logo to be “the only thing people saw when they arrived at the site.”) But, more often than not, they’re just not explaining themselves in the way you’d explain the same thing.

So, if the client says, “The flow’s all wrong” instead of assuming they mean the flow of the body text, ask more questions to pinpoint what they mean. It’s always okay to say, “I’m not sure I understand, can you tell me more?” or even a simple, “Tell me what you mean by that.”

As long as you’re open to their input, clients will be happy to elaborate. They want you to understand, so let them explain it in a different way.

Conclusion

By following these guidelines for screen shots, you’ll smooth the way to a much more productive, easy design process with your clients.

About Jessica Albon

Jessica Albon specializes in WordPress Design and is teaching an upcoming class on Emergency Client Attraction for Web Designers. For more information on Jessica you can visit her blog or follow her on Twitter.