A recent trip into the world of contest design had me taking a break from “paying” work and using my talents for a prize of much different value. Contests that involve design are not usually enticing enough to draw my interest, but this particular contest meshed two of my passions into one: beer and design.

For the second year, Sierra Nevada Brewing Company held a contest where participants were asked to make a two minute video explaining why they should be chosen to attend Beer Camp.

What is Beer Camp you may ask? It is a two-day foray into the life of brewing beer at Sierra Nevada. Winners of the contest not only get to sample the offerings of the brewery, but also collaborate on a beer recipe that will be brewed by the participants (under the watchful eye of the professionals) in the pilot brewery within the confines of the Chico, CA headquarters.

When i first heard of Beer Camp and the opportunity to enter the contest, it was late in the game in year one. At that point I knew I had to gear up for year two of the contest and throw everything I had at it. One key “disadvantage” was the fact that I am not a home brewer, and have actually never brewed beer. Many of the enthusiasts who enter the contest shoot video of their home operation where they are either quite successful, winning ribbons and awards, or quite the opposite claiming they need instruction from a professional brewer. All I had to offer was passion for the medium, so that is exactly what I based my video on.

I have taken video production classes, but had no decent equipment at my disposal. Video production also requires the assistance of a least another person, sometimes many more, so I decided to make my entry a solo project by using animation. Although beer has only been a passionate hobby of mine for part of my life, the advertising and design of beer is something I remember all the way back to my childhood. My parents always had a mug with the Budman on it, or a serving tray with the Hamm’s Bear. This quickly got me thinking about the mascots that play a large role in the marketing of some of the best craft breweries such as the Stone Gargoyle and the Gnome from Brasserie d’Achouffe. These characters would be the main players in the story of how my love for beer grew from a college-based ignorance to a true appreciation for the liquid artwork.

Animation on this scale was no simple task. I had a good idea of how the story would unfold and got it into storyboards pretty quickly, but building all the components that would make up the characters and scenery took many hours to work through. I was able to break the story into four pieces which made it easier to keep file sizes low and organize my assets and animation files. I built out most of the assets for part one and animated the entire thing before realizing it would be a better use of my time to illustrate all my assets ahead of time, and leave the animating for the end where I could simply pluck each asset and drop it into the timeline. Much of the work was tedious and time began to run out rather quickly. I was scraping the edge of the two minute video time limit, so I had to make some tough decisions and cut some scenes from the video.

It had been some time since I had used the tools in After Effects, but once I got into the animation phase, much of it came back. I added some lighting to each scene which took away that “flat” look that illustrated pieces can have and added some much needed depth. I also made use of the time stretch function after removing some small sections of the animation. Two minutes is not a lot of time to tell a story, and I felt the imagery was moving too fast. Once the timeline was to my liking, it was time to add the sound. I had recently been listening to some old jazz while working on the project and found a few tunes that fit nicely with the piece, but those would be dropped in last. First I scoured the internet for sound effects that would compliment the action in the animation. For those sound effects I could not find, I recorded some with my microphone/USB input setup. Next I recorded the voice over audio in about 3 takes. Again I split the story into four pieces, but ran through each section until it sounded acceptable. I find its best not to cut and re-record too much voice over as it will sound edited and unnatural. Audio production is admittedly a weakness of mine, but to the best of my ability I meshed the voice overs with the sounds effects and background music and the render was underway.

My entry was submitted the night before the deadline and it was time for the waiting game. I received word that I had made the final cut, and about a week later they were asking for my information to verify my age and state of residence. I was selected as a winner and tasked with a new design project: collaborate with the other beer campers in my group on a killer beer recipe to brew at Sierra Nevada.

Many may question the validity of a debate about browsers, stating that the masses have no need for an updated and feature-rich browsing experience. I beg to differ. If we’re not moving forward, we’re actually moving backwards. Consumers spend thousands upon thousands of dollars for the newest in technology that makes their TV resolution look better, to enable 3-D characteristics, to make it possible to carry their whole music and/or movie library in their pocket. Consumers may not be computer savvy, but they are certainly not stupid. If they knew something was out there that was “bigger and better’ than their 5-year-old browser and was FREE, i’d have to wager they would want to use it. Especially if they saw an interactive experience like Rome.

I randomly stumbled upon this movie/user experience and was excited to see such projects in the works. It combines world-class musicians, with artistry, with interactivity. You can actually navigate yourself through the music video with the cursor, while looking at different ‘areas’ of the video. To view the ROME video you will need the Google Chrome browser, which is equipped with the technology needed for the user experience presented by the video. One of the main technologies used in the video is webGL. WebGL (Web-based Graphics Library) is a software library that extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. This allows for the creation and mutation of the objects in the video, as well as the 3-D experience of being able to pan left, right, up and down.

