I realize TV commercials have always been somewhat louder than programming but over the last few years it seems to have gotten worse… way worse, RIDICULOUSLY worse! I must include this practice of spiking the volume of TV spots among the other forms of invasive marketing to which we are all constantly subjected. There’s e-mail spam, pop-up ads, junk snail mail, marketing calls at home and on and on.

What is the thought process is behind this? Was there something wrong with the way we’ve been hearing commercials for the last 50 years? Is there any reason to think that even though we’ve been watching & hearing our favorite program with no issues that we won’t be able to hear the commercials just as easily??

We are in the new millennium and there is a war going on for our attention.

Advertisers desperate to reach us must feel they need to come at us harder. We are in the new millennium and there is a war going on for our attention. We used to be a captive audience. We were easy to find. When I grew up all I had to watch, in New York, were channels 2, 4, 5, 7, 9, 11 & 13. There were a bunch of radio stations but, by the time you broke down the formats, you only had a few of each from which to choose. A few black music stations, a few rock stations, a few classical stations, a few all news stations, a few pop stations, etc.

Today there are endless places for our ears, eyes and minds to wander. We have hundreds of TV channels, countless satellite radio stations, video games, DVDs, books, blogs and websites. We not only have infinitely more choices, we also have almost total control of how and, most importantly, when we consume our media. We use TiVo, iPods, podcasts, Kindles, Netflix and HULU to exert our control.

I suppose the thinking is “let’s grab them… and sell to them… while we have them!” The ironic thing about boosting the volume of commercials is that it doesn’t make me pay attention. I get startled and aggravated. I feel resentful and harassed. It actually increases the chance that I won’t look at your commercial at all. I’m sure to miss the first commercial of the break because I am scrambling for the remote to turn down the volume.

Two good friends of mine were recently blessed with a brand new baby daughter. We all know what a task it is to care of a newborn. After a hard day of work behind them, and a long night of tending to the often-crying baby ahead of them, they try to relax in front of the tube. They take special care to adjust the volume juuuuuust right. Low enough to not wake the baby, loud enough to be able to hear the TV without straining. Then BOOM, here comes the commercial. Wifey doesn’t see the commercial because she is running to hold the baby who is now crying. Hubby doesn’t hear the commercial either because, like a starter pistol, the loud commercial sends him diving off the couch for the remote so he can turn down the sound.

By the time the household has re-settled they have missed ALL of the commercials and it is time for their program to resume. Baby or not, many people who have to dive for the remote simply turn down or mute the sound altogether until their program resumes.

When I go to bed I like to have the TV on. Unless I’m dead tired, I can’t go to sleep in complete silence. I need to have some level of sound. I use the channel guide in the cable box to program shows or movies that are good background white noise as I fade to black. Like the happy couple I must have the volume juuuuuust right so the silence is broken but I can still go to sleep. Unlike the happy couple, diving for the remote is not an option for me since I’m curled up in bed. So what happens? Not only do I not hear the commercials, I have decided not to select the offending channel at all. Some nights I shut out the medium altogether and switch to the radio or, better yet, my iPod (no commercials)!!

By my experience, the hands-down worst offender is AMC. In the ramp up to this year’s Oscars the channel is showing many of my favorite movies. So my cable box is often parked on AMC. I was watching a Forrest Gump & Philadelphia double feature the other night and it dawned on me that I was not putting the remote down on the coffee table. I laid back on the couch with it resting on my chest because, at the start of each break, I would have to lower the volume and turn it up again when programming resumed. It got so bad that I found myself poised like the Sundance Kid ready to quick draw the remote at the start of each commercial break. Don’t take my word for it. Check out AMC for yourself. Bravo also gets dishonorable mention.

I am not alone.

To be honest, I didn’t realize how well documented this problem was until I surfed the web for some background to write this post. I knew there was backlash in the privacy of people’s homes but I had no idea how much this issue is all over the web. I found pages of articles and posts spanning the past few years. Here are just a few.

• “Television Commercials Are Too Loud declares Calif Politician” — Entertainment Weekly
• “Why Are TV Commercials So Loud” — Reader’s Digest
• “Are TV Ads Too Loud” — Parade.com

So they already KNOW this bugs the shit out of us?!?!… Which bugs the shit out of me all over again!! I don’t know which ticks me off more, coming to my own boiling point with this issue or now realizing the full scope of the outcry that has been in the ether all this time. Isn’t it safe to assume that this backlash has been brought to the attention of the offending parties?

Is this an issue worth legislating?

Did you know that U.S. Rep. Anna Eshoo (D-Calif.) introduced the Commercial Advertisement Loudness Mitigation Act (the CALM Act) to Congress in 2008? She’s now on my list of everyday-heroes! The bill would require the FCC to “preclude commercials from being broadcast at louder volumes than the program material they accompany.” The bill has passed in the House and went before the Senate on December 16, 2009.

The United Kingdom seems be on the right track with a few things. I won’t EVEN get into the universal health care issue because this post is supposed to be about my marketing gripe. Volume spiking has been made illegal across the pond. The Broadcast Committee of Advertising Practice, the UK agency responsible for regulating the TV Advertising Code, decreed, “Advertisements must not be excessively noisy or strident.” The code also says, “the maximum subjective loudness of advertisements must be consistent and in line with the maximum loudness of programmes and junction material.″

I have a visceral reaction to getting bullied on my own couch.

