Presentation is loading. Please wait.

Presentation is loading. Please wait.

Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013

Similar presentations


Presentation on theme: "Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013"— Presentation transcript:

1 Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013

2 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)

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

4 Why Brand - pixelmill.com

5 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

6 @EricOverfield - pixelmill.com Publishing Sites

7 @EricOverfield - pixelmill.com Non-publishing Sites

8 @EricOverfield - pixelmill.com What is Possible

9 @EricOverfield - pixelmill.com

10

11 SharePoint 2013 Branding - pixelmill.com

12 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

13 No-code - pixelmill.com

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

15 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!

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

17 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

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

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

20 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

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

22 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

23 Design Manager - pixelmill.com

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

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

26 @EricOverfield - pixelmill.com

27

28 Display Templates - pixelmill.com Thanks to TouchTouch

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

30 Device Channels – An - pixelmill.com

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

35 - 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 365 SharePoint 2013 Starter Master Pages SharePoint 2013 Design Manager branding and design capabilities Theming and Composed Looks Demo from SPC SharePoint Color Palette Tool

36 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)


Download ppt "Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013"

Similar presentations


Ads by Google