How to demo your web designs to your clients..

How to demo your web designs to your clients..

So, as web designers, most of us still replicate up our layouts / designs in Photoshop (or comparable) before constructing them in HTML – Web Site Developer India. This is all fine and good. So, when we want to sample a design to our clients, how do we mail it? By tradition people would send their client a JPEG of the design (at times with the browser chrome incorporated to give an idea) – I used to make that too – Custom Web Development India.

But a couple of years before, I realize that this format often puzzled my clients – you contain no thought of how many times I’ve heard that “the back button in this sample isn’t functioning” or “why can’t i type in the address bar?” from clients. So, how do we compact with this? Well my answer is pretty frank (however when i give explanation to new developers, they frequently go “oh… that’s an excellent thought” – so currently I’m sharing.)

When i start a reproduce in Photoshop, i create in actual fact a big image… my usual opening point is about 2000×1500 pixels. I then construct my web site design in the middle of that 2000 pixel image, with textures / backgrounds etc extending right to the boundaries. Then, when prepared to sample the page, I just export the whole image as PNG and insert it on a really easy 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 assume that the exported design image is called 1.png – it’s 1500pixels high, so we create the A tag 1500pixels tall too… to make sure the scrollbar appear properly. I use an A tag, for the reason that if i have several composite, i connect them collectively… in the above example, i would produce a second HTML page called 2.html that would have 2.png as it’s backdrop… then you would be able to click everywhere in the window to walk all the way through my demos.

This may seem easy, but it actually save plenty of time, plus the client gets to notice the design in the chrome of their website.

One Response to “How to demo your web designs to your clients..”

  1. Hi Buddy!!!

    Very important aware about the client’s handles in demo period..really thanks many for sharing…meet again..keep in touch with me.