we are pixel8, inc.

Change Opacity of Images on Hover using jQuery

Erik Ford — Wed, 04 Aug 2010 23:59:31 +0000

Not long ago, I wrote a post about how you can create a filterable portfolio, in WordPress, using a jQuery plug in. And, since I love the ability to create subtle nuances for the user, I decided to extend this tutorial and show you how to include a hover effect animation for your thumbnails.

The Goal

What I want to achieve is actually quite simple and I am sure you have seen the effect before. When a user hovers over a thumbnail in the portfolio, I want the opacity value of the remaining images reduced to a percentage of my choosing while leaving the hovered image opacity at 100%. I first set out to conquer this subtle animation using CSS only but, with poor cross browser support for opacity, I only ended up with really bad hacks and workarounds.

Once the CSS experiment proved to be a failure, I knew that jQuery would be perfect for the task. And, how right I was. The code ended up being minimal (less than 10 lines) and I could retain my clean and lean markup.

View Demo

Step 1: Get the latest version of jQuery

The first thing you want to always do is make sure you are running the latest version of jQuery on your site (version 1.4.2 as of the publication). You can do this by either downloading the most recent version and uploading the file to your server or by hotlinking to the latest version directly from a CDN (Content Delivery Network) like Google Ajax API. I prefer the latter. Simply add the following code between the opening and closing tags of your document.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>

Step 2: Write the HTML Markup and CSS Styles

There is no need for me to spend much time designing and coding a complicated layout for this demo. Suffice to say, your portfolio list should semantically be wrapped in an unordered list. The design and presentation of your portfolio is left up to your imagination. For demo purposes, I have written the following HTML code:

<ul id="portfolio-list" class="clear">
	<li><a href="#" title="Koopon Website Design"><img src="images/koopon.jpg" alt="Koopon Website" width="210" height="140" /></a></li>
	<li><a href="#" title="Patriot Pride Corp Logo Design"><img src="images/ppcorp.jpg" alt="Patriot Pride Corp Logo" width="210" height="140" /></a></li>
	<li><a href="#" title="Mazaif Packagin Design"><img src="images/mazaif.jpg" alt="Mazaif Packaging" width="210" height="140" /></a></li>
	<li><a href="#" title="Women Working Logo Design"><img src="images/womenworking.jpg" alt="Women Working Logo" width="210" height="140" /></a></li>
</ul>

There is nothing overly special here. The

.clear { display: inline-block; }
.clear:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }
#portfolio-list li { float: left; margin: 0 10px; }
#portfolio-list li a, #portfolio-list li a:visited { display: block; border: 5px solid #4f8603; width: 210px; height: 140px; }
#portfolio-list li a:hover, #portfolio-list li a:active { border-color: #315301; }

All I have done here is float the list items to the left and given them a margin of 10px on the left and right sides. All of the list item links will have a 5px border of green that will change to a darker hue on hover. Lastly, you will notice my little “clearing fix”, which is most definitely a hack, but it works and I never leave home without it.

Step 3: Write the jQuery to animate the portfolio

The amazing part of this entire journey is that it will only take 8 lines of code to accomplish our goal by using the new jQuery.delegate() method. Add the following code to your javascript file and I will explain what is happening afterwords:

jQuery("#portfolio-list").delegate("li", "mouseover mouseout", function(e) {
	if (e.type == 'mouseover') {
	jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "0.3"}, 300);
    } else {
	jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "1"}, 300);
   	}
});

As you can see, we are targeting all of the

tags inside of #portfolio-list and attaching the “mouseover” and “mouseout” events using jQuery.delegate(). Now, if the user hovers over a list item, animate all of the of the other items by reducing their opacity to 30% over 300 milliseconds. The else statement returns the opacity back to 100%.

Normally, I would use .stop(), which would literally stop firing the animation if the user quickly hovered over another image causing all of the images to flicker. But Phil Salesses discovered some unwanted behavior when using my snippet in conjunction with the filtering plug in and discovered that .dequeue() would also halt the animation without interfering with the plug in.

Conclusion

