Posterous theme by Cory Watilo

Different Languages, Part 2

In my previous article, I talked a bit about the different ways creatives and technologists talk about ideas. I focused primarily on the best ways technology can and should be used to fit into a creative concept, and not be the center of the story. This time I'm going to talk about how and when technologist should push for the technology itself to be an upfront part of the story.

Not every idea needs to tell a story or to be wrapped in a conceptual idea. Utilities for customers, such as the XBox app for Dominoes Pizza, or the Starbucks iPhone app) have a place in a brands portfolio right along side social media efforts and traditional media. Ideas can always support a brand message without repeating it overtly. And this is the other side of the coin when communicating between creative and technology, value exchange.

The first thing a technology person says when hearing an idea is "Where is the value to the user?". Technical people put reasoning behind most of their choices. They quickly recognize the give and take balance of time vs. value when it comes to digital experiences (and their own work). If this balance is off, the idea doesn't make sense to them.

Of course sometimes the value for the user may not be as obvious as a utility. Often, simple experiences that are created for entertainment only, have a great deal of value to users. If this were not the case TV, and by extension YouTube, would not exist. Which brings the concept of the idea full-circle back to "What is the story?".

It's a difficult balancing act between all these different concepts that can encompass an idea, but with the right talented people and the ability to communicate on the same wave length, amazing work can be done. And remember, a conceptual idea doesn't preclude a technology idea and vice versa.

Different Languages, Part 1

Part of my job leading Creative Technologies is translation. And I don't mean linguistically from English to French (although I am getting a little better at that). I mean translating the value of ideas between traditional creatives and technology-focused people. These 2 groups have 2 completely different vernaculars when they talk about ideas.

Whenever a technology-focused person presents an idea ("we should hook up Microsoft Kinect to a Twitter feed and generate real-time social art projects"), the creative's first response is "But what's the idea?" This question leaves many technology people frustrated and the feeling that creatives "just don't get technology." When what the creative is really asking is "what is the concept behind the idea? What is the story you're trying to tell?" Often, technology people miss the story itself and instead focus on how new and innovative the technology is.

For technology to be a major part of a story, it needs to be invisible to the user. One of the best quotes I've ever read on technology is from Arthur Clarke who said, "any sufficiently advanced technology is indistinguishable from magic." In advertising, the technology should be part of the experience itself, not the focal point.

In a project I worked on this year, This is My Story, we used a lot of great technology including Amazon Cloud Services, photo creation with users web cams, and dynamic image integration into a video. But the reason it was so succesful (about to hit 8.5 million videos watched and over 2.5 million videos made) is because the concept of allowing kids and their parents to tell their own story of what their future could like in 2020 was so compelling.

With technology evolving at a daily pace, there will always be new and innovative ways to tell stories; just don't forget about the stories you're trying to tell.

Of course, that's just one side of the coin. In the next article, I will talk about ideas from a technologist point of view and how their value can sometimes trump story telling.

2012 Resolutions

I can't jump into my new resolutions without first going over last year's to see how I did:

  1.  Cut my sugar intake in half - I did ok last year. I can still do better, but I didn't get any grande hot chocolates, so that's a plus.
  2. Gain 10 pounds... of muscle - Fail! I'm still 135 soaking wet. Oh well.
  3. Launch 3 personal projects - Mostly success. I launched a couple JQuery Projects, a Lorem Ipsum replacement and redid my site. I still have a few other projects which I started, that I plan to launch this year.
  4. Post either to this blog or portfolio twice a month - 50/50. I had some good months and bad months for posting content.
  5. Get to novice/moderate level of 2 new languages - Mostly fail. I got better a lot of the languages I work in, and played with a bunch of different new languages (and also studied French for a bit.)
  6. Use more frameworks - Success! The more I work with frameworks in my projects, the faster I am able to get projects out into the world. My current favorite is Twitter Bootstrap.
  7. Become epic at Rebirth for iPad - Success!
  8. Collaborate more with awesome people - Mostly successful. I was able to fully build out my team in London and in India, but I still want to find ways to work with people in different skill areas and in different locations.
  9. Remind my wife how much I love her to the point of annoyance - Success! But I can always do better.
  10. Travel ambitiously - Success! India twice, Amsterdam, Edinburgh, Rome, Barcelona and Greece. Amazing places, amazing food.

Overall, I'm pretty happy with my progress on last year's resolutions. I can always improve which is why I have widdled my resolutions down to one for 2012. Create more.

