Two weeks ago Facebook announced support for fluid canvas-layouts on their blog. Since not all developers have this new option available yet (it seems to be rolled out together with the new real-time app-activity-stream in the right sidebar), here’s a quick overview on these changes.
Since the beginning of time (or rather since platform was first made available in 2007), the Facebook application-canvas has always been fixed to 760px width, content has been centered if the browser window was any larger. Fluid layouts abolish this limitation for the first time. To activate fluid layouts, go to the developer-app:
So, how do fluid canvas layouts look and feel? We’ve prepared a Demo-App at http://apps.facebook.com/superfluidappcanvas/, however if the new layout-option hasn’t been rolled out for your user-account, this app will still be displayed in fixed, 760px width! If fluid layouts are enabled, the content will be rendered like this:
- Content of canvas is left-aligned
- Canvas grows dynamically with size of browser window (width of canvas = width of viewport – 256px for the sidebar)
- No Margin on left, top or right (which takes a bit getting used to)
If you decrease the browser window’s width, the canvas-width is reduced down to 774px minimum:
Again, here is how the canvas would look with fixed-layout enabled (or, if fluid layouts are not enabled for you yet):
While we think the no-margins canvas, which btw. is also changing for fixed width apps, looks a bit strange (especially with rounded corners on your canvas-layout), the new fluid layout certainly gives developers more flexiblity. While it probably is mostly aimed at games, it might be a good solution to integrate existing web-apps/sites which can’t be easily trimmed down to 760px. What do you think, are you going to use fluid layouts on your Facebook-apps?