branding initiation eric overfield sharepoint advocate and enthusiast pixelmill your sharepoint 2013
TRANSCRIPT
Branding Initiation
Eric OverfieldSharePoint Advocate and Enthusiast
PixelMill
Your SharePoint 2013
http://pxml.ly/EO-SP2013-BrandingIntro
Introduction – Eric Overfield
Founder and SharePoint Branding/UI Lead,
PixelMill
Speaker, Teacher, Advocate
Author, SharePoint Community Organizer
Located in Davis, CA
ericoverfield.com
@EricOverfield
Order Your Copy http://pxml.ly/zsqykd
Co-author: “Pro SharePoint 2013 Branding and
Responsive Web Development” (Apress – June
12th, 2013)
Co-author: “Black Magic
Solutions for White Hat
SharePoint” (August, 2013)
Agenda
Why Brand SharePoint
Branding Tools in SharePoint 2013
Choosing the Right Strategy
@EricOverfield - pixelmill.com
Why BrandSharePoint?
@EricOverfield - pixelmill.com
The Benefits of Branding
Improve SharePoint User eXperience (UX)
Enhance user adoption
@EricOverfield - pixelmill.com
Further your organization brand
Provide a cohesive strategy
In other words, make it not look like SharePoint
@EricOverfield - pixelmill.com
Publishing Sites
@EricOverfield - pixelmill.com
Non-publishing Sites
@EricOverfield - pixelmill.com
What is Possible
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
SharePoint 2013Branding Tools
@EricOverfield - pixelmill.com
No-Code / Minimal Code Solutions
Composed Looks
Replaces SharePoint 2010 themes
@EricOverfield - pixelmill.com
Use OOTB Composed Looks or create your own
Use SharePoint Color Palette Tool to generate custom
looks
Logo replacement
Custom CSS
Use browser developer toolbar for inspection
No-codeDemo
@EricOverfield - pixelmill.com
What to do When You Need More
Customize Master Pages and Page Layouts
@EricOverfield - pixelmill.com
Custom CSS and JavaScript
Display Templates
Device Channels
Master Pages
Provides main HTML wrapper used by all pages
@EricOverfield - pixelmill.com
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 - pixelmill.com
Suite Bar
Ribbon
Header
Current Nav
Master Page Components
Page Wrapper
Page Layouts
Defines content layout for a given page
@EricOverfield - pixelmill.com
Contains “Content” blocks that link to Master Page
Specific to Publishing sites
Very powerful
Associated with a Content Type
May surface Content Type columns
@EricOverfield - pixelmill.com
Page Layout Components
Site Columns
Snippets
Content Place Holder
Design Manager
SharePoint Designer not required
The New SharePoint Branding Tool
@EricOverfield - pixelmill.com
Design Manager Overview
New to SharePoint 2013
@EricOverfield - pixelmill.com
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
HTML Master Pages
Convert a HTML prototype directly into SharePoint
@EricOverfield - pixelmill.com
Some assembly required
HTML Page Layouts
@EricOverfield - pixelmill.com
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
Design ManagerDemo
@EricOverfield - pixelmill.com
Display Templates
Dump the XSLT
Custom Search and Results
@EricOverfield - pixelmill.com
Display Templates
The center of displaying SharePoint 2013 Search
Replaces XSLT with HTML and JavaScript!
@EricOverfield - pixelmill.com
Control Templates
Item Templates
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Display TemplatesDemo
@EricOverfield - pixelmill.com
Thanks to TouchTouchhttp://tutorialzine.com/2012/04/mobile-touch-gallery/
Device Channels
New to SharePoint 2013
Interfaces tailored and maps to specific device(s)
Custom Master Pages per Channel
Custom DeviceChannelPanels
Replaced by Responsive Web Design
@EricOverfield - pixelmill.com
Device Channels – An Example
@EricOverfield - pixelmill.com
Choose theRight Strategy
@EricOverfield - pixelmill.com
What is Best for You?
Build a solid foundation first
Line up project sponsors
Secure resources, talent and budget
Get the content right before branding
Sitemaps, IA, wireframes, mockups
@EricOverfield - pixelmill.com
What is Best for You?
Effort based on budget, requirements and talent
Composed looks are quick and easy
Custom Master Pages / Page Layouts require
developers
Developer skillset dependent on branding
requirements
Is mobile important? If so find experts in HTML,
CSS, JS
@EricOverfield - pixelmill.com
What About SharePoint Online?
Public Facing SPO site contains Design Manager
Few limitations in branding
Limited by backend customization
But Public Facing SPO end of life in ~early 2017
You can still import prototypes and use Snippet
Gallery
Private sites can be fully customized
Microsoft recommends only minimal
customizations
@EricOverfield - pixelmill.com
Resources
@EricOverfield - pixelmill.com
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
Starter on learning SharePoint Branding
http://pxml.ly/1CHNXKc
SP Blueprint for SharePoint 2013
http://pxml.ly/1ql6Dqa
Master pages, the Master Page Gallery, and page layouts in SharePoint 2013
http://pxml.ly/1rBdcLJ
Public Website help for Office 365
http://pxml.ly/1uhffnU
SharePoint 2013 Starter Master Pages
http://pxml.ly/1uFeG8Z
SharePoint 2013 Design Manager branding and design capabilities
http://pxml.ly/1vBC3PD
Theming and Composed Looks Demo from SPC 2014
http://pxml.ly/2BTVW42
SharePoint Color Palette Tool
http://pxml.ly/RGZND8
Eric Overfield@EricOverfield
ericoverfield.com Thank You
Branding Initiation
Your SharePoint 2013
Order Your Copy http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and
Responsive Web Development” (Apress –
June 12th, 2013)
http://pxml.ly/EO-SP2013-BrandingIntro