What are some good ways of presenting web designs to a client?

Question

I'd like to ask you how you manage with presenting webdesign. Usually, I send a jpg file/files to client directly to the mail, but this isn't the best approach. In most cases it does the job, but I've experienced some cases that didn't.

Let's say I've set up a design 1980px wide. The width is important because client can see all the background that shows up, but the actual design is 960px wide. The problem is that in 90% cases client opens the image in the default OS image browser and the image is scaled to fit view. Moreover, if my client has for example 1440px wide screen the 1980px scales to 1440px and the 960px is only 690px. As we know if the image is scaled we cannot see all the details because image browser antyaliasing image and all the sharpen details will gone. What if my client opens the same design in 1280px wide screen or narrower? It gets worse.

Second problem is the order of images. I've had this situation couple of times, I've sent three images with different design approaches and my mail software orders alphabetical, while my clients mail order attachments by (for example) modification time. In the result, client calls me and say "The first design is best. I'd like to choose this one." The problem is, I've no idea which is the first one in his mail. It's confusing, right?

The solution could be to place an image on the web, write couple lines of html and CSS code and send a link. But this approach also has some pitfalls. Let's say I wrote the code. The width of img must be 1980px: img { width: 1980px; } and in fact it has. But there is another problem. When client opens up the browser and the resolution of his display is less then 1920px the image starts from left and ends up somewhere in the middle. This is because there is a horizontal scrollbar, but its default position is the left, not center. Ok, so I can use some javascript to extort the proper position but the situation turns up to be ridiculous. It's like using a machine gun for an ant.

The fact is all those situations might happen and in the matter of fact, I've experienced it couple of times. The best option would be to show an image in its original size centered with possibility to move left/right.

Any clues, ideas, tools? :)

Answer 1

Adding to Shannon's answer, if you need to share images, I'd try to avoid email. You can upload your images to an online service and share the link instead.

However, if you want to completely avoid shrinkage or fonts rendering differently I'd recommend that you start doing your designs directly in HTML + CSS. What the client sees is what he/she will get. Showing a real website makes it much easier to understand navigability and to improve usability. I first do some wireframing (then get the client's feedback), then start trying things in the browser.

I'm not sure what you mean by your width having to be 1980px, that sounds quite large. Having some code instead would solve this, the resolution will depend on the user, but it should look good in any resolution. For designing responsive, I'd again recommend you plan and show the client some wireframing.

Answer 2

The problem you are encountering--which is common--is that you aren't presenting the web site.

You're presenting static images of what the web site will look like in a certain setting.

Ideally, you just don't do that. You instead present the web site as a web site...something that can be clicked, tapped, resized, etc. Instead of showing PhotoShop files, you're showing HTML, CSS and JS.

Granted, that's just not always doable depending on the process and teams in use.

So if you have to show static images, I strongly recommend that you never send them out blind via email or a link. Instead, present them 'in person' even if that means via a conference call or screen share. That way you can verbally add the all important context that would otherwise be missing. This achieves three important things:

1. It let's you show off. You're the expert. Talk like one. :)
2. It saves countless hours wasted where the client goes off on their own and dwells on low priority details and fails to address the larger questions you may have that you could have handled verbally right then and there.
3. You get a 'feel' for what their feedback is. The problem with written feedback is that it's sometimes hard to get the full context and intent. It's best to get feedback directly so you can quickly seek any clarification needed right then and there.

Answer 3

I've had the same issue and had come up with a more elegant solution based on the html+css example. Instead of using the html tag, I just create a div with the background image set to the image I want to present to my client.

Here's the code for this:

body {
  margin:0;
}
#website {
  background:url('website-homepage.jpg') top center no-repeat; // change to your jpg
  width:100%;
  height:1040px; // change to your height
}

And even better, I've also created a WordPress page template that will automatically set the featured image as the page background and it will automatically take the image height.

Answer 4

I have dealt with this in a few different ways. If I am trying to show "the flow" of the site, then I will use a program such as Adobe Muse, b/c I can bang out a quick wireframe that the client can click through.

If I am trying to show the overall "design" of the site, I will build the pages in Photoshop and then make a multi-page PDF file that puts the pages in order, forcing the client to scroll through in the order I want the pages to be shown in. Plus in this scenario my type is crisp and doesn't get pixelated as a save for web jpg will be known to do.

Answer 5

If you expect your client to open the default image viewing program, place your screen shots inside of a browser template.

This way if they're looking at the design at 50% its size, they're recognize the browser image wrapped around it and understand they're looking at the image scaled down.

Of course, if I'm presenting screen shots in person, I'll use clean screenshots with no browser wrapped around them, and of course open them in an actual browser for presentation. The browser template may look sloppy to you, but it's fairly dummy proof if you're not sure how the client will open the image.

Answer 6

Try to use the service (m) maquetter.com. It solves those problems that you specified. See an example (mqttr.com/example).

This service is meant for convenient presentation of layouts to a client. And the client is not required to have any technical skills for reviewing the project. You can easily load all of your layouts to demonstrate them to the client afterwards. The ability to set several layouts for each page lets the client choose the most suitable option. All layouts are indexed (for example http://mqttr.com/example#0103), therefore the client can always tell you the exact number of any given layout, or point out desired changes

I hope our response will help you