Tom’s Graphic Design Journal

I feel that spec work is terrible. A designer goes out of his/her way to create something (or at least a good bit of something) and in the end the client can turn it down. What a complete waste of time and energy not to mention the creative and intellectual work that went into it all.

With the web, we have more to worry about because the wonderful "view source" options web browsers have, one can completely rip off someone else with ease. Well, good news! There is a way to protect yourself as a web designer.

How can you protect HTML? IonCube has a FREE HTML encoder! Provided you of course set everything up on your server, no one will be able to steal your HTML code! So you could design full functional mock-ups without fear. The only problem is, you don't want to use this encoder in a production environment because search engines won't be able to pick up the code. IF there was some way to allow the search engine robots to bypass the encryption, I think the HTML encoder would be much more widely used. Web sites get ripped off all the time. This could help make it more difficult to copy a site. Sure, if someone knows HTML they can copy a design from scratch, but that's something most thieves don't want to bother doing. So, in the very least HTML encrypting is a good way to deter and protect your spec work.

Ioncube also has PHP encryption software which I would completely recommend if you script PHP. It is VERY easy to setup (far easier than most other options) and very easy and fast to encrypt. It was the best investment I've made yet for web design.

Adding more text and bulk to my blog is one thing I certainly like to do haha...but I also like to keep notes so I don't forget how the heck I did some things. I'm adding this quick note here and hopefully it benefits someone else out there.

My portfolio site was recently updated and I went back and started playing around with the CSS a bit and wanted to make some subtle enhancements. Being on the opacity theme with the effects on my site, I decided I wanted to have the thumbnails of my work grayed out and then show 100% when you rolled your mouse over them. Simple right? Well, yes, it is easy but there was one tiny hang-up with making it compatible with IE.

As many people know IE has some quirks with opacity, transparent pngs, etc. My blog took a lot of work and time making it cross-browser friendly. I still have yet to go back and make a version for Safari that I'm happy with...but I digress.

What I did to get the thumbnails 25% opacity was used a CSS class. I could've used moo.fx for this all mind you, but I didn't really need them to "fade" smoothly in, just popping from 25% to 100% was fine. It would probably be too taxing on some computers anyway and the code would be longer, yada yada. So this was most effecient.

I simply added the following in my css:

.gray { display: inline-block; opacity: .25; filter: alpha(opacity=25); }
a:hover { opacity: 1; filter: alpha(opacity=100);}

A little trick here, the "opacity" value is not recognized by IE, but filter is. That same filter property is used by IE for transparent PNGs too if you take a peak at the CSS running this blog.

There was absolutely no harm in making a:hover 100% opaicty because any link that was 100% still looks like nothing happened! So that's a good trick and saved some time coding.

The real trick here, though, is the "display: inline-block" because IE's dreaded "hasLayout" issue. I needed to specify something to trigger this property in IE and messing with the size was not something I wanted to do. The "holly hack" is merely making the height of an object set to 1% or 100%..whichever. Again, I didn't want to take any chances of browsers that did pay attention to that size to make my thumbnails be too small or too large.

So after adding the CSS, I merely added class="gray" to any A tag that I wanted the effect applied to. It was just the images in this case, but it could be any link and anything that's inside that link tag of course gets the opacity applied to it! Cool! Also, it doesn't have to be just a link tag...it can be anything you want to have this rollover effect.

Very simple. Nothing earth shattering, but something I found soooooo simple to do and why everyone resorts to Flash...I'm really not sure.

I'm in the middle of working on my out of date portfolio site...which always seems to be under construction. Fortunately I'm not applying for any jobs anytime soon - BUT it is something I mean to do. I feel lazy if it's not up to date.

So I wanted to use some effects from the moo.fx library because I'm in an anti-Flash kinda mood. While I like Flash, I think it's over used and used in very very non-efficient (or effective) ways.

Since moo.fx lacks good documentation, I created an example page to share with the world. I wish that I would've had an example/tutorial like this when I first set out to use moo.fx as it would have helped a lot. So hopefully it is of help to someone out there.

Check out my moo.fx fade example.