I’m happy the UK has outlawed the practice and that Representative Eshoo is fighting the good fight in Washington, but does it really have to come to that?? I must admit that I am particularly sensitive to being treated like this in my own living room. Is nothing sacred? At a time when so many of us are fodder for politicians, corporations, fast food chains, car companies and all types of entities that rely on us for their very existence but put our needs last on their list, I have a visceral reaction to getting bullied on my own couch.

The TV industry throws a technical smoke screen at us to explain the bullying practice. I read quite a few articles saying that sound compression differences between programming and spots were responsible for the variance in “perceived” sound. They cite the lack of uniformity amongst the varied production houses producing TV spots as the reason for the perceived sound variance.

If this is the case, why are the promos for network related programming just as abusively loud as the TV spots from outside sources?? Many times the network promo is that first commercial of the break that blasts you off the couch. Why not just set a standard. Outline some specs. Wherever you make your commercials, if they don’t meet these specs they will not get on the air.

There are many different carmakers in America and around the world making all sorts of vehicles. But if they don’t meet the EPA standards, they will not be allowed to operate on the roads in this country. Isn’t it that simple? You mean we can make an atom smashing Super Collider to re-create the Big Bang but we don’t have the ability to apply a technical standard for Snuggie commercials??

Technology to the rescue

Here is the sick part. Blasting us with commercials to get us to buy things we probably don’t want has bullied us into a new market of products to buy that will help us combat volume spiking in commercials. In other words we have to buy this new product we don’t want in order to insulate us from the loud commercials for the other products we didn’t want in the first place. They get us either way!

There is SRS TruVolume technology that is designed to even out volume fluctuations. Fluctuations, yeah right! I wish it were that subtle an experience! SRS comes equipped in certain Samsung and Vizio televisions. On Amazon.com the Vizio TVs with SRS TruVolume will cost you $1050 to $1200.

If that’s too rich for your blood you can purchase the MyVolume Volume Leveling Adaptor at the SRS store for a mere $100. This box is supposed to attach and upgrade normal televisions so you can “stop the spikes” and “end the spikes” as it says on their website. The HDMI version of the product won an Innovations Award at the Consumer Electronics Show. To me that underscores the reality of volume spiking. The problem is so pervasive that SRS got an award for coming up with technology that effectively deals with the abuse.

According to The Gadgetress of The Orange County Register on her recent blog post:

SRS Labs’ TruVolume takes all audible signals, ignores the extreme lows and highs and focuses on the middle range volumes. Loud bursts in this middle range are typically TV commercials. Its technology can distinguish between talking levels of the announcer to the sudden crowd cheers in the game to the obnoxiously loud TV commercial.

Demo of SRS Labs Volume Leveler, TruVolume

Click here to view the embedded video.

By the way, I am now a fan of The Gadgetress! I totally got sidetracked reading several of her stories and I now follow her on Twitter. If you’re a gadget geek like me I suggest you do the same! Now back to our regularly scheduled tirade…

You know what’s funny? I’ve never seen a TV commercial for the SRS Volume Regulator. This is the one product that SHOULD use volume spiking in its TV commercials. In this case it would actually be good marketing. Picture yourself late at night watching Terms of Endearment and all of a sudden… “ARE YOU TIRED OF LOUD TV COMMERCIALS THAT WAKE YOUR BABY OR SCARE YOUR PETS CAUSING EITHER TO HAVE MESSY ACCIDENTS IN YOUR HOME??” Perfect, right?

There are cheaper TV Sound Regulator boxes for about $50 but these less expensive options apparently don’t work with TiVo and HD. These are for people with older TV sets. You get what you pay for, except for these loud ass TV spots. Seems like you have to pay to NOT get those.

I confess that given the problem of volume spiking the SRS products do seem like the best passive defense. Call me stubborn but I refuse to buy it on principle. I will not buy an add-on for my TV that works just fine except for advertisers and networks trying to get in my face. Can you imagine if 3D television was the normal broadcasting format? The commercial for Exstenze would be loud AND probably have an all-naturally enhanced 3D penis extenze-ing at you from your TV screen. Oye! Besides, once we all get this box or souped up TV they will think of some other way to harass us in our living rooms. So let’s just move onto the next front in this battle without me plunking down $1200 for an SRS equipped TV or $100 for a Volume Leveler.

I’m going on offense! I choose to continue the fight by exercising remote CONTROL. I’m grabbing my TiVo remote in arms like William Wallace to fight for the sovereignty of my living room sofa!! Rest in peace Billy Mays but your ghost will not force me to submit. They are going to have to pry the remote from my cold dead hands!

As I survey the web I see the seeds of TV viewer revolt. I take heart in the people who declared they would never watch live TV; only shows on DVR so they could ignore the commercials. I loved the guy who said he has a DO NOT PATRONIZE list and he always writes down the names of products that use volume spiking in their spots. Some say this is a good reason to cancel cable and pick up a book. Many have been moved to write their local representatives. There is even a Facebook group supporting the CALM act.

Couch Potatoes Unite!

It may seem like a lot of emotion over loud TV spots but I feel them and support them. In these days & times I look at it this way…

• We can’t find jobs
• We can’t afford to go on vacation
• We can’t afford a night at the theater
• We can no longer assume when we step on the brakes that our cars will stop
• Credit cards are charging us interest rates that make the vig on a mob loan seem like a get-by loan from family
• Banks are hitting us with $35 bounced check fees for a 50¢ overdraft
• We can’t get healthcare
• We don’t like the people we didn’t vote for and aren’t satisfied with the ones we did

