The Docked Ribbon

This is the third post in a SharePoint 2010 ribbon series.  Be sure to check out posts 1 and 2 as well:
1) Boil it down to the basics… the SharePoint 2010 ribbon
2) Gathering requirements for your ribbon needs 

There are two states the SharePoint ribbon can be in, docked or undocked. Let’s dive right in looking at what it means to have a docked ribbon.

The docked ribbon

A nice, fresh, out-of-the-box SharePoint 2010 site has a docked ribbon.  If you pay close attention to the far right side of the browser window, the scroll bar for your web page (assuming you have a page long enough to scroll) starts after the navy bar that is the top of the ribbon area:

Scroll bar starts under the ribbon area

When the ribbon has been toggled on, the scroll bar drops down and starts after the ribbon:

Shorter scrollbar when ribbon is toggled on

In either case when you the scroll the page, the area above the scrollbar stays firmly in place while your content scrolls off.

How a SharePoint site scrolls

If you look at the BODY element in the master page attached to the SharePoint site, you will see that scrolling has been disabled for the browser:

body scroll="no"

I will leave the technical mumbo jumbo to a developer much smarter than me to explain, but simply put, there are SharePoint JavaScript files at work here that are recreating the scrollbar (since the browser is no longer providing one) and setting the scrollbar to start after the navy bar when the ribbon is toggled off, and after the ribbon bar when the ribbon is toggled on.

The workspace container

If you move further down in the master page, you will come across a DIV element with an ID of s4-workspace.

div id="s4-workspace"

This is one very important DIV and why I don’t like the slash and burn approach to “fixing master pages” for your custom branding. I see a lot of people that suggest removing this ID.  This is an important tag folks, and not because of some CSS floating around in SharePoint.  This ID is referenced by several JavaScript files, is used to create the scrolling area under the ribbon, sets up modal dialog box sizing and who knows what else.

The sizing of the scrollbar is based on what code is above (therefore outside) the s4-workspace container vs. what is within the workspace container. The ribbon by default is above of the s4-workspace container.  You can add whatever you like that is whatever height you like above the s4-workspace container and it will become part of what is docked at the top of your browser window.

I am intentionally saying above the s4-workspace container as opposed to saying outside. If you place code/content after the s4-workspace container and leave it in the flow, it won’t show up on the web page.  If you start messing with the s4-workspace in order to allow your other content to show, things get sticky really quick in SharePoint. You can however put elements after the s4-workspace container and then absolute position them into place with (usually) no issue.

What does all of this mean for ribbon placement customization?

In summary, SharePoint’s default behavior is to disable the browser scrollbar and create it’s own based on the contents above and within the s4-workspace container. The ribbon is above the s4-workspace container.  The page content is within. You can put whatever you like above the s4-workspace container and it will be docked to the top of the browser window, always viewable while your content is scrolling just like how the ribbon functions.  Check out the following wireframe for an example.  The first colored area represents the ribbon while the second colored area represents the s4-workspace container. The scrollbar is included on the right. Welcome folks to option #1 for ribbon placement within your design.

Pros to this approach:

  • Having a sticky header is becoming a trend – you are providing site identity, navigation and search at all times, no matter where your user is on the page.
  • It places your header above the Ribbon, which is better semantically and more in line with web usability patterns.
  • The ribbon is closer to the content and better associated with it now as an editing tool.

Cons to this approach:

  • Your header height will likely be constrained to something that isn’t too obtrusive to your users so they can still see plenty of content on the page while scrolling.
  • Your content will appear to jump down when the ribbon is toggled on as it will have to take the space between the header and the content.  This however is a common result with moving the ribbon anywhere and has minimal effect on your users.
  • Even when the ribbon is not active you will get the ribbon tab area, but this is fixable with CSS:
Ribbon tab bar showing between nav and content

The undocked ribbon and beyond

You can undock the SharePoint ribbon and it is rather easy to do. But it comes at a price that may or may not affect you based on your site content.  But before we get into that I want to cover some CSS tricks you can do with the ribbon, including fixing the stubborn ribbon tab bar that shows on your site.  Next post: Ribbon visibility using CSS