There you have it. A very simple way to add a little interactivity to your portfolio with minimal amount of code. Be sure to check out the demo to see the script in action. Also, if anyone has a better script for this type of animation, please share in the comments.

View Demo

Behind the Design & Development of the Six11Ink Website

Erik Ford — Thu, 27 May 2010 00:43:38 +0000

Yesterday, we are pixel8 were happy to launch a website for one of our strategic partners, Six11Ink. Now that the site is live and in the wild, I thought it would be interesting, if not cathartic, to share some of the design inspiration and processes that went into this project. I hope you enjoy this post as I will try to write at least one about each of the projects we work on.

The design mantra? Retro & Vintage.

Having already designed the logo for the client, I had a clear understanding of what I visually wanted to achieve with the website. The keywords I was working with were retro, clean and vintage. Since the client’s services center around copy writing and content strategies, it really didn’t make sense to design an image heavy website that would distract from the content.

Obviously retro and vintage is something that is quite trendy these days and I didn’t want to over do it. The site needed to remain tasteful and speak in the owner’s voice and not my own. And, though I steered the direction the site would eventually take, each and every part of the site defines and personality trait of the owner, down to the raven as favicon.

My sources of Inspiration

During a particular conversation with the client, I started talking about the usage of hand drawn graphic ornaments that were prevalent in printed materials during the 19th and early 20th century. I wanted to experiment with some of these elements and bring them into the site somehow. The graphics, which would be kept to a minimum, would compliment the paper texture (mimicking the paper stock that was used during this time period) created for the tiling background.

I found endless inspiration in old text books, encyclopedias and first edition novels printed between 1800 and 1920. I started to collect all of these images and made a “mood board” that would assist me during sketching and mocking up. I loved the hand drawn etchings, the use of typography to create contrasts between type and the beautiful ornaments to dress it all up.

Hand drawn etchings

The hand drawn etchings I found in first edition novels were key points of inspiration that would lead me to the scans used as icons to differentiate each page.

Inspiration from vintage textbooks

I liked the idea of not only using these etchings, but putting them into context on the site. This would afford me the chance to have some fun with jQuery during development.

Graphic Ornaments & Typographical Variations

The use of graphic ornaments during this period were commonplace and generally used as dividers between text elements on a page or simply as ornaments in the header/footer area of a page. Also characteristic of this era in print was how typography was used to separate different areas of a page and create a hierarchy of information. This was sometimes achieved with the use of all capital letters, increasing the spacing between characters evenly with tracking or a combination of the two. I replicated the effect using the text-transform declaration and changing the letter-spacing in the CSS.

Inspiration from those who came before me

I am definitely not the first to “have at it” with this style of design. There are a slew of talented designers who have been drawn to these elements and have incorporated a variation, if not all, of these components in their own website designs in the past. In my travels for research and inspiration I also found these to be influential and my hat is tipped to all of these designers.

Development

The Six11Ink website is more of a brochure site than a portfolio of services.

Having fun with @font-face

I have been looking for a chance to use the @font-face declaration for some time now. The fact that it is a cross browser solution for adding rich typography to a web design has always piqued my interest. The impediment, for me, has always been the limited amount of typefaces that are freely available to use with the declaration and I never wanted to use the technique to show how “cool” I am (which I definitely am not). I needed a beautiful font and the implementation needed to make sense for the overall design.

The Six11Ink website afforded me the opportunity to finally get my hands dirty with the technique. The mock ups contained the use of League Gothic, made available by The League of Moveable Type, for the headers and page titles. This revival typeface was used in the logo and really played into the retro theme of the site. Plus, I wanted the visual contrast between a condensed, heavy sans-serif font for headlines and a serif font for body copy.

But, throughout the design process, I was wondering how I would preserve these elements once I moved into development. At first, I thought about using the image replacement technique. This would be excellent for a static website, but I couldn’t use this technique for blog posts where content is created dynamically. So, that solution was immediately abandoned with the exception of the home page heading.

Then, I was resigned to use either sIFR or Cufon as a solution. I have never worked with Cufon and wasn’t quite ready to have to learn how to on the fly. I’ve worked with sIFR before and it definitely doe the trick. But, what happens when the user is browsing with a browser that doesn’t support Flash or has javascripts disabled? All of my beautiful type will fall back to a browser safe font in the font stack. I definitely didn’t want that.