We’re getting beat down at every turn. Can’t we just sit at home (if you still own one) and watch some friggin television in peace??

Conclusion

Despite the aggravation many of us feel about volume spiking I’m sure there is some Ad man out there to tell us, “it ain’t pretty but it works.” I haven’t seen any data and that’s not my experience but perhaps that is true. The car salesman is generally not looked upon kindly and his sales rap is notoriously vilified but it hasn’t changed since the invention of the car dealer. If you have to get a car, you have to deal with the car salesman.

Even though we have some means of defense, we have to deal with loud commercials in one way or another if we are going to continue to watch TV. And we will continue to watch. Any of my friends will tell you I’d rather turn off the gas than my cable.

My ultimate frustration is that all this is a bunch of noise and aggravation with nothing gained for the viewer OR the advertiser. Much as I hate it, I would grudgingly concede the effectiveness of this practice if I saw that it actually worked. The problem is not my being able to hear your commercial. The problem is your product or the effectiveness of the spot you produced. If your commercial isn’t working or your product isn’t selling then you should look at your message and your creative.

I saw your spot and I heard your sales pitch. I either want your product or I don’t. I try to put myself in the mind of the advertiser and I fail to see how making a commercial louder is going to make viewers like what they see any better. It won’t change their estimation of the product. The only thing they risk doing is turning people from neutral to hostile viewers and that can’t be good for business.

TV advertisers, do you hear US now??

Today we are releasing a set of seamless paper textures, in six different color flavors, for you to download and use immediately in your next website design project.

Note: These are low resolution images and not intended for print use.

The zip archive has everything you need from individual jpg images to a Photoshop Pattern set containing all six patterns. Play with the demo and switch between the 6 different textures.

View Demo

What you get in the download

• one (1) jpg image – Purple
• one (1) jpg image – Red
• one (1) jpg image – Orange
• one (1) jpg image – Blue
• one (1) jpg image – Brown
• one (1) jpg image – Green
• 1 Photoshop Pattern set containing all six colors

You can use these openly and freely as well as redistribute as long as there is a credit and link back to this post. Please do not directly link to the download file.

Download File

Track time with little effort.

Fanurio allows you to track your time both manually and/or with a timer. Simply start the timer when you begin working on any project, pause the timer for those much needed coffee breaks and stop the timer when you have completed your task. And the software is intuitive enough to alert you when your machine has been idle and the timer is currently running.

Make sure you get paid for all of your work.

From the moment you land a new contract, Fanurio provides powerful tools at your fingertips to help you manage and bill all of your work. And you have the freedom to bill hourly or by project. The application also allows you to round time, apply discounts and include fees for work you have sub-contracted.

Your projects can be invoiced at any time and the numbering system is updated automatically. Fanurio empowers you to view which invoices are paid or past due as well as each project’s remaining balance.

Do you often work with foreign clients? No problem. Fanurio can handle multiple currencies from within the application!

Multi-User capabilities

Fanurio can import time recorded on multiple computers, making it useful for small teams and people using more than one computer. If you are part of a team, each member can install Fanurio on their own machine to track time. Members can export their time and send it to the team leader to prepare invoices for their clients.

Built to be safe and reliable.

Fanurio uses a SQL database to prevent any accidental loss of data. For greater security, you can backup your data manually or automatically when the application closes.

Analyze your performance

There are multiple reports that Fanurio can generate to help you analyze your performance over any given time period. Here are just a few questions you can quickly get answered by using this application:

• How much time have I logged so far for Client “X”?
• How much time have I logged so far for Project “Y”?
• How much money have I made this week?
• Who was my best client this year?
• How much have I invoiced this year?

Runs on multiple platforms.

Fanurio is built using Java technology, which enables it to run on Mac OS X, Windows, Linux and other “flavors of Unix”. You don’t have to worry if you have multiple computers with different operating systems. Your time and investment in Fanurio is protected and portable between all of them.

For a full list of features, please visit the features page on the Fanurio website.

How to win.

Enter to win your own free license for Fanurio by leaving a comment on this post with the following:

• Your name
• Your e-mail address (must be valid and only the winner’s email address will be shared with Fanurio to fulfill the promotion)
• How do you think this application will benefit you as a freelancer?

You may only enter once. This promotion will run until March 1, 2010 at 12:00am Eastern Standard Time. The winner will be randomly chosen, using random.org, and notified within 48 hours of the closing of the promotion.

Good luck! If you would like to play with the application, you should download the 30 day free trial version.

Congratulations!

Congratulations to Vassilis Mastorostergios for being the grand prize winner of this promotion. We would also like to thank the people at Fanurio for their help and support as well as all of the people who participated. Participants in this promotions can view details of the drawing by visiting the drawing details on random.org. You must enter the valid email address you provided for the promotion.

Let’s face it. It happens. Not every client can afford a professional photo shoot with a photographer that will deliver high quality images. And though you may have sternly recommended using a skilled individual for the task, it just may not be in their budget. And that is where you, as a designer, have to step in and work up some minor divination on those lifeless images.

I’m going to show you three very simple ways to enhance a digital photo in Photoshop. These are meant for screen use only and not intended for print production. Unless you are adept at photo retouching, I wouldn’t recommend using these methods on a document that is intended for print.

If you would like to follow along, download this “Country road” stock image from stock.xchng, but feel free to use any image you like. I am using this image for demonstration purposes only and am not saying the image represents what was described in the imagined scenario.

Method 1: Use blending modes to enhance the color.

