around the current page.Figure 4-13. Paging in Facebook Photos
Sidebars
Your home page on Facebook includes a sidebar with very subtle but effective divisions into sections (Figure 4-14). The sidebar is a 186-pixel-wide div floated right. The background on the sidebar is achieved by setting the entire Canvas’s background to http://facebook.com/images/newsfeed_line.gif, which is a 646-pixel-wide and 1-pixel-tall image set to repeat vertically. Apply a sidebar_item_header class to your headers:
sidebar_item_header
background:#E9E9E9 none repeat scroll 0% 0%;
margin:0pt 5px;
padding:3px 5px 4px;
text-align:right;
}
Figure 4-14. Facebook Home sidebar
Canvas Footers
The Footer Bar runs across the bottom of Canvas pages and provides actions (usually contextualized to the current user: the earlier example is from the bottom of your Profile page; see Figure 4-15). You can replicate these easily with some simple HTML:
and some equally simple CSS:
div#footerBar {
background: #F7F7F7 none repeat scroll 0% 0%;
border-top: 1px solid #DDDDDD;
margin: 0px;
overflow: hidden;
}
div#footerBar ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0px;
padding: 10px 20px 25px;
}
div#footerBar li {
float: left;
line-height: 18px;
padding: 0px 2px;
}
Figure 4-15. Facebook Profile footer
Facebook’s Global User Interface
—Daniel Burka (see his bio in Contributors)
Problem
I want to develop an application interface that will integrate smoothly and will adapt successfully with the global Facebook user interface.
Solution
By using user interface tools provided by Facebook and adhering to de facto standards, your users will find your Facebook application’s user interface inherently intuitive, and your application will evolve smoothly as the main site changes.
Discussion
Facebook application developers are lucky to have a suite of user interface elements prebuilt for them by default. Designers often have a powerful desire to create original work that breaks with convention, but, particularly when developing Facebook applications, the benefit of adhering to standards (both explicit and implicit) far outweighs the potential benefit of originality.
In the case of developing a Facebook application, you will be developing an interface within an interface (see Figure 4-16). Your application will exist within the shell of the global Facebook interface and, possibly even more importantly, your application will live in a vibrant ecosystem of other applications made by Facebook developers just like you.
Figure 4-16. Your application within the Facebook shell
In many ways, the Facebook interface can be thought of like an operating system user interface. In developing their own default applications (such as the messaging system, your preferences, the News Feed, as well as the default applications) and the framework for the global user interface (such as the main navigational elements, error dialogs, and the footer), the Facebook design team has tackled many of the