That's what I want to do more of over 2012, simply create more. More posts. More projects. More art. And to kick it off, I have updated one of my personal projects today, the Scroll To JQuery plugin. I've fixed a couple small bugs and added the ability to use easing equations. It's not a massive improvement, but it's a good start for January 1st, 2012. Now all I have to do is keep the momentum going!

2 weeks with UP

My awesome wife knows about my obsession with gadgets and data, so for Christmas she ordered me a Jawbone UP. And she ordered it just in time, since they have closed off all orders as they work out a few things, but more on that later.

The device itself is a small bracelet that comes in multiple colors (I went with black) and sizes (I went with small due to my girlish wrists). Inside the bracelet is a bunch of miniature electronics including some LEDs, a sensitive motion sensor from MotionX®, a battery and a vibration motor. On one end of the bracelet is a cap that when pulled off gives you access to the 3.5mm plug for charging and syncing. On the other end is a tiny button that allows you to switch between the different modes. But that's only the first part of UP, the second is a free app for the iPhone that keeps track of all your data (you can use their site as well if you don't have an iPhone.) The bracelet will track all of your steps during normal mode and keep track of your sleep pattern during sleep mode. In addition, the iPhone app keeps track of the meals of you eat in a rudimentary kind of a system (take a picture, then in an hour it asks you how you feel.)

Darkblack_mag

Overall, I found using UP easy to integrate into my day-to-day life. I usually take pictures of my food (yay instagram), and remembering to turn it to sleep mode when I go to bed and back to normal mode when I woke up was no big deal. The amount of data it collects based on the amount of work I have to do is very impressive, as you can see from some of the screen grabs below.

(download)

Capacitor Issues

As I mentioned earlier, shortly after my wife purchased my UP, Jambox halted selling them, based on user feedback they were getting in their forums. Come to find out, some of the UPs had faulty capacitors, which were making it so the device wouldn't hold a charge (according to their own documentation, you should be able to use the bracelet normally for 10 days before it needs a recharge.) So they stopped selling them until they could fix the issue, and get it back into production. At the time of this writing, they are still not selling them.

How to do GREAT customer service

Jambox could have possible swept this issue under the rug, or dragged it out through the holidays hoping it would die down. Instead they met it head on, found the problem and released a statement. In the statement, they mentioned the exact problem, assured customers that the issues were not safety related and gave a refund to every single customer who purchased an UP, whether they had the problem or not. Even better, if you chose to take a Jambox credit instead of cash, they added an extra $50 to the refund.

The Bad

  • The rubber bracelet itself is nice, because it's suppose to be water resistant (you can even take a shower with it on), but it catches on things like sleeves or if you tend to be a restless sleeper, it will catch on the sheets. I'm hoping the next generation will be a bit thinner.
  • I haven't had the battery issues some are reporting, but after a week the button that controls the mode got very sensitive. It would change modes multiple times a day on its own if my hand was in my coat pocket for example.
  • It won't charge off the phone. I'm sure it's because of the output power of the phone, but still it would have been nice to be able to charge it on the go without needing my laptop.
  • I want to add more data. I'm sure design decisions had to be made for the app in order to keep it simple and minimal, but even if I could just click a small button when I drank a glass of water, I think that would actually be valuable in conjunction with the other data.

The Good

  • The vibrate motor is perfect! Very subtle, but noticeable. I was worried it would feel like having an x-box controller on my hand.
  • You can use it as an alarm, and the bracelet will vibrate around your alarm time, when it thinks you're coming out of sleep cycle. You can also have it go off if you're not being active (in front of a computer for too long for instance.)
  • It looks great and feels good. Jambox knows how to do simple design well, and as I mentioned earlier, you barely ever notice wearing it (and this is from someone who hates wearing a watch.)
  • For a first generation personal data collection device, it's surprising how much data it collects and how organized it is. If you're looking to find out more subtle information about your everyday life in hopes of becoming healthier, it's definitely worth trying.

With their really good return policy, simple design and enormous data collection, I don't know why anyone wouldn't try it. Look for it to come back on sale early 2012.

AS3 Timeline Event Class

I was working with a small project written for the Flash 9 player, and started running into some old bugs when working with the timeline. The first, which is seems to be fixed in later Flash Players by default, is working with objects on the timeline that are not in the first frame. For instance, if I had a few movieclips that don't appear until frame 10, I couldn't access them with ActionScript at all. They just kept returning null.

