Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Branding Modern SharePoint

4,489 views

Published on

Branding Modern SharePoint - 2013, 2016 and SharePoint online - Pre SharePoint Framework

Published in: Technology
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ■■■ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ➤➤ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Branding Modern SharePoint

  1. 1. SharePoint Advocate and Enthusiast PixelMill ERIC OVERFIELD | @ericoverfield BRANDING MODERN SHAREPOINT
  2. 2. Founder and SharePoint Branding/UI Lead, PixelMill Speaker, Teacher, Advocate, Author SharePoint Community Organizer Located in Davis, CA Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013) Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) Order Your Copy http://pxml.ly/zsqykd ericoverfield.com @ericoverfield INTRODUCTION ERIC OVERFIELD
  3. 3. WHAT YOU WILL LEARN TODAY SHAREPOINT BRANDING 101 1 THAT WHAT AND WHY OF BRANDING SHAREPOINT 2 BRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016 3 BRANDING “THE FUTURE OF SHAREPOINT” ericoverfield.com @ericoverfield 4 CHOOSING THE RIGHT STRATEGY
  4. 4. BRANDING? WHAT AND WHY
  5. 5. BRANDING IN GENERAL AND BRANDING BENEFITS  Historically the practice of burning your mark (or brand) onto your products  Improve SharePoint User eXperience (UX)  Enhance user adoption  Further your organization’s brand  Provide a cohesive strategy  In order words, make SharePoint not look like SharePoint ericoverfield.com @ericoverfield
  6. 6. SHAREPOINT BRANDING TOOLS ONLINE/2013/2016
  7. 7. NO CODE | MINIMAL CODE SOLUTIONS  Logo replacement  Composed Looks  Replaces SharePoint 2010 themes  Use OOTB Composed Looks or create your own  SharePoint Color Palette Tool  Office 365 Themes  Tenant wide very basic theming  Custom CSS – Alternative CSS  Available in publishing  CSS and JavaScript embed with PnP PowerShell  Use PnP - SharePoint 2013/2016 Responsive UI (*SP 2013 May 2015 CU+) ericoverfield.com @ericoverfield
  8. 8. SharePoint Service Remote Deployment 1 Deploy JavaScript and associate with JavaScript embedding (user custom action) to the site <<Reference>> UI/UX components / elements manipulated with JavaScript stored either in SharePoint or CDN 2 3 CSOM / REST REMOTE DEPLOYING JAVASCRIPT EMBEDDING
  9. 9. DEMO THEMEING AND JAVASCRIPT EMBEDDING https://github.com/eoverfield/Ignite2016-TeamSiteBranding/tree/master/Theming https://github.com/eoverfield/Ignite2016-TeamSiteBranding/tree/master/AlternativeCSS
  10. 10. WHAT TO DO WHEN YOU NEED MORE  Customize Master Pages and Page Layouts  Display Templates  Device Channels  The Future – The SharePoint Framework… ericoverfield.com @ericoverfield
  11. 11. 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! ericoverfield.com @ericoverfield
  12. 12. MASTER PAGE COMPONENTS ericoverfield.com @ericoverfield Suite Bar Ribbon Header Current Nav Page Wrapper
  13. 13. PAGE LAYOUTS  Defines content layout for a given page  Contains “Content” blocks that link to Master Page  Associated with a Content Type  May surface Content Type columns  Specific to Publishing sites  Very powerful ericoverfield.com @ericoverfield
  14. 14. PAGE LAYOUT COMPONENTS ericoverfield.com @ericoverfield Site Columns Snippets Content Place Holder
  15. 15. A SHAREPOINT BRANDING TOOL DESIGN MANAGER
  16. 16. DESIGN MANAGER OVERVIEW  New to SharePoint 2013  Available in SharePoint Online/2013/2016  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 ericoverfield.com @ericoverfield
  17. 17. HTML MASTER PAGES  Convert a HTML prototype directly into SharePoint  Some assembly required ericoverfield.com @ericoverfield
  18. 18. 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 ericoverfield.com @ericoverfield
  19. 19. DEMO MASTER PAGES PAGES LAYOUTS
  20. 20. Office 365 Theming Composed Looks Alternative CSS JavaScript Embed Custom master page BRANDING OPTIONS
  21. 21. CUSTOM SEARCH RESULTS DISPLAY TEMPLATES
  22. 22. DISLPAY TEMPLATES  The center of displaying SharePoint Online/2013/2016 Search  Replaces XSLT with HTML and JavaScript!  Control Templates  Item Templates ericoverfield.com @ericoverfield
  23. 23. ericoverfield.com @ericoverfield
  24. 24. ericoverfield.com @ericoverfield
  25. 25. DEMO DISPLAY TEMPLATES Thanks to TouchTouch http://tutorialzine.com/2012/04/mobile-touch-gallery/
  26. 26. THE FUTURE OF BRANDING SHAREPOINT
  27. 27. THE FUTURE OF SHAREPOINT  Microsoft Announced the SharePoint Framework in May 2016  The Framework is now in Developer Preview  Released for Webparts first  Scheduled to make it to SharePoint 2016 in 2017  New client side rendering (CSR) method for site / data presentation  “Classic” Master Pages, Page Layouts not going away  Review resources for links to videos and blog posts ericoverfield.com @ericoverfield
  28. 28. MODERN DEVELOPMENT ENVIRONMENT  Sass / SassScript  Syntactically Awesome Stylesheets  Scripting language that provides a programming like language for CSS  “Replacement” for CSS though final product is CSS  NodeJS / Bower / Grunt / Gulp  Compiling, Package Manager and Task Processing  CSS/HTML Grids – Bootstrap, Susy and others  Yeoman or other webapp scaffolding for quick development ericoverfield.com @ericoverfield
  29. 29. DEMO A PEEK INTO THE FUTURE OF SHAREPOINT BRANDING
  30. 30. CHOOSE THE RIGHT STRATEGY
  31. 31. WHAT IS BEST FOR YOU  Build a solid foundation first  Line up project sponsors  Get the content, structure and purpose right before branding  Secure resources, talent and budget  This will help set level of effort  Sitemaps, IA, wireframes, mockups  Branding SharePoint Online requires additional consideration ericoverfield.com @ericoverfield
  32. 32. A QUICK REVIEW 1 2 3 ericoverfield.com @ericoverfield 4 THAT WHAT AND WHY OF BRANDING SHAREPOINT BRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016 BRANDING “THE FUTURE OF SHAREPOINT” CHOOSING THE RIGHT STRATEGY
  33. 33. RESOURCES ericoverfield.com @ericoverfield Responsive Frameworks for SharePoint 2010 and 2013 http://responsivesharepoint.codeplex.com SharePoint 2013 Design Manager branding and design capabilities http://pxml.ly/1vBC3PD Starter on learning SharePoint Branding http://pxml.ly/1CHNXKc Master pages, the Master Page Gallery, and page layouts in SharePoint 2013 http://pxml.ly/1rBdcLJ SP Blueprint for SharePoint 2013 http://pxml.ly/1ql6Dqa SharePoint 2013 Starter Master Pages http://pxml.ly/1uFeG8Z Theming and Composed Looks Demo from SPC 2014 http://pxml.ly/2BTVW42
  34. 34. RESOURCES PnP AND THE SHAREPOINT FRAMEWORK ericoverfield.com @ericoverfield Don’t wait to get started with the SharePoint Framework http://pxml.ly/28YywqB Preparing for the SharePoint Framework http://pxml.ly/28ULCVm The SharePoint Framework: The Open and Connected Platform http://pxml.ly/28T6BHF2 The Future of SharePoint – May 4th, 2016 Event http://pxml.ly/28ZGhdy Getting started with SharePoint Framework http://pxml.ly/28ZFvSq SharePoint 2013/2016 Responsive UI http://pxml.ly/38UNRqq Branding the new SPO UI with JS/CSS http://pxml.ly/28VyYVk
  35. 35. BRANDING MODERN SHAREPOINT THANK YOU QUESTIONS? @ericoverfield Order Your Copy http://pxml.ly/zsqykd “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013)

×