Post on 12-Apr-2017
ERIC OVERFIELD | PixelMillMicrosoft MVP
BROADEN YOUR DEV SKILLSET WITH INSPIRED SHAREPOINT BRANDING
http://pxml.ly/EO-Branding-Options
ERIC OVERFIELD
President & Co-Founder of PixelMillMicrosoft MVP, Office Servers & ServicesPublished SharePoint AuthorSharePoint Community Organizer & Contributor
@ericoverfield
ericoverfield.com
PixelMill is a modern SharePoint Design Agency based in Northern California. On the forefront of web design trends since 1998, PixelMill provides innovative collaboration portals to enhance the user adoption of SharePoint intranets, extranets, and public facing sites.
PIXELMILL
@pixelmillteam
pixelmill.com
1. The Evolution of SharePoint Branding
2. Current Options for Branding SharePoint
3. Your Branding Tool Options
4. Branding Installation Methodologies
OVERVIEW
THE EVOLUTION OFSHAREPOINT BRANDING OPTIONS
Common thread: Server side rendering (SharePoint delivers near final HTML to browser)
SharePoint 2001 & 2003 FrontPage CSS* Theming*
SharePoint 2007 & 2010 SharePoint
Designer Alternative
Stylesheet Master Page &
Page Layouts JavaScript
SharePoint 2013, 2016, & Online Similar to SP
2010 Addition of
Design Manager
Curve Ball: Modern UI (SPO)
THE EVOLUTION OF SHAREPOINT BRANDING
Branding Options Evolution
Branding Deployment and Maintenance Methodologies• SharePoint 2001, SharePoint 2003
• Add / modify assets directly on servers / farms• SharePoint 2007, SharePoint 2010
• SharePoint Designer, Feature Framework, Full trust then Sandbox solutions
• SharePoint 2013, SharePoint 2016, SharePoint Online• Similar as above, including Add-in model, and recently PnP/PowerShell
THE EVOLUTION OF SHAREPOINT BRANDING
CURRENT OPTIONS FORBRANDING SHAREPOINT
OPTIONS FOR BRANDING SHAREPOINT
CLOUD / SPOON-PREM 2013 / 2016
• Alternative CSS
• Custom Actions (JavaScript Injection)
• Master Pages & Page Layouts
• Office 365 Themes
• Very limited options to customizeModern UI
BRANDING OPTIONS
• Composed Looks& Themes
DEPLOYMENT & MAINTENANCE CLOUDON-PREM 2013/16
• Full Trust Solutions
• Sandbox Solution• With code*
• Restricted Sandbox Solutions
• No full trust Solutions
OPTIONS FOR BRANDING SHAREPOINT
• SharePoint Designer
• Sandbox Solution• Declarative
• Add-In
• PnP / PowerShell
BRANDING SHAREPOINTOPTIONS IN DETAIL
Office 365 ThemesAvailable tenant-wide branding across all Office 365 services, including SharePoint.
SharePoint ThemingBasic branding w/o code or a custom master page, including colors, fonts, and background imagery.
OPTIONS FOR BRANDING SHAREPOINT
Office 365 Themes• Set in Office 365 Admin Tenant
• May be overridden by personal theme(Note. You can turn off personal theme)
• Global, yet limited branding
Pros• Extremely easy to set
• Best method to customize suite bar/ribbon
Cons• Extremely limited
• Office 365 / SharePoint Online only
OFFICE 365 THEMES
Composed Looks/Theming & Color Palette Tool • Create custom themes in minutes w/ no code
• Color palette creation tool - Free download from Microsoft
• Preview window helps determine how options will appear when applied
Pros• Works across SharePoint tenant• Future-friendly
Cons• Limited to color palette• No layout changes• Modern UI limited to:
• Background image• ContentAccent1• PageBackground• BackgroundOverlay
COMPOSED LOOKS AND THEMING
Demo
THEMING
ALTERNATIVE CSSJAVASCRIPT EMBED
Alternative CSSProvide styling w/o a custom master page
• Ability to set via browser w/ Publishing enabled• Or use the AlternateCSSUrl web object property via CSOM API• Even responsive abilities
• Note: New portal experiences are natively responsive
Pros• More sophisticated styling options than theming• Control of colors & layouts• Simple to install & maintain• No custom masterpage required, but combination available
Cons• No Modern UI support• Limited to what CSS can accomplish
ALTERNATIVE CSS
JavaScript EmbedInject custom JavaScript without a custom master page
Adds reference to custom JavaScript w/o a custom master page Use to provide client-side rendering,
utilize CSOM, REST API’s & more Add as a custom action
Pros Provides the ability for client side rendering (i.e. DOM manipulation) Combine w/ Alternative CSS to provide advanced layout changes w/o custom Master
Page Reasonable installation methods w/ PnP / Add-insCons Does require JavaScript pros No Modern UI support Custom DOM manipulation may break w/ SharePoint updates
JAVASCRIPT EMBED
SharePoint ServiceDeploy JavaScript & associate w/ JavaScript embedding (user custom action) to the site
<<Reference>>
UI/UX components / elements manipulated w/ JavaScript stored either in SharePoint or CDN
2
CSOM / REST1
RemoteDeployment
3
JAVASCRIPT EMBED PATTERN
Demo
ALTERNATIVE CSSJAVASCRIPT EMBEDDINGCUSTOM LOGO
Custom Master Pages and Page Layouts provide near complete control of UI
• Based on ASP.NET / server side rendering• i.e. .NET 2.0 Master Pages and Page layouts
Pros• Complete control over UI• Good for hard coded HTML DOM control• If you can dream it, it should be possible
Cons• Old technology, not based on client side rendering• Not overly future-friendly• May require manual update w/ SharePoint updates• No Modern UI support / not expected in any way soon or ever
CUSTOM MASTER PAGES AND PAGE LAYOUTS
Groups & Modern Team Sites• Only basic modifications available w/ Modern Team Sites & the Modern
UI• Limited to Theming / Composed Looks
• SharePoint Framework (SPFx) may provide a long-term solution• Classic Team Sites & Master Pages will be available until feature parity
• Groups may get choice between modern and classic team site template
Demo
CUSTOM MASTER PAGES
YOUR BRANDING TOOL OPTIONS
Classic Branding• SharePoint Designer• Visual Studio• Browser Dev toolbar
BRANDING TOOL OPTIONS
Modern Toolset - Use Pro ToolsFor CSS and JS modifications, including SPFx
• Modern toolchain• NodeJS• Yeoman• Gulp• TypeScript• React• VS Code• PowerShell
MAINTAININGBRANDING
Deployment Methods
Pros Cons
SharePoint DesignerBy hand
Simple Not re-deployable (difficult to repeat)
Feature FrameworkFull trust/ Sandbox, VS based SP solutions (wsp’s)
Repeatable Deployable to farm;
on-prem Automation available;
event receivers / feature stapling
Not cloud-friendly Primary benefit is on-
premises only Heavy-handed updates
Add-in Model Cloud- friendly Isolation
Clunky update method
Patterns & PracticesApplication & PowerShell based
Microsoft-preferred method
Cloud-ready No Visual Studio or
coding Repeatable; simple
updates
Incomplete automation story
DEPLOYMENT AND MAINTENANCE OPTIONS
Demo
PROVISIONING BRANDING USINGPNP POWERSHELL
BRANDING AND THE SHAREPOINT FRAMEWORK
Branding & The SharePoint Framework (SPFx)Not necessarily for branding yet. Does provide customization options for Modern UI
Common Questions:
Q: “How will my custom master pages be affected by the SharePoint Framework?”A: Since they are different technologies, you will have a path to achieve full page customization using the framework.
Q: “Is the Framework ready for prime time?”A: The framework is fully deployed to SharePoint Online and is in GA, but will continue to improve.
Q: “Can I use the Framework on-prem?”A: Not yet. The framework has been on the roadmap for SP 2016 this year but not SP 2013 at all. Q: “Where is the best place to get started with the SharePoint Framework?”A: https://github.com/sharepoint/sp-dev-fx-webparts https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview
BRANDING AND THE SHAREPOINT FRAMEWORK
Office 365 Themes
• Centrally control branding across all O365 services
• Very limited settings
• May be overridden at site level & by users Fair
$
SharePoint Themes
Control general branding, fonts & background images
Configuration applied to each site
Average
$
• Override a site’s CSS settings
• Control of color, fonts & layout
• Applied to each site
• May provide responsive UX
Alternate CSS
Good
$$
JavaScript Embed
• Inject custom JavaScript
• Manipulate DOM• Interact with SharePoint data
• Applied to each site
Good+
$$$
Custom Master Page
• Full control of site UI rendering
• Applied to each site, except for publishing sites
• Caveat: updates to OOTB master pages not automatically reflectedUnlimited
$$$$
BRANDING OPTIONS REVIEW
1. The Evolution of SharePoint Branding
2. Current Options for Branding SharePoint
3. Your Branding Tool Options
4. Branding Installation Methodologies
REVIEW
RESOURCES
RESOURCES
• Customizing "modern" team siteshttps://msdn.microsoft.com/en-us/pnp_articles/modern-experience-customizations-customize-sites
• Customize your team sitehttps://support.office.com/en-us/article/Customize-your-team-site-06bbadc3-6b04-4a60-9d14-894f6a170818
• Overview: best practices for managing how people use your team sitehttps://support.office.com/en-us/article/Overview-best-practices-for-managing-how-people-use-your-team-site-95e83c3d-e1b0-4aae-9d08-e94dcaa4942e
• Use composed looks to brand your sitehttps://msdn.microsoft.com/en-us/pnp_articles/use-composed-looks-to-brand-sharepoint-sites
• Branding SharePoint sites in the SharePoint add-in modelhttps://msdn.microsoft.com/en-us/pnp_articles/branding-sharepoint-sites-sharepoint-add-in
• Customize your SharePoint site UI by using JavaScripthttps://msdn.microsoft.com/en-us/pnp_articles/customize-your-sharepoint-site-ui-by-using-javascript
• Embedding JavaScript into SharePointhttps://msdn.microsoft.com/en-us/pnp_articles/embedding-javascript-into-sharepoint
• Patterns and Practiceshttp://dev.office.com/patterns-and-practices
• PnP Partner Pack 2https://github.com/SharePoint/PnP-Partner-Pack
RESOURCES
THANK YOU
BROADEN YOUR DEV SKILLSET WITH INSPIRED SHAREPOINT BRANDING
@ericoverfield
ericoverfield.com