Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint

Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA Order Your Copy Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12 th, 2013) Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)

Agenda  Why Brand SharePoint  Branding Tools in SharePoint 2013  Choosing the Right - pixelmill.com

Why Brand - pixelmill.com

The Benefits of Branding  Improve SharePoint User eXperience (UX)  Enhance user - 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

SharePoint 2013 Branding - pixelmill.com

No-Code / Minimal Code Solutions  Composed Looks  Replaces SharePoint 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-code - pixelmill.com

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

Master Pages  Provides main HTML wrapper used by all - pixelmill.com  Defines HTML, and 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 - 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 - pixelmill.com

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

HTML Page - 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 Manager - pixelmill.com

Display Templates Dump the XSLT Custom Search and - pixelmill.com

Display Templates  The center of displaying SharePoint 2013 Search  Replaces XSLT with HTML and - pixelmill.com  Control Templates  Item Templates

@EricOverfield - pixelmill.com

Display Templates - pixelmill.com Thanks to TouchTouch

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 - pixelmill.com

Device Channels – An - pixelmill.com

Choose the Right - 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, - 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, - 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 - pixelmill.com

- pixelmill.com Responsive Frameworks for SharePoint 2010 and Starter on learning SharePoint Branding SP Blueprint for SharePoint Master pages, the Master Page Gallery, and page layouts in SharePoint Public Website help for Office SharePoint 2013 Starter Master Pages SharePoint 2013 Design Manager branding and design capabilities Theming and Composed Looks Demo from SPC SharePoint Color Palette Tool

Eric ericoverfield.com Thank You Branding Initiation Your SharePoint 2013 Order Your Copy “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12 th, 2013)