The SharePoint 2010 Ribbon – Thoughts and Conclusions

24 באפריל 2010

תגיות: ,
3 תגובות

With SharePoint 2010, comes a new design concept for the site.. and with it some new design questions. The biggest one has to be – What’s with the ribbon??
I think that designers and web developers, which up until now were quite comfortable with designing master pages for SharePoint, are somewhat puzzled now with this thing in the middle of their page.

Should we ditch it? Can we? But we kind of need it, don’t we..? Is is the right place for it?
In this post I will try to provide some answers to some of these questions, and try and discuss the rational behind the look and behavior of the SharePoint Ribbon.

Forget about the ribbon for just a moment.
Every site has a banner, or a header, right? A cool picture banner or at least some kind of visual element at the top of the page that shows the name of the site, logo, and stuff. This is exactly what a SharePoint 2010 user sees when he enters the page – The “Browse” tab, that contains the site icon, name and navigation. The “Browse” tab is basically just like your good old banner or header.

A site with a banner

So we all agree about the browse tab. But what if we need some place to put some menus, buttons, and functionality elements. Where would we put them?
I would say that the top of the page is a good candidate. It’s convenient and centralized. But we already got the banner there.. wouldn’t it be too much to put both the page banner and a menu system like the ribbon on the top of the page? I think it would.

ribbon_and _bannerA site with both banner and ribbon

I say, if a user wants the ribbon, lets drop that banner, and put it the banner’s place. At this stage, the user wouldn’t be interested in the banner anyway, because he is now focused on editing rather then browsing the site.
Actually, That's exactly what’s happening when you click on one of the other tabs like “Home”. The banner goes away, and instead comes the menu with all of it’s glory. In other words, we are hiding the ribbon behind our page banner, and taking a peek at it when we need it.

The browse tab

Don’t think of the “Browse” tab as just another part of the menu, or another tab in the ribbon, because it’s not. It’s your site banner.
This perception is backed up by the implementation of the Master Page. If you take a look at the Master Page’s code, you see the ribbon apart from the Browse tab. Further more, the Browse tab is in fact part of the page’s body, where’s the ribbon is part of the page’s header.
If you wanted to hide the Ribbon, the Browse tab won’t go away, and if you scrolled the page, the browse tab scrolls with the page, where’s the ribbon doesn’t.
It now makes sense with the different roles that we gave to Browse tab and the Ribbon.

So, we are designing a page. How should we handle the ribbon?
If your design include some kind of page banner (or header), then integrate your banner into the browse tab. Here’s how to do that:

If you are working on a public facing internet site, you will probably want to hide the ribbon from regular anonymous users, but sill have it for content editors. Here are my thoughts on that:

To conclude:
The Ribbon is a new concept, and therefore introduces some new design challenges. The Browse tab provides a way to keep the ribbon, without distorting the visual flow of the page, and without taking up too much screen space.
Take some time to think about what kind of site you are working on, and who is the site’s audience, and then use the tutorials I gave to implement your needs.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

3 תגובות

  1. icon designs18 בספטמבר 2012 ב 10:30

    It was specially registered at a forum to tell to you thanks for the help in this question how I can thank you?

    P.S. Please review Icons for iPad from ewandoocom40

  2. icons18 בספטמבר 2012 ב 12:22

    I will know, I thank for the help in this question.

    P.S. Please review Folder Icon Set from designesticons