Affectiva to Tellart

I didnt realize it had been so long since my last post. So to all 5 of my readers, im sorry. Luckily this time it was not because I had nothing to post about, but because I have been doing so much, and many nights it came down to work or post, and I choose the former.

I have been doing a lot on the bildr front. I finally finished some things that I had been wanting to do for some time, but I will wait until another time to do show-and-tell.

Why the post?

Last month Tellart offer me a position at their design firm.

Im starting the new job in just over a week, and though I am leaving Affectiva, it is only in body.

When I started at Affectiva last year I was eager to be this hybrid of developer and designer and I hit the ground running. Soon it became aware that there was just too much work to be done, and we hired a full-time developer so I could focus on the interaction design, and visual design of the software. It wasn’t long before I realized just what 10 years experience and a degree in computer science could do better than my 1 year of dabbling.

Over the corse of almost a year we hired many more people, and soon, everyone had someone similar to themselves working there but me. I was still the only designer. During that time, I dissected many a UI element and reconstructed them in different ways to understand just what was it about the way the pixels align that pleased my eye. In the end, I found myself creating much nicer graphics, but very similar interactions.

This, mixed with the over 2 hours of driving for the job each day, was the reason for my departure.

After graduation I was not ready to stop learning, and in no-way have I. But things have slowed down on some fronts that I didnt expect. I still push my self to near RISD extremes, but without the teachers and classmates, I was playing the same note over and over.

Tellart is an experience design firm just a few miles away from my house. The ability to save 600 hours a year in driving, and be able to learn and work with a very talented group of designers was just something I couldn’t turn away from right now.

The unfortunate reality is that in doing so I am saying good-bye to Affectiva, the company I joined on the day we got phones for the office – before we had proper desks – before we had a logo, or a website. Affectiva is now 4 times the size it was when I joined, has a CEO and some major players. The products I worked on there will truly be ground breaking.

I had my hands in every aspect of design, and almost all of it to this point was by my hands. This is something I will probably not have another chance at for a very long time.

But for now, I focus on life, growth, and exploration.

From flash to Moo

As many of you know,  Matt Cottam of  Tellart was my mentor while at RISD. I worked with Matt for over a year and a half on may projects. And he was nice enough to hire me for an inter position one summer… The same summer I was learning actionScript for my multi-touch table. That Summer Tellart + Zango worked to design a beautiful new site for tellart. After all the design was done they allowed me to work on the programming of it in flash. I actually did quite a bit of it, but then had to leave to go back to school before it was finished. After I left, I think they noticed how bad some of the code was, and redid most of. Though I did see some of my code in there latter (very little). – That was summer of 2008.

Fast forward to spring 2009. Im reading the Mootools Documentation and found a class I thought I could have used to re-create the site in JavaScript. It worked. In about 50 lines of code I had made a mock-up that functioned very similer to original. It only took me a few hours. I sent it over to the guys at tellart to show them it could be done if they ever wanted it to. But why?

<rant>

So here is my flash rant. I love flash and ActionScript. But not for making web pages. 90% of the time flash is used on a site, it could have been done with out it. But many who say “Who cares?”. I do. And you should too.

Flash ruines page searchability, navigation, SEO, and a lot more. Not to mention that poorly done it is a CPU HOG!

</rant>

Then, just a few months ago, Matt asks me if I still had that code, and if I would be interested in completing it for their site. When am I not interested in more javaScript work?

So the deal was. The site needed to work on the iPhone, retain all the movies/slideshows, have all the portions be bookmarkable, and make it easier to add more content.

I did it. And my code is now in use on their site.

I kept all the flash for the videos and slideShows, and I used mootools to check for flash. If it was not there, replace all the flash, with jpg images.

I made all the elements on the page dynamically generated in PHP. Using some simple arrays, they can now add a new project with a single line of code. And it will resize everything, and create all the parts needed for it to work without modification.

I enabled bookmarking. This is a lot harder than it sounds. There is one page. One. So what do you bookmark? Well there are 7 projects and an info page with a lot of info. Each project position is boorkmarkable. So if you go to the link, the page will load, and it will auto scroll to that project. If you bookmark a person on the info page. It will auto scroll to the info slide, and do a nice ajax call to grab the info on the right person.

Another part was … if a user is watching a video on a slide 0r slideshow, and moves to a different slide, we needed to stop the current slide, and return to the teaser frame. Because the moving part is all javaScript, there a language problem. How do you talk to a flash movie from JS? With mootools. It’s Swiff class is wonderful (though incorrectly documented). I just had to render all the flash to include the JS connect. Worked really well.

It took a full weekend to do (I had thought less) but it came out really nicely. And on a javaScript friendly browser, it is actually a bit faster than the flash version.

Look ma, no flash!

So, as I promised, I made a copy of my new flickr image viewer I just made for my brother. It looks a ton better with lots of photos and tags. The tags line up in columns when there is enough of them. 

Private Flickr Image Viewer

After looking at it, you may think I got a little crazy with the animation, but I think it added a feeling of interactivity when you are waiting for the AJAX call to load. That and I wanted to try out some stuff I may be using on some new projects.

I have to say, I love Mootools, but I really wish there was a better was of chaining actions. Do this, then that, but only after the first one ends. You can do it easily with animations, but only with the same instance of a class, and only animations. What If I want to fade out, then remove/replace content in an HTML element, then fade back in. Maybe im missing something… but it looks like there is no simple way to do this.

And just because I said I would… Tellart <– Take that google reader!