Of the three methods, this one is the simplest. Open your image in Photoshop. From your Layers Palette window, drag a copy of the “Background” layer over the “Create a new layer” icon at the bottom of the palette window. This will automatically create a “Background copy” layer above the “Background” layer.

Now, select your “Background copy” layer and change the Blend Mode to Overlay. You should see a dramatic change in the colors of your image. In fact, the image might now be over saturated. Simply reduce the Opacity to about 70%, or until you reach your desired effect.

Now you can see the differences between the original source image and the end result. You can adjust the effect by increasing or decreasing the Opacity slider. You can also play with other Blend Modes like Soft Light to quickly add a color pop to a drab digital image. It all depends on how dramatic of an effect you want in the end.

Method 2: Change the mood of an image with a Curves adjustment layer.

Here is a method I just picked up from a photographer and master photo retoucher that is often used in fashion photography (but in a more detailed manner than what I am going to show you). We are going to drastically boost specific colors by using a Curves adjustment layer.

First, let’s boost up the saturation of the image by clicking on the “Create new fill or adjustment layer” icon and selecting “Hue/Saturation…” from the Layers Palette window. In the newly opened dialog window drag the Saturation slider to 25.

Return to your Layers Palette window and click on the “Create new fill or adjustment layer” icon again and select “Curves…”. This will add another adjustment layer directly above your Hue/Saturation adjustment layer.

For this image, I want to enhance the blue colors in the photograph. To do so, I will select the Blue channel from the drop down menu and create an “s” shaped curve. Make sure you have your Preview option on. Once I am happy with the output, I will click “Ok” and I am done.

The beauty of this method is that it is non destructive to your source image. If you don’t like the effect, simply delete the adjustment layers and begin again.

Method 3: Use High Pass filter and Blending Modes to sharpen a black & white photo.

You can quickly sharpen a dull black & white photo, in Photoshop, using the High Pass filter. I am going to first desaturate this image to convert it into a black & white photo by choosing Image > Adjustments > Desaturate. And just as we did in the previous method, I will create a copy of the “Background” layer.

With the “Background copy” layer selected, I will choose Filter > Other > High Pass which will open a dialog window for this filter.

Make sure you have your Preview option checked so you can see what you are doing. Depending on how dramatic of an effect you want, adjust the slider and hit “Ok”. I set mine to a Radius of 6 pixels because I want to really bring out the shadows and midtones.

Now, with your “Background copy” layer selected, change the Blend Mode to Soft Lift leaving the Opacity at 100%. Make another copy of this filtered layer and change the Blend Mode to Hard Light and reduce the Opacity to 15%.

Conclusion

There are other, more detailed methods of enhancing your digital images in Photoshop. These are some of my quicker methods that can result in desirable final images. Play around with them on your own and see what you come up with. I firmly believe that experimenting always produces the best accidents.

Normally, we would achieve all of these effects by slicing up our Photoshop mock-up into individual background images that would later be implemented using the CSS background property. But, since I knew this particular form would only been seen on the iPhone and iPod Touch Safari browser, I decided to have have some fun with CSS3 properties, via Webkit, and replicate the entire mock-up without using any images at all.

The end result came out quite nicely. If all current modern browsers supported CSS3 properties, we would have significantly quicker page loads and would need less images to do our presentational dirty work.

In this little tutorial, I will show you how I accomplished these effects and take it one step further to include the 3.6a version of Firefox.

View Demo

Step 1: Mark up your form

There is nothing spectacular about the mark up for the page. In fact, it is a simple form with three inputs (two text fields and a Submit button). There is also a Header 2 tag for the title of the form which is completely optionally. Open up your favorite code editor and add the following code to your page:

<div class="wrapper">
	<h2>Sign up for our Newsletter</h2>
 
	<form id="simple-form" action="" method="" name="">
		<label for="input-1">Name</label>
		<input type="text" name="input-1" id="input-1" />
 
		<label for="input-2">E-mail</label>
		<input type="text" name="input-2" id="input-2" />
 
		<input type="submit" name="submit" id="submit" value="Submit">
	</form>
</div>

As you can see, there is nothing new here. You have your form, which we are assigning an id of “simple-form”, form labels and inputs with assigned id’s of “input-1” and “input-2”. We are going to target each of these id’s in our next steps to produce gradients, rounded corners and a shadow.

Step 2: Add some basic styles to your page.

I recommend using a CSS reset file so you are always starting with a clean slate. If you do not have a reset file of your own, download ours and insert it into the head of your document before the call for your own stylesheet. Once you have done this, add the following to your own stylesheet:

body {
	background-color: #ececec;
	color: #565656;
	font: 62.5% Helvetica, Arial, sans-serif;
}
 
.wrapper {
	margin: 0 auto;
	position: relative;
	width: 320px;
}
 
h2 {
	font-size: 2em;
	margin: 25px 0 0;
	text-align: center;
}

You will notice that I’ve also given the page a background color of light gray and set the typography to a universal font size of 62.5% using Arial, Helvetica or next available sans-serif font. I’ve also set a universal color of dark gray for the all of the type. The wrapper is here for demo and the tutorial purposes only.

Step 3: Add the CSS3 magic to your form.

Here is where the fun begins. To create the rounded corners, gradients and shadows that are available to in CSS3, we have to use vendor specific extensions in conjunction with our original properties. Let’s add a background color of white to our form and a subtle shadow surrounding it. I am also going to give my form a width, margin and padding that is specific to this tutorial. What you want to pay attention to are the extensions that begin with webkit and moz targeting the Safari and Firefox browsers respectively.

