SharePoint Advocate and EnthusiastPixelMill
ERIC OVERFIELD | @ericoverfield
BRANDINGMODERNSHAREPOINT
Founder and SharePoint Branding/UI Lead, PixelMillSpeaker, Teacher, Advocate, AuthorSharePoint Community OrganizerLocated in Davis, CA
Co-author: “Black Magic Solutions for White Hat
SharePoint”
(August, 2013)
Co-author: “Pro SharePoint 2013 Branding and Responsive Web
Development” (Apress – June 12th, 2013)Order Your Copyhttp://pxml.ly/zsqykd
ericoverfield.com @ericoverfield
INTRODUCTION ERIC OVERFIELD
WHAT YOU WILL LEARN TODAY SHAREPOINT BRANDING 101
1 THAT WHAT AND WHY OF BRANDING SHAREPOINT
2 BRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016
3 BRANDING “THE FUTURE OF SHAREPOINT”
ericoverfield.com @ericoverfield
4 CHOOSING THE RIGHT STRATEGY
BRANDING?WHAT AND WHY
BRANDING IN GENERAL AND BRANDING BENEFITS
Historically the practice of burning your mark (or brand) onto your products
Improve SharePoint User eXperience (UX) Enhance user adoption
Further your organization’s brand Provide a cohesive strategy
In order words, make SharePoint not look like SharePointericoverfield.com @ericoverfie
ld
SHAREPOINTBRANDING TOOLSONLINE/2013/2016
NO CODE | MINIMAL CODE SOLUTIONS
Logo replacement Composed Looks
Replaces SharePoint 2010 themes Use OOTB Composed Looks or create your own
SharePoint Color Palette Tool Office 365 Themes
Tenant wide very basic theming Custom CSS – Alternative CSS
Available in publishing CSS and JavaScript embed with PnP PowerShell
Use PnP - SharePoint 2013/2016 Responsive UI (*SP 2013 May 2015 CU+)ericoverfield.com @ericoverfie
ld
SharePoint Service
RemoteDeployment
1
Deploy JavaScript and associate with JavaScript embedding (user custom action) to the site
<<Reference>>
UI/UX components / elements manipulated with JavaScript stored either in SharePoint or CDN
23
CSOM / REST
REMOTE DEPLOYING JAVASCRIPT EMBEDDING
DEMO
THEMEING ANDJAVASCRIPTEMBEDDING
https://github.com/eoverfield/Ignite2016-TeamSiteBranding/tree/master/Theminghttps://github.com/eoverfield/Ignite2016-TeamSiteBranding/tree/master/AlternativeCSS
WHAT TO DO WHEN YOU NEED MORE
Customize Master Pages and Page Layouts
Display Templates
Device Channels
The Future – The SharePoint Framework…
ericoverfield.com @ericoverfield
MASTER PAGES
Provides main HTML wrapper used by all pages Defines HTML <html />, <head /> and <body /> tags Loads resources such as JS and CSS files Defines page flow and shared page components
Header, footer, logo, navigation, suite bar / ribbon, etc. Uses ContentPlaceHolders for replaceable areas OOTB, no longer uses tables for layout!
ericoverfield.com @ericoverfield
MASTER PAGE COMPONENTS
ericoverfield.com @ericoverfield
Suite Bar
RibbonHeader
Current Nav
Page Wrapper
PAGE LAYOUTS
Defines content layout for a given page Contains “Content” blocks that link to Master Page Associated with a Content Type
May surface Content Type columns Specific to Publishing sites
Very powerful
ericoverfield.com @ericoverfield
PAGE LAYOUT COMPONENTS
ericoverfield.com @ericoverfield
Site Columns
Snippets
Content Place Holder
A SHAREPOINT BRANDING TOOLDESIGN MANAGER
DESIGN MANAGER OVERVIEW
New to SharePoint 2013 Available in SharePoint Online/2013/2016
Requires Publishing Infrastructure Import a HTML prototype directly into SharePoint
SharePoint handles conversion Interface for custom Master Pages and Page Layouts Also includes Display Templates and Device Channels No longer limited by SharePoint Designer
ericoverfield.com @ericoverfield
HTML MASTER PAGES
Convert a HTML prototype directly into SharePoint Some assembly required
ericoverfield.com @ericoverfield
HTML PAGE LAYOUTS
Must derive from a Master Page
Many out of the box layouts
Also uses Snippets and Snippet Manager
Only edit what is in “Content” blocks
ericoverfield.com @ericoverfield
DEMO
MASTER PAGESPAGES LAYOUTS
BRANDING OPTIONS REVIEW
Leve
l of e
ffort
Flexibility
High
Low
HighLow
Office 365 ThemingComposed Looks
Alternative CSS
JavaScript Embed
Custom master page
BRANDING OPTIONS
“Yes or no, can I create a custom master page?”
Yes - this is supported for classic sites and will be for the foreseeable future.
CUSTOMSEARCH RESULTSDISPLAY TEMPLATES
DISLPAY TEMPLATES
The center of displaying SharePoint Online/2013/2016
Search
Replaces XSLT with HTML and JavaScript!
Control Templates
Item Templates
ericoverfield.com @ericoverfield
ericoverfield.com @ericoverfield
ericoverfield.com @ericoverfield
DEMO
DISPLAYTEMPLATES
Thanks to TouchTouchhttp://tutorialzine.com/2012/04/mobile-touch-gallery/
THE FUTURE OFBRANDING SHAREPOINT
THE FUTURE OF SHAREPOINT
Microsoft Announced the SharePoint Framework in May 2016 The Framework is now in Developer Preview
Released for Webparts first Scheduled to make it to SharePoint 2016 in 2017
New client side rendering (CSR) method for site / data presentation
“Classic” Master Pages, Page Layouts not going away Review resources for links to videos and blog posts
ericoverfield.com @ericoverfield
MODERN DEVELOPMENT ENVIRONMENT
Sass / SassScript Syntactically Awesome Stylesheets Scripting language that provides a programming like language for
CSS “Replacement” for CSS though final product is CSS
NodeJS / Bower / Grunt / Gulp Compiling, Package Manager and Task Processing
CSS/HTML Grids – Bootstrap, Susy and others Yeoman or other webapp scaffolding for quick development
ericoverfield.com @ericoverfield
DEMOA PEEK INTOTHE FUTURE OFSHAREPOINT BRANDING
CHOOSE THERIGHT STRATEGY
WHAT IS BEST FOR YOU
Build a solid foundation first Line up project sponsors Get the content, structure and purpose right before branding Secure resources, talent and budget
This will help set level of effort Sitemaps, IA, wireframes, mockups Branding SharePoint Online requires additional consideration
ericoverfield.com @ericoverfield
A QUICK REVIEW
1
2
3
ericoverfield.com @ericoverfield
4
THAT WHAT AND WHY OF BRANDING SHAREPOINT
BRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016
BRANDING “THE FUTURE OF SHAREPOINT”
CHOOSING THE RIGHT STRATEGY
RESOURCES
ericoverfield.com @ericoverfield
Responsive Frameworks for SharePoint 2010 and 2013http://responsivesharepoint.codeplex.com
SharePoint 2013 Design Manager branding and design capabilitieshttp://pxml.ly/1vBC3PD
Starter on learning SharePoint Brandinghttp://pxml.ly/1CHNXKc
Master pages, the Master Page Gallery, and page layouts in SharePoint 2013http://pxml.ly/1rBdcLJ
SP Blueprint for SharePoint 2013http://pxml.ly/1ql6Dqa
SharePoint 2013 Starter Master Pages
http://pxml.ly/1uFeG8Z
Theming and Composed Looks Demo from SPC 2014http://pxml.ly/2BTVW42
RESOURCES PnP AND THE SHAREPOINT FRAMEWORK
ericoverfield.com @ericoverfield
Don’t wait to get started with the SharePoint Frameworkhttp://pxml.ly/28YywqB
Preparing for the SharePoint Frameworkhttp://pxml.ly/28ULCVm
The SharePoint Framework: The Open and Connected Platformhttp://pxml.ly/28T6BHF2
The Future of SharePoint – May 4th, 2016 Eventhttp://pxml.ly/28ZGhdy
Getting started with SharePoint Frameworkhttp://pxml.ly/28ZFvSq
SharePoint 2013/2016 Responsive UI
http://pxml.ly/38UNRqqBranding the new SPO UI with JS/CSS
http://pxml.ly/28VyYVk
BRANDING MODERNSHAREPOINT
THANK YOUQUESTIONS?
@ericoverfield
Order Your Copy http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)