So to those who argue that users are ‘just fine’ using outdated software, I applaud the team at Google (as well as other companies) who are trying to push the web forward to reach its true potential. Perhaps someday we’ll get there.

Being that this site is built using WordPress, there are always little tweaks, hacks and plugins I am searching for to massage the framework to do what I want it to do. I found a pretty simple little hack that I figured would be useful to just about anyone who uses WordPress and thought I would share. The object of this change is to make one of your top level navigation items link to an external site, outside of your WordPress site.

So if you’ve spent any time at all working on a WordPress site, it would stand to reason that you have created a new page before. This can be achieved by clicking on the “Add New” link under the “Pages” section in the left nav of the control panel. Creating a new page will add a new main navigation item with the title matching the name you gave to the new page. This is all fine and good, but what if you want to add a navigation item that links to a page or site outside the current WordPress site? Here’s how you can do it…

First we will create a new page template. Open a text editor app and save a file, which is still blank, with the name of your choosing. The name you choose should most likely relate to what page or site you will be linking to, so it will make sense to you later. For my site, I wanted the main nav item to link to my portfolio, so i named the file portpage.php. Make sure you use the .php extension.

Next we will add the necessary code to the file you have just saved. Simply copy and paste the following code into the file (exactly as it is here) and save the file once more.

<?php
/*
Template Name: mywebsite
*/
?>
<?php header('Location: http://www.mywebsite.com');
      die();
?>

Now we will make a couple changes to the code we just pasted in the file. Where you see Template Name: you will change “mywebsite” to the name you would like to use for your template. Again, for mine I used portpage. This is the name that will show up in the WordPress interface when you create your page. The other change is to the Location. Change “http://www.mywebsite.com” to the URL you wish the nav item to link to. Don’t forget to save your changes!

Once the template is complete and saved, we need to upload it to the server. Locate the directory for your template files. An example of the location is: [Your Domain]/wp-content/themes/[Your Theme]. Upload the template file to this directory and you are ready to put it into action.

Log into the panel of your WordPress site and click on “Add New” under the “Pages” section. Name the page whatever you would like the link to say. The body of the page can be left blank. Now on the right-hand side, under the “Page Attributes” section, change the template from “Default Template” to the name that you gave your new template. If your template does not show up in the select menu, you most likely failed to complete one of the previous steps.

So there you go. A link in your main navigation that links somewhere outside of your WordPress site. Hope this was helpful!

A great debate has been brewing for some time in the world of web browsers. Once an individual enters the world of web design, it doesn’t take long before they notice the not-so-subtle differences in the way Internet Explorer (choose your favorite version) renders CSS attributes as opposed to the “other guys” i.e. Firefox, Safari, Chrome, etc. Being that IE is still one of the most used browsers in the world, there’s no getting around the fact that designs must cater to the differences and inconsistencies presented by the Microsoft offering.

I recently read an interesting article entitled: “How do you convince the average web user to switch to a non-IE browser?.” It takes a somewhat scientific approach to learning how a non computer savvy person views the use of a browser to consume the internet. The picture painted in the article of a view through the eyes of someone who doesn’t deal with computers and internet technology on a regular basis makes for an interesting experiment to someone such as myself. I feel like, as a designer, I sometimes have a hard time putting myself in the virtual shoes of my audience.

I work for a company that sells devices that are considered to be “technologically advanced,” and offers a web-based application as a companion to the device. One thing I have learned over the last six or so years is that just because a company is advanced in technology, it doesn’t necessarily mean that it’s customers are as well. With a customer base that is still 72% Internet Explorer users, 20% of those being version 7, my job is to verify that our application looks presentable, even in a browser that is almost five years old. The highlight of the year was following suit with companies like Google as they dropped support for IE6. During a recent redesign of the web application, a consultant and I completed a few “house-calls” to see exactly how the customer was using our software. This not only gave us insight into how they use our app, and what is utilized most, but it also gave us a feel for how they interact with computers in general. It can be surprising how little people who do their work on a computer, actually know about how to use the machine itself. I would liken this experience to what Louis Lazaris wrote about in his article, the exception being that we were not there to sway the customer to use a different browser. We do however make suggestions as to the browser to use for the best experience with our app and its mapping functionality. That browser is Firefox.

There will always be a debate as to which browser is superior in form and function, but the debate I find even more intense is that which is precipitated by the designers who work most closely with them. In a perfect world, everyone would use the same browser for their internet usage, or at the very least all browsers would render code in the same manner. This world, as we know, is far from perfect but should I be called out for having such a dream? Isn’t that why standards are agreed upon and documented? The content of the article was compelling, but it was a statement in the comment section that stuck with me. It accused the design community of being ignorant, thinking the answer to the browser issue is to switch users rather than do the job of designing websites and apps for what the masses use. I can honestly say that I both agree and disagree with the statement.

