Attack of the Floating Head!

Hey folks, Ryan here. This post sees me returning to the theme of graphic design in film promotion, but I swear there is an underlying message that can be applied to all design.

That message: Trends become stale and unappealing, and fast.

The biggest example of this that I can think of is the "floating head" movie poster. You've all seen them. Every other poster that lines the theater walls shows giant, disembodied heads of Brad Pitt and Tom Cruise on top of some abstract blurry colors with a small explosion or car chase in the bottom right corner. It may have worked for the first few films, but it is painfully clear that these are uninspired and lazy.

The floating head poster has no doubt already solidified it's place in the internet meme hall-of-fame alongside lolcats, chocolate rain and the winnebago man. And yet here we are, 2009, and the floating heads continue to barrage this designer's eyeballs when he visits the local multiplex or purchase a blu-ray. Well, a lot could be said about the correlation between film-marketing and film-quality, but that's an entirely different post; and as I pointed out in my previous article on movie posters, there still is eye-popping design coming out to this day, though few and far between. So what makes this design approach sustainable? How does this appeal to audiences. What is it about these horrid, conservative designs that still aid in getting a man or woman to plunk down their hard-earned $12 to go see that screening?

Here, kids, lies the trouble with trend.

On the whole, trends can be great. Trends can prove to be progressive for technology and design and general public thought. That is, if the trend is embraced as a starting point or a status quo. A trend should not mean the apex of popularity or thought - that's when the snap bracelets start slitting wrists and Eddie Murphy's 30 foot swollen head tries to sell you on Nutty Professor IV: Forrest Klump. Trends, be it in print design or web, should be analyzed and inspiring, but never copied and continued. It's one of the trickiest dragons I battle with weekly, especially in the fickle land of web-design.

You see, print design has more room to breath, it's got more give. There's almost literally a blank canvas there for the designer to paint broad, colorful, masterful strokes, the bounds of the project very little in a lot of cases. Designing for the web can be equally as full of creative opportunity, but with a tighter pair of pants. Web-design is the Wooderson of creativity (think Matthew McConaughey, Dazed & Confused). My point is, web-design is very restrained, and that makes it incredibly easy to fall into a trend.

Let's do a little experiment. Open up a new tab in your browser (don't close this one!) and pull up the Google. Think of a letter in the alphabet, then think of a food or animal that starts with that letter. I chose 'B' and subsequently 'broccoli'. Enter that food or animal into the Google and hit search. Click on the first link that comes up in your search (one that isn't Wikipedia).

I will bet a hundred dollars that the page you made it to had most of the following:

• Logo, no bigger than 175px x 250px, in the top-left corner
• Colored background
• Centered content area no wider than 900px
• Arial or Times as the sole or secondary font throughout the entire site
• One of, if not both: Standard text links for navigation horizontally or vertically at the top and left of the content area, respectively

Cue the floating head poster.

The reason for that little experiment is self-referential really; of course the majority of web-sites follow this grid. What I'm asking myself, and other web-designers, is do we need to continue forcing ourselves into these tight, uncomfortable, acid-washed pants? What we need to do, as a community and as progressive-thinkers, is sit down and re-evaluate the logistics of where we start when we design a website.

The grid system we sketch out on paper is breaking and in turn the majority of websites are stale. The trends themselves are vanilla. But herein lies the problem, just like floating heads in the theater lobby, they still sell. Sure you could make the argument "that movie poster/website/packaging gets the consumer, the target, from point A to B", but I say nay. We'll get them to B alright, but let's not have them fall asleep on the ride as if their Dad had piped in Moody Blues for 6 hours without so much as an Archie Double Digest to keep you entertained.

So where do we, as web-designers, as creators, go from here? We can't very well break our top-left-centered-955px-verdana habit now can we? The web hasn't quite evolved yet. But what's taking it so long? Is it NETLOR, the terrifying beast that controls the internet and tells us when it's okay to go above and beyond what we've been doing for 10 years? Well I don't believe in NETLOR, and quite frankly the idea frightens me. It's the trend that's holding everything back. The trend dictates what everyone should do, thus creating the environment we operate in and its limitations.

If everyone were to use the trend as a starting point, a base you don't go below, working only to improve on that, I think the web as we know it would be incredibly different, and incredibly cool.

I don't know what it will take to rid our lives of those terrible floating head posters though.

The Need for Web Standards

Tell Me I'm Dreaming

I had a disturbing dream the other night - Microsoft creates a web browser that actually adheres to web standards. Much to my surprise, it wasn't a dream; Internet Explorer supporting web standards is finally a reality.

Among the many things Internet Explorer did not support before, here is a list of the ones that have special meaning to me as a web developer:

• min-height
• :hover on all elements
• alpha-transparent PNGs
• proper box model

Standards are Good

Min-height allows me to make sure content blocks always stay at a minimum height. This is to prevent the undesirable look of uneven columns that don't line up at the bottom. This typically happens when the main content column is much shorter than the other columns. It looks unprofessional when you have a long menu column and a much shorter content column, especially if the background graphic doesn't line up at the bottom. Maybe it's just me but I like it when things line up neatly.

Hover on all elements means no more javascript hacks to get CSS menus working properly. This is a godsend because CSS menus, when combined with list elements, are lightweight and easy to maintain. Who needs those fancy animated menus anyways? Menus should be instantly accessible, without needless animations that don't really serve any purpose.

Alpha-transparent PNGs can be a huge time-saver. This is especially true when your design consists of shadows and transparent gradients. For example, typically you would have to matte the background color ( or much worse, a background texture ) to the transparent image you are cutting out. Well now that IE officially supports full alpha-blended PNGs, you can simply switch off any background layers in Photoshop and save your images as is, complete with drop shadows and everything. You never have to worry about background matting again.

Caution must be taken when using lots of alpha-transparent PNGs, as they result in much bigger file sizes than their brethren.

Another really cool advantage with alpha-transparent PNGs is where menus are concerned. Nicer looking menus usually have gradient or textured backgrounds. Traditionally, menu text is merged with the background it is situated on. This made it somewhat laborious and inflexible whenever you wanted to edit or create new items. Using transparent PNGs, all you need to save is the text of the menu item on a transparent background. This can be placed over any background with a seamless effect. Any time you need to make an edit to your spiffy graphic-based menu, all you need to edit is the text itself and save the PNG. Very cool!

At long last, IE finally supports the proper box model. The box model is simply a web construct that determines how the dimensions of containers are determined by the browser. The correct box model states that the full width of a container is equal to the width + padding + margin. IE's model stated that full width = width - padding - margin. I remember struggling with this many times, until I finally realized that STRICT mode temporarily solves the problem.

You still would have to test your site in the major browsers just to make sure your padding and margins look the same across the board.

Now that IE officially supports the correct box model, no more guessing on what to pad and what not to pad. Finally!


The Point of It All

The moral of this story is that standards are always a good thing. As far as web development goes, they are a very good thing. Web standards promote better design, leaner code, and more importantly, a consistent user experience. As a developer you worry more about how to turn an awesome design into a functional site, and less about how to make the design work in non-standards compliant browsers. In the end, time and money is both saved, and users benefit from a more compelling web experience.