Unleashing SharePoint Branding: Strategies for Success – MNSPUG Meeting Recap

1. August 8th, 2012 SharePoint Branding: “Anything* is possible…” Kristin Grider and Steven Ray

2. Agenda • Introductions • Why, when, who, what and how to brand • Tools for branding • Break • Branding extras: responsive design (demo) and strategies for dealing with sub-brands • Q & A • Wrap-up and Giveaways

3. User Group Goal / Objectives Develop and support a local community focused on Microsoft SharePoint Technologies Educate user group members about SharePoint Technologies Transfer knowledge within the community Communicate best practices Introduce new products / solutions

4. Introductions – MNSPUG Sponsors Avtex (www.avtex.com) • Technology consulting company • Practice area focused on SharePoint Benchmark Learning (www.benchmarklearning.com) • Training on many technologies Microsoft (www.microsoft.com) WroxPress (www.wrox.com) O’Reilly (www.oreilly.com)

5. www.SharePointMN.com • Website for user group • SharePoint resource documents • SharePoint resource links • RSS Feeds • Meeting Schedule • Past User Group Presentations • sharepoint@sharepointmn.com www.sharepointmn.com

6. Social Networking • Linked In group – The most interactive… includes job postings… Post Job Posting on the Jobs Discussion page http://www.linkedin.com/groups?gid=1878792 • Twitter tags - @MNSPUG and #MNSPUG

7. Upcoming Schedule • Next Meeting Sept 5th 9:00 AM to 11:30 AM **Not our normal week! SharePoint Discussion Panel Microsoft Technology Center Check www.SharePointMN.com for updates! • Ongoing Schedule 2nd Wednesday of every month 9:00 to 11:30 am Microsoft Technical Center - Edina

8. Local and Online Events Microsoft Webcast Calendar of Events http://www.microsoft.com/events/webcasts/calendar/monthview.aspx#filter SharePoint ShopTalk (Online) – Every Thursday @ 11:30 AM http://sharepointshoptalk.blogspot.com/ SharePoint Legal Users Group – 3rd Thursday @ 12:00 to 1:00 p.m. http://sharepointmnlegal.com Minnesota Developers SharePoint Users Group – 4th Wednesday@ 8:30 to 10:30 a.m. http://mndevspug.com SharePoint Saturday Twin Cities – November 3rd, 2012 Normandale Community College, Bloomington http://sharepointsaturday.com/twincities Microsoft SharePoint Conference 2012 – November 12 – 15, 2012 Las Vegas, Nevada http://www.mssharepointconference.com/Pages/default.aspx Anything Else?

9. Surveys & Giveaways!

10. Presenters

11. Quick Intro Kristin Grider • User Experience Designer, Avtex • Pinterest DIY fanatic • kgrider@avtex.com Steven Ray • User Experience Developer, Avtex • Photographer extraordinaire • http://blog.avtex.com/author/sray • sray@avtex.com

12. SharePoint Branding: “Anything* is possible…” *almost

13. Almost any design can be implemented in SharePoint… …but it is a balancing act! • Design complexity depends on The time allowed Project budget Team’s skill set

20. Why to brand? • to enhance user and customer experience • to create user buy-in for intranets • to promote corporate identity • to unify employees

21. When to brand? • ideally before you build • best when upgrading, less duplication of effort • Mini-branding: seasonal changes in color scheme/imagery, changes in corporate agendas/campaigns These are especially effective at cultivating buy-in and participation in intranets. “You can use an eraser on the drafting table or a sledgehammer on the construction site.” --Frank Lloyd Wright

22. Who should brand? • The Dream Team: a collaborative group consisting of… Marketing User Experience IT Front-end developer

23. What to brand? • Quick and easy vs. Slow and comprehensive • Themes: good for quick color changes paints with a very broad brush difficult to customize themes additional custom css is usually required for an acceptable result

24. Tools for branding • SharePoint Designer • Firebug or IE dev toolbar • jQuery/CSS/HTML • Randy Driscoll’s v4 master http://blog.drisgill.com/2009/11/starter-master-pages-for-sharepoint.html • Heather Solomon’s 2010 CSS chart http://sharepointexperience.com/csschart/csschart.html?utm_source=spexp.me&utm_medium=urlshortener • Layered PSD of OOB 2010 https://skydrive.live.com/?cid=ed1a37150dabcd2d&id=ED1A37150DABCD2D!385

25. How to brand? • Master page vs page layouts • SharePoint HTML/CSS structure • Google Chrome • SharePoint modules • Dialog boxes • Responsive Design

26. Master Pages and Page Layouts

27. Master pages, Page layouts and pages • Master page is the overall frame that pages and page layouts fit into. • Page layouts provide structures for the unique content on each page. • Pages are the unique content (webparts) for an individual page. • Each page uses a page layout. • One page layout can be used by an infinite number of pages.

28. Master pages • The overall frame of the page • <html>, <head>, <body> • Ribbon • #s4-workspace Site master vs. System master • Fixed width vs. liquid (default)

29. Master Page: <asp: ContentPlaceholder> • PlaceHolderAdditionalPageHead • PlaceHolderSiteName • PlaceHolderPageTitleInTitleArea • PlaceHolderSearchArea • PlaceHolderTopNavBar • PlaceHolderMain

30. Master Page tip #1: Turn off master-page approval • Good idea for production, but time-consuming for development • In the “Site Actions” menu, choose “Manage Content and Structure”. • Right-click on “Master Page Gallery” in the left menu. • Select “Edit Properties” • Select “Versioning Settings” • In the first section, you can choose whether content approval applies to that library.

