Your Web/Social Media Resolutions for 2009

Everyone makes resolutions for the New Year, right? Quit smoking, eat better, be nicer, be more productive, etc etc. How about resolutions for your web presence and activity? What things should be considering doing, or STOP doing online to maximize 2010? After all, it is the year we make contact, so when the monolith comes calling, you want to be ready! Here’s what I am planning on working on:

• Understanding Twitter/Facebook/Linkedin Technical integration points better and using them! – Yes, all these sites can speak to each other. But should they? And should they always be talking to each other? Probably not always. I need to explore a more friends and family friendly approach to sharing my statuses via Twitter and Facebook. I frequently leave my non-geek friends scratching their heads. Hmm.
• Building out some more web-service based mashups – In 2008 I built a lot of mashups. Some for clients, most for fun. In 2009 at Iona, we’ve built a few site features out for clients leveraging various web services, but by and large it was pretty quiet for me personally on this front. I need to get back into it!
• Reskinning my blog – I’m coming on year 3 of this design. Time for something new.
• Refining my following list on Twitter and building some more lists – I think I over followed when I joined Twitter and I’m working to rectify that. Too many auto replying bots, too many marketing feeds, on and on. Also in the second half of 2009, Twitter launched lists. I have made a couple of them so far, but as they continue to build out this feature I intend to use it.
• Using Social Media Better When at Conferences and Events – Nothing is more annoying in a Twitter feed or your Facebook newsfeed than seeing a constant bombardment of updates from someone at a conference that feels as though every utterance coming from the speaker they are watching needs to be shared to all from the mountaintops. I have done this more than once. Not happening this year. For a great list of other things you should stop Twittering about, check this out.

So what are you focusing on this year? May I make a few suggestions, if you have chosen any? Here we go.

• Build Something – For Real – Stop being a flapping head social media douche and really make something! Some videos, a real website without your stupid grinning mug on it, an app, a mashup, an experience. Sure, maybe this sounds cynical, and maybe it’s a little bit much, but I’m just so tired of seeing the same old tired routine by “strategists”. Nearly all of ‘em just parrot whatever Seth Godin, Gary V, Chris Brogan or Jason Fried say and virtually all of ‘em are actually contributing very little to the conversation or the larger landscape.
• Stop Talking About “Maxmizing Your Personal Brand’s Reach by Microblogging”
  – Or whatever other crap your inner social media kissass self thinks will get you some sucker to part with their money. At this point, major corporations have “social media policies”. Little companies either get it or they probably never will. Where does this leave you? Well, if you were a “web designer” before all of this, you probably still are now. If you were a talentless hanger-on-er before… well, you can probably guess.
• Strongly question or reconsider what your “SEO Expert” is suggesting.
  - Do they Have your web copy looking like it was written by a 3rd grader? They are doing it wrong. With properly written markup and a decent product message, you don’t need to Google bomb your way to the top of the rankings. Certainly, writing repetitive boring copy may have its advantages (it’s easy and doesn’t take much creativity) and can sometimes get you higher rankings, but at what cost… You ultimately devalue your organic search results by not giving the user and deeper content once they visit your site.
• Don’t Build a Microsite without a Media Buying Plan and determing the Metrics Package and how it’s going to be implemented. – You would not believe how often new microsites sites pop up for products and services if you are not involved in this industry. Weekly, there are dozens featured on Marketing and Advertising blogs. So often when you visit the site and poke around the source code, you notice there is not an analytics package in place. Unreal. What a waste of money. Make a pledge to your budget to not launch a site without measuring how it’s working.
• If You Don’t Have a Business Twitter or Facebook Account, You Absolutely Need One – With these sites drawing the type of traffic they do, if your business is not on them, you are really missing out. Even if you are a straight up B2B services company and do very little public marketing, you can find value in being on these sites. If nothing else, you should be there in order to at least protect your brand name in the space and prevent it being hijacked.

links for 2010-01-05

