Article
2 comments

Enhance suite bar for your responsive experience

Over the last year I did more branding projects on Office 365 than on on-premise. Since the first call by Microsoft to avoid modifications of the master page I played around with certain scenarios and patterns to reduce or avoid such modifications.
One common issue is that the suite bar is responsive (everything that resize is responsive) but not well optimized for mobile. Without any enhancements this part of SharePoint shows only half of the content. With some small CSS only modifications the suite bar looks great on nearly any device.
The following blog post use SASS pre-processed CSS the compiled CSS can be found too at the end of this post.

Suite bar issues – Responsive Web Design

Once the “Mobile Browser View” feature has been deactivated every device displays the same desktop version of SharePoint.
In general there are two things essential for any responsive design adoption.
The first thing is that you should never trust your desktop browser. Always test responsive design on real devices too and the second thing is to use a proper viewport setting. This tag is not only related to Apple devices, it is recognized by any modern device. Those device displays have more pixel than a desktop display.

SharePoint on Lumia device - Left: without proper viewport settings on master page

SharePoint on Lumia device – Left: without proper viewport settings on master page – Right: with correct viewport settings

Without a proper view port you will only see a tiny version of SharePoint.
Another thing to mention here is the W3C is currently working on a specification called “CSS Device Adaptation Module Level 1“. To support the view port in a well defined way. Microsoft supports this draft specification since IE 10. You can find it on MSDN under the Device Adaption in the Web Plattform API.
Once the view port have been installed the scaleing of the web site should be correctly according to the information in the CSS declarations.
The suite bar now doesn’t fit on the screen. The factors responsible for this behavior can be found on the suite bar. It contains html tables, fixed width definitions and other legacy stuff.

The left nav bar

As seen in the previous pictures the suite bar has some issues and will be partially rendered off the screen. The first thing we need to change is the “Office 365” label and the “Sites” label. Those are huge and waste a lot of space. So the first thing that needs to be done is to make them smaller. It can be resolved by simply replacing the text with the corresponding Office 365 icon out of the Office 365 icon font. (Check out “Office 365 Icon font documentation“)
The CSS/SASS to replace the Office 365 label looks like this:

// Media query for phones to a max with of 600px
@media only screen and (max-width: 600px) {

    /** Outer of Office 365 label **/
    #O365_MainLink_Logo {

        // Hide Text Label
        .o365cs-nav-brandingText {
            display: none;
        }

        // Inject Logo before the original text label
        &::before {

            // Use Office 365 icon fonts
            font-family: 'office365icons', 'o365Icons';

            // Add Office icon 
            content: '\E055';

            // Adjust font-size to match the other icons
            font-size: 22px;
            line-height: 50px;
        }

        // Finally avoid hover underline when hover icon
        &:hover {
            text-decoration: none;
        }

    }

}

To replace now the “Sites” label the same thing needs to be done again. The only difference it what you inject via the content statement. The correct icon code for the site icon is ‘\E022’. And now you see one of the reasons why I switched to SASS. In regular CSS I would copy the code and change the content. Instead of that a SASS mixin can be created that copy the code automatically. I named this “sbTexToIcon”. This is an abbreviation for “Suite Bar Text to Icon”. After cleaning up the code it looks like this.

// declaration of "Suite bar to text icon"
@mixin sbTextToIcon {
    .o365cs-nav-brandingText {
        display: none;
    }
    // Inject Logo before the original text link
    &::before {
        // Use Office 365 icon fonts
        font-family: 'office365icons', 'o365Icons';
        // add defined content here in our case the icons
        @content;
        /** Adjust font-size to match the other icons **/
        
        font-size: 22px;
        line-height: 50px;
    }
    // Finally avoid hover underline because of the link
    &:hover {
        text-decoration: none;
    }
}
// media query for all smart phone
@media only screen and (max-width: 600px) {
    
        // Changes Office 365 text to logo    
    #O365_MainLink_Logo {
        // include mixin and … 
        @include sbTextToIcon {
            // … add the correct Office 365 icon
            content: '\E055';
        }
    }
    // Change "Sites" label to logo
    .o365cs-nav-appTitle.o365cs-topnavText.o365button {
                // include mixin and …
        @include sbTextToIcon {
            // … add the correct Sites icon
            content: '\E022';
        }
    }
}

 

This fixes not the left site of the suite bar and enhance it for any phone device, suggesting that phablets, tablets and desktop computers have enough space in the suite bar.

Before and after the fix have been applied.

Before and after the fix have been applied.

The right suite bar side

The next thing is to pull the profile picture from off the screen to the right edge of the screen. Before we can do this we need to fix the center of the suite bar. Inside the center there can be found a notification tray container that has a width of 240px assigned. To reset this information we need to use “!important” after the declaration.

.o365cs-nav-header16{
     .o365cs-nav-notificationTrayContainer {
     // remove fixed width of notification tray
     min-width: 0 !important;
     width: auto !important;
   }
}

This adjustment pulls in the suite bar. It works now perfectly on the landscape view of a mobile phone but not on the portrait view.

Landscape View after width adjustments

Landscape View after width adjustments

 

Portrait view after header fix

Portrait view after header fix

The problem now is that you can pin, up to five apps to your suite bar. Those pinned apps will push the profile picture back off the screen again in portrait view.
The easiest way to hide the element is declare another media query that only will be applied in portrait view and a max screen size of 480px. Inside this media query we completely hid the so called header region.

@media only screen and (max-width: 480px) 
                   and (orientation: portrait) {
    .o365cs-nav-headerRegion {
        display: none;
    }
}

Now when a user like to access the pinned application all that needs to be done is to switch to landscape and the apps show up. Again. The last thing that needs to be done is some small adjustments to the spacing between the icons.

.o365cs-nav-header16 .o365cs-nav-o365Branding{
        padding: 0px 15px !important;
    }

After the result should look like this.

Final version with fixed suite bar

Final version with fixed suite bar

Summary

With some tweaking the suite bar has now had and perfect fit in the screen size of portrait and landscape view of most phones. Even all functions are still available to quickly navigate through Office 365.
To me portrait and landscape view definitions in media queries are the most important thing in responsive design. This is the reason why I start planing different views on the orientation first. This allows to create a unique user experience independent on how to use your device.
This solution works also without any use of JavaScript. SASS allows me to create things faster, better maintainable and structured.
The source of this adoption are based on Yeoman web app generator and can be found on GitHub.
In case you missed the previous posts explain a little bit more in detail on the following blog posts.

In order to get this work on real devices you should also check out:

  • [How to add viewport meta without editing the master page](https://n8d.at/how-to-add-viewport-meta-without-editing-the-master-page/)

Get the files:

As always if you have questions or suggestions please feel free to leave a message.

2 Comments

  1. Very helpful article!
    Any idea if we can add a custom button to a suite bar without modifying master page?

    Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.