Then I wondered whether League Gothic, since it was a free download, would be available to use with the @font-face declaration? After a quick Google search I found that, not only is it available for use, but Font Squirrel even provides all of the necessary file types needed for the declaration to work in the major browsers!

Now that I have dipped my toe into the @font-face pool, I am addicted. It was not only very easy to put to use, but quite liberating. I honestly cannot wait for another project to use this declaration on in the future.

A sprinkle of jQuery for personality

I will admit that the use of jQuery for the “Did you know?” tabs in the footer of each page was a bit grandiose on my part. I wanted to inject a little personality into the site and create a connection between the etchings and their usage and placement within the site itself. During my research, I found some interesting facts about the butterfly, quill, telephone and typewriter that I didn’t know about and thought it would be interesting to share with everyone else.

This wasn’t integral to the site itself, so I opted to turn this into a “show & tell” element that would be hidden until the user chose to interact with the tab. I thought it would be entertaining but know that it is completely self serving in the end. I just hope others find it as charming as I did.

Conclusion

I have to thank the founder of Six11Ink, Jeanette Fernandez, for allowing me such freedoms in the design and development of her site. Her unwavering trust allowed me to experiment and play around with ideas and concepts that I would not normally with another client. Definitely give the site a spin and let me know what you think. I am proud of the outcome but am always interested in constructive criticism.

Launch Six11Ink

Our Name is now “we are pixel8”

Erik Ford — Wed, 05 May 2010 20:44:39 +0000

We are happy to announce that, as of February 2010, we have officially incorporated the name of the agency as we are pixel8, inc. It was always our goal to incorporate the agency but there were several self inflicted hurdles to cross beforehand that only I can take full responsibility for.

Why did we call ourselves “pixel8” in the first place?

In the Spring of 2009, when David and I began talking about this endeavor, one of the obvious topics was the name of the agency. We felt strongly about having a one word handle and batted around a few ideas and concepts. But we kept gravitating towards “pixel8” as a name. The moniker succinctly affirmed that we are a creative agency and was perfectly playful by replacing the last syllable with the numeral “8”.

I can be incredibly stubborn when it comes to something I really like.

But, we weren’t the only ones with this ingenious idea. In fact, after a quick Google search, we came across a few entities using this label, both actively and inactively, and we were initially deflated. Does this mean we have to look at our other options? That didn’t feel right. I think I was even having an internal, childlike tantrum about the whole thing. I wanted what I wanted and, if you know me, I can be incredibly stubborn when it comes to something I really like. And I loved “pixel8” and was not readily prepared to let it go.

So, we forged forward and registered the domain, wearepixel8.com not knowing that it was going to play a role in naming the company. And, though I was insisting to everyone who would listen that our name was “pixel8”, I went as far as creating an animation for the logo on the site that said “we are pixel8”. And today, if you ask me why, I will not have a good answer for you other than I thought it was a cool idea, which is never a reason to do anything when it comes to branding!

Between the domain name and the animation, people automatically assumed our name was “we are pixel8”. And I couldn’t blame them. This was all my fault and was a direct result from me being both pig headed and not sending a consistent message through our branding.

Time to make a decision

If you have ever incorporated a company, a process that is both joyless and rewarding, you know that you must do a name search to make sure that you are not choosing something that is in use within your field of operation. Enter hurdle number one. We already knew that the name was in use, but had no idea whether the person(s) using it ever registered the company name. We could spend an unknown amount of time finding out, thus further delaying the process, or we could simply pick a new name. I was back that stubborn place again, but this time slightly more malleable in the process. So, after several discussions with our accountant and attorney, we made the decision to register ourselves as “we are pixel8, inc.” to avoid any further complications or confusion.

… we are pixel8 just felt right immediately

And, I have to tell you, we are pixel8 just felt right immediately. The name is positive, playful, forceful and slightly narcissistic and I liked that. More than that, it wouldn’t require us finding a new domain name, which I definitely did not want to do. I have to tell you that this is the ass-backwards way of choosing a name for a company that just happened to work in our favor.

