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

2. 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 12 th, 2013) Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)

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

4. Why Brand SharePoint? @EricOverfield - pixelmill.com

5. 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

6. @EricOverfield - pixelmill.com Publishing Sites

7. @EricOverfield - pixelmill.com Non-publishing Sites

8. @EricOverfield - pixelmill.com What is Possible

9. @EricOverfield - pixelmill.com

11. SharePoint 2013 Branding Tools @EricOverfield - pixelmill.com

12. 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

13. No-code Demo @EricOverfield - pixelmill.com

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

15. Master Pages  Provides main HTML wrapper used by all pages @EricOverfield - 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!

16. @EricOverfield - pixelmill.com Suite Bar Ribbon Header Current Nav Master Page Components Page Wrapper

17. 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

18. @EricOverfield - pixelmill.com Page Layout Components Site Columns Snippets Content Place Holder

19. Design Manager SharePoint Designer not required The New SharePoint Branding Tool @EricOverfield - pixelmill.com

20. 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

21. HTML Master Pages  Convert a HTML prototype directly into SharePoint @EricOverfield - pixelmill.com  Some assembly required

22. 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

23. Design Manager Demo @EricOverfield - pixelmill.com

24. Display Templates Dump the XSLT Custom Search and Results @EricOverfield - pixelmill.com

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

26. @EricOverfield - pixelmill.com

28. Display Templates Demo @EricOverfield - pixelmill.com Thanks to TouchTouch http://tutorialzine.com/2012/04/mobile-touch-gallery/

29. 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

30. Device Channels – An Example @EricOverfield - pixelmill.com

31. Choose the Right Strategy @EricOverfield - pixelmill.com

32. 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

33. 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

34. 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

35. 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

36. 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 12 th, 2013) http://pxml.ly/EO-SP2013-BrandingIntro