5 Powerful Steps to Maximize Office 365 & SharePoint UX

5 Simple Steps to Maximize Office 365 and SharePoint Usability

 

I am humbled to have been selected as a Microsoft Regional Director, which made me realize it’s been a little while since I’ve posted.  I intend to correct that.  I’m excited to announce a new blog series on how to drive maximum usability in Office 365 in SharePoint Online, Office 365 Groups and beyond.  In my experience at Blizzard I’ve found simply migrating our data to SharePoint Online won’t accomplish the most important updates in the past year.

 

5 Steps to Maximize Office 365 & SharePoint Usability

Classify – Both Sites and Groups support classification in Office 365.  Being able to take action such as not listing a group or site in a directory, or using a flow to approve a site based on the need to support external guests can allow one to have a much better handle on HR data vs Finance or Legal data as an example.  It can also lend itself to support putting sites in Hubs based on department, division or location.

Hubify – Hubs are a new type of site, but really they simply roll up the documents and provide search scopes.  It’s running a Windows Powershell that makes a site into a hub site.  In this post we’ll dig into the how and why with samples.

Groupify – Groups is all the buzz.  Groups gives you all storts of stuff you never asked for, but the approach does have some merits especially in relation to adoption.  Much of the new tools will never be used until people experience them.  Teams and Groups expose these new tools.  The Group OneDrive and Group Inbox and Group Calendar are fantastic as is Planner for a team.

Modernify – The Modern UI is out, but there’s no one big switch to take your classic site all the way to a Modern SharePoint Site, but you can do it in 3 pretty basic steps.

CulturifyHow are you going to handle branding and incorporating company culture? We’ll look at the best approaches available today the answer is slightly different in Modern and Classic sites.

branding office 365

5 Ways of Branding Office 365 without Modifying the Master Page

We’ve been schooled on customizing our Office 365 sites too much and I’ve seen it clarified a couple of times recently that you should avoid modifying your Master Page. So what can you do? Here are 5 ways you can build brand and look and feel without modifying the master page.

We’re going to start with position that you shouldn’t modify the master page. I know the recommendation that frustrates many, but over the last 3 years I’ve learned to appreciate this guidance in Office 365. For SharePoint on premises, I take this a very different way for Intranets, Portals, and CMS. There are a lot of resources for developers and designers at the Office 365 Patterns and Practices site on Github.com

“Use SharePoint as an out-of-box application whenever possible – We designed the new SharePoint UI to be clean, simple and fast and work great out-of-box. We encourage you not to modify it which could add complexity, performance and upgradeability and to focus your energy on working with users and groups to understand how to use SharePoint to improve productivity and collaboration and identifying and promoting best practices in your organization.”
Read more at https://blogs.office.com/2012/07/17/the-new-sharepoint/#cBPzRx44R8OIWQCi.99

Starting from 1 easiest to 5 hardest (requires dev skills)

1) Office 365 (Personal and Tenant Wide) Themes – You should start here.

Office 365 themes

Believe me when I say that the themes are a good attempt, but don’t go far enough? You can see here we are on the new Office 365 compliance center part of https://protection.office.com. Despite the fact I’ve chosen nice robot theme, the blue left nav is persistent despite the choice, and the green banner doesn’t seem to want to fit either theme. This page should be excused since it’s admin UI, but I have seen big UI/UX inconsistencies simply navigating from mail (responsive collapsible frame like mobile messaging) to SharePoint (pinch and zoom or limited mobile UI) to Delve (responsive and card based). There are a few battles for consistency. The announcement of the updated document libraries brings consistency across documents from OneDrive for Business to SharePoint 2016 to Office 365 document libraries. This is a good start.

That being said I do recommend investing in corporate Office 365 themes. This will nearly guarantee a branded experience. For some reason I still inconsistently see my custom theme being applied, but am anxious for Microsoft to address bugs preventing my corporate experience from flowing across my apps and add-ins.

Customize the Office 365 theme for your organization

https://support.office.com/en-us/article/Customize-the-Office-365-theme-for-your-organization-8275da91-7a48-4591-94ab-3123a3f79530?ui=en-US&rs=en-US&ad=US

