When I checked our Fan Page today, I was greeted by friendly message from Facebook the long-promised/threatened width reduction application tabs was being rolled out in preview for Page admins. The message:
I took a look at one of our application tabs in Facebook, and it showed the reduction of available space to the custom tab to 520 pixels. I checked around at a number of other fan pages and am seeing the changeover for all Pages I admin.
Here’s what our Sandbox page looks like:
As you can see, the new left column contains pretty much same content as the Wall’s left column, with the Boxes content still surviving (and the Wall boxes and Boxes tab are also scheduled to go). The Static FBML custom tab, which we designed for 520px width, now sits between two columns. And the design will have to be reconsidered (more on design implications below).
Don’t Freak Out! Only Page Admins see the new reduced width…
This new view is only shown to Fan Page owners; if you view custom tabs that you don’t admin, or you view your Page’s custom tabs while NOT logged in with your admin account, you WON’T see the width reduction. Per the Facebook Developer Blog, the changes will go into effect on August 23.
Even for Fan Page owners, such as HyperArts, who have been designing application tabs for the long-anticipated width reduction, there will be work to do, particularly for designers.
DESIGN CONSIDERATIONS: Your Fan Page Logo Avatar has a Larger Footprint
With the soon-to-be “old” width, the logo on Static FBML custom tabs was about 50 x 50 pixels, but it will, after August 23, appear as it does on the Wall.
What this means for designers is that you’ll need to factor in the presence of a 200px x up-to-600px logo when re-designing your custom tab. You can see from the HyperArts example, that we can certainly lose that horizontal green logo in our application tab!
And, in general, such a profound change in the visual context for application tabs will require a rethinking of the design, both of the application AND the profile picture/logo.
Because of the new stronger juxtaposition of the logo and the tab, designers will need to take both into consideration when rethinking the designs.
Profile Picture Size is likely to hit soon, as well
Facebook announced back in January that it would be changing the maximum size of profiles pictures to 180 x 540px (down from 200 x 600px) “in the next few weeks.” So this change, which is likely coming soon, will also be a factor designers will need to consider.
The Good News 520 Pixels Renders Fine
I am relieved that the full 520 pixels is made available on custom tabs. I worried that Facebook might fudge that with some padding or something and we’d still have to modify the designs we thought would accommodate the 520-pixel width.
Canvas Page Tabs are Getting Squeezed into the Narrow Column
From the earlier announcement by Facebook concerning the width reduction, I had been under the mistaken impression that tabs that displayed Canvas-page applications would still be allowed the 760px width. However, I was wrong about that.
Application tabs (including static FBML tabs) will be the only way to integrate applications into profiles and Pages. Application tabs will shrink from 760 pixels wide (today) to 520* pixels wide to accommodate a slightly revised design. Boxes, info sections, and the Boxes tab will be removed in the near future.
An “application tab,” as defined by Facebook, is any tab on a profile or Page, created by Static FBML, a Canvas page, whatever. All tabs will be restricted to the 520px width.
In order to display your Canvas application to users at the full 760px width, you would need to send them to the actual application page. However, this would result in a less-than-ideal user experience, as it takes the user away from your Fan Page to your application page.
The current HyperArts “welcome” tab pulls in the Canvas page from this URL:
Here is our Canvas-page Welcome tab with the new width reduction:
We intend to still pull our tab from a canvas-page application to enable RSS feeds, primarily but it’s width-reduction time!
I’ll continue to modify this post as the situation develops. Hold on tight!