My wife’s website (that we built):

The ripoff:

While the main difference is that the copy is of lesser quality (yes, I’m biased, but still)… if you’re not seeing the plagiarism, the main points are:

• Colored background with rounded content corners
• Dog with drop shadow laying on the top right corner
• Two-tone menu with a thin border underneath
• Content: text on the “about” page – sentences are the same in many cases with a single word “changed”
• Content: classes are almost identical, just slightly different prices

To give an example of some of the text duplication, read the following…

Example 1

TANDEM: “Hi, I’m Julie Lyle, the owner of Tandem. I have had a passion for all animals, and specifically dogs, since I was very young.”

RHODES: “Hello, my name is Jennifer Rhodes-Bingham. This all started when I was eight years old.”

Example 2

TANDEM: “My immediate family includes husband, Nathan, owner of the The U.P. Web Maestro; step-children: Josh (16), Joey (15), and Kari (13); son Raymond (3), German Shepherd Dog/Doberman mix Shelby (10), Labrador Retriever Ramsey (4) & Doberman Pinscher Duncan (1).”

RHODES: “My immediate family consists of my husband Adam, and my four dogs. I have two Greyhounds Beth Ann (7) and Foxy (3), a Golden Retriever Ace (5), and my Italian Greyhound Kylie (5).”

Looking at the code behind the pages, there are further “similarities”… for example, the keyword meta tag…

TANDEM: Dog Training, Marquette Dog Training, Puppy Classes, Dog Training Classes, Obedience, Dog Behavior, Negaunee, Michigan, Daycare, Dog Day Care, Doggie Daycare

RHODES: Dog Training, Puppy Classes, Dog Training Classes, Obedience, Dog Behavior, Negaunee, Michigan, Rhodes to Obedience, On the Rhodes to Obedience, Rhodes, Jennifer Rhodes, Jennifer Rhodes-Bingham, Jennifer Rhodes Bingham

Changing the order of things isn’t creating, it’s copying.

I can’t be sure whether this was something done entirely by the “designer” or if it was also the website owner, but if it was the owner, the designer has a responsibility in cases like this. Unless specifically stated otherwise, when content is created and put on the Web, it is the copyrighted intellectual property of the publisher. When I contacted the designer of the On The Rhodes to Obedience website, Heather Pringle, this was her response…

“I’m not sure what you are talking about.  She has a dog obedience class.  She told me what pages she absolutely wanted on the site so that is what I had to design around.  I had 2 designs for her and this is the one she choose.  I do know that Tandem is another dog training school which is similar to Rhodes to Obedience.  It is a business website so there are going to be similarities between two websites of the same business.  All the code and logo design are original and the pictures are property of the site owner and are used with her permission.”

…which doesn’t quite address the point. It’s not specific images that were copied, but the design and content. Not much different than handing in a term paper in college that you copied from your roommate. While on one hand this sort of thing is annoying, imitation is supposedly the sincerest form of flattery.

The freebie: textures, vector art, photoshop/illustrator brushes, fonts, a community of people who like art and web design

The site: BittBox

The catch: none

The freebie: stock images

The site: SXC

The catch: Follow the rules here – http://www.sxc.hu/help/7_2, and also pay attention to the “Availability” box on the page of each image.

The freebie: fonts

The site: Font Squirrel

The catch: All of the fonts should be free to use for commercial purposes, but read the license on each font before you use them to make sure.

The curtain contains two things: a solid background color and an animated non-repeating gif which gives it the preloader look. Because Javascript is used to both close and open the curtain, without Javascript enabled or available it’s bypassed entirely letting it degrade gracefully.

To try this out, first include the following onload code in your page’s BODY element:

<body onload=’openTheCurtain()’>

Then, immediately after the BODY element in your HTML paste the following code. You can change the background color and the image if you like.

<div id=’CURTAIN’ style=’height: 0px; width: 0px; position: absolute; top: 0; left: 0; z-index:999;’></div>

<script type=’text/javascript’>
// CLOSE THE CURTAIN WHILE THE PAGE IS BEING LOADED
var curtains = document.getElementById(‘CURTAIN’);
changeOpacity(’100′);
curtains.style.width = “100%”;
curtains.style.height = “100%”;
curtains.style.background = “#2d1c15 url(‘loader.gif’) no-repeat 49% 250px”;

function changeOpacity(level) {
curtains.style.opacity = level;
curtains.style.MozOpacity = level;
curtains.style.KhtmlOpacity = level;
curtains.style.filter = “alpha(opacity=”+(level*100)+”);”;
if(level<.05) curtains.style.display = “none”;
}

function openTheCurtain() {
for (i=0; i<=1; i+=(1/20)) setTimeout(“changeOpacity(“+(1-i)+”)”,i*1000);
}

</script>

If you’d like, you can see a working example at upwebmaestro.com/curtain.

Of course, this doesn’t mean you shouldn’t still try to keep image sizes down. No matter how cool your animated “loading” image is, people won’t wait forever. If you need some help creating an animated image, check out www.ajaxload.info.