How to demo your web designs to your clients..
So, as web designers, most of us still mockup up our layouts / designs in Photoshop (or similar) before building them in HTML. This is all well and good. So, when we want to demo a design to our clients, how do we send it? Traditionally people would send their client a JPEG of the design (sometimes with the browser chrome included to give an idea) - I used to do that too.
But a couple of years ago, I realised that this format often confused my clients - you have no idea how many times I've heard "the back button in this demo isn't working" or "why can't i type in the address bar?" from clients. So, how do we deal with this? Well my solution is pretty straightforward (but when i explain it to other developers, they often go "oh.. that's a good idea" - so now I'm sharing.)
When i start a mockup in Photoshop, i create a really big canvas... my normal starting point is about 2000x1500 pixels. I then build my web site design in the center of that 2000 pixel canvas, with textures / backgrounds etc extending right to the edges. Then, when ready to demo the page, I simply export the entire canvas as PNG and embed it on a really simple HTML page, like this:
<html>
<head>
<meta charset="utf-8">
<title>Make Believe Client</title>
<style>
body{margin:0;padding:0;background: url(1.png) top center repeat-x;}
a#space{height: 1500px;display: block;}
</style>
</head>
<body>
<a href="2.html" id="space"></a>
</body>
</html>
This assumes that the exported design image is called 1.png - it's 1500pixels high, so we make the A tag 1500pixels high too... to make sure the scrollbar appears correctly. I use an A tag, because if i have multiple composites, i link them together.. in the above example, i would create a second HTML page called 2.html that would have 2.png as it's background... then you would be able to click anywhere in the window to step through my demos.
This may seem simple, but it really saves heaps of time, plus the client gets to see the design in the chrome of their website
Web Design Tips | Permalink 
View Printer Friendly Version
Email Article to Friend
Reader Comments (5)
I was just thinking about this as I too send images, great idea, I will start using this, thanks!
POS System Software
Good one keep uploading such type of things will return to read your blog...
Yeah nice solution, I am always sending thru jpegs, -this would be cool if you had a template set up and you just upload to the server or whatever to speed things up.
Lastly for the old schoolers like me still sending jpegs, I've recently started .zipping them up as when you send from Mac Mail to a PC it can't read it and sometimes the jpeg gets corrupted.
Cr@iG
Excellent post, thanks for sharing very useful ideas, keep up-to-date will be back soon
Web Designer Hyderabad
Really interesting article enjoyed reading it. Will be visiting back for sure:)!!
Sam