A Better Way To Present Web Layout Drafts To Clients

Written by Paul Hirsch on January 28, 2011.

This is a resource for our Web design and development colleagues, who probably face similar issues when presenting layouts to their clients. If you are a Web designer and this script is useful for you, please let us know! There are no credits presented in the code, and you’re free to remove all the comments and whatnot.

The biggest problem we’ve seen when presenting layouts strictly as images is the client’s computer or browser will resize them to make them fit the screen. If the client doesn’t realize it, and this will affect the quality of your product and the feedback you receive. Also, there is no point of reference for discussing layouts when more than one are presented at the same time.

So we made this little script, which places layouts as background images, and gives the client controls to view multiple versions. It’s not fancy or particularly versatile. It’s not even all that nicely coded (it’s “rough” code that could easily be refactored). But it works really well!

https://www.studio1337.com/resources/draft-presentation/ – we will be replacing this script with an updated one soon!

1. View Source
2. Copy/Paste
3. Use as you see fit!

The elements within the page are easy to customize, assuming you have a strong knowledge of CSS and a little JavaScript background. The version we’re sharing is visually generic, and we encourage you to make it your own.