form#simple-form {
	-moz-border-radius-bottomleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-moz-box-shadow: 2px 2px 10px #ccc;
	-webkit-border-bottom-left-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-webkit-box-shadow: 2px 2px 10px #ccc;
	background-color: #fff;
	margin: 25px auto 0;
	padding: 25px 10px;
	text-align: center;
	width: 260px;
}

What we’ve done here is set the border radius of all four corners to 20 pixels which will give us a nice round edge. What may not be as obvious is the box-shadow property. The shorthand declaration takes four attributes:

• The distance of the shadow on the x-axis (2px).
• The distance of the shadow on the y-axis (2px).
• The amount of blur radius to apply to the shadow (10px) with 0 being sharp.
• The color to apply to the shadow (very light gray).

Now, let’s style the labels and inputs for the form. We are going to be using border-radius once again, but this time we are going to apply a gradient to the inputs as well.

form#simple-form label {
	display: block;
	font-size: 1.65em;
	font-weight: bold;
	letter-spacing: -0.025em;
	margin: 0 0 5px 15px;
	text-align: left;
 
}
 
form#simple-form input#input-1, form#simple-form input#input-2 {
	-moz-border-radius-bottomleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	background-color: #eaeaea;
	background: -moz-linear-gradient(top, #ffffff, #eaeaea);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffffff), color-stop(1.0, #eaeaea));
	border: 1px solid #cacaca;
	color: #444;
	font-size: 1.4em;
	margin: 0 0 25px;
	padding: 8px 10px;
	width: 240px;
}
 
form#simple-form input#submit {
	-moz-border-radius-bottomleft: 32px;
	-moz-border-radius-bottomright: 32px;
	-moz-border-radius-topleft: 32px;
	-moz-border-radius-topright: 32px;
	-webkit-border-bottom-left-radius: 32px;
	-webkit-border-bottom-right-radius: 32px;
	-webkit-border-top-left-radius: 32px;
	-webkit-border-top-right-radius: 32px;
	background-color: #dedede;
	background: -moz-linear-gradient(top, #ffffff, #eaeaea);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffffff), color-stop(1.0, #dedede));
	border: 1px solid #dedede;
	color: #484848;
	font-size: 1.65em;
	font-weight: bold;
	padding: 10px 15px;
}

With the -moz-linear-gradient and -webkit-gradient attributes, we can replicate the gradients created in Photoshop right in the browser without any images. The two are slightly different from one another on how you implement them, but the effect is exactly the same.

For webkit, you must establish the type of gradient (linear), the starting point (left top), the ending point (left bottom), the color-stop, color value and origin point of the first color (white starting at the very top), and the same the the second color (gray starting that the end). For moz, you can either use -moz-linear-gradient (in this case) or -moz-radial-gradient. For a simple gradient like this one, state the origin point and two colors and you are done.

The Demo

If you are browser with either Safari 4 or Firefox 3.6a, you will be able to see CSS3 wizardry in action, which leads me to the caveat of this post. As of now, these properties are experimental and only a part of the CSS3 draft. Therefore, they are subject to change at any time. So, when you combine this with the lack of universal support, I recommend sticking to your tried and true methods for now or use them sparingly with a graceful degradation for unsupported browsers.

View Demo

Add the following lines of code to your document before the closing <body> tag and presumably in your footer area:

<script language="JavaScript" type="text/javascript"> 
 
 today=new Date(); 
 
 y0=today.getFullYear(); 
</script> 
<p>Copyright &copy; 2007 - <script language="JavaScript" type="text/ 
javascript">document.write(y0);</script> Your site name. All Rights Reserved.</p>

This is all you need to automatically update the copyright year on your website using a smidgen of javascript. From here on, though appreciated, you wonʼt need to be reminded to update that pesky date on January 1st.

How do I update my copyright notice in WordPress?

While this code will work fine in your WordPress theme, I would recommend leveraging  the power of PHP to get the job done. You wonʼt have an inline javascript call and it is less code (remember to keep that mark up clean and lean).

Place the following code in the footer.php file of your theme:

<p>Copyright &copy; 2007 - <?php echo date('Y'); ?> Your site name. All Rights 
Reserved.</p>

And, once again, you have a simple and worry free method of updating that copyright notice. I hope you found this helpful and Happy New Year to you all.

2009 was interesting year for me professionally. After spending a few years as freelancers, I, along with my partner, decided to start our own design studio and marketing agency.

For me, this was born out of the frustration I felt from working alone as well as the quality of projects I was taking on as a freelancers. From our initial conversations, we knew that, with our combined talents, we could create something that would benefit not only ourselves personally, but anyone we decided to work with.

Well, after opening our “doors” in September 2009, it is time for us to look back at our first 4 months and start to establish concrete goals for ourselves in 2010.

Reduce the amount of freelancing work.

Taking on freelance projects in 2009 gave us much needed financial security but left us with what I perceived to be a catch 22.

As David and I began laying the foundations for pixel8, it was necessary for us to continue to take on small freelancing projects from time to time. This gave us much needed financial security but left us with what I perceived to be a catch 22. While this allowed for a continuation of capital inflow, as well as an opportunity to stay sharp, it also took valuable time away from focusing on our company. I tend to work 70-80 hours a week and it becomes detrimental to our brand if half of that time is spent working on anything other than pixel8.

