• favtm
  • New member
  • Offline
  • From: Cali, USA
  • Registered: September 20, 2009
  • Posts: 5

Topic: How to show live preview of template

Hey folks, found your forum via Google when searching for a beginner's web design forum. So I though't I'd give you a try.

I am an intermediate freelance web designer, and tonight I've finished two temps I wish to show a client. I have always wondered how to show a live preview of the template, without allowing them to copy the source and take my work without payment. I'm assuming this is done with frames or scripts, but I have been unable to find such a thing as of yet.

So like I said, I thought I'd give you guys a try at this - I already use my own domain to upload the files to allow clients to view the live template, however, they can easily take the source and run off.

I hope I have been clear in my inquiry. I appreciate your communiyy's expertise and look forward to reading your responses. Thanks in advance.

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: How to show live preview of template

Realistically, there really isn't an easy way to stop clients from potentially taking the source code. Having the source freely available is simply one of the realities of working on the web. It really comes down to a trust issue... if you don't trust your clients not to steal the code, perhaps you shouldn't be working with them in the first place.

There are programs out there that claim to be able to "lock" or in some way prevent users from downloading a website. Just realize that if a browser can render it, someone else can too.

Two things I usually do to discourage this...

1. I present any design mockups I do as .jpg files, which means I don't go to all of the work of creating a working HTML file without their prior approval. If they take the JPG, yes, they have some of the design, but it doesn't necessarily mean they can use it (usually they would need the original PSDs to create the graphics for the site.

2. I also request some sort of down payment up front, before I start, usually 1/2 or 1/3 of the total project. This ensures that they are serious and weeds out most of those who might want me to do work for them, but then suddenly stop responding or attempt to take my work without payment.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • favtm
  • New member
  • Offline
  • From: Cali, USA
  • Registered: September 20, 2009
  • Posts: 5

Re: How to show live preview of template

Thanks for the reply Benjamin.

Fortunately, I do trust my clients, and to be honest if one does take the template without payment, I wouldn't care that much. At most I lose some potential income and obviously the client. Plus I can still use the same layout for future projects.

I have seen free template sites where you can view the live preview of the layout. I actually have not tested to see whether their source is easily viewable, but since they are free, they most likely are just as available as the download link.

I'm still interested to hear more responses, thanks again Benjamin.

Vote up Vote down

  • lm
  • Advanced Member
  • Offline
  • From: The Netherlands
  • Registered: December 20, 2008
  • Posts: 2,806

Re: How to show live preview of template

Indeed what is already published online is open to anybody to copy (code and/or design), so there are not much options except those Ben mentioned.
I can add you might consider to use Flash movie to show your work, if you use in it  .jpg screenshots of your templates.

lm On Twitter

Vote up Vote down

  • Registered: April 30, 2009
  • Posts: 157
  • Reputation: 2

Re: How to show live preview of template

There's some differences between presenting a Flat HTML site template and a CMS template. Those sites showcasing live previews are probably CMS driven websites with installable templates. There's a big difference there since the server-side .php or .aspx templates cannot be downloaded/copied/replicated without FTP/Admin access. smile

My company just renders the design in .JPG and presents the client before doing ANY html work

Vote up Vote down

  • favtm
  • New member
  • Offline
  • From: Cali, USA
  • Registered: September 20, 2009
  • Posts: 5

Re: How to show live preview of template

I just realized I already know how to accomplish this. Check out the link below to see the complete template which in fact hides the majority of the source code:

http://www.favtemps.com/potentials/star … light.html

Years back I found a site that easily turns HTML into JS. All one needs to do is the following:

- convert the HTML into JS
- save the converted code as a JS file
- replace all the HTML that you just converted with a single javascript tag in the HTML file

<script type="text/javascript" src="filename.js"></script>

If you view the source of the link above you'll see that all the code between the body tag is replaced with a single javascript tag. Even if a client views the templates source code, and then finds the javascript file, I'm confident they will not even try to copy it. Yes I know there are tools to convert JS back to HTML, but if my work is really worth all that effort, I'll be flattered. I have been using this method with one of my biggest sites for areas of the site such as the sidebar and footer; much easier to edit one JS file than 2000 HTML files. I'm sure we've all been there right?

Let me know what you folks think of this, and thanks again for your replies.

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: How to show live preview of template

favtm wrote:

Let me know what you folks think of this, and thanks again for your replies.

That will probably prevent people who don't know what they are doing from copying the file, which should work for a majority of the cases. Browsing the site in Firebug though (which is extremely common for web designers to have -- I can't see developing sites without it http://getfirebug.com/) meant that I could copy it in two seconds.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 527

Re: How to show live preview of template

<div id="favtemp">
    <div id="head"></div>
    <div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Essays</a></li>
<li><a href="#">Novels</a></li>                
<li><a href="#">Links</a></li>    
<li><a href="#">My Blog</a></li>
</ul>
    </div>
    <div id="realbody">
        <div id="sidebar">

There are very simple methods to 'snag' source code from a site and very few effective ways to conceal it. Browsers need to see html/css, so the code is always in that form, irregardless of how you present it to the Browser.

Last edited by jlhaslip (September 22, 2009 11:09 am)

My signature goes here --> X

Vote up Vote down