I’m sure over the weekend you received a tweet, text, facebook message, fax, or heard you mother say something about the fast spreading news that this past holiday weekend was the date Doc Brown set the DeLoreon to come to the future, July 03, 2010.  Great Scott! Had the future really come.  Had I really lived that long? Back to the Future is my favorite movie of all time how did I miss that?

After raising my glass to toast and commemorate the occasion I starting thinking about it and the date just didn’t seem to make sense to me. Most everything that took place in 30 year chunks. So I did some research and busted out the trilogy to see if the internet has lied to me yet again. Am I really that big of a nerd? Of course you know the answer.  011110010110010101110011

// This is heavy

Here are all of the references I could find to dates concerning time travel in the DeLorean

• BTTF (I)
  • Nov 5, 1955
  • July 4, 1776
  • Dec 24, 0000
  • Oct 26, 1985
• BTTF (II)
  • Oct 21, 2015
  • Nov 12, 1955
  • September 1, 1885

So there you have it.  A complete and total lie

//Get Your Damn Hands off of her!

After doing some poking around to see if anybody else knew.  Apparently I wasn’t the only one that knew this was a hoax set up by TotalFilm

• wikipedia
• MoviesOnline

// What about all that talk about screwing up future events?

There you have it.  We have to wait another 5 years 3 months and 16 days before the future has come. Which means that we have 5 more years before we can expect hover boards and a Cubs World Series.

Thank you Dave and Thank you Flashbelt!

I had an amazing time.  As promised I have posted my Creative Interaction  slides.  Thanks to all that attened my session it was great to meet all of you.  I apologize if I didn’t get an opportunity to speak with you longer.  Feel free to drop me a line and we can continue the conversation.

I’m at Flash Belt, which is amazing, sitting in on the Game Workshop with Seb Lee-Delisle. His gaming framework is brilliant and I LOVE to hear him present.  If you ever get a chance he is a must see!

If you’re at Flash Belt and wanna talk shop DM me @joshsager

It depends on who you ask. College students studying web will tell you 906 million by 679 kajillion. Whereas my mother’s desktop would differ, with a whopping 800px by 600px resolution. Why? Because that’s how it came when she got the computer.

Now there are lots of compelling stats out there. For instance, w3schools has nifty screen resolution chart pulled from their web traffic. This would lead you to believe that the era of 800 x 600 is over.  But, before you hoot and holler keep in mind knowing your end user is super important. Also keep in mind mobile is on the rise, so the small screen has come back for a sequel. That is unless the iPad takes over the world.

There Really Is No Standard? Right?

Too often students ask me “What resolution should I design for”? My answer usually falls somewhere between “it depends on what problem you’re trying to solve” and “Who is the target audience”? After they roll their eyes I usually direct them towards the nonstandard standard of 960 pixel width made popular in part by great resources like 960.gs.

Although a 960 grid is a great resource it only solves half the problem. What about the area of space before a user is forced to scroll? Sparking an entirely different debate. To scroll or not to scroll. I don’t intend on addressing that debate here, but it is good to know there are a few different camps out there. The pro-scrollers, The funny guys and anti-scrollers. Although the anti scrolling crowd is not well documented it usually comes as a request from your boss.

Lets just assume that scrolling is going to okay. So you’ve set up a 960 pixel wide document and well… you’ll figure the rest out later.

Don’t Cut me off!

As a result of figuring it out later I see many young designers create good concepts that stop right at the edge of the unofficial 960 width standard.  It looks great in Photoshop, but inside of a browser it looks a little empty against a huge block of white poking around the corners. By this time deadline is quickly approaching so it’s time to just get-r-done and the typical next move is to reach for a background color or to create some sort of pattern. Both of which hurt the initial design concept and are forced to fit because of time constraints. Instead of force feeding design element why don’t you employ a Web Safe Area.

What is a Web Safe Area?