After some research I found the solution, which has 2 parts. When you call a gotoAndStop method, you must immediate fire the stage.invalidate method that will update the render list, and make elements that were previously unavailable available. And to see when they are available, you need to use the Event.RENDER event.

As an example of what this might look like, check out the following code:

function whenButtonClicked(e:MouseEvent):void{
  gotoAndStop(10);
  stage.addEventListener(Event.RENDER,function(e:Event){
    //do whatever you like with the elements on that frame
  });
  stage.invalidate();
}

This would work fine, but as you can see we are not being good citizcens with our event listener, so we need to remove the event listener after our code has run. Thanks to the arguments object, I could use the callee property and remove the listener properly. So the code updated code below shows that in action:

function whenButtonClicked(e:MouseEvent):void{   gotoAndStop(10);   stage.addEventListener(Event.RENDER,function(e:Event){
    //do whatever you like with the elements on that frame
    stage.removeEventListener(Event.RENDER, arguments.callee);
  });
  stage.invalidate();
}

This will work for you FP9 projects as is, but if you really want to make it easier on yourself, I also wrote a TimelineEvent class. Using this will allow you to listen for frameLabels as events. Here are just a couple of the listeners you can use:

stage.addEventListener("myFrameLabel", function(e:Event){ trace('frame label reached'); });
stage.addEventListener("frame10", function(e:Event){ trace('frame 10 reached'); });

You can download the code and a sample file here.

Site changes

Some of you may have accidentally got RSS spammed a couple weeks ago, sorry about that. It was part of the migration I was doing moving all of my article content from my site over. In addition, I've completely redesigned my portfolio site as well as this site. Both RSS feeds now point directly to this feed, for those who follow both. I decided to focus my main site on just my work, and this site on editorial content and code sharing.

I will probably make a few small tweeks to the design of this site in the future, but overall I really like it.

And look for more articles in the near future. I have about 3 that are 80% done, including a nice AS3 trick.

 

LESS is more

So I've started using LESS instead of standard CSS, and I will never go back. I've never been a huge fan of CSS to being with. I'm used to real languages with inheritance, reusable functions and of course variables to hold important pieces of information in a single place. CSS has none of this, so I hated it almost immediately. I of course learned to deal with it, all my designer friends loved it, and it was definitely better than the alternative of putting styles inline with HTML, but no longer. I have to thank Joe Maffia again for showing me LESS and this handy little app (mac only), which not only converts my LESS files directly to CSS as I save them, but also minifies the CSS at the same time, and it's free.

So what does LESS have that CSS doesn't? Everything. Variables, nested rules, mixins and reusable function are just a few of the features LESS has going for it. I won't go through all of them, as you can read about them in great detail from the earlier link, but I will go over a few things I did to help get it setup for me and some nice things I've noticed about it.

The first thing you will want to update is the syntax highlighting, as most editors won't support LESS right out of the box. I used this mode for updating Coda. After that, turn on the app, point it to the right directory, and start writing LESS. And remember, since LESS is basically just an extension to CSS, you can write normal CSS in there as well.

One of my favorite features of LESS is parametric mixins. These act like reusable functions, and you drop them in as if they were classes. But the beauty is that you can pass parameters when you use them, and unlike normal mixins, if you never use parametric mixins, then they will not be included in the CSS at all, where normal mixins, because they are just like classes, will always be brought into the css. This is very powerful as it allows you to write a bunch of utility parametric mixins and always include them in your LESS file whether you use them or not. Here are a few I use:

.border-radius (@radius: 5px) {
   border-radius: @radius;
   -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
}
.box-shadow (@x: 0, @y: 0, @blur: 1px, @spread: 0, @color: #000) {
   box-shadow: @arguments;
   -moz-box-shadow: @arguments;
   -webkit-box-shadow: @arguments;
}
//positioning helpers
.tuck(@default: -10px){ margin-top: @default; }
.bump(@default: 10px){ margin-bottom: @default; }
.pull(@default: -10px){margin-left: @default; }
.push(@default: 10px){margin-right: @default;}

There is also a nice grid system written for LESS here. It looks like it's based on the 1kb grid system, which I use a lot already. Also just ran across this Github repo, which has a bunch of helpfull LESS stuff.

LESS will definitely change not only how long it takes you to finish styling a site, but also how you approach the styling. I hope browsers eventually support it natively.

Fixing fadeIn fadeOut JQuery hover bug

JQuery is awesome, there is no doubt, but because it's made to do everything, every now and then a "bug" pops up. Case in point, I was using the fadeIn and fadeOut methods to turn on a piece of content when you hovered over the parent piece of content.

