Redesigning Your Facebook Tabs: From 760px to 520px
As you may have heard by now, Facebook announced in October that they will be making major changes to all existing fan pages by “late ’09, early ’10.” Much to the excitement of online marketers everywhere, Facebook is rolling out with a new e-mail API that will allow organizations and business to directly collect user e-mail addresses. Facebook will also be getting rid of the boxes feature, as well as cutting the maximum width of their custom Facebook tabs from 760px to 520px, essentially forcing developers and designers who work on Facebook (like me) to retroactively re-do all of our previous, wider-than-520px, work on Facebook. Not fun.
So how do us designers and developers prepare for this unmistakably annoying task? Well, over the past few weeks, the crew here at VaynerMedia have bit the bullet, and converted nearly all of our clients’ Facebook pages to the appropriate size, free of cost. The following are some insights into our process of converting existing tabs to fit the new format, and how we’ve prepared for the upcoming storm.
What a Disaster!
Upon first hearing the news – our design/development team thought the process would be an absolute mess… and rightfully so! Our meticulously planned layouts and images were suddenly going to be snuffed out by some arbitrary decision and inexplicitly vague deadline. Plus, we were going to have to go back and redesign all of our previous work. We didn’t have much time, either, as we still had a full slate of current client projects that needed to be taken care of in the upcoming weeks.
However, as we began the process of redesigning, we noticed the workspace reduction wasn’t as severe as originally thought. In fact, with a workspace reduction of ~30%, we were actually able to tighten up our interfaces in some areas, while still allowing enough pixels to allow our designs to breathe and maintain their clarity (with a little adjustment of course.)
Rollover to see the size change with Gary’s Facebook Tab. The pink color indicates the 520px mark. (This is not to size – find the link below for a .PSD of the custom tab)
Here are a few things we’ve learned through the process:
Compromise (the right way)
As your content is getting squeezed, it will tend to get pushed down and your custom tab will become elongated. If you had plans on getting a lot of content above the fold, you’ll have to come to terms with that not happening. However you may treat this as a positive, as this may serve as an opportunity to consolidate and boil down your content.
For example, with our client, Sunshine Suites (P.S. If you’re looking for affordable NYC office space, these guys are Crushing It), you’ll notice we had to remove the navigation of the original Facebook page and focused, instead, on a single introduction video with a clear call-to-action inviting the user to Sign Up Now for more information. This ultimately provides a more enjoyable and easily digestible user-experience. By being forced to work in a smaller layout, we were able to consolidate and boil down what was most important, rather than what would otherwise be considered a compromise.
Rollover to see the how the the new size looks above the fold. The old size is the tab zoomed out.
Putting the Time In – Do You Expense the Client?
There’s no way getting around it – you’ll have to put the time in to accommodate these changes. If you’re working for a digital shop that includes some sort of maintenance retainer in the contract, your costs will be covered for the most part.
However, what about freelance designers and developers, do they revisit the work they’ve already completed, possibly months ago, to restructure their work for free as an added value proposition? Or do they charge per project? How will clients react to this change? An interesting metaphor comes to mind: If a customer buys an SUV, and gas prices go up, would the customer be justified in going to the dealership to demand they install a more fuel-efficient part (restructured Facebook tab) in your car for free? Probably not. I believe that the ball is in our court (as well as other digital agencies) at the moment.
How to Prepare for Next Time
In the event Facebook decides to reduce their custom tabs again in the future, it helps to be a little more prepared. One thing that helped ease the process along was keeping Photoshop layers organized (I know, how many times have you heard that before?). In doing so, we were able to target and resize big chunks of information quickly and efficiently.
Also, from a client-relationship standpoint, accounting for the uncertainty of Facebook and all other social media platforms should be made in future contracts. In writing, it should be made clear that in the event something like this happens again, certain actions should be taken. Perhaps, a redesign/implementation should be offered at a discounted rate? Or perhaps those costs are covered within a monthly retainer?
In Conclusion
Most of what I’ve discussed is still up in the air, as we don’t actually know what exactly will happen to existing custom Facebook pages. Will custom content be distorted or completely cut off? Perhaps Facebook will provide vertical and horizontal scroll bars to allow you to see content not yet converted to the 520px model?
Either way – it never hurts to be prepared. The best way to get through this is to give yourself enough time to implement and learn from this challenge. Adaptation and problem solving is what us designers and developers do best.
What design hurdles have you had to overcome with Facebook’s pixel downsizing?
For your convenience, I’ve included a simple 520px width Facebook template for download to make your transition process just a little easier. If you have any questions, concerns, or just want to bitch about Facebook, shoot me an e-mail or drop a comment below!
Downloads
Below you’ll find a handful of the assets we’ve used in the Facebook conversion process
1) A full .PSD of Gary’s Facebook tab, created by Keith Holjencin, one of VaynerMedia’s in-house designers. Click here to download
2) A blank 520px Facebook template with guides Click here to download
Author: Adam Kopec
