Show website mockups in a browser
Dealing with remote clients is something as a designer is something we can just about get away with, this means there are less (sometimes never) face to face meetings take place, so alot of visuals are shown via emails.
When showing a client a visual, it is always best to talk them trough an Idea and you must show them the ‘product’ in its natural habitat. Stationery = Printed, Web = on screen, etc.
Web Visuals
I wanted to look at how we share our website visuals. There is a fair bit of discussion about designing in the browser, but it comes down to what you are most confident and proficient with to show those early stages of a website in.
When sending a client a new website mock up, don’t attach the file in an email and send! Yes, they will see it on screen, its natural habitat, but this is wrong! You must show them the visual in a browser – and I don’t mean super impose a browser window around your visual and send in an email.
Just sending in an email attachment causes all matter of confusion as you dont know what type of image viewer they are using and what size they are viewing it at.
If your web page is a longer page, 1600px high for example then, when the client opens the file, it will probably default to show all the image on screen which results in
The text and images are really small, can you make them bigger
This probably leaves you a little confused until you realise and tell them to view actual size. Again you do not have control over how they are viewing it.
Upload and send a link
To get around this I always save the image and upload to a file on my server and send them a link to view in their browser.
<html>
<head>
<title>Client Visual</title>
<style type="text/css">
body { margin: 0; background: url(visual.jpg) no-repeat center top; padding-bottom: 1338px;}
</style>
</head>
<body>
</body>
</html>
Create a folder somewhere on your server, something like
http://www.mysite.com/clientwork/client/
And upload the visual image in that folder and save a html file in that file too.
Change the file ref the name of your file and the padding to the height of your visual
Comments