SharePoint Branding      3 MOST COMMON MISTAKES          PRESENTED BY        @nicolepullin         #SPSToronto     http://...
ABOUT MESharePoint User Experience ConsultantCrafting & implementing SharePoint Solutions for 7 yearsPROJECT ROLES        ...
MISTAKE #1JUMPING INTO CODE TOO SOON
DO I NEED PUBLISHING?
DO I NEED PUBLISHING?PUBLISHING SITE TEMPLATE                TEAM SITE TEMPLATE
DO I NEED PUBLISHING?PUBLISHING SITE                TEAM SITE
TEAM SITE + PUBLISHING?1   Root Level: Activate the “SharePoint Publishing Infrastructure” Feature    a. Select “Site Acti...
IDENTIFY PATTERNS
IDENTIFY PATTERNS                    HOME PAGE ANALYSIS                    ❖ Header Navigation                    ❖ Search...
IDENTIFY PATTERNSLANDING PAGE ANALYSIS❖ Left Navigation❖ Image Treatments❖ Document Libraries❖ List Displays❖ Summary Link...
IDENTIFY PATTERNS                    ARTICLE PAGE ANALYSIS                    ❖ Second Level Left Navigation              ...
MISTAKE #2IGNORING THE ICEBERG
3 STEP TEST
3 MISSION                                        STEP TEST     1. THE IMMEDIATE PAGE            2. CUSTOM PAGES           ...
THE QUIRKS
SHAREPOINT RIBBON                                    MISSIONMessing with the Static Ribbon and Page Scrollinga. Default v4...
SHAREPOINT RIBBON                                 MISSIONMessing with the Static Ribbon and Page Scrollingb. Removing the ...
SHAREPOINT RIBBON    MISSION                    No Page Scrolling!
SHAREPOINT RIBBON                                  MISSIONMessing with the Static Ribbon and Page Scrollingc. Removing the...
SHAREPOINT RIBBON    MISSION                    It scrolls! But...
SHAREPOINT RIBBON                              MISSIONWe’ve lost our toolbar!                                             ...
SHAREPOINT RIBBON                                       MISSIONMessing with the Static Ribbon and Page Scrollingd. Other m...
SHAREPOINT RIBBON                                 MISSIONRecommendationStick with the default scenario unless you have a s...
!important RABBIT HOLE                                      MISSIONMasterPage Reference - Render AFTER corev4.cssMasterPag...
!important RABBIT HOLE                                       MISSIONPage Layout Reference - Render AFTER corev4.cssPage La...
MODAL WINDOW                                        MISSIONStyle overrides in the modal window
MODAL WINDOW                                        MISSIONStyle overrides in the modal window
QUICK WINS
LOGO LINK                                           MISSIONChanging the link to point to the root site                    ...
FREE THE BREADCRUMB       MISSION
FREE THE BREADCRUMB       MISSION          Publishing Breadcrumb          Ribbon Breadcrumb
DEFAULT STYLES                                     MISSIONCustomizing the “Markup Styles”
MISTAKE #3CODING FOR YOURSELF, NOT THE USER
LEVERAGE REUSABLE CONTENT         MISSION
LEVERAGE REUSABLE CONTENT         MISSION
LEVERAGE REUSABLE CONTENT                                           MISSIONScenario 1: Global Copyright                   ...
LEVERAGE REUSABLE CONTENT                                       MISSIONScenario 2: Sidebar Snippet
LEVERAGE REUSABLE CONTENT                                       MISSIONScenario 2: Sidebar Snippet
INCLUDE CONTEXTUAL HELP        MISSION
TRIM THE FAT  MISSION
TRIM THE FATHide site templates, page layouts & set defaultsa. Select “Site Actions” > “Site Settings”b. Select “Page layo...
TRIM THE FATHide site templates, page layouts & set defaultsa. Select “Site Actions” > “Site Settings”b. Select “Page layo...
TRIM THE FATHide site templates, page layouts & set defaultsa. Select “Site Actions” > “Site Settings”b. Select “Page layo...
TRIM THE FAT  MISSION
SharePoint Branding        3 MOST COMMON MISTAKES    1      Jumping into code too soon    2      Ignoring the iceberg    3...
Thank You!        FOR YOUR ATTENTIONTWITTER: @nicolepullinWEBSITE: http://brainlava.com
Upcoming SlideShare
Loading in …5
×

SharePoint Branding - 3 Most Common Mistakes

2,227 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,227
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×