Our proper new name needed a proper new logo.

We knew that the name change would require a new direction in our brand positioning. Though we loved our original logo mark, it no longer fit the name of the company and therefore would not function well as the brand identifier for the agency. Of course, this meant it was time to head back to the drawing board, deconstruct the original art and create a new logo that would better reflect, for lack of a better phrase, who we are.

We tasked ourselves with looking at the original mark with “fresh eyes” to discern what elements we felt were strong and, therefore, wanted to retain, and what elements fell short of the message we wanted to convey.

The anatomy of our first logo.

Our prototype logo was modern in feel (something we wanted to keep), complete with custom typography that created a nice linear shape. Since, at the time of its creation, our name was simply pixel8, there was no need for the additional verbiage of “we are” in the mark. But, as I mentioned before, we did incorporate the “we are” in the website logo with a talk balloon. But, again, this added to the inconsistency of what our name was and continued to confuse the user.

The “x” letter form loosely took the shape of a person when we placed a pixel shape on top of it. As for color treatment, we chose to use only two colors to exemplify our classic, uncomplicated approach to design.

After examining the mark, we decided to keep the following:

The modern, custom letter forms as they felt strong and commanding
The custom “x” with the pixel character as a brand identifier
Keep the logo color palette at two colors

So, basically, we were keeping everything and figuring out a way to incorporate the additional verbiage.

Version 2 is close but not a winner.

We now knew the direction we wanted to take and I started creating sketches for a new logo. I came across a version that I liked and further developed out in Illustrator. David and I felt strongly that the “talk balloon” from the original website logo could work as our official logo so I wanted to play with that concept.

The letter forms stayed the same with the exception of a new “p” and a revised “8”. We also didn’t make any changes to the color palette but chose to only apply the Cyan to the pixel shapes above the “x” and as a stem for the “p” as well as the talk balloon.

After spending some time with this iteration, we came away with the following thoughts:

The pixel on the stem of the “p” would get lost when the logo was reduced in size and therefore would become difficult to read. That doesn’t help with clearly defining our name.
The linear shape of the first logo was starting to look very “box” like, constraining, cold and impersonal in this version. Though it is definitely modern, it felt like it was spit out by a computer program and I did not want that.
Though the talk balloon worked on the website, it doesn’t work her as a logo. To me, it read “pixel8 we are” as opposed to “we are pixel8”. I moved this element around to several locations, but nothing worked and it was time to file this version under unusable.

With version 3, I was going in the wrong direction.

I thought that the problem was that the original letter forms needed to be reworked into less pixel like shapes. I redesigned all of the characters including the “x” to allow for better incorporation of the additional “we are” verbiage, using Helvetica Neue as the typeface. This would definitely give a nice contrast to the entire piece.

I also decided to be adventurous and opened up the color palette to include four new colors (Blue, Green, Yellow and Magenta). These shades felt more inviting than the previous Gray and Cyan.

After stepping away from this iteration, I knew immediately that this was not the right version. It absolutely hated it and I felt frustrated.

The new letter forms became even more box-like than the previous and no longer worked for what I was trying to achieve.
I needed to drop the “incorporated” from the logo as it was superfluous
The one aspect I liked was adding bright colors to the mark and dividing the pixel icon into four separate pixels. This felt like it should definitely be a part of the design as well as the “x” character

I think the stubborn part of my personality did not want to let go of the custom letters I spent so much time creating. But, they just did not work. The logo was becoming more and more distant and I was nowhere near the message I was trying to put across.

The fourth time was the charm

So, I went back to the beginning. I tossed everything but the “x” mark and started sketching new concepts. This time, I would tackle the mark first because it was the only element I was feeling good about. As opposed to one pixel divided into four smaller pixels, I decided to create a 3-D pixel that would use only 3 colors (Ahh, back to simplicity. This was starting to feel really good.) But what to do about the letter forms?

As I was staring at print outs of the first 3 versions, my eyes kept coming back the the “we are” in version three. By far, one of my favorite typeface is Helvetica Neue. By itself, it is clean and modern with excellent x-height in the lowercase forms. And, I asked myself, why am I trying to reinvent the wheel? The letter forms for the name is staring you right in the face.

