SharePointlessness Rotating Header Image

Is the Future of UI Customizations for Office 365 Doomed?

With the recent TechEd Europe conference being over it has now become public that the official recommendation from Microsoft is to not use Custom Master Pages, Custom Site Templates or Sandboxed Solutions for Office 365 sites anymore.  This was announced in the session given by Vesa Juvonen and Steve Walker: Transforming Your SharePoint Full Trust Code to the SharePoint App Model

In this session they outlined many of the issues we have lamented over in the past months; the fast paced changes and feature roll outs in SharePoint Online are making it difficult for maintenance and consistency.  The changes to the Suite Bar and the new App Launcher are just one example of the frustration that many in the customization world have complained about in the past months.

With this presentation the recommendation to no longer customize SharePoint Online comes again to the forefront, and our dreams of an easy way to perform this task with the Design Manager and other tools seem to have come crashing down to reality.

Oh yes, you read that correctly. No more custom Master Pages in SharePoint Online.

But what about Design Manager, Device Channels, Composed Looks and more Customization awesomeness???

What are the common customizations that you do? Answer this brief survey to help us understand what you customize. (Thanks Randy Drisgill for the survey creation and watching)

So what exactly does this mean for not only us as User Experience Designers and Developers, but for every company that needs and wants a custom brand applied consistently to their SharePoint environment?

Because let’s be honest, one of the top requests from everyone who works with SharePoint is how do we make it look like us and not like SharePoint.  Implementing a custom look and feel for your sites is a popular item and many people are willing to invest the time and money in developing this customization. Sometimes the simple act of adding in a custom header, footer and color scheme can resonate with our end users and give them a sense of trust for the content and items in the sites.

Is the end near?? No way.  At least in my opinion. Let’s talk strategy, options and a potential solution.

First let me start by saying that it is recommended currently that you not develop and implement custom master pages, but it is not strictly forbidden.  You can in fact still develop and apply custom master pages in Office 365.  There are however several factors that you will need to consider and plan for if you choose this approach:

  1. There will be changes required frequently to your brand assets (CSS, JavaScript, Master Page) to incorporate the new features and components of Office 365. A few examples
    1. Sample Suite Bar changes seen in the past 6 months: New links, removal of existing links, height increase, user profile picture display, new CSS classes inserted via JavaScript injection, logo additions and more
    2. Changes to themes: Introduction of new tenant themeing to include the Suite Bar and link color changes; additional composed looks introduced
    3. Delve and Groups – do not use custom master pages or CSS so no branding customizations applied
  2. Much as today, things will appear and change that are outside of your control, so you should educate your users of this possibility and be prepared to make rapid changes if necessary.
  3. Branding development is moving just that direction… development, so be prepared to spend more time with JavaScript, CSS and even the app model.

What other options do we have?

Composed Looks are still a reliable option as well as Alternate CSS (although you will need the publishing infrastructure to apply it or JavaScript injection)

Another option and requesting your feedback on a proposed interim solution.  While we all hope that Microsoft will begin to offer a new method of customizing the UI of SharePoint, how do we bridge the gap of what we have now out of the box and the no custom master page announcement?

Well, I have crafted a potential solution and I’d love to hear feedback from you on it too.  I have already run this idea past quite a few people and have been encouraged that they too think this could work for the majority of our needs.

The plan:

Microsoft maintains control of a set of master pages allowing them to update as they needed but giving us some tools to work with that we can use for branding.

  1. Master Page with Bootstrap framework built in and navigation controls wrapped with responsive needs; 6 – 8 additional blank content placeholders with set IDs that we can use for JavaScript Injection to customize and add in additional components.
  2. Master Page without responsive; 6 – 8 additional blank content placeholders with set IDs that we can use for JavaScript injection to customize and add in additional components.

This gives them the ability to add and edit, but giving us something that we can target for the customizations we want to make in our sites (headers, footers, additional logos, alerts, and more).

So what do you think?  Might this work for you? You will need to use JavaScript injection to fill these placeholders and CSS to position them. But if you knew that they would exist and it allowed the control needed to continue innovation would you use it?

Leave your comments on this blog, tweet me @catpaint1 or reach out on Yammer.

And to hear more thoughts on this idea and more listen to Episode 056 of the Microsoft Cloud Show where I joined Randy Drisgill, Marc Anderson, Jasper Oosterveld and host Andrew Connell to talk about Challenges facing UX Designers in the Cloud.

15 Comments

  1. Stefan Bauer says:

    Hi Cathy,

    well written overview one the future of UI Customisation. I thought about this a while ago and brought down my own thoughts on this. You will find it in my blog post the future of SharePoint Branding: http://www.n8d.at/blog/the-future-of-sharepoint-branding/

    Over the last month I tried to get the most out of the default master pages Seattle and Oslo master page only by using css. What I found out was that in most cases CSS is enough for branding.

    Other great enhancements can nowadays done with app parts, display templates and other new toys that Microsoft gave us. I thought that this day would come it was just a matter of time.
    I also had to changed my complete workflow because I work in a perfect mix of Office 365, WSS and on-premise full feature Publishing SharePoints.

    One thing that shocked me was that they will provide a Bootstrap master page? Honestly? In this case it will lead to the same problems and support cases as they have now.

    I would be pleased if the CSS and Structure of the HTML would be that well formed as in some versions ago. I also would be pleased if the legacy css would be cleaned out and a details style guide would be available. Currently the provide application style guides for Windows and Windows phone. There is no difference to a web site.

    At last I just like to add a little remark on the alternate CSS funktionality. This is available in all versions of SharePoint and Office 365. The publishing features makes them visible but the properties can be set fully functioning with SharePoint Designer.

    Great post. Would love to hear your feedback on my comment too.

    Greetings
    /Stefan

    PS: Next stop for me is Episode 056 of the office cloud show. :D

  2. Cathy says:

    Stefan, thanks for the comments. Yes I agree that a lot can be done with CSS alone. However the addition of content placeholders that can be utilized for additional customizations is the primary reason I am creating custom master pages today. Needing to add in an area for a footer, header, additional logo or even an area for custom layout components (an example: putting content above or below Left Nav). And this is a proposed solution, not one that Microsoft has agreed to. We are trying to get feedback on it.

    The bootstrap framework will be for a limited use case scenario. i.e. Publishing content only. It is the most common request I get, to make a site responsive. And this framework does work well in SharePoint Online for Publishing pages.

    And yes, while you can set Alternate CSS for SharePoint using SharePoint Designer… wouldn’t it be great if we didn’t have to use a workaround for setting this globally?

    Hope you enjoy the pod show. :-)

  3. Hello !
    I really enjoyed reading this and I could not agree more with the comments of Stefan. I have also used AlternateCSS which can be set by JavaScript and/or with other sets of code. Also use media queries for responsive web, it may be a bit of CSS wizardry but it can be done. Custom controls such as global navigation can be injected with JavaScript. It really does not have to be a custom master page to get that unique look and feel that every company wants and have the right to.

  4. Cathy says:

    Hi Magnus, Thanks for the comment. And yes I totally agree that a ton of customizations can be done with just CSS and JavaScript injection. In face I do a lot of my responsive sites just with Media Queries myself. However, it is not the cure to all issues for customizations. Sometimes you need more and that is where the master page comes into play. Also the master page is just that, a master… so it should and can be utilized by more components of SharePoint than some other items.

    My solution is not a one size fits all, the problem we face is that in some cases a custom master page is needed, and the limitation should not be imposed upon us after many people have already been customizing SharePoint Online in the past year.

  5. PrashanthSparks says:

    Thanks for this post cathy, looking at this right we are already in restricted state compared with 2013 onprem after online version keeps evolving with this recommending clients to online will be much more tougher job, as prediction is not possible on cloud envirnoment what comes next … Custom Branding seen as always required for each business to business, this being my point of view.

  6. I personally think that a custom master page is something that we should be able to use but as Microsoft is going in that direction (they actually don’t want o365 to be branded at all) we may have to take one step back and rethink our strategy when it comes to what we can change and not. If the customer wants o365 then they have to settle for the limitations that it brings along and if they are willing to live with not having the latest updates without custom deployments we can still use custom master pages. But if we are going to use these there may be functionality loss or even errors that may appear within o365. I don’t think any customer is willing to sacrifice this.
    Me for my part think that Microsoft has really screwed us over on this as I think that the ootb SharePoint online is not good enough as it is. There is not a platform in the world that fits all company needs without some adjustments to their needs.

    I am personally looking into different kinds of solutions that can change and alter things to the better without breaking it.

    //M

  7. Drew Bills says:

    Great post! I figured the day would eventually come… Seems like they’ve been dodging this bullet for a long time.

    I would still like the option to have my own custom master pages. But if Microsoft is giving us a decent master page with content placeholders so we can actually move things, it’s a big step forward compared to what we have now and better than nothing…

    If we’re being completely honest, the master page is basically just for injecting code and helping with columns. Everyone still needs the basics (header, columns, footer etc… ) but the problem has always been you can’t easily work with the sidebar navigation because of the dependencies on other site templates. Just having a placeholders above and below the sidebar, and one above and below the main content would give you a lot of power. Page layouts are the real key for proper branding. So if MSFT really does stop the use of custom master pages, at least give us a master page with placeholders and the ability to inject code. You can do the rest with page layouts. My two cents..

    -Drew

  8. Nigel Price says:

    Hi Cathy

    Very interesting reading.

    I am developing a site for a customer using the bootstrap framework so that it will work with different devices ranging from large screens to mobile (sorry cell) phones.

    Microsoft are going hell for leather to get people onto SharePoint Online. However, what their latest recommendations are are another nail in the coffin of SharePoint Online. Customers want their sites (collaboration and whatever) to be branded according to their corporate branding style guide. They do not want vanilla SharePoint look and feel. This is one of the reasons why a lot of people will never got to SharePoint Online and will stay with SharePoint on-premises for the foreseeable. This along with the continual upgrades which frequently break corporate sites are two of the reasons why SharePoint Online will not be fore all users and corporations.

    Dont get me wrong, I have been using Microsoft products since the mid 1990’s (Windows NT 3.51) and have no intention of moving away from microsoft. But Microsoft have to realise that customers want flexibility in the look and feel of their SharePoint sites and this notion of one look and feel fits all simply will not fly.

    Regards

    Nigel

  9. These recommendations are consistent with Microsoft’s movement to their SAAS offerings. They have encouraging clients to stay out of the box on all things SharePoint since 2010. Given the frequency and impact of changes of office 365, platform level customizations will just frustrate people. This is why they want to encapsulate all customizations through the app model. Branding people will need support from developers OR acquire a new set of skills. From a pattern and practice this makes things interesting when you want to design once deploy anywhere, cloud or on premise. I’ve been advising SharePoint developers for a while now to focus on front end development with the rest APIs, JavaScript frameworks, ORMs, and related design patterns. I’m putting together a blog post about AngularJS in the recent changes with 2.0 coming up.

  10. Tim Ferro says:

    Does CSS link to HTC files work in SharePoint online?
    http://css.dzone.com/articles/executing-javascript-inside

    I am trying to use this to inject JavaScript via an additional CSS file for my site as an alternative to creating a custom master page.

  11. Kevbo says:

    Excellent article and something I have been worrying about as well. I currently use a custom master page to add a global drop down top navigation with javascript and some custom css. It looks like I will need to investigate how to inject this javascript without editing the master page. If anyone has any handy links, that would be greatly appreciated!

  12. Are nested master pages a viable option? I know they aren’t technically supported in SharePoint, but they may be a good meet in the middle approach where SharePoint Online can still maintain a level of control to provide new features and updates and the customer can still make modifications to the design to meet their needs.

    95% of branding can be handled with CSS. Frameworks are always a concern due to code bloat. For the times you need to modify the master page, having a set of ContentPlaceHolders at your disposal would work, but still puts designers in a box.

  13. tapani says:

    We really need community-based consensus on the issues like this. This is not only branding issue. Also Azure based provider hosted apps need more critical thought. Too often customers need to pay for Azure only because developer needs something akin to custom cloud based event-receivers. What a bad idea! Please keep in mind that Azure apps should never do something akin to remote provision. This bad design practice and exist only because business-oriented reasons.

    It’s kind of sad that I experienced professionals must do hacks and design design design decisions that would make them fail university IT courses.

  14. Osama Mourad says:

    Thank you for this great post, and I have a question here, why we don’t just use the design manager, it is not clear here the reason. So if you are uploading an HTML file and the MasterPage is created for you, may be the generated MasterPage will be updated or regenerated as well once Microsoft pushed an update to the SharePoint Online? This is a question and assumption that I wish it works but I don’t know where to have a confirmation that this is happening.

  15. Kris says:

    I’m coming to this conversation late, but oh well, i’ll chime in. =)

    The college I work for has gone through numerous portal technologies like Java Enterprise System, UPortal, Liferay, and very recently, SP2010 and SP2013 on premise. Though after a shift in leadership, we are unfortunately, going with PeopleSoft. (shoot me. shoot me now)

    But before the college ultimately decided to go to PeopleSoft, I sang SP2013 praises as loudly as I could. And being a multimedia artist first, then a programmer second, I made a particular mention of the flexibility that SharePoint offers in terms of branding.

    With a custom master page (with a code behind) I can literally make magic happen! Responsiveness, consistent UX when moving from one application to another; try making that happen on PeopleSoft! lol

    Our PeopleSoft implementation is in the cloud, so naturally the college adopted office365.

    My branding experience with o365 has been frustrating to say the least. Simply the one thing that matter to me as UX designer, was suddenly frowned upon; custom master pages with a code behind, a big no-no.

    Now I am aware that magic can still happen through Javascript and CSS injection, but it still seems like a hack.

    I sincerely hope that future of SharePoint will always include on-premise version.

    Take care.

Leave a Reply