SharePoint Insights: Ribbon & Suite Bar Customizations

When I look at our finished projects for clients, the changes are abundantly clear. It’s important to keep in mind that like a photo, the finished picture is made up of many pixels. Through this blog series, hopefully we can look at as many of those pixels as possible so that you have a clear idea of how the big picture is composed. Today’s post will look at the suite bar and ribbon “pixel” of your overall branded SharePoint picture.
In SharePoint 2013 there is the newly added suite bar above the ribbon within company portals. The suite bar contains the SharePoint logo on the left as well as the Suite links, welcome menu, site “gear” icon and other primary navigation to the right. The ribbon resides below with common page and list options on the left and share, follow, and other shortcuts on the right.

Suite Bar to the upper left and Ribbon along the bottom of the Suite Bar
Suite Bar to the upper left and Ribbon along the bottom of the Suite Bar

If you are using SharePoint Online your suite bar will look different as Microsoft continues to improve the suite bar in Office 365, but the following principles are similar for SharePoint 2013 and SharePoint Online. Since there is a steady flow of updates for SharePoint Online, here at PixelMill we have had to be formative in our development of the customizations of the suite bar and ribbon, which I will address in a moment.
We often have a request to make these two bars into one bar. Customers want this customization for a variety of reasons, one being easier usability when transferring from SharePoint 2010 to SharePoint 2013. The suite bar is a new addition to SharePoint 2013 making the menu interface more confusing for some users. Almost all UI designers will tell you maintaining a level of simplicity is key. Menu user interface needs to be simple and clear so that users can navigate with ease. Other organizations feel that the bar simply takes up too much space on the page. This leaves more real estate for the meat of your SharePoint site.
On a side note, after a recent conversation with my developers I have been made aware that there has been a lot of resistance lately with modifying the suite bar or ribbon in SharePoint Online. I am assured that using the theming engine in SharePoint Online, called Composed Looks helps alleviate the pains. We also found a few tricks which so far have saved us from many of the pitfalls others have encountered with the frequent updates Microsoft makes. Essentially we are developing defensively, anticipating that Microsoft will update and what they will update lets us develop or code in ways that will offer the path of least resistance from Microsoft’s updates.
When undertaking the development work for this customization we have found that this integration is easiest done by moving the suite bar elements into the ribbon bar (therefor creating one bar). We then hide the suite bar completely from your company portal. The reason we do it this way and not the reverse is that out of the box (OOTB) ribbon is a more dynamic tool.
There is also an abundance of other customizations we do for the ribbon and suite bars. Another common customization is the ability to hide the suite bar and ribbon completely. When hidden a small solid colored ribbon exists at the top of the screen, to show the bar you would click on this and your suite and ribbon would appear.
Solid blue line appears to toggle Suite Bar and Ribbon visibility
Solid blue line appears to toggle Suite Bar and Ribbon visibility

This has a couple of positive effects. One it gives the user the ability to control how their SharePoint work space looks. This gives the users the feeling ownership over how they use their SharePoint site. For some people they like clean spaces and lines. These people are more likely to be distracted by the menu options when working on SharePoint. These users would take advantage of their ability to hide the menu when menu items are not needed. Finally it also add a user experience more in line with other sites users use. Many sites have a hiding menu bar and users are familiar with being able to toggle menu bars visibility.
As Eric most recently covered in his blog, it is also possible to hide the suite bar and ribbon for anonymous users on your page. This is important for all public facing SharePoint sites. It is also possible to add a sign in control to anonymous users so that, if needed, the can sign in with their credentials in order to see and access the suite bar and ribbon.
If you’re interested in how we recommend you code for these changes take a look at PixelMill President and co-founders blog, eoverfield.com. Eric is currently on part 5 of a series on Ribbon and suite bar customizations. If you have any questions about why you would want to customize this part of SharePoint leave a comment below!

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Do you need to build a custom search-driven component for your #digitalworkspace while saving thousands of hours of development time?

Join us on as we lift the hood of #PnP Modern Search v4, show you how it's built, & take you on a live coding adventure.

http://ow.ly/MTnL50EpN5J

#Hybridwork is more than just a buzzword to latch onto; it’s the future for many organizations for the unforeseeable future. So, how can you use #Microsoft365 for #hybridwork? Let's breaks it down…

http://ow.ly/ay2e50EmNhg

It's that time again! Join the #PixelMillWebinars on 4/29 where @EricOverfield lifts the hood of #PnP Modern Search v4, shows how it's built, & takes you on a live coding adventure to customizing your own web part using the power of the existing codebase.

http://ow.ly/EI5h50EmNqj

What? Anchor links now work in #SharePoint site navigation! This fix snuck in and I completely missed it. Use them to create a TOC for long pages or cross link between pages. They work in text or quick links web parts & nav too! https://support.microsoft.com/en-us/office/create-and-use-modern-pages-on-a-sharepoint-site-b3d46deb-27a6-4b1e-87b8-df851e503dec#bkmk_pageanchors

A big thank you to David Leveille and @CrushNetworks for having our President + Co-Founder @EricOverfield on this episode of #TheVirtualWaterCooler!

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch