Facebook's Stinky Ad Creation Process

Facebook is notorious for making changes to their (recently IPO'ed) platform, without much user input. I understand that users don't necessarily have the future of the platform in mind, but I don't understand how facebook could neglect the needs of its advertisers so blatantly.

Their main competitor, Google AdWords, has built in some support offerings (e.g. Google Engage, which my ad agency is a part of) and extensive documentation around their platform. Although much younger, if Facebook plans to get more $ out of its advertiser platform, I would think it should offer some type of support or, at the very least, a quality service.

Here's the story. I went to create an ad today for an event that Rachman and I are hosting this Saturday. I'm not new to Facebook ads by any means - in fact we have been running ads for this very event for the past several weeks, but wanted to test some new targeting and images.

Challenge #1: Can't create an ad for an event in the Firefox browser.

Fine.

Until recently, something was broken in all browsers except - gasp - Internet Explorer!? that prevented ads for events from even being created. Event ads are unique in that they allow a user to click to RSVP right within the ad. Facebook gets some points for having a direct event advertisement platform that ties in nicely with the millions of users that manage their social calendars with Facebook. However, as an advertiser, if I can't create my ad - how are you going to get my money from advertising? Silly silly.

Second point: generally speaking, Facebook support for all major browsers seems to be inconsistent. Any [good] web designer knows to test in all the major browsers. I have three of them installed on my Mac, and more virtually. This allows me to test client projects on many browsers before "launch." It also allowed me to create my event ad today... go figure.

Challenge #2: Facebook ad provides a mere 110 x 80 pixels of space for an image.

Fine.

Google AdWords are generally text-only, so I guess I'm happy Facebook allows an image at all. Plus, I figure it's a nice exercise, to design within such small real estate. But when I go to upload my nicely-designed ad and the text is all blurry, it's a little concerning. I want to make sure the users can actually read what I'm advertising. So I search the small database of Facebook answers and come across this nice little entry: https://www.facebook.com/help/?faq=103816146375741

Challenge #3: Only 5kb for an image? What are we, in 1999 again?

Fine.

I'll just optimize the image using pre-millenium standards... severe compression, limiting colors, saving as GIF. This work was necessary back in the day when people had dial-up modems and used AOL... but I'll do it, if it will make my tiny text easier to read.

Challenge #4: No matter what I do, the red-on-black text is still blurry.

Fine.

I change the text to blue. It doesn't look nearly as cool as my original version, and is now quite different from the original branding I had intended. Red text is much sexier. No, really, from a psychological perspective - it is. It signifies energy, movement, excitement, and life. Exactly what we're trying to convey.

Not fine.

Facebook, if you're going to allow images in your ads, please let us visually-inclinded advertisers create "eye-catching," attractive images that will increase click-through rates and get us more event attendees!

End of rant.

The Evil Twitter Twins

Back in September, Twitter began rolling out a sparkly new layout and a few new features to some of its users, and officially completed it in October. Users are still given the option whether to use "old" or "new" Twitter, and I'd personally kept to the old one for a while for a variety of reasons, including my typical resistance to anything my favorite services try to change for the sake of changing (if it ain't broke...) but also because of the "new" version's wider layout, which fills most of the screen horizontally.

Old Twitter

New Twitter

The implication is that less of the user's background image will be showing. A little *ahem* background... on Twitter's backgrounds. You basically get three options when designing your Twitter profile's background appearance:

• solid color (don't use a background image)
• background image that tiles (repeats vertically and horizontally)
• background image that doesn't tile and is stuck in the top-left corner of the screen

This is a bit different from normal Web pages, which allow you to set a variety of options in HTML and CSS such as whether the image will be centered or stuck to a different side of the screen, whether it will be fixed or scroll with the content, and more. To be fair, most social networks do limit customization in order to maintain some kind of consistency for the user experience. Twitter in particular has always had a very streamlined interface and sometimes an overly-simplified approach to its service. The great thing about getting millions of minds together online though, is that often people will come up with extremely cool ways to work within the provided framework and still show off their creativity.

In the case of Twitter, one of these ways was to create custom background graphics which either reinforced a brand image, pointed to other social networks (Twitter limits you to one hyperlink in your actual profile), or just looked darn cool. There are plenty of nifty "Twitter background" roundups and tutorials floating out there which highlight this trend, but they generally display the narrower layout which provided more real estate for these creative backgrounds.

Now, I had not taken the time to design myself a cool background before this point, and in a way I'm glad I didn't because it's a shame for all the people who did, only to have them hidden today. However, in light of the imminent "You’re using an older version of Twitter that won’t be around for much longer" message posted along the top of every page, I decided that there must be a way to have a cool-looking graphic that fits in the new space provided.

And so, in honor of Spring cleaning, my new MacBook Air, and the design community at large, I put myself up to the challenge.

Thought process:

• I am not including mobile users, as they would be using mobile Twitter or a third-party application, so they wouldn't see any change in "layout" from old to new or any user's backgrounds at all.
• For some users, 1024px is the highest resolution their screens will allow. Browsing new Twitter with a 1024px wide window on a normal device, though, means that you have 40px of background real estate on the left, and 40px on the right. Unless you're going to write something at 4pt font size or place your favicon there, I don't see this as being useful. It is practically the smallest resolution you can use in the new Twitter before getting horizontal scrollbars (ick), so I think it's safe to say this resolution will not be our target.
• Moving on to the next big class of users: 1280px wide screens. Realizing that someone could resize their window a bit smaller even when their maximum resolution was 1280px meant that I wanted a design which could hold up to somewhere between 1024 and 1280, but generally 1280 would become the new standard. This gave me 120px to play with on each side of the screen.
• The right sidebar in the new Twitter is now slightly transparent. I could do something cool behind there...

Time to sit down and design. Approximately three hours, one drunken roommate, some Pad Thai, and a few bathroom breaks later, I was finally satisfied enough to test my design...

Eureka! It worked! My design didn't call for any specific top padding, and I eventually trimmed it down a bit, but I was very happy with how this looked online, how it scaled with the window, and of course, how very "Amy," my new Twitter background was.

Now off to write a how-to reference for the design community on http://color-and-code.com

I've Matured (as a web designer)

Maybe I haven't, but my blog has definitely grown up over the past year+ that I've been blogging. Check out this blast from the past layout that I created back in the day, before the current one:

Let me know what you think of the updated look!

pollcode.com

What do you think of the new layout?

Great! It was time for a change. It's nice. Less pink is a good thing. I don't see the difference. The old one was nice enough. I liked the old one better. Molto bello! It's alright. Very slick, modern looking. Prettyyyy.

 

Gilles Tran: 3D Genius

I recently discovered this 3D artist from France named Gilles Tran. I think his art is absolutely amazing from both a technical and artistic perspective. He uses a lot of the software and tools I use to create my own art, so it's truly an inspiration to look at his work. I really don't know anything about him other than what's posted on his website, have never heard of him before, and have no idea if he does this stuff commercially or just for fun (well of course most artists hope to make some sort of money doing what they love, right?), but I felt the need to post about him when I found this incredible statement in his online gallery.

Those of you who know me personally will probably laugh out loud when you see the title...

Late for work again ! - Encore en retard ! by gtran

The 3D model he used is from Daz3D (see ad in my bright pink sidebar), and is a free resource for the 3D community.

The amazing part is, I have seen so much 3D art I'm almost sick of seeing these figures everywhere. But Gilles has managed to make me go "wow" at almost every piece of art in his gallery (or at least once per page). The environments he creates for his characters are stunning, as is the lighting, the composition, the textures, everything. For those who can't appreciate 3D art from a technical perspective, see this rendering of NYC and tell me it doesn't look like a photo:

L'oiseau mouillé - The wet bird by gtran
Browse other Digital Art Posters

Then, look at his description of how he made the image.

Okay, now you guys know why I love 3D.

Stumbled Upon: Jackson Pollock

(Two posts in one day, oh boy!)

Just signed up for a service called StumbledUpon, which lets you find cool things on the internet based on your interests and likes / dislikes (via a browser toolbar). So I clicked that I like art, graphic design, and other typical things. And the first page I was taken to was blank. "Huh? Stupid service," I think.

Until I moved my mouse around on the page!!!

Coooooooooool. Hey ya know what I like most about this? No one's trying to make any money, lol.

So I'm not sure if this is a post about StumbledUpon, Jackson Pollock, art, or the fact that the web is so cluttered with money-making schema, but enjoy. And have a good weekend!

You know you're a design major when...

You get excited about Adobe products.

Even though I'm not technically a design major anymore.