It borrows from video safe frames idea. Basically it’s a guideline identifying an action safe area and a type safe area for your television.  Anything falling outside of those areas could be cut off on some TV’s.  The use of safe frames in video is very interesting.  Instead of cropping all of the footage to the minimum size, the video industry goes the other direction.  If you have it, you can see it.  So if you’ve got a TV that allows for viewing outside of the safe areas, then you’re rewarded with more of the picture, but the titles and action still fall within the guidelines. Now I know not everyone follows this rule, but if you own an HD TV you know exactly what I’m talking about.

A Web Safe Area is the same idea.  Section off an area of your design that has all of the important stuff, like content and navigation.  But don’t stop the design there.  Allow it to spill out.  It not only gives you a better idea on a safe height before scrolling, which is typically 600pixels, it can help you design in “screens”.  Which is the idea of chuncking your design into scrollable screens. Apple does a great job at this.

Below the What?

Another really popular user interface design concept is the below the fold.  This is relating the unscrolled area of a design to the front half of a newspaper viewed from a newspaper machine. Typically formatted with large images and headlines.  Then as you “unfold” or scroll you get a sectioned off column based layout with features, links, and resources. The Web Safe Area can help with this philosophy as well.

In fact the visitphilly example, designed by the pros at Happy Cog, featured in the Web Safe Area document employs chunking and a below the fold feel. You can clearly see how their design continues past the “safe area” to really fill out the experience.

Where to Go From Here?

Download the Web Safe Area template and try it out on your next project.  Experiment with creating a full browser design and track user feedback.  You might be surprised at how much positive feedback you’ll get from addressing pixels that a limited viewer base gets to see.  Think of it as progressive enhancement for design.  Now I know It doesn’t really solve the no standard screen resolution size, but it’s a good place to start.

Flash Builder 4 - (formally Flex Builder )

So you’re getting further into Actionscript for your interactive projects and you dip your toe into the pool of programmatic animations. It seems like a good idea. All of your transitions can be managed from a few lines of code in one central place. You happily travel down the road of the Tween Class. You do a few tests, it’s easy to use, the results look great, and set off to implement it into your larger project.

You soon find out that the tween class chokes. It chokes hard and fails at unusual times in spectacular fashion. What do you do? You’ve spent all of this time setting up the Tween Class, and you love the idea of centralized transition control. Don’t worry there’s a great alternative, Tween lite.

Comparison

Here are some examples of the Tween Class and Tween Lite in a typical scenario. There are three buttons that when clicked will transition in 4 “products” of a similar color.

• interface-tweenclass-4
• interface-tweenlite-4

Tween Class Results

Inconsistent. With only a few shapes some of the transition pop in an out. At times the transitions will “stick” before they complete their animations. Even at this very basic level the Tween Class is Shaky at best.

Tween Lite Results

Not bad. Everything is where I expect it to be. Although I’m still a little gun shy from the Tween Class, this appears to be doing everything I need it to. Not to mention installing Tween Lite in place of the Tween Class was really easy.

Turn It Up

Okay now it was time to take Tween Lite to task a bit. To simulate a larger project I increased the number of “products” to 200 per each button click. Although the transition selected may not be appropriate for that amount of products it worked like a champ. Meanwhile the Tween Class couldn’t get more than a few products to animate.

Don’t take my work for it see it for yourself.

• interface-tweenclass-200
• interface-tweenlite-200

How Easy is it Really?

It’s super easy. Just download the Tween Lite framework, import it, and start using it.

Code Comparison

Very comparable. My favorite thing is you can add an event listener right in the decoration.

Now that’s really easy to use. There are sorts of other great features. Make sure to read the documentation. Greensock did a great job on putting it together.

So if are looking to up your game with programmed transitions or animation, I would check out Tween Lite. It may save you a big head ache in the long run.

Source Files

Just in case you want to poke around and create your own benchmarks I’ve provided my source code for this basic interface.
tweening-benchmark