31. Master Page tip #2: server-relative URLs • <% $SPUrl:~SiteCollection%> • <link rel="stylesheet" type="text/css“href="<% $SPUrl:~SiteCollection/Style Library/mystyles.css %>"/> • Sometimes you need full URL: • <script type="text/javascript" src="http://yoursite.com/Style%20Library/scripts/myscript.js"></script> • Or <asp:literal> tag: • <script type="text/javascript" src=“<asp:literalrunat=‘server’ Text=‘<% $SPUrl:~SiteCollection/Style%20Library/scripts/myscript.js’ />"></script>

32. Master Page tip #3: Favicons • SharePoint makes this easy • <SharePoint:SPShortcutIconrunat="server" IconUrl="/_layouts/images/favicon.ico"/> • Just change IconUrl path to your custom icon • Test on a new browser to avoid caching issues

33. Page Layouts

34. Page Layout structure • <asp:content></asp:content> • <asp:ContentContentPlaceholderID = “PlaceHolderPageTitle” runat=“server”> Whatever content you want</asp:Content> • Can do layout-specific CSS, JS, etc. • Only place you can put Web-part Zones:

35. Page Layouts: Web-part Zones • Designates areas where users can add/edit/delete web parts • <WebPartPages:WebPartZone id="g_EC922EB9346B4F99A1A96BCB47226BD7" runat="server" title=“sidebar"></WebPartPages:WebPartZone> Page Layout Tip #1: Turn off the chrome • <WebPartPages:WebPartZone id="g_EC922EB9346B4F99A1A96BCB47226BD7" runat="server" title=“sidebar“ PartChromeType=“none”></WebPartPages:WebPartZone>

36. SharePoint HTML/CSS Structure

37. Challenge #1: No Designer access to _layout • A lot of OOTB images and CSS files are in the _layout folder • But SharePoint Designer can’t access that folder • Rely on overrides

38. Challenge #2: Anonymous HTML • A lot of SharePoint structure is anonymous HTML • Or worse, is anonymous HTML with inline styling <td class="s4-titletext"> <h1 name="onetidProjectPropertyTitle"> <a href="/departments/" id="ctl00_PlaceHolderSiteName_onetidProjectPropertyTitle">Division</a> </h1> <span class="s4-nothome s4-bcsep s4-titlesep" id="onetidPageTitleSeparator"> <span> <span style="height:11px;width:11px;position:relative;display:inline-block;"> <imgstyle="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" alt=":" src="/_layouts/images/fgimg.png"> </span> </span> </span> <h2> <a href="/departments/SitePages">Site Pages</a> </h2> </td>

39. Challenge #3: Semi-anonymous HTML • <div allowdelete="false" class="ms-WPBodynoindexms-wpContentDivSpace" width="100%" id="WebPartWPQ2" haspers="false" webpartid="0f7698ea-7db6-45ed-926c-45bd28089c9a"><p>Here's a sample web part.<br></p></div> • Classes are generic • Web-part ID is based on number that changes if web parts are added, removed or moved • Even “webpartid” property is brittle

40. HTML/CSS Tip #1: Edit the HTML • Much of the default HTML isn’t hidden inside controls, so it can be edited directly in the master page or page layout • To target a specific web part, wrap it in a div with a specific class or ID

41. A lot of very specific OOTB CSS • A lot of SharePoint’s default CSS is very specific • Some of it uses !important tags • This makes it hard to override For instance, the first item in the Quick Launch: <a href="" class="static menu-item"> <span class="menu-item-text">Libraries</span </a> Uses this style selector to differentiate it from the rest of the items in the list: .s4-ql ul.root > li > .menu-item Or how about this one: body #s4-leftpanel-content

42. HTML/CSS Tip #2: Some tools CSS Reset, by Kyle Schaeffer http://kyleschaeffer.com/sharepoint/css-reset/ CSS Frameworks like LessCSS (http://lesscss.org/) • Automatically nests CSS styles • Variables and mix-ins let you set a property in one class, then reference that class in other styles • Takes a little bit of getting used to

43. HTML/CSS Tip #3: Remove the IE metatag • <meta http-equiv=“X-UA-Compatible” content=“IE=8” /> • Tells IE browsers to act like the specified version • Good for compatability, bad for advanced features • Caveat: Some things (like People Picker) throw errors without it. If you start seeing namespace errors, restore the tag and see if that fixes it

44. Google Chrome Scrollbars

45. Google Chrome and the disappearing scrollbars • As part of positioning ribbon, SharePoint disables the browser’s scrollbars and re-creates them with JS • Works fine – except in Google Chrome Solution: Override that function and position ribbon with CSS instead: http://blog.avtex.com/2012/04/06/position-ribbon-and-disable-fake-scrollbars-in-sharepoint-2010/

46. SharePoint Modules

47. SharePoint modules • Search Center, MySite, Blog, etc. Challenges • Module-specific code and master pages • Duplicate code (MySite) • Different code styled to look the same (MySite)

48. Module solutions • Include reference to core style sheets in your module master pages, then override as necessary • We put MySites CSS in our top-level Style Library and hardcode an absolute URL to it in the master page.

49. Dialog Boxes

50. Dialog boxes: They’re really iFrames • Use same master page as the rest of the site • That means they use the same styling and structure – header, footer, etc.