The first annoying "bug" is the animation playing to the end. If I rolled over, then rolled off you would see the fadeIn animation finish, then the fadeOut animation would play. That one was easy to fix putting a stop call in between the selector and the fadeIn (as well as between the selector and fadeOut). This will stop the current animation in its tracks. That's when I noticed the second "bug".

Both fadeIn and fadeOut make assumptions on the opacity you want to fade to and from. For instance, if an object is at 0.5 opacity when you tell it to fadeOut, then it will fadeIn back to 0.5. This is great if the intended opacity is 0.5, but if you call the stop method, then fadeOut, it will look at the current opacity and remember it. This meant that when I rolled over the content, then rolled out before the animation had finised fading in, it would fade out from a lower opacity and from that point on, would not fade back into fully opaque. I wrote a quick fix for it using the complete event for fadeOut, and you can see it in the JSFiddle below. Because the fadeOut method actually hides the element after it's done fading it out, you can reset the opacity to what you want it to fade into the next time you call fadeIn right there.

If you click on the Result tab, you will see when you rollover either square, that they both fade in correctly, but if you rollover and out the one on the right quickly enough, when you roll back over it, the circle won't fully fade in.

You can also simply animate the opacity property of the element with JQuery, but I find the convenience methods like fadeIn and fadeOut, well convenient.

Hope this helps someone out, and if you have a better way, please let me know in the comments.

Bieber not Beaver

Busy week last week. Was in Barcelona for holiday for the weekend, then got back Monday and immediately flew down to Bangalore, India to catch up with my development team down there. I flew back Saturday, rested a bit on Sunday, then Sunday night was part of another Beancast recording, a podcast dedicated to marketing and advertising. And I was in very good company:

 

We discussed things from the Facebook smear campaign to the new Cannes Effectiveness Lion. Really enjoyed the conversation with everyone and think it turned to be a really good show.

You can grab the podcast directly from iTunes here.

Stop Talking About Yourself!

I've read a lot of articles on how brands should approach social media. The obvious stuff, be sincere, provide value and don't spam people's stream among others. And that's all great advice, but I still think most brands are missing the point, and they are being lead astray by how many "likes" they get. It's super easy for me to like a brand on Facebook, and then immediately block them from appearing in my stream, so what have you as a brand really gained from that?

No one likes the guy at the bar who constantly talks about himself, and all the things HE'S done, but if the same guy has something interesting on another topic, then I will buy the next round and gladly listen. This is exactly how many brands are currently getting social media wrong. They spend too much time talking about them selves and what awards THEY'VE won and not enough time talking about the thing that actually separates them from their competition, their core competencies.

Many brands have such interesting stories to tell about how they separated themselves from the heard, but they are so caught up in saying their own name over and over again in hopes of brand recognition that they are missing the opportunity of social media. Just be yourself and those who want to have a conversation with you will.

Nike is a perfect example of a brand who doesn't talk a lot about themselves in social media; they talk about their core competency (running for example.) Because I have some interest in running, they talk to me about running, something they have a great deal of insight about rather than pushing their shoes in my face all the time. This is what makes a conversation with them great -- they aren't selling to me, they are actually having a conversation with me. They make it easy for me to move over to their shoes if I choose so. A great benefit for us both, but that wasn't part of the direct conversation.

But these insights and core competencies aren't limited to the obvious brands. There are brands like UPS that do interesting things as well that separate them from other package delivery services. For example, their routes are created to only include right turns in order to avoid waiting at left hand turns thereby saving time and saving gas, which equals cost reduction and environmentally friendly. Whoever at UPS that came up with this strategy should tell his or her story, because people will remember the interesting story first, then associate it with the brand, but it won't work the other way around.

And as a side note, don't take your cues for social media from entertainment brands, they have it easy. When other brands see shows like True Blood (yeah, I watch it, I'm a sucker for the horrible accents) posting about next weeks episode, they think they should talk about what's next for their brand as well, but it doesn't work the same. The brand of True Blood is the content of the show itself, and very few brands outside of entertainment ARE their content. For instance, no one gets excited about the next version of Tylenol, so don't put that in my stream. Instead tell me about the research you've done about headaches that may benefit me without taking Tylenol, and then maybe mention how this breakthrough research lead you to the next version of Tylenol. Like Jerry Seinfeld said, nobody even knows what retsin is, so why should I care that Colgate now has more of it?