In 2010, it has become imperative to remove the safety net and almost focus exclusively on pixel8. As frightening as this seems to me now, I know this is the only way to completely remove the freelancing title from my name and make the full segue to pixel8 being a design studio.

And trust me, I would love to be able to “rip this bandage off” immediately. But, realistically, I know that this is a gradual goal over the course of the next 12 months. For starters, I have already begun to only consider freelance projects from existing past clients. And this will be on a case by case basis. This will force David and I to spend the necessary time, energy and effort to find projects that benefit the company and not simply us personally.

Establish pixel8 as a company and not simply two freelancers.

David and I are now the co-owners of a company and have to deal with issues that were not pertinent to us as freelancers.

This goal goes hand in hand with the previous one. One of the bigger differences between being a freelancer and a company is the amount of administrative work involved. David and I are now the co-owners of a company and have to deal with issues that were not pertinent to us as freelancers: accountants and corporate taxes just to name two.

I will be the first to admit that this is not where my strengths lie. I prefer to sequester myself to the creative corner of our business, but no longer have that luxury. Beginning now, we have to spend the necessary time to establish how this business will run and eventually become a profitable entity. This will mean establishing quarterly budgets and projections (yawn!) as well as trademarking our brand. None of which I find to be particularly sexy, but imperative for our long term goals.

Take on more challenging and diverse projects.

The temptation, when starting a new company, is to take on every project that comes your way.

We conceived pixel8 as a place for small and start up businesses to come with their large ideas. We then take these large ideas and bring them to life whether on or offline. In 2010, I want us to take on more challenging projects that involve all aspects of the services we offer: from design to development to marketing.

The temptation, when starting a new company, is to take on every project that comes your way. But, if we are to achieve this particular goal, David and I will have to be more selective about the projects we take on; weighing the balances between our company’s gross projections against how the project builds our brand (can you see how the corporate side of my brain is starting to infringe on the creative side?). I believe this will become critical to establishing a multifarious portfolio for pixel8 which will benefit the brand as a whole in the long run.

Be more consistent with blogging.

More than improving our consistency, I want to expand on the topics we cover in the blog.

Our blog is more of an online journal of our thoughts, news, tutorials as well as anything we find inspirational. When we opened the doors on September 9, 2009, I set a personal goal for myself to post at least once a week. I fell well short of this goal in 2009 averaging less than 2 posts per month. Even worse than me is my partner, David (sorry, I have to call you out here). He has yet to write a single post though I know he has some great ideas brewing!

More than improving our consistency, I want to expand on the topics we cover in the blog. This area of the site was also meant to be a place for people to get to know the principle members of the studio, as well as interact with us. And though I enjoy writing design and web related tutorials, I like to think of myself as an individual whose interests run the gamut from sports to movies to music to social issues. This will be more reflected in what David and I write in 2010.

Write more guest blog posts.

This is more of an individual goal than one for pixel8. As I reduce the amount of tutorial related posts on our site, I want to start writing more guest blog posts for other design and development related blogs. I had the privilege of doing so for Little Box of Ideas in 2009 and have already delivered a couple of posts for the new design blog, Design Informer which will be published over the next couple of weeks.

This gives me the ability to share some of my knowledge as well as network with other designers and developers on a global basis. Obviously, pixel8 will benefit from the added exposure, but this goal is more for me to become an interactive part of the community.

Improve the usability experience of the pixel8 website.

Anyone who knows me is well aware that I am always looking to improve on my work. This becomes more evident in the work I’ve done on our website. In fact, though I would love to do so right now, I made a promise to myself that this version of our website will exist for a minimum of one year before I think about a redesign.

With that said, as I begin to focus on user experience as much as visual presentation, there are some upgrades I have already implemented since our launch in September 2009. This is most evident on our portfolio page. I intend on making more of these types of improvements over the course of this year as we continue to grow and I learn more about how our site is being used. I am hoping this will make the redesign process in the Fall of 2010 a bit more seamless.

Conclusion

It is imperative for any company to establish short and long term objectives to measure their success by. If we are able to meet these benchmarks over the course of 2010, I think this will set us up for some of our far reaching goals of finding office space and expanding the team. Right now, we are very excited about the new year with all of the possibilities at our fingertips. Stay tuned and we will keep you posted on our progress as the year goes on.

I knew the key to making this work would be jQuery. But there were a couple of important elements I needed to maintain control over:

1. The portfolio page had to still be dynamic using WordPress categories within a WordPress loop.
2. The filtering animation needed to be smooth and the script needed to be light weight. I did not want the load time for this page to be noticeably slower.

The initial hurdle I needed to overcome was the fact that I am not a javascript master.

The initial hurdle I needed to overcome was the fact that I am not a javascript master. There are simple animation effects I can implement, using the jQuery library, but this was going to be a bit out of my grasp. I did find an interesting tutorial at Nettuts+ with a detailed walk through of how to achieve the effect I was looking for. I’m sure that if I had a better understanding of writing javascript code, this would have been a breeze. But, alas, I do not and I was left scratching my head.

In the end, being under a strictly imposed launch deadline, I had to abandon my initial idea and break down the portfolio into four individual pages (all, web, print and identity). I was down, but not out. I continued to read tutorials and posts from individuals wrestling with the same concept.

Then I struck gold last week when I landed on the stellar portfolio website created by Jay Hollywood. His portfolio page had exactly the user experience I wanted to have and he was kind enough to share how he accomplished this, as well as other jQuery magic, in his blog post, Using jQuery to enhance my website.

Jay introduced me to a filterable jQuery plugin created by New Media Campaigns that had all of the necessary features I required as well as multiple customizable options. And, since links in the sub-navigation use hash marks, you can link directly to a filter! All I needed to do was to configure this script to work with WordPress. This process was relatively simple to achieve and I will share all of the steps I performed to accomplish our newly filterable portfolio page.

Step 1: Download the plug-in & Get your theme ready for the script

Before you begin, make sure you are properly calling for the jQuery library between your <head> tags. In the rare chance you are not, simply add the following lines of code to your functions.php file. If you do not have a functions.php file, simply create a new one and upload it to your theme directory.

if( !is_admin()){
   wp_deregister_script('jquery'); 
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
   wp_enqueue_script('jquery');
}

This is the correct way to call the jQuery library into a WordPress website. It is not only stable, but prevents plugins that use jQuery from calling another instance of the library. Using this method, you can now call all of your custom scripts and plugins after the <?php wp_head(); ?> line of code.

Now, you will need to download the plugin from New Media Campaigns. Take a moment to read through the documentation to determine how you want to customize the script.

Once you have downloaded and extracted the zip file, you will want to upload the filterable.js file to your javascript directory. Make a call for the plugin in your header.php file after <?php wp_head(); ?> using the following:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/filterable.js"></script>

Lastly, if you haven’t done so already, create a category in WordPress called “work” (or whatever you want to name it). Create sub categories of this category called “web”, “print” and “logos”.

Step 2: Mark up your sub navigation

As with any website navigation, you will mark up your sub navigation with an unordered list. Create a custom page template named “work.php” and add the following code. Note that, with the exception of “all”, the remaining options correspond with your sub categories.

<ul id="portfolio-filter">
	<li><a href="#all" title="All">All</a></li>
	<li><a href="#web" title="Web">Web</a></li>
	<li><a href="#print" title="Print">Print</a></li>
	<li><a href="#logos" title="Logos">Logos</a></li>
</ul>

You can replace these options with your own. The only thing you want to make sure of is that the hash marks links are identical to your sub categories. This is case sensitive. If your sub categories are capitalized, your hash marks links must be capitalized. At this point, you can style your sub navigation according to your mock up in your CSS file.

Step 3: Use the WordPress loop to generate your list of portfolio items

Your portfolio items need to be marked up inside of an unordered list. Each of your list items will need to have a class name of “all” and the corresponding category. And, as I mentioned before, I want this to be completely dynamic. This can all be achieved by using a simple WordPress loop and a call for each individual sub category.

<ul id="portfolio-list">
<?php query_posts('cat=17&showposts='); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<li class="<?php foreach((get_the_category()) as $category ) { echo $category->cat_name . ' all'; } ?>"><!-- add your portfolio item content --></li>
<?php endwhile; ?>
<?php endif; ?>
</ul>

As you can see, we open a basic loop querying the category with an id of “17″ (This would be the “work” category id but you should replace this with your category id) and showing an unlimited amount of posts (you can limit this by placing a number after the equal sign). This loop will return all items categorized as “work”, including any sub categories of “work”. In order to return the category name as a class, we use a “php foreach” statement that will echo (output) that name as well as “all”. All that is left for you to do is add your portfolio content (images, text, links, etc.) in between the opening and closing <li> tag.

Conclusion

With this easily customizable solution, you should be able to add some excellent interactivity to your portfolio page in WordPress. I have to thank Jay Hollywood for sharing his website assets and for the team at New Media Campaigns for releasing their solution for a javascript rookie like myself. In their spirit of “paying forward”, I hope you found this post helpful when you are creating your WordPress driven portfolio site.

As of today, we have just received approval on the home page design and, as we begin the process of designing out all of the sub pages, I thought I would share the first roughly designed iteration, some of the thoughts behind that design and why it ultimately failed.

A Beautiful Design does not Equal a Successful Design

There is a tremendous gap between what looks great and what works for the client, the brand and the target audience.

As you can tell from the first mock up of the home page, I set out for the site to be bright and lively. I incorporated vibrant colors and spent some time making various vector illustrations for background elements. I thought the layout, on a whole, was clean and the content would be easily accessible. I knew that, if approved for further development, I would need to add some fine details but I was on the right track. So, feeling like I had a winner on my hand, the rough mock up was sent out for approval and comments.

But, as any designer can attest to, there is a tremendous gap between what looks great and what works for the client, the brand and the target audience. This became oh so evident when I received the comments:

Everyone really liked the brightness of the colors and ease of the rectangular text boxes.  In general though, people thought that the overall imagery of the animation read more like a pre-school.  A question was asked whether the sky and grass might be more abstracted or if there was a way to incorporate more local images-indicating that we are an urban (with a love of the outdoors) school?

So, I was in the right neighborhood, but on the wrong street! After reading the comments, speaking with the principals and picking apart my design, I had to agree with them. Though the rough version is very pretty, it does not work for the school. My original layout does feel like a pre-school website as opposed to a site for a school that has students from pre-K the 8th grade. And though I loved my cute vector illustrations, they just didn’t fit. It was back to the drawing board for me.

If, at first, you don’t succeed…

The only thing that would make it past the rough version would be the vector flock of birds. I decided to scrap everything else, come up with an alternate color palette and rearrange the layout. This time around, while keeping a green theme, I decided to create some textured background images (something that felt both urban and natural). These backgrounds would be accented with silhouette images of the Brooklyn Bridge as well as people and children interacting in Prospect Park (Brooklyn’s equivalent to Central Park).

The main site navigation was made more prominent by moving it to the very top and assigning its own color palette. This made for a much stronger presentation than the rough version. The footer area was broken up into two sub footers. One would act as an area to promote upcoming fund raising events, a site map and quick contact information. The second would be for legal information and site credit. Lastly, a search form was added as I never got the chance in the rough mock up.

I felt very confident about the design but it doesn’t get the green light until I get a message like this from the client:

Thank you so much for your creative energy and this wonderful revision.  Everyone is very positive about the site and would like to move forward.  We love the way you have made a very green but urban landscape with active people.

Experiences like this one reinforces that I have to always keep the brand in mind when designing anything. It is very easy to “fall in love” with your work and lose sight of the ultimate goal. This is especially true when it comes to designing websites.

Well, one of the many reasons why I exclusively went from using TextMate by MacroMates to Coda by panic was the ability to create a Code Clips library to increase my work flow. This not only sped up my level of productivity but, as I often have the proclivity of doing, made sure I didn’t type any incorrect syntax on items I use for nearly every site.

So, if you are new to Coda, have the software installed and haven’t started your own library of code snippets, I want to share 4 of my most commonly used CSS snippets. (Note: These are a combination of my own home grown code snippets and tricks I’ve learned along the way from other developers. I am not advocating that these examples are the only way to achieve the end results.)

Installing code clips in Coda

To install any of the snippets, copy the code from this page. Launch Coda and choose Windows » Clips. This will bring up the Clips window with the default clips that were installed with the application. For organization, I would recommend creating categories (I have categories for HTML, CSS, and WordPress). Once your categories are set, select the one you want to add a clip to and click the plus sign. Give it a title and past the code. Simple.

How to use code clips in Coda

Using the code clips are even easier than installing them. Simply open the Clips window, choose and clip and click Insert. The clip will be inserted in the active document window at the current location of the cursor.

1. CSS Clearfix

If you hand code your own CSS, you know that clearing floats is a beast unto itself. Some developers, including myself in the past, will place an empty div class named “clear” after the floated elements. In their stylesheet, this class will have property of “clear: both”. What I didn’t like about this solution was that you would end up with all of these empty divs throughout your page. And then, someone introduced me to the CSS Clearfix solution and I was sold.

The Snippet

.clear {
	display: inline-block;
}
 
.clear:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

The Usage

This bit of code is quite ingenious and works flawlessly in IE 6 (which is a gift by itself). To implement, append this class to any div that contains floating elements and you are in business.

<div id="whatever" class="clear">
	<!-- Insert floated elements -->
</div>

2. The Wrapper

Some of us call this class a “wrapper” others call it a “container”, but we all use it to control the width of the content on our pages. I know that I personally use the exact same width size of 960px for the content on every site I design (this does not include background decorative elements). This snippet insures me that my body content will center and fit nicely on all monitors.

The Snippet

.wrapper {
	margin: 0 auto;
	position: relative;
	width: 960px;
}

The Usage

As the name indicates, this element will “wrap” around all of the elements on the page, constraining them to 960px and centering it for you. (Note: You can alternately have another snippet that does not center by removing the margin property.) And, since this is a class and not an id, I can use this several times throughout a page which comes in handy when I split up content with different backgrounds.

<div class="wrapper">
	<!-- site content goes here -->
</div>
 
<div class="wrapper">
	<!-- more content -->
</div>

3. Site Logo Image Replacement

I will state up front that not everyone uses image replacement for website logos. It is a method I learned many moons ago and I haven’t found a good reason to drop it yet (which doesn’t mean that I won’t). What you basically are doing is giving an h1 tag a class of “logo” and replacing the text with your logo image. You also want your logo image to be an anchor, usually to your home page, so you need to have a style for this class’ anchor tag for this as well.

The Snippet

h1.logo {
	background: url(pathtoimage/nameofimage) no-repeat 0 0;
	display: block;
	height: ; /* your logo image height */
	text-indent: -9999px;
	width: ; /* your logo image width */
}
 
h1.logo a {
	display: block;
	height: 100%;
	width: 100%;
}

The Usage

This one is quite simple. You mark up your h1 tag like you would normally and give it a class name of “logo”. If you look under the hood of every site I’ve coded, you will see the following code:

<h1 class="logo"><a href="#" title="">Text</a></h1>

4. Floating Left & Right

A CSS property you will find yourself using more often than not is the float property. Instead of assigning these properties to every necessary selector in my stylesheet, I create a class of “right” and “left” that I can use at will in the mark up that will reference the necessary property.

The Snippet

.left {
	float: left;
}
 
.right {
	float: right;
}

The Usage

Now I am free to add the necessary class to any div element, including an element that already has a class, without having to write a specific float property for that element. I cannot tell you how much time this saves me when developing a site.

<div id="whatever" class="left">
	<!-- whatever you are floating left -->
</div>
 
<div id="something" class="right">
	<!-- whatever you are floating right -->
</div>
 
<div class="someclass left">
	<!-- add multiple classes to the same div -->
</div>

Conclusion & Other Resources

I know that none of these snippets are reinventing the wheel by any stretch of the imagination. Whether you are new to hand coding or a jedi master, I hope you are inspired by this post to start your own library of code snippets in Coda. This bit of work now will streamline your work flow and eventually save you hours of headache.

For a more advanced list of clips, check out Coda Clips and CSS Tricks. You can even download the clips right into the application without copying and pasting.