An auto dealership keeps sending me e-mails despite the fact that I purchased from another dealer over a year ago. I opened the latest e-mail today and saw this beauty:
Dear Steve, please either use an appropriately sized image in your e-mail, or learn how to properly size the image you have available. Thanks again. (Go Angels!!!)
I love this PlayStation commerical:
Apparently it’s destined for Latin America. The rest of the world seems to get much better advertisements than we do.
Somehow or another (I’m not entirely sure) I’ve found myself trapped in the sixth circle of hell with everyone else on Fandango’s mailing list. How did I get here? I must have purchased a movie ticket through Fandango at some point, and they must have automatically opted me into their mailing list.
Fine.
Whatever.
Generally I just unsubscribe from these things as soon as possible (if possible, hencforth known as ASAP(IP)), but I do have an interest in the latest happenings and releases in film, and since I don’t have many other forms of casual exposure at the moment I decided to let it slide.
I felt like it had been wise of me to do so when I saw this in my inbox:
Batman 3! New Villian! Awesome! Let’s click through and find out more!
Huh? Where’s my batman? Ohhh…
How long did it take you to find it? I scanned the e-mail for about 30 seconds before I found anything Batman related. This sort of behavior is pretty well documented in places like DarkPatterns.org.
When you consider the subject of the e-mail and how much screen real estate is actually devoted to said subject, it’s clear that this entire e-mail is just a lousy Bait and Switch. Fandango tosses out their batman shaped hook (a batarang perhaps?) to lure me into viewing their glossy, full page advertisement.
Fandango, consider yourself unsubscribed!
Bonus:
Because I’m a responsible citizen, after unsubscribing I felt it was my duty to provide Fandango with some feedback about why in the future I’ll go on without their colorful e-mails:
The two images above both depict the “People” sections from their respective agencies websites. Pages like this are generally used, first of all, to name the important players in an agency, and second of all, to humanize the people you will hopefully eventually be paying for creative work.
What’s the significance of the juxtaposition of these two images?
The company in the first photo employs almost as many people as are depicted in the second.
Today TechCrunch posted an image of the poster for the upcoming film about facebook entitled “The Social Network.” Now, I’m not posting this because I’m even remotely intrigued by the idea of a film about Mark Zuckerberg, but rather because the poster seemed very familiar to me. Check it out below:
Nice, right? Now check out the cover to the Criterion edition of Nicolas Roeg’s “The Man Who Fell to Earth” (starring David Bowie!).
This is pretty obvious, isn’t it? With the exception of the browser bar overlaid on the right of the poster for “The Social Network,” and the slight difference in typography, these are practically the same composition. For my part, I prefer both the typeface and the quality of the photography in the Bowie cover. I don’t know that I care for the “washed out” look of the Zuckerberg cover. Here’s a side-by-side comparison to assist. Bowie is on the left (I hope that’s obvious) and Zuckerberg is on the right.
I’ve always loved the original cover, and I’m glad to see that other people (clearly) do too.
I just had to bring attention to a packaging redesign I saw the other day that really impressed me. The product is 8th Continent Soymilk. Here’s a photo of the old packaging…
This is all quite standard. A nicely lit shot illustrating what you might use 8th Continent’s rich, luscious soymilk for. Perhaps in cereal? Perhaps even with berries? Why not just drink it straight? This just screams “Me Too!”
BOOOOOOORRRRRRIIIINNNNNGGGGGGG!
Here’s the new packaging:
Dig that retro style! I love the simplicity of the illustrations and color schemes. The typography has also been improved. How will I, in the supermarket, figure out what this product is? The way I see it, the attractive design is going to grab my attention and compel me to step closer and read the label. Nice. These designs are both more competent and more confident.
Today, as happens once in a blue moon, I was presented with a stack of flash banner ads along with a request that they be squeezed under a 50k file size limit. If you’ve ever worked on banner ads you’re probably familiar with these sorts of limitations, as well as those placed on duration and the use of rich media. You may also be aware of how frustrating and difficult a task it can be to squeeze banners, with all the aesthetic demands placed on them, under these arbitrary size thresholds.
After several years of dealing with these issues, I’ve come up with an array of tips and guidelines for reaching the file sizes that ad networks demand. Some techniques are more effective than others. Many of them may compromise the aesthetic integrity of the files you’re working with so it’s best to use a mixture of these strategies to suit your needs.
I’ve prepared a sample banner in a standard size (300×250) to use as an example. You can download the initial source files by clicking here.
We have what seems to be a very simple banner animation. Several pieces of text fade or slide into view, and bubbles are dynamically placed on the stage and flown from right to left. A number of different fonts are used (all variations of HelveticaNeue) and the image in the background is crisp and clear. It may not seem like it’s very complicated, but this SWF is actually 1.6mb. How can that be the case, and how can we fix it? Let’s look at a couple things we can change.
The most significant factor contributing to the file size of this SWF right now is the large number of embedded characters. If we browse through the assets being used in the SWF, we can come up with a list of the following fonts being used:
This may seem like a large number of fonts, but it’s not uncommon to receive compositions that use at least this many. This in itself, though, is not necessarily a problem. Where things get messy is when we look at how the fonts are embedded.
In the case of our original file, we’re embedding every character in every font we’re using. If you look at the screenshot above, that’s almost 100,00 characters per font, or nearly 700,000 characters total. Most of the characters we’re embedding are entirely unnecessary. How can we resolve this issue? There are three ways.
After going through the source file and correcting every dynamic text field (using option 2), our 1.6mb SWF is down to a sweet and slim 36kb.
Another way we can influence file size is by toying with the JPEG compression settings for our SWF. By default, Flash embeds bitmaps at 80% of their original quality. Most of the developers I know rarely if ever tweak this setting, and in most cases it’s not necessary to, but if you’re willing to toy around the the figures you can squeeze a few more kb out of your SWF quite easily.
You can modify image compression in two ways.
This method is far from flawless, and the results are often hard to predict. In the case of the SWF we’re working with above, I’ve created a demo showing what the platypus photo in the background looks like at various compression levels. Click and drag the slider to adjust the quality of the image (displayed in the field next to the slider).
You probably can’t even see a difference before getting down below 70. From there to 40 the changes are subtle, and they become more noticeable with each step from 30 down. Obviously you have to know where to draw the line when you’re sacrificing image quality for filesize, though in the example above I would be willing to go perhaps as low as 20 if the need were great enough.
In our original SWF, setting the JPEG quality to 20 brought our filesize down from 36kb (after modifying our fonts) to a tiny 24kb.
Depending on what you’re trying to accomplish in your banner, you may require external libraries for animation or data connectivity. It’s easy to forget that including these libraries can add to the overall file size of your published SWF.
In our sample SWF we’re using the TweenLite library to animate bubbles across the screen and to remove them when they’ve cleared the left edge. TweenLite is a wonderful library, and it’s already quite small, but you may not be aware that there is a smaller version of TweenLite available called TweenNano. TweenNano is packaged with TweenLite, and unless you intend to do something highly complex it has all the same basic functionality.
The code in our original file for animating bubbles looks like this.
//
TweenLite.to(bubble, Math.random()*10, { _x: -150, ease: Expo.easeOut, onComplete: killBubb, onCompleteParams: [bubble] });
//
To switch over to TweenNano, all we have to do is change the name of the static class we’re referring to, like so:
//
TweenNano.to(bubble, Math.random()*10, { _x: -150, ease: Expo.easeOut, onComplete: killBubb, onCompleteParams: [bubble] });
//
Switching the code in our application from TweenLite to TweenNano brought our file size down from 24kb to a miniscule 20kb.
The final fix I would recommend for our sample file requires an awareness of the environment you’re publishing to and the needs and capabilities of your project. While it may seem at first that it’s best to publish to the latest version of FlashPlayer, if your application isn’t taking advantage of newer features it may be in your best interests to hang back with an earlier version.
Our original application, after all the cuts we’ve already made, was clocking in at 20kb published for Flash Player 8. If we publish to Flash Player 7, we reduce the filesize even further down to an insane 16kb!
What do we lose for the bargain? In this case, the ability to specify anti-aliasing methods for our text fields. Because this animation is simple, and nothing dramatic happens with text, we can part with those capabilities quite comfortably.
Of course, there are trade offs here as well. You may think that it’s better to publish to Flash Player 9 than 10 if your project doesn’t require features like native 3D support, but perhaps you could achieve some performance benefit by replacing your Arrays with Vectors?
Which version of Flash Player you choose to publish to will depend on your unique needs, but it’s worthwhile to remember that the latest is not necessarily the greatest.
After applying the above techniques to our original swf with a filesize of 1.6mb, we were able to reduce it to only 16kb. That’s a 99% reduction, and it’s sure to make clients and advertising networks happy. The new, shrunken files, can be found by following this link.
Keep these tips in mind and let me know if you have any other tricks for putting the squeeze on bloated SWFs.
I present the following two commercials, demonstrating the same basic product.
Perhaps I’m a cynic. Perhaps I’m completely out of touch. One thing occurs to me immediately upon watching these advertisements: Why the hell should I want to post to facebook or twitter while I’m watching television? Even if I did, would my television be a good tool for the job? This all reads like the wrong product in the wrong place to me.
It’s clear that communication and leisure are undergoing dramatic changes in step with technological progress, trending towards convergence around do-it-all devices equipped to help us navigate the glut of data we’ve grown accustomed to consuming, but where should we draw the line?
It’s not that I feel that either television or twitter is so sacred that the comingling of the two is either offensive or unforgivable, but rather I wonder whether there is any longer such a thing as undivided attention? I think it’s quite possible that we’re too plugged in.
What’s more, I hope the fact of the matter is that companies like Verizon and their competitors just don’t get it, and that products and services like the ones advertised above fail miserably. I hope that most consumers, whatever I may generally think of them, see through this for the pathetically impotent offering that it is.