The document discusses common mistakes in SharePoint branding: 1. Jumping into code too soon without understanding SharePoint patterns and structures. 2. Ignoring non-visible parts of the SharePoint platform that can impact branding work. 3. Coding branding solutions for personal preferences rather than the needs of end users.

1. SharePoint Branding
3 MOST COMMON MISTAKES
PRESENTED BY
@nicolepullin
#SPSToronto
http://brainlava.com

2. ABOUT ME
SharePoint User Experience Consultant
Crafting & implementing SharePoint Solutions for 7 years
PROJECT ROLES WORKED WITH
❖ Quality Assurance Analyst ❖ SharePoint 2003
❖ Business Analyst ❖ WSS3
❖ Client Trainer ❖ MOSS 2007
❖ Graphic Designer ❖ SharePoint 2010
❖ Interaction Designer

3. MISTAKE #1
JUMPING INTO CODE TOO SOON

4. DO I NEED PUBLISHING?

5. DO I NEED PUBLISHING?
PUBLISHING SITE TEMPLATE TEAM SITE TEMPLATE

6. DO I NEED PUBLISHING?
PUBLISHING SITE TEAM SITE

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” Feature
2 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. IDENTIFY PATTERNS

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. IDENTIFY PATTERNS
LANDING 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. IDENTIFY PATTERNS
ARTICLE PAGE ANALYSIS
❖ Second Level Left Navigation
❖ Headings
❖ Paragraphs
❖ Bulleted Lists
❖ Numbered Lists
❖ Block Quotes
❖ Page Title
❖ Blogs
❖ Wikis

12. MISTAKE #2
IGNORING THE ICEBERG

13. 3 STEP TEST

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. THE QUIRKS

16. SHAREPOINT RIBBON
MISSION
Messing with the Static Ribbon and Page Scrolling
a. Default v4.master scenario
{ {

17. SHAREPOINT RIBBON
MISSION
Messing with the Static Ribbon and Page Scrolling
b. Removing the #s4-workspace div
{ {

18. SHAREPOINT RIBBON
MISSION
No Page Scrolling!

19. SHAREPOINT RIBBON
MISSION
Messing with the Static Ribbon and Page Scrolling
c. Removing the #s4-workspace div and overriding the CSS
{ {

20. SHAREPOINT RIBBON
MISSION
It scrolls! But...

21. SHAREPOINT RIBBON
MISSION
We’ve lost our toolbar!
It scrolls! But...

22. SHAREPOINT RIBBON
MISSION
Messing with the Static Ribbon and Page Scrolling
d. 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. SHAREPOINT RIBBON
MISSION
Recommendation
Stick with the default scenario unless you have a strong use case to alter the functionality
{ {

24. !important RABBIT HOLE
MISSION
MasterPage Reference - Render AFTER corev4.css
MasterPage Reference - Render BEFORE corev4.css

25. !important RABBIT HOLE
MISSION
Page Layout Reference - Render AFTER corev4.css
Page Layout Reference - Render BEFORE corev4.css

26. MODAL WINDOW
MISSION
Style overrides in the modal window

27. MODAL WINDOW
MISSION
Style overrides in the modal window

28. QUICK WINS

29. LOGO LINK
MISSION
Changing the link to point to the root site
V4.master
nightandday.master
{ {

30. FREE THE BREADCRUMB
MISSION

31. FREE THE BREADCRUMB
MISSION
Publishing Breadcrumb
Ribbon Breadcrumb

32. DEFAULT STYLES
MISSION
Customizing the “Markup Styles”

33. MISTAKE #3
CODING FOR YOURSELF, NOT THE USER

34. LEVERAGE REUSABLE CONTENT
MISSION

35. LEVERAGE REUSABLE CONTENT
MISSION

36. LEVERAGE REUSABLE CONTENT
MISSION
Scenario 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. LEVERAGE REUSABLE CONTENT
MISSION
Scenario 2: Sidebar Snippet

38. LEVERAGE REUSABLE CONTENT
MISSION
Scenario 2: Sidebar Snippet

39. INCLUDE CONTEXTUAL HELP
MISSION

40. TRIM THE FAT
MISSION

41. TRIM THE FAT
Hide site templates, page layouts & set defaults
a. Select “Site Actions” > “Site Settings”
b. Select “Page layouts and site templates” in the Look and Feel Column
c. Activate “SharePoint Server Publishing Infrastructure” Feature

42. TRIM THE FAT
Hide site templates, page layouts & set defaults
a. Select “Site Actions” > “Site Settings”
b. Select “Page layouts and site templates” in the Look and Feel Column
c. Activate “SharePoint Server Publishing Infrastructure” Feature

43. TRIM THE FAT
Hide site templates, page layouts & set defaults
a. Select “Site Actions” > “Site Settings”
b. Select “Page layouts and site templates” in the Look and Feel Column
c. Activate “SharePoint Server Publishing Infrastructure” Feature

44. TRIM THE FAT
MISSION

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. Thank You!
FOR YOUR ATTENTION
TWITTER: @nicolepullin
WEBSITE: http://brainlava.com