The only surefire solution to the problem of web designs rendering differently based on the end user’s browser: tweak the code and styles to make it look good in every browser used by your audience. Is it the best solution… absolutely not! The time spent perfecting a design in 3, 4, or more browsers, not to mention different versions is a huge time sink. A better solution may be to start designing in the oldest, most feature-lacking browser and verify in newer versions to confirm that it still looks good. Less time wasted, but you are automatically excluding a ton of functionality by catering to the lesser of the browsers to begin with. The question is, do the users of your site or app care about functionality available to them in newer browsers. These are the things that should be determined when researching your target audience. I think sometimes we designers simply fall in love with new functionality or newer tags that allow us to accomplish design components in an easier way, but we have to ask ourselves if the user even cares.

If it is considered ignorant to wish for internet users of the world to all at least upgrade to the newest (stable) version of their browser of choice, then I would consider myself the picture-perfect definition of the term. Why does a user continue to use a browser that is five years old? In some cases, regulation. My company has several customers employed by the government. The government still apparently sees no benefit to paying for an upgrade of their systems. In many other cases, the answer is familiarity and lack of motivation. Lazaris’ article pointed out an important point that an inexperienced user sees no need for upgrading because the old version “works just fine.” They are comfortable using what they have always used, and change is confusing.

Why do these software companies keep developing newer versions of their browsers? My best educated guess would be to increase security and create a better experience for the user. If companies like Google and Microsoft were perfectly happy with the performance and security of their current browsers, they would not be developing new versions. Obviously the browser market is not such a money maker that companies are compelled to launch huge advertising campaigns. I have seen advertising on a smaller scale, including one in which Microsoft encouraged users to upgrade their Internet Explorer, but it seemed more geared toward people who know the value of upgrading already. Many have suggested that Internet Explorer employ an auto-update model similar to that used in Firefox. This brings bad with the good. The good news is that you’re browser stays up to date with the latest and greatest, and only takes about a minute or so to complete. The bad news is there are so many patches, you may feel a bit violated when you have to update every other week if not more frequently. There certainly is no perfect solution to this problem currently.

The great browser debate will go on, perhaps indefinitely. I can only hope, as a web designer, that the count of outdated browsers in use continues to decline and that some method is devised to reduce the amount of ‘new’ old browsers in circulation as newer versions are released. I understand that it is my job to account for all possible software used by my audience, but also have to ask why it has to be so hard. Why can’t all browser developers agree on a set of standards and stick to them. Why must there always be a rebel in the crowd, and why must that rebel be the most utilized browser out there. Just because it garners more users, does not make it right.

Six years…. well, three years of pretty solid work and three years of spotty-at-best dedication, but almost six years nonetheless. When I first started the Rookie Designer podcast I didn’t know what to expect. Podcasting was a venture into a new-ish technology and I was just excited to see what the buzz was all about. Six years later I’m left with a ton of great experiences, a person to share my life with, several testimonials to the effectiveness of my teaching and motivational skills and a couple of perfect candidates to keep the whole thing going.

Rookie Designer will go on, and it will be as good if not better than before. I’m putting my money on better! Kitty from Design\ and Jake from Prepressology are taking the reigns after almost six years and putting their own spin on the design podcast. So I wave goodbye to an old friend, but not for good. I’ll be around for an occasional ‘hey how ya doin,’ to help push Rookie Designer into the next (hopefully) six years of greatness.

Looking back I’ll always have fond memories of this trip I took into the world of podcasting. I once had a listener give me credit for helping them find their first job. Wow, really?! I’m just some guy who rants about my design experiences for 45 minutes each week. This thing turned out to be a lot bigger than I ever thought it would be. I attended a podcast expo after my first year of podcasting and ended up meeting a person I could end up with for the rest of my life. To say this podcast has impacted my life would be an understatement. I also had some people who were dedicated from the beginning, and not just to tune in each week and download the show, but also to help out on the site. Welcoming new forum members, squashing spammer posts and spreading the word about Rookie Designer. These were the first indicators that there were some great people out there who may be able to take the reigns.

Rookie Designer is my baby. It took months of back and forth thought to come to my final decision to let it go. I did not take the issue lightly and bottom line, I wanted the show to go on. It had turned out to be such a great resource and get such a great response from the listener base that it could not possibly be put to death because I didn’t feel like dedicating time to it anymore. This thing is bigger than me. So there you go. The next chapter of Rookie Designer begins now.

The podcast and site is still in transition at the time of this post, but keep checking back, because I’m sure some exciting things will be happening there soon!