So, I launched Illustrator and starting playing with the kerning of the letters to give it the right amount of spacing. There was some slight customization of the stem of the “p” so that it would not extend beyond the baseline of the logo mark. I also changed the color and weight of the two words for contrast. The logo now read perfectly and there was no confusion about what our name was.

The letter forms were now set in Helvetica Neue with kerning between the letters, slight modification of the “p” character and set in varying weights for contrast
I kept the shape created in version 3 as this was the best of that version
The pixel icon now took on a 3-D look and feel and was reduced to the 3 strongest colors from version 3

Though it took several drafts to get where we are, I had finally reached a version that I was completely happy with. The logo was still modern and linear, as in the first version, but no longer felt cold and box-like. Recognizing that I was not going to find the emotion I wanted with my custom letters also went a long way. Once I stop pursuing that concept, I found the right combination of letters to perfectly represent our name and leave no room for confusion.

TV Commercials… Can you Hear me Now?

David Belgrave — Sat, 06 Mar 2010 08:40:41 +0000

What is going on with the volume of TV commercials? And no, I’m not asking why there are so many commercials on television but why are they so damn loud???? I know I’m not the only one that notices this. Many of you have been cozied up watching your favorite show and BOOM!! You are blasted off your couch by a deafening TV spot for ShamWow or some other product you probably don’t need.

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??

6 Free Seamless Paper Textures

Erik Ford — Tue, 23 Feb 2010 23:29:40 +0000

As a designer, I often like to add textures to my work when the project calls for it. Take a look around. You are hard pressed not to notice the endless applications textures have in both print and web design. Open up your favorite magazine or browse any of your adored CSS galleries to find evidence of what I am talking about. From grungy to sleek, earthy to fabrics, it is prudent for you to have an arsenal of textures at your fingertips.

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.

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

Win a Free License for the Time Tracking & Billing Application, Fanurio

Erik Ford — Mon, 22 Feb 2010 04:42:36 +0000

Two of the more difficult things to do as a freelancer is to track your time working and, subsequently, bill your clients accurately. Are you one of those freelancers who are manually keeping track of your time? Are you using a word processing or spread sheet application to generate your invoices? Well, we think the Fanurio Time Tracking software is just what you need. And the fine developers behind this software have given us one free license to share with you!

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.

3 Simple Image Enhancements in Photoshop

Erik Ford — Fri, 22 Jan 2010 23:10:29 +0000

Imagine this scenario. You have spent countless hours designing the perfect mock-up page for a client using placeholder images. Now it’s time to drop in the client’s assets to get that final approval so you can get down to coding. You extract the zip file that was just now delivered and your heart sinks. All of the photos were shot by a non-ace on a snap-shot digital camera! Some were out of focus (completely unusable) while the remaining photos were dull in color.

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.

Styling a Simple Form using CSS3

Erik Ford — Fri, 15 Jan 2010 19:06:36 +0000

Recently, I had a simple project of designing and developing a newsletter subscription form that was only going to be viewed on and iPhone or iPod Touch device. The form, and all of the inputs, would have nice rounded corners (which I am an admitted sucker for) and subtle gradients.

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

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 browsing 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

Automatically Update your Website Copyright Year with Javascript

Erik Ford — Thu, 14 Jan 2010 22:47:59 +0000

Towards the end of 2009, there were several friendly reminders from the Twitter-verse to update the copyright year on sites you’ve developed to reﬂect the current year. Depending on how many pages a given website contains, this can be a proverbial pain in the you know what. Plus, one of the last thing that will be on your mind during the holiday week will be whether your copyright notice is up to date. Why not drop in a couple lines of javascript code that will automatically update for you each and every year?

Add the following lines of code to your document before the closing 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 ﬁne 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 ﬁle of your theme:

Copyright © 2007 -  echo date('Y'); ?> Your site name. All Rights 
Reserved.

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.

Our Goals for pixel8 in 2010

Erik Ford — Sun, 03 Jan 2010 23:30:28 +0000

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.