After you’ve created your theme

  • Custom logo optionally clickable: Select the image and upload your own JPG, PNG, or GIF with a resolution of 200 x 50 pixels, no larger than 10 KB. This appears in the top navigation bar on every page.
  • Top Nav Background image: Your own JPG, PNG, or GIF, no larger than 15 KB. The background image appears in the top navigation bar on every page.
  • Prevent users from overriding theme: Option to enforce theming at the user level so that everyone in the organization sees the theme you create. The exception to this is a high contrast theme used for accessibility purposes.
  • Accent color: Select a color to use for the app launcher icon, mouse over color, and other accents.
  • Nav bar background color: Select a color to use for the background of the navigation bar. Appears at the top on every page.
  • Text and icons: Color to use for the text and icons in the top navigation bar.
  • App menu icon: Color to use for the app launcher icon

You’ll see your new theme on the Office 365 admin center right away and after a short delay, you’ll see it throughout Office 365 including Outlook and SharePoint pages. You can remove your custom icon or custom colors at any time. Just return to the theme page and choose Remove custom theming or Remove custom colors.

IMPORTANT: In addition to customizing your theme, you can add custom tiles to the My Apps page and then add them to the app launcher or add them to the navigation bar.

Office 365 Branding goes beyond SharePoint

When considering any a custom UI for SharePoint, always consider other services such as One Drive, User Profiles, and Delve. Any CSS, JS, or master-page customization applied to SharePoint as these will not automatically propagate across these other workloads. The only shared tool at this point is the top suite bar. Fortunately, this for the most part is customized by using Office 365 themes. Themes are limited, but this is where you should start. Outlook does have some personal theming, but shouldn’t need much branding anyway. For email you could use Outlook.com add-ins, and recommend company signatures for consistency.

2) Office 365 site options: SharePoint Site Look and Feel branding “Change the Look”

Another good place to start with changing the look of your site while clearly staying way within boundaries is with the Look and Feel section of site settings.

Add a site title, pick a logo, add simple base colors. I would avoid doing too much here or your site will look like it came from FrontPage 98. The out of the box theming engine of composed looks are actually quite ugly in my opinion, but the ability to customize these is in the SharePoint UI and very easy to do. Site themes and composed looks are well covered on the web. The “Change the look option” site theme has skins and additional colors. Changing the navigation is simple and this also is benign and expected. If you want to explore more of what’s available right in the SharePoint UI visit Ben’s Sharegate blog on using the Color palate tool.


3) Provisioning template in PnP Partner Pack for responsive UI for Office 365 SharePoint Online

Alternative CSS is much more lightweight, but still will require testing and maintenance. Join the Office Dev PnP community where you can share code and best practices. First, use alternative CSS instead of adding references to files on your master pages. You can test in our browser by changing the browser size, but ultimately need to test. A good practice is having a couple of tenants… one in early adopter with a handful of test users and the other in the normal adoption rate.

4) Office UI Fabric

Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language. The framework is used internally on products within Office 365—such as our suite branding, OneDrive.com, Outlook.com, Delve and the Video Portal. With Office UI Fabric you can apply simple CSS styles to make your web applications look and feel like the rest of Office. The styling takes into account typography, color, icons, animations, responsive grid layouts and localization.

Read more at https://blogs.office.com/2015/08/31/introducing-office-ui-fabric-your-key-to-designing-add-ins-for-office/#C2pQd8rUc2KRhPSp.99

GitHub Office UI Fabric

5) Use JavaScript Injection to embed custom scripts and/or third-party libraries into your sites

“You can use the Office 365 JavaScript UI controls to add an Office 365-style navigation bar to your app and also let users access data about people in Azure Active Directory (AAD). These JavaScript UI controls do not require server-side code, and can be integrated into a single-page application (SPA) with just a few lines of code.”

The Office 365 JavaScript UI controls are supported by the following web browsers:

  • Internet Explorer 10+
  • Chrome 43+
  • Firefox 39+

    Consider r
    emote provisioning pattern for ‘deploying’ components to your SharePoint sites (fields, content types, lists, pages or files)