• UITest.com – Validators, Checkers, Generators, and Tools for Web Design …
  A good suite of web checkers… nice collection to help you out.
  (tags: ui test checker generator testing validator)

2010: The Year We Make Comics

Well, 2010 is going to be an amazing time for Robot Beach and I wanted to share my plans for the coming year with all of you.

In addition to the comic, I will be creating a series of animated shorts for Robot Beach! Now, many of you probably already know this, but Robot Beach started its life as an idea for an animated series I had planned on creating over a number of years. I eventually came to my senses and decided that the story was just to big and the amount of work that would be involved was just to great for an animated series to work. So why the change now?

Well, It all comes down to concentrating my attention in the proper areas. The comic allows me to tell great jokes and a great story in a manner that works very well with the medium. However, with animation, I can deliver physical gags and humor that would be harder to convey on “paper”. To be clear, Robot Beach is first and foremost a comic. Always will be. The animation will never take the place of the comic. They are meant to be a nice little addition to the “Robot Beach” world that I am creating here.

The animated shorts I have planned will be 15 to 30 seconds a piece and done in a style that matches the comic very closely. The animation software I plan on using mostly is After Effects, (Although I would like to get my hands on a copy of Toon Boom and give that a try.) Depending on how much efficiency I can build into the process, I am hoping to get an animation released at least once every two months if not more often. Before I can start on any of this though, I have another personal project that I am going to need to get out of the way first.

All in all, it looks to be an exciting year for Robot Beach in 2010! I hope everyone enjoys it as much as I am sure I will!

My new toy

It’ll be here soon. It’ll be widget making time. Woo hoo.

Come to me, baby.

I was recently putting together a test plan for some interactives that we are deploying in the next couple of months. As I was putting the pieces together I was realizing that software testing is very similar to something I had previously done, writing educational goals for children with disabilities. I guess I have a unique work history that would reveal this fact but it may be interesting for some in either profession.

First the condition must be set. This would be the circumstances under which the assessment is performed. This could be further broken down for software into the current state of the application and the action that the user takes to initiate the test. In regards to instruction this could be the classroom conditions or the specific format for the test (worksheet, one-on-one, with a behavioral prompt).

Next is the specific behavior that is to be observed. This should be something that is both observable and measurable. While the tests that we are performing are higher level tests (functional/usability), this could be applied simpler unit tests that would be measured by simple logic (does 2 + 2 evaluate to be 4?). Seeing that a video plays without visual stuttering would be observable. This behavior could however use some clarifying in terms of what the visual stuttering would be defined as, or would be left to subjective opinion, which may at some point be acceptable. In the educational realm, the behavior could be a students verbal response to a behavioral prompt or responding to a question with a correct answer.

The final relevant similarity is the criteria used to measure success. In most cases with software testing, the only acceptable criteria is pass or fail, but in some circumstances this could be measured with a success rate/percentage.

Given [condition] the application/student will [behavior] at [criteria]

At it’s basic level both of these tests are about quantifying behavior and removing subjectivity as much as possible. Someone unfamiliar with the inner workings of the application or the student should be able to record the same results as someone who is familiar with the subject.

links for 2010-01-21

• A UI Design and Prototyping Treasure Chest | Web Design Ledger
  Holy crap on a cracker. You've never even seen so many useful GUI and Wireframing tools. Really, I bet you haven't
  (tags: wireframe ux ui free prototyping templates)
• Minimal Web Icons
  With so many free icon sets available now, sometimes it makes more sense to not spend countless hours designing and creating your own. However, it’s important that you do find the right style of icons to match your design. In the case of minimal web design, it’s all about clean layouts, little use of color, and few design elements.
  (tags: icons minimalism)
• Realism in UI Design
  From the article:

  "Graphical user interfaces are full of symbols. Symbols need to be reduced to their essence. This helps avoid cluttering the user interface with meaningless distractions, and makes it easier for people to «read» the symbol and figure out the meaning of an interface element. Realistic details can get in the way of what you’re trying to communicate to your users."

  (tags: icon UI UX realism usability)

