On July 14th, I gave a webinar on Branding Modern SharePoint for VisualSP. I enjoyed sharing my knowledge and experience on branding SharePoint. The webinar was mainly on SharePoint branding best practices, the “dos” and “don’ts” of SharePoint branding (a.k.a., what is possible and what is not feasible), and the positive effect the new SharePoint Framework will have on SharePoint branding.
The webinar turnout was outstanding! A big thanks to all of you that attended. Many of you had great questions that I did not have time to answer during the session, so below I have done my best to address each one as thoroughly as possible. However, if you feel like any of them were left unanswered, please feel free to reach out to me directly.
SharePoint Branding: Q & A
Q: How restricted is the branding for Office 365 (O365) public site collection?
A: The short answer is, it is very limited, however, you can use Master Pages and custom Page Layouts. But more importantly, the public site collections on SharePoint Online have been deprecated. You can learn more directly from Microsoft here, but here’s a quick summary – Microsoft has committed to supporting public facing SharePoint Online sites until March 9th, 2017. That isn’t to say public sites will go away right on that day, but you never know.
Q: We’re using a custom Master Page in our on-prem 2013 SharePoint environment. I was wondering what is the best way to apply the Master Page automatically when a subsite is created. Right now, we have to go into the parent site settings and reset the inheritance of the Master Page.
A: With on-prem, I suggest a full trust solution built in Visual Studio that uses an event receiver which is triggered any time after a sub web is created. The actual code is very short (only a few lines of code). Check out a few of the hyperlinks below:
SP 2010 Solution – This is a Method that works with SP 2013+.
SP 2013 Solution – This has slightly more code but is still my preferred method.
Q: What tool do you use for prototyping?
A: Currently, my team and I use inVision.
Q: Is it possible to view already built HTML pages in SharePoint?
A: While I am not exactly sure what you are asking, in general, SharePoint Designer is a great way to display the HTML in SharePoint, be it Master Pages, Page Layouts, as well as content pages. With content pages in the “Pages” library, you can detach a given page from its Page Layout in SharePoint Designer. Doing so, allows you to view all of the HTML for that given content page. If you are looking at pages in the “Site Pages” library, you can quickly open them in SharePoint Designer.
Q: Do you see on-prem still being a big player?
A: A loaded question, but I like it. Short answer, yes! For at least another three to five years, but I only try to read tea leaves that far. Too many organizations need the power, flexibility, and stability that on-prem offers. That is not to say that many will move to O365 or at least hybrid. And Microsoft seems to see this as well. SharePoint 2016 is all about hybrid, although long-term we know Microsoft wants to move us all to the cloud (that is far away though).
Q: I get the client side rendering stuff…KO…Bootstrap. What’s the speculation on how they’re getting the data to the page? For example, how do they know the number and names of the document libraries?
A: If you open the new document library UI in SPO and then look at the network traffic, you will see a bunch of requests to SharePoint’s Rest API. I believe, in general, that Microsoft is using existing Rest endpoints, as well as new endpoints that may or may not document for wider use.
I cannot say for sure how they get the numbers and names of the document libraries; most likely they created new endpoints to provide them with this data (endpoints that we can probably use ourselves, if they are documented, or if we can find them).
Q: What is the best-recommended process for branding a site that does NOT have publishing enabled?
A: Microsoft says Composed Looks. For most projects I have been involved in, I still say Master Pages with your custom CSS and JS. If you are on SPO, be aware that Modern Team Sites with O365 Groups are scheduled to be released this year, which currently do not have many branding options.
Q: In your book “Pro SharePoint 2013 Branding and Responsive Web Development”, I keep getting an error 67 when I try to map the drive. WebDev is enabled, and net use does not work. Any thoughts?
A: I am not aware of that particular error message, but most likely a firewall issue. If you are on-prem, many places go searching to find the network gap. SPO though? You will have to look at your internal network filtering.
Q: Do you have a favorite color-coded calendar solution?
A: I am sorry to say; I do not. Hopefully, someone else can provide suggestions in the comments below?
Q: What are the caveats when styling (theming) MySites?
A: I am going to assume that this is referring to SharePoint 2013 on-prem. One major caveat is that MySite content sites are unique site collections per user. You will have to package your custom branding into a feature, then allow for feature stapling in your VS solution to auto trigger the MySite branding feature any time a MySite content site is created. This way each MySite has its own copy of the custom Master Page.
So, what do you do if you want to update the branding for MySites? First, I suggest that all MySite content sites use one common location for general branding assets such as CSS, JS, and images (such as assets deployed to the _layouts folder). Next, when you update the Master Page and you re-deploy the solution, either include code in your update event receiver that will loop through each site collection and reset the Master Page, or use PowerShell to loop through each MySite content site collection and then, deactivate and reactivate the updated branding feature.
Q: Is there a way to track the traces of JS functions SharePoint calls when clicking on documents or loading a pageis there any plugin within Chrome that I can use to track the traces of JS?
A: The JS debugger in Chrome is supposed to help with this- you will be setting breakpoints, but that can be cumbersome. Unfortunately, I do not know of a particular tool to make this easier.
Q: We are in the middle of a SharePoint Online migration, and a Master Page was implemented. We had a lot of issues with the Master Page in SPO. Also, lately, Microsoft has rolled out a Library “new experience” which resets the Master Page to the default O365. As a result, the SharePoint Admin has stopped the rollup and then resets to the classic tenant to evaluate the “new experience” change. Do we use a Master Page or do we use out-of-the-box (OOTB) O365?
A: SPO is definitely in major flux right now, and branding is getting interesting again. Not to say don’t brand SPO to match your organization, but rather keep your eyes and ears open. Yes, we cannot safely brand the new SPO document library UI or new list library UI. That means if you need a consistent experience across your entire portal, you will want to shut off the new doc/list library UI across your tenant. However, did you notice how Microsoft added that ability to turn off the new UI? They are listening.
Hopefully, Microsoft will again allow us to provide custom branding on their new experiences. The new experiences appear to be built on top of the SharePoint Framework (that we learned about on May 4th). As an open platform, I hope that Microsoft will open up the SharePoint Framework. Doing so will allow users to have more control over library and list branding. However, as of now this is not available.
So, do you use a custom Master Page, or stay with OOTB? Sad to say, it depends on a few things. I still suggest considering a custom UI to help improve UX and user adoption. However, that means that if you want the new library experiences, you will have a different look for those components. If that is not okay, then you will have to stick with OOTB for now. In that case, watch for the SharePoint Framework over the next 12-18 months and then let’s see what it can do.
Q: Is Sharepoint 2013/2016 W3C and HTML5 compliant?
A: My answer is no; it is not.
Q: I tried using inject JavaScript libraries like jQuery and another one which has a dependency on jQuery. But I’m having trouble loading them in the right order. Any pointers?
A: I suggest RequireJS. Or, before you load jQuery, check to see if it has already been loaded.
Q: You briefly spoke about Page Layout and content type combinations; do you have any resources/pointers?
A:
Q: Where are the themes for SPO Search Center and how do I apply them?
A: You will want to use Composed Looks found on the site settings page – ~sitecollection/_layouts/15/settings.aspx. Composed Looks and Change the Look.
Q: Without design mode in SharePoint 2013, what are some good ways to see your page or Master Page as you create them?
A: I have to say the best way is to dev on a development site and save your Master Page and Page Layouts in SPD, then flip to a browser and refresh. I always found that the design view was never a good enough representation of how a content page will look. Thus, back in 2007, I got accustomed to always using a browser to preview my changes, and I still use this method.
Q: For composite looks in O365 – how does the automatic update in O365 affect the composite look?
A: Microsoft has said they will always respect the Composed Look styling, but then with the new Document and List Library UI’s, they did not. Before that, though, the updates were fine.
Q: Does the color palette tool make sense to use with SPO?
A: Yes, as long as you are using Composed Looks. However, we will have to wait and see what will happen when the new SharePoint Framework is released.
Q: Is O365 considered to be mobile-friendly?
A: Most of it is, but not all of it. SPO OOTB is getting better, but it still has a long way to go. Most of the other components of O365 are getting much closer to being mobile-ready the first time you use them. As of now SPO team sites and publishing sites are not responsive, but there are solutions, such as custom Master Pages.
Q: Have you run into issues designing with Power BI tools? I find that the web parts for BI are not responsive.
A: Yes, it is a problem. Unfortunately, I do not have a correct answer/solution for this yet.
Q: Is JSOM for data? It seems like it could be REALLY chatty.
A: It is supposed to be, but yes, lots of bits across the wire. I use the Rest API and limit my requests to only what I need. That seems to help some. Marc Anderson wrote an excellent blog post on this topic.
Q: Do you have a favorite code editor aside from SharePoint Designer?
A: I use Sublime Text 2 and NotePad++ (in that order).
Q: Does SharePoint color palette work for SharePoint 2010?
A: No, only SharePoint 2013+.
Q: How does a custom Master Page adapt to the new “SharePoint Framework”?
A: From what I have seen, it won’t. The SharePoint Framework will provide its own Chrome/wrapper that may or may not be customizable, but I will assume it will be. Further, I believe it will replace Master Pages. That is not to say that you won’t be able to use Master Pages moving forward, I just do not believe that Master Pages and the SharePoint Framework will go together.
Q: In foundation, is there a way to style/format the text layouts available in Wiki/web part pages?
A: Yes, you can use CSS to target the layout table and then target the particular rows and columns. When I do this, I typically use JS to help parse the Wiki layout and provide styles to the specific Wiki cells. This method makes it easier to target with CSS.
Q: What do you do with the web parts that don’t resize, such as timeline?
A: Yes, good point. However, there is no great answer. In general, I add overflow – auto to the parent container to include inline scrolling (but that is not ideal). You can also use JS to monitor the width, and when there is overflow, you can use CSS to help position the fixed width components to have it look and work better on your UI.
Q: Do you have a SharePoint 2013 style guide that lists elements? I have found several for past versions, but no one has 2013 yet. I do rely on dev tools.
A: I too rely a hundred percent on the Chrome dev toolbar. However, I do not have a style guide to suggest. It seems much easier to load a page and let the element selector do the hard work for me.
Q: What are your thoughts on FabricUI
A: I think it is a good way to build custom components that already look like they belong in SharePoint. If you are looking for that look and feel, by all means, it is a great resource.
Again, thanks to all of those that tuned-in! And don’t worry, if you didn’t have a chance to attend, you can view my session by clicking here. And of course, feel free to reach out to me if you have any additional questions you want to be answered; I am always happy to talk SharePoint.
Want to talk to me in person? Catch me at the next SPFest Seattle 2016. I will be there Wednesday and Thursday, August 17th-18th.
Speak Your Mind