Any Exceptions?

Did I mention changing the master page? In on premises SharePoint that’s been the practice, for Office 365 as a best practice and for long term supportability… No you should avoid it. It will break inheritance and force you to maintain it through updates. Still feel like you need to do it? There are exceptions, but with Javascript injection there are more flexible ways of changing what you need to.

Should you never ever customize the master page? I do think there are exceptions. Those that are building a CMS, publishing based Intranet are a good example of that. You can control the total look and feel of a site with the master page and publishing features.

Is that enough? Just because Microsoft says don’t customize or don’t really change the master page, won’t stop you from doing it if you want to. So, if you are making master page changes, it’s up to you to stay up to date with the ongoing product updates applied to SharePoint Online. Luckily, you can preview new changes within your tenant by going to the SharePoint Online admin center and enabling preview features. In addition you can create a dev tenant and put it on the early adopter to opt into quicker updates. This is great for a dev or test environment to first experience what may happen first so you can plan to deal with it. You can have as many site collections on either tenant to support QA and UAT. The preview features is also nice so you can slowly ease into the changes and be notified in the UI of changes and flip back if needed.

What about my sites or delve profiles? There are some options. Sonja covers the history and options of Office 365 branding of my sites.

Personally I expect the Delve background photo to be customizable in the near future. I hope to see more company branding options out of the box here as well.

Have other resources and Ideas?  Share them in the comments!

UPDATE: The new Modern Team sites and Communication sites in Office 365 are now responsive by default and the new Hub Sites have been announced to include Themes and look and feel that are inherited across the child based sites associated. This means design will be more fluid and easy to do in the future.  In addition SharePoint 2019 appears set to include much of this modern design work in Office 365.  More info to come!!

SharePoint Usage

SharePoint Community: Cease and Desist Using SharePoint Improperly

<Update>I’m pleased to say @sharepoint has informed me this was an isolated incident, and according to a post on reddit they are working to restore the Facebook page. (Thanks for listening!)

This apparently is not a big crackdown on branding guidelines in the community like I thought it was.  I still think it is important to be familiar with the branding guidelines and try to be more compliant in our usage of the terms and logos especially if you plan to make money.

I do encourage Microsoft to clarify “Community Usage” and even find a way for us to use the logo in our community materials and even a way to use the product in our domain names without having to get permission.

In an effort to help clarify the intention of this post I have edited it to temper some of the language as it was called sensational.  It is my intention to educate and inform.

Joel 12/24/2013

</update>

Have you read Good bye SharePoint Community. It was nice knowing you?  Looks like Microsoft legal hasn’t been collaborating with Microsoft PR.  Definitely not good PR, and definitely not constructive for the community.  In this case it’s a rehash of some of what they started back in the early days.  I remember talking to one of the first SharePoint MVPs… Adam.  His company use to be SharePoint Security.  They came down hard and he renamed his company.  Another of the early SharePoint MVPs who shall stay nameless…  Remember SharePoint University and SharePoint Blogs?  Even SharePoint Experts?  SharePoint is often used in names and names of small companies.  Microsoft at times has allowed some of that to happen in the community, but be warned… the whip has cracked…. no longer!

 

image

In the past there were times they’d go after the bigger guys I remember a time they came after Quest in how they were using SharePoint in the name of their products.  They even had a cease and desist to stop printing some of their stickers that had the name SharePoint on them.  I’m sure there were other companies as well that got the heads up to stop using the word SharePoint, or to simply use it properly.  It is Microsoft’s prerogative to control the use of their product names.  I think if we were to really go back in history we’d find that SharePoint wasn’t the name of the product until after 2007.  2001 was SharePoint Portal, and 2003 was Office SharePoint or Windows SharePoint, and SharePoint didn’t really exist as a brand until 2007.  There were strong usage guidelines that SharePoint was not to be used as a stand alone noun.  Ask Lawrence Liu… I think he spent days and days haggling on how he could create cool jackets for the SharePoint community.  Ooops can we call it the SharePoint Community?  Back in those days if it was to be printed it had to be called Office Community or SharePoint Portal Community or Windows SharePoint Community.  That’s even why we had to simply shorten things to MOSS. Just so we could get the branding police off our backs.  For the most part the branding police were simply watching the marketing team and larger enterprise companies making money with the use of the term SharePoint.

I know after my SharePoint blog started getting properly I got some odd looks from Microsoft people wondering if it was really ok for me to be SharePoint Joel.  For SEO purposes it was really helpful in the past.  I know it was.  Was I doing something wrong?  I wasn’t the first one to put SharePoint in front of my name in my domain name.  Having SharePoint as a key word for my blog was actually very important.  It’s become less important now that I’m doing more Office365 and Yammer, so now I’m happy to be more about Collaboration.  I’ve noticed even Christian has been using the Collaboration word more.  Such as with CollabTalk.  I’m now CollabShow.com and you could say part of that is because I’m expanding my horizons, but part of that is to avoid having either the branding police or Microsoft LCA come after me at some point saying I’m making money on their brand without paying them for the use of the word.  Have I ever made money on SharePoint.  H yeah. I’ve had a great run at it.  I have very much to thank Microsoft for much of my career, but I’ve also provided feedback every chance I get.  I think there has been at least an equal share that Microsoft has received from me for my evangelism work… No, I’m sure they’ve gotten the better end of the deal, but I’m not complaining.  I am thinking going after people in the community who are doing evangelism need to be left alone.  Really?  You’re going after SharePoint Magazine?  Is SharePoint Saturday next?

I’m shutting down all of my SharePoint Joel pages and social accounts.  They don’t comply.  It’s all CollabShow.com from here on in.

There have been many examples of people being asked to cease and desist, it’s best to get educated.

Here’s some guidelines straight from the trademark website for Office System (Yep, it’s that old.)

“Microsoft requires that its trademarks be used properly and under license, in appropriate circumstances. However, no license is required to use Microsoft names and trademarks to accurately refer to Microsoft software and services.”

“Incorrect:

  • Upload this to a sharepoint.”
“Do Not Use Microsoft Names or Trademarks as Part of Your Name

Microsoft names and trademarks may not be used as part of the name of another company or its products or services or as part of its domain name, even if your company creates add-ons or solutions for Microsoft software. This could create confusion about whether your company, products, or services are affiliated with, sponsored by, or endorsed by Microsoft. Also, do not create and use variations of any Microsoft name or trademark; this could cause confusion and diminish the ability of Microsoft names and trademarks to identify and distinguish Microsoft software and services.

Using Microsoft Names and Trademarks to Indicate Compatibility

To indicate that your software or services are designed to be used with Microsoft software, use phrases such as “for,” “created with,” or “works with” before the Microsoft name, or use “based” after the name (for example “Outlook-based”). Your company or product name must be larger and more prominent than the Microsoft name or trademark, and the Microsoft name or trademark should be visually distinguished from your name (for example, in a different font or font style). This is important to avoid any implication that your products or services are produced, endorsed, or supported by Microsoft.

Correct:

  • Widget Software hosting Webs created with Microsoft Office FrontPage
  • Company XYZ CRM Add-in for Microsoft Office Outlook
  • Company XYZ Backgrounds created for the Microsoft Office PowerPoint presentation software program
  • Widget Clipart for use with Microsoft Publisher software
  • Company XYZ templates created for Microsoft Visio diagramming software

Incorrect:

  • Wally Webster’s FrontPage Web services
  • ExcelQuick tutorial for Microsoft Excel
  • Pete’s PowerPoint Templates
  • Acme ISP Outlook e-mail
  • Visio Templates from Widget Web Services”

Wondering if you’ve been using the logo wrong for your usergroup or promotional materials for your blog?  You might be!

“Logos and Graphical Representations

Do not create any graphic or design out of any Microsoft name or trademark, and do not include Microsoft names or trademarks in any logos created by you or your company.

Web Identities

Do not include any Microsoft names or trademarks in a domain name or use them to brand your Web site.”

There are very few exceptions such as use with the certification logos and MVP logos, but be very careful around any usage of the SharePoint logo unfortunately.  Wish I could have used it for some magnets I was making for the community… Not without permission!