Help the Hodges

The cartooning and animation communities recently banned together to help the family of Tim Hodge, a former Disney animator and a writer and director on the very popular Veggie Tales series. I don’t know Tim personally, but being a big fan of animation, and a HUGE Veggie Tales fan, his work has influenced me greatly over the years. I got to meet him when he came to speak at the Savannah College of Art and Design, and I was blown away by his enthusiasm and excitement in sharing his passion for art and animation with others.

Now we have an opportunity to help him and his family during a serious time of need. The following is from helpthehodges.com

On August 22, 2009 Matthew Hodge, the 17-year-old son of former Disney story artist and Big Idea productions director Tim Hodge, was in a serious auto accident. A train struck his car at 50mph as he was crossing the tracks. While Matt suffered neither broken bones nor any internal organ damage, he did receive severe head trauma causing him to remain in a state of coma today. Matt is a high school senior, a straight A student, and a drummer in his state championship marching band.

Being self-employed, the Hodge family has short term medical insurance that will not fully cover all of their bills. Additionally, with the care they are giving Matt, full-time work is not possible for Tim right now. This loving family is relying on their faith and the love of family and friends for their survival. This is a tragic accident that will forever affect their lives as the road to recovery for Matt may be a long one.

The National Cartoonist Society Foundation has set up an ebay auction in support of this cause. The list of contributing artists is too many to list here but many of the items for auction are simply amazing! (Original Charlie Brown art drawn by Charles Schulz anyone?) I highly encourage everyone to head over to helpthehodges.com for more information on how you can help today.

An SVN, Testing Process and Continuous Integration Primer for Flash Designers/Devs

Alright… so unless you you’ve been living under a rock for the last couple years, you know that TDD, Source Control and Build Automation have fully hit the Flash design and development scene. It seems as though everyone is talking about it. A lot. And then commenting on it. A lot.

For those that come from a traditional Computer Science background, this sort of talk is like second nature. For those of us with a Graphic Designer brain trapped in the body of a hoodie wearing developer, it’s like command line jargon soup wrapped in a veneer of pocket protector CYA. Regardless of your preconceptions, it’s hard to argue with results. This sort of agile/test driven development generally leads to good results. The Iona Group has been using TDD, Source Control and Automated Builds in varying degrees for a about year now, and I can say that our stuff is better faster stronger (harder – Daft Punk!), less buggy and more often then not ahead of schedule far more frequently, now that we are using it.

This isn’t mean to be an article extolling the virtues of the process, or even a specific break down of how the individual pieces (SVN, Issue Tracking, Hooks and Automation) need to be implemented on a piece by piece basis. There are a lot of specific posts on how to use SVN, or how to write a unit test, etc. What I’d like to do here is give a you a topgraphical/flowchart view of how this process works in our case, and some info on how we are leveraging the hardware and platforms to do it. This seems to be like a secret sauce that everybody keeps to themselves, so the shared knowledge about the overall setup for such a configuration rarely gets shared due to intellectual property or security concerns.

In regards to our setup, I’m sure that this system is simplistic in many people’s views, but for our size and purposes, it works really well. This system is primarily used with developing PHP web apps, CMS sites and Flash/Flex/AJAX RIA. Of course the standard HTML, CSS, JS, XML get run through the system, so it’s pretty flexible. Finished binary assets (Graphics, etc) also get checked in, but the graphic design process files (PSD, AI) remain on the separate file server on our internal network.

A little on our team. We’re about 75/25 split… most of us being on Macs. We use the Creative Suite for all our production work and use Eclipse as a primary IDE, though I still use BBEdit for casual text editing. (Casual text editing? You know, like with a linen shirt on and drinking a mojito or wearing a scarf). We have XAMPPinstalled on our machines because it has a full Apache, MySQL, PHP stack on it and is fully cross platform, as opposed to WAMP or MAMP. Everything about XAMPP is awesome, except for the stupid stok photo models on their site.

