But what is one to do?

This happened to me a couple years ago. I was going through my web logs and noticed some disproportionally high activity from one particular domain. When I visited it, to my shock, I saw my entire site, photos and all, copied by someone in the US. Not only did he steal my look and feel, CSS and Javascript, the perpetrator had the gall to hotlink to my images. You can see a side-by-side comparison of the two sites here [250K]. See if you can which one is the copy. Hint: I’m not a Mystic Warrior of Rage.

It wasn’t the first time this has happened, but it was the first time I saw my entire site lifted. Granted my site was in a web designer inspiration book, but come on!

Chased by thieves? Outpace them.

So, once again I did what every rational guy in my situation would do, I broke his site [220K] (scroll down for the full effect). Unfortunately, the screenshot doesn’t capture the blinking effect I placed on the image, but you get the point.

Did doing this make me feel better? Of course it did. Was it the right thing to do? I’m not certain. Am I proud of my pettiness and actions? Not particularly, but what’s done is done.

Perhaps I could of gotten the law involved. I could of Google bombed him. I could of just been flattered that he copied my work. But in the end, there’s the right thing to do, and there’s the practical thing to do. Was hiring a lawyer worth it in this case? Not really, the guy was obviously small potatoes, and wasn’t getting much business anyways – as exhibited by his lack-lustre portfolio [250K]. Was I losing revenue because of his site? No, as he was in another country altogether. Was he going to gain business from copying my site? Perhaps he could attract some interest, but he definitely lacked the talent to back it up. So I left it at that. I left his blinking, broken site as is, and moved on.

How to avoid being ripped-off

In short, you can’t. You can set up all sorts of mechanisms to protect your work. But unless you’re a large company, with an army of copyright lawyers, there’s not a whole lot you can do to avoid being ripped-off. But if you’re a small enough operation, and agile enough, there is one thing you can do:

One-up yourself regularly

Redesign your site regularly. New CSS and Javascript techniques are created every day, why not use your redesigns as platforms to display and hone your pixel-prowess? Use your redesigns to create an awareness of your talent and your ability to regularly renew yourself. By doing so, not only will you will benefit by staying at the forefront of web design, you help keep yourself relevant. Just remember this:

Talent will outpace the hacks every time.

Have you ever been ripped off? What did do about it?

Special thanks to those who helped me think about this post: Cameron Campbell, Nicolas Roberge, Kirsten Cameron, Anna Gunaratnam, Ara Pehlivanian and Debbie Rouleau

Resetting CSS styles will save you a lot of time

• Yahoo’s YUI Reset CSS
  This reset does some basic resetting of margins and borders, as well as remove some table borders, and form inputs styling. It validates as CSS 2.1 against W3C’s Validator.
• Eric Meyer’s 2008 Reset
  This latest version from Eric Meyer (@meyerweb), based on Yahoo’s reset, also validates as CSS 2.1 against W3C’s Validator, and is used in the 980 grid system (which is a solid starting point for any web design project). Eric’s reset is well known for resetting all default styles (generally speaking) – meaning you have to style virtually every element (except for notably form inputs). Though this is great for advanced designers, it may not be for everyone.

So, say, you do want to reinvent the wheel and create your own homemade reset file. Here are some pointers from Smashing Magazine:

• Place the reset code first
  Obviously, resetting the styles at then end of your CSS is counter-productive.
• Avoid *{padding:0; margin:0;}
  I’m guilty of doing this. A couple of years ago, it seemed like a good idea. One line, reset everything. But according to Christian Montoya, this method is very intensive for the browser, and it’s better to write specific selector resets.

While this is no where close to a new technique, it’s one that many designers aren’t aware of (along with classing the body tag), and I feel it’s worth familiarizing yourself with.

What are your thoughts about CSS resetting?

How I wish IE6 would go the way of movable type

By no means am I a CSS ninja, I’m not even a CSS guru, but what I am is a guy with a few years under my belt spent designing, developing and analyzing web sites. While working at Concordia University, I’ve had the… “privilege” of seeing a wide variety (X)HTML and CSS bugs. Here’s one bug that stole a day’s worth of work from me that I wanted to share:

In Internet Explorer 6, if the font-size of the body is set to 1em, the Text Size feature (shown below) when set to sizes other than medium, makes the fonts laughably out of proportion. If you are also having this problem…

How to set the Text Size in IE6

Good news: IE6 is on the decline and its use, at least according to Concordia’s web statistics, appears to finally be on the verge of dropping below 15%. If you wait long enough, you can ignore this bug altogether!

Bad news: at least 15% still use it, and if you’re like me, 15% is still a sizable amount of traffic to disappoint, so, the plan of just telling people to use Firefox or Safari is pretty much out the window.

So you don’t have to waste a day of your life debugging, I dug up solutions from Fierce Street Networks and The Montoya Herald.

Typically the root cause for this strange behaviour in IE6 is a body style set somewhere in the CSS like this:

body{
     font-size:1em;
}

All you have to do is declare the base font-size as follows:

body{
     font-size:100.01%;
}

That’s it that’s all.

The only things to remember are:

• Avoid setting the percentage lower than 100.01% (for cross-browser considerations, you can blame Opera for its odd rendering of fonts).
• No matter what percentage you set, tack on the 0.01% at the end (to not markedly alter the desired font-size, namely in Safari).

So for example, 110.01% is fine, 99.01% is not. Personally, I suggest you stick to the 100.01% setting. I’ve used sizes other than 100.01% with success, but your results may vary. As for the rest of the font-sizes on the page, feel free to use em or percentages, whichever you prefer. From my experience, neither one breaks this fix.

If you have a better solution for this IE6 oddity, do let me know.