Your SharePoint 2013 Branding Initiation

Your SharePoint 2013
Branding Initiation
http://pxml.ly/EO-SP2013-BrandingIntro
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill

Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, SharePoint Community Organizer
 Located in Davis, CA
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
ericoverfield.com
@EricOverfield
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 Brand
SharePoint?

The Benefits of Branding
 Improve SharePoint User eXperience (UX)
 Enhance user adoption
 Further your organization brand
 Provide a cohesive strategy
 In other words, make it not look like SharePoint

Publishing Sites

Non-publishing Sites

What is Possible

SharePoint 2013
Branding Tools

No-Code / Minimal Code Solutions
 Composed Looks
 Replaces SharePoint 2010 themes
 Use SharePoint Color Palette Tool to generate custom looks
 Use OOTB Composed Looks or create your own
 Logo replacement
 Custom CSS
 Use browser developer toolbar for inspection

No-code
Demo

What to do When You Need More
 Customize Master Pages and Page Layouts
 Custom CSS and JavaScript
 Display Templates
 Device Channels

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!

Suite Bar
Ribbon
Header
Current Nav
Master Page Components
Page Wrapper

Page Layouts
 Defines content layout for a given page
 Contains “Content” blocks that link to Master Page
 May surface Content Type columns
 Associated with a Content Type
 Specific to Publishing sites
 Very powerful

Content Place Holder
Page Layout Components
Site Columns
Snippets

The New SharePoint Branding Tool
Design Manager
SharePoint Designer not required

Design Manager Overview
 New to SharePoint 2013
 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
 Some assembly required

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

Design Manager
Demo

Display Templates
Dump the XSLT
Custom Search and Results

Display Templates
 The center of displaying SharePoint 2013 Search
 Replaces XSLT with HTML and JavaScript!
 Control Templates
 Item Templates

Display Templates
Demo
Thanks to TouchTouch
http://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

Device Channels – An Example

Choose the
Right Strategy

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

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

What About SharePoint Online?
 Public Facing SPO site contains Design Manager
 Few limitations in branding
 Limited by backend customization
 You can still import prototypes and use Snippet Gallery
 Private sites can be fully customized

Resources
SharePoint 2013 Design Manager branding and design capabilities
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
SP Blueprint for SharePoint 2013
http://pxml.ly/1ql6Dqa
Starter on learning SharePoint Branding
http://pxml.ly/1CHNXKc
http://pxml.ly/1vBC3PD
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
Theming and Composed Looks Demo from SPC 2014
http://pxml.ly/2BTVW42
SharePoint Color Palette Tool
http://pxml.ly/RGZND8

Your SharePoint 2013
Branding Initiation
Eric Overfield
@EricOverfield
ericoverfield.com
http://pxml.ly/EO-SP2013-BrandingIntro
“Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
Thank You

Your SharePoint 2013 Branding Initiation

More Related Content

What's hot

Viewers also liked

Similar to Your SharePoint 2013 Branding Initiation

More from Eric Overfield

Recently uploaded

Your SharePoint 2013 Branding Initiation

Editor's Notes