Our local dev servers are virtualized Linux boxes in some tidy racks that our IT Director graciously keeps running for us. They’re pretty rock solid and haven’t ever given us a problem that a reversion to a snapshot couldn’t fix. They are Apache servers (though we do also have some Windows IIS server for when they are needed, too), running PHP 5.x and MySQL 5.x along with Tomcat and Red 5. Standard fare, really.

We use SVN for version control. Specifically, we use a hosted SVN service at Assembla.com. They handle our issue tracking, project wikis and Scrum. It really is a fantastic package and well worth the money. It’s more feature rich and as easy to use as Unfuddle and I have never once experienced an outage like some of my friends have using other services. If you are interested in trying them out, I highly recommend it. They offer a 30 day trial. During signup, enter ‘chadu’ in the “Referral code” field to get a discount on your first paid month. When we first signed up, we had a Mantis Bugtracker database with thousands of issues in it. They took our SQL file and imported it for us. Pretty sweet.

The really cool part comes when you start tying the things together with post commit hooks. Assembla (and SVN in general) allows you to fire post commit actions to publish files, do things like automate builds etc after you have done you home and independently run your local tests, etc. Very cool indeed. This helps take the human error part out of file migration from a development server to a system testing server. You won’t forget to upload that JS library, etc if it was included in the commit. Very nice. After a promotion of a successful build, any number of other post commit hooks can fire off shell scripts to RSYNC a directory back toa file server for cold storage/backup purposes.

We like the power and flexibility, and we really like the burndown charts and metrics… It just makes reporting that much easier for us.

In the creation of the process we use, I made a couple diagrams to help document it all. It’s not really proprietary info and I think a lot of people can benefit from seeing it diagrammed out this way. Dan Roam has a great book called “Back of The Napkin” and I truly believe in the power of a good drawing to help people understand a concept.

So, here is a step by step picture of the issue tracking and testing process…

So, what do you think? Are you applying this sort of process to your Flash work? If so, how’s it working out for you? If not, does seeing something like this help you get closer to it?

Alright… so now that you have a bit of a grasp on the process, how do you go about setting up the environment and handle the progression. What machine does what and where is it located? Here is a simple view of what we are doing for most sites.

I’d like to hear from you if you are doing something similar to this. I’d also like to hear if your set up wildly deviates from this. Let me know your thoughts.

If you are interested in a higher quality PDF of the above files, click here to download it.

This setup has greatly increased our quality level and productivity. When you add in things like data safety (multiple file backups, full version control, tape backups and offsite storages), it makes everyone feel a lot more secure, too.

links for 2010-01-24

• Designing for the iPhone: Put Your Content in My Pocket
  Unless you’ve been hiding in a cave with Osama bin Laden, you know that Apple is selling an iPhone and that it’s a hit.
  (tags: iphone css tutorial mobile)
• Web Design Inspiration for the iPhone
  A great gallery of iPhone specific webdesigns.
  (tags: iPhone css inspiration)

Machinarium

If your like me, (and I know you are) then you love robots. You also probably really love very finely crafted experiences that center around robots. If this is the case, then you are sure to love Machinarium. It is one of the most beautiful and meticulously created games I have played in a long while.

CGSociety has a very nice interview with Jakub Dvorský who was a chief designer for the game. He says:

“We felt we needed something warm with visible human touch in it to create a contrast to that robotic world that the character goes into, so we came up with an idea of hand-drawn backgrounds which are scanned and finished in Photoshop. Also the animations are mostly hand-animated frame by frame, the sounds effects live recorded and the music full of live instruments.”

The amount of time necessary to create a game in that manner is rather insane. It could be so easy (and must be terribly tempting) to use more “cost effective” methods for creating the art and animation, yet it is this carefully hand-crafted approach that gives the game it’s character and sets it apart from most everything else. It is really a marvel to consider the time and energy that went into the creation of this game.

Check out the interview, and please be sure to check out Machinarium as well.