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.

SharePoint Branding - 3 Most Common Mistakes

2,384 views

Published on

Published in: Technology, Design
  • Be the first to comment

SharePoint Branding - 3 Most Common Mistakes

  1. 1. SharePoint Branding 3 MOST COMMON MISTAKES PRESENTED BY @nicolepullin #SPSToronto http://brainlava.com
  2. 2. ABOUT MESharePoint User Experience ConsultantCrafting & implementing SharePoint Solutions for 7 yearsPROJECT ROLES WORKED WITH❖ Quality Assurance Analyst ❖ SharePoint 2003❖ Business Analyst ❖ WSS3❖ Client Trainer ❖ MOSS 2007❖ Graphic Designer ❖ SharePoint 2010❖ Interaction Designer
  3. 3. MISTAKE #1JUMPING INTO CODE TOO SOON
  4. 4. DO I NEED PUBLISHING?
  5. 5. DO I NEED PUBLISHING?PUBLISHING SITE TEMPLATE TEAM SITE TEMPLATE
  6. 6. DO I NEED PUBLISHING?PUBLISHING SITE TEAM SITE
  7. 7. TEAM SITE + PUBLISHING?1 Root Level: Activate the “SharePoint Publishing Infrastructure” Feature a. Select “Site Actions” > “Site Settings” b. Select “Site Collection Features” in the Site Collection Column c. Activate “SharePoint Server Publishing Infrastructure” Feature2 Site Level: Activate the “SharePoint Server Publishing” Feature a. Select “Site Actions” > “Site Settings” b. Select “Manage Site Features” in the Site Actions Column c. Activate “SharePoint Server Publishing” Feature
  8. 8. IDENTIFY PATTERNS
  9. 9. IDENTIFY PATTERNS HOME PAGE ANALYSIS ❖ Header Navigation ❖ Search Input ❖ Top Navigation ❖ Anchor Links ❖ Wrapper Styling ❖ Footer ❖ Web Part Header ❖ Web Part Body ❖ Column Widths ❖ Fixed? Fluid? Responsive? ❖ Hover States? ❖ Web Part Zones? ❖ Page Editing Fields?
  10. 10. IDENTIFY PATTERNSLANDING PAGE ANALYSIS❖ Left Navigation❖ Image Treatments❖ Document Libraries❖ List Displays❖ Summary Links❖ Calendars❖ Page Title❖ Page Description❖ Bread Crumb❖ Web Part Zones?❖ Page Editing Fields?❖ Columns?
  11. 11. IDENTIFY PATTERNS ARTICLE PAGE ANALYSIS ❖ Second Level Left Navigation ❖ Headings ❖ Paragraphs ❖ Bulleted Lists ❖ Numbered Lists ❖ Block Quotes ❖ Page Title ❖ Blogs ❖ Wikis
  12. 12. MISTAKE #2IGNORING THE ICEBERG
  13. 13. 3 STEP TEST
  14. 14. 3 MISSION STEP TEST 1. THE IMMEDIATE PAGE 2. CUSTOM PAGES 3. OOTB PAGES❖ Regression test in all ❖ Styling consistencies ❖ Full list & library views supported browsers ❖ Custom components ❖ Site Settings❖ Editing view ❖ Search for new emerging ❖ Dialog pop up❖ Adding & removing web parts patterns ❖ Calendar View❖ Test drop downs ❖ Combine common patterns to ❖ Blog reduce bloated code ❖ Wiki ❖ Search
  15. 15. THE QUIRKS
  16. 16. SHAREPOINT RIBBON MISSIONMessing with the Static Ribbon and Page Scrollinga. Default v4.master scenario{ {
  17. 17. SHAREPOINT RIBBON MISSIONMessing with the Static Ribbon and Page Scrollingb. Removing the #s4-workspace div{ {
  18. 18. SHAREPOINT RIBBON MISSION No Page Scrolling!
  19. 19. SHAREPOINT RIBBON MISSIONMessing with the Static Ribbon and Page Scrollingc. Removing the #s4-workspace div and overriding the CSS{ {
  20. 20. SHAREPOINT RIBBON MISSION It scrolls! But...
  21. 21. SHAREPOINT RIBBON MISSIONWe’ve lost our toolbar! It scrolls! But...
  22. 22. SHAREPOINT RIBBON MISSIONMessing with the Static Ribbon and Page Scrollingd. Other methods❖ Kyle Schaeffer’s CSS & JavaScript Ribbon solution http://kyleschaeffer.com/sharepoint/sharepoint-2010-scrolling/❖ My public facing ribbon solution http://brainlava.com/fix-for-sharepoint-2010-scrolling-for-chrome-ios4-android/
  23. 23. SHAREPOINT RIBBON MISSIONRecommendationStick with the default scenario unless you have a strong use case to alter the functionality{ {
  24. 24. !important RABBIT HOLE MISSIONMasterPage Reference - Render AFTER corev4.cssMasterPage Reference - Render BEFORE corev4.css
  25. 25. !important RABBIT HOLE MISSIONPage Layout Reference - Render AFTER corev4.cssPage Layout Reference - Render BEFORE corev4.css
  26. 26. MODAL WINDOW MISSIONStyle overrides in the modal window
  27. 27. MODAL WINDOW MISSIONStyle overrides in the modal window
  28. 28. QUICK WINS
  29. 29. LOGO LINK MISSIONChanging the link to point to the root site V4.master nightandday.master{ {
  30. 30. FREE THE BREADCRUMB MISSION
  31. 31. FREE THE BREADCRUMB MISSION Publishing Breadcrumb Ribbon Breadcrumb
  32. 32. DEFAULT STYLES MISSIONCustomizing the “Markup Styles”
  33. 33. MISTAKE #3CODING FOR YOURSELF, NOT THE USER
  34. 34. LEVERAGE REUSABLE CONTENT MISSION
  35. 35. LEVERAGE REUSABLE CONTENT MISSION
  36. 36. LEVERAGE REUSABLE CONTENT MISSIONScenario 1: Global Copyright 2011 Brain Lava, all rights reserved.1 Visit SharePoint Element & grab the code to add the “Copyright” item from the 2 Reusable Content list to the MasterPage http://www.sharepointelement.com/2012/01/27/ adding-reusable-content-within-master-pages//
  37. 37. LEVERAGE REUSABLE CONTENT MISSIONScenario 2: Sidebar Snippet
  38. 38. LEVERAGE REUSABLE CONTENT MISSIONScenario 2: Sidebar Snippet
  39. 39. INCLUDE CONTEXTUAL HELP MISSION
  40. 40. TRIM THE FAT MISSION
  41. 41. TRIM THE FATHide site templates, page layouts & set defaultsa. Select “Site Actions” > “Site Settings”b. Select “Page layouts and site templates” in the Look and Feel Columnc. Activate “SharePoint Server Publishing Infrastructure” Feature
  42. 42. TRIM THE FATHide site templates, page layouts & set defaultsa. Select “Site Actions” > “Site Settings”b. Select “Page layouts and site templates” in the Look and Feel Columnc. Activate “SharePoint Server Publishing Infrastructure” Feature
  43. 43. TRIM THE FATHide site templates, page layouts & set defaultsa. Select “Site Actions” > “Site Settings”b. Select “Page layouts and site templates” in the Look and Feel Columnc. Activate “SharePoint Server Publishing Infrastructure” Feature
  44. 44. TRIM THE FAT MISSION
  45. 45. SharePoint Branding 3 MOST COMMON MISTAKES 1 Jumping into code too soon 2 Ignoring the iceberg 3 Coding for yourself, not the user
  46. 46. Thank You! FOR YOUR ATTENTIONTWITTER: @nicolepullinWEBSITE: http://brainlava.com

×