branding modern sharepoint - gchristopher design · branding modern sharepoint sptechcon boston...
TRANSCRIPT
SharePoint Advocate and EnthusiastPixelMill
ERIC OVERFIELD | @ericoverfield
BRANDINGMODERNSHAREPOINT
SPTechCon Boston 2016Tuesday June 28th
1:45 PM – 3:00 PM
Founder and SharePoint Branding/UI Lead, PixelMillSpeaker, Teacher, Advocate, Author
SharePoint 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 Copy
http://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 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 SharePoint
ericoverfield.com @ericoverfield
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
§ https://www.microsoft.com/en-us/download/details.aspx?id=38182
§ Custom CSS§ Use browser developer toolbar for inspection
§ JavaScript Injection§ Use PnP - SharePoint 2013/2016 Responsive UI (*SP 2013 May 2015 CU+)
ericoverfield.com @ericoverfield
WHAT TO DO WHEN YOU NEED MORE
§ Customize Master Pages and Page Layouts
§ Custom CSS and JavaScript
§ 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
Ribbon
Header
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
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
DISLPAY TEMPLATES
§ The center of displaying SharePoint Online/2013/2016 Search
§ Replaces XSLT with HTML and JavaScript!
§ Control Templates
§ Item Templates
ericoverfield.com @ericoverfield
DEVICE CHANNELS
§ New to SharePoint 2013 and available on SharePoint Online
§ Interfaces tailored and mapped to specific device(s)
§ Custom Master Pages per Channel
§ Custom DeviceChannelPanels
§ *Replaced by Responsive Web Design
ericoverfield.com @ericoverfield
THE FUTURE OF SHAREPOINT
§ Microsoft Announced the SharePoint Framework in May 2016
§ The Framework to be released to SPO in second half of 2016
§ Scheduled to make it to SharePoint 2016 in 2017
§ New client side rendering (CSR) method for site / data presentation
§ Includes a new webpart engine as well
§ “Classic” Master Pages, Page Layouts not going away
§ Review resources for links to videos and blog posts
ericoverfield.com @ericoverfield
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 Pageshttp://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 UIhttp://pxml.ly/38UNRqq
Branding the new SPO UI with JS/CSShttp://pxml.ly/28VyYVk