Driving User Adoption with Custom Branding Development

1. Driving User Adoption with Custom Branding Development SPS Boston 2013 James Sturges

2. About Me • James Sturges • Manager of PMO & Quality at Jornata, focusing on custom application design and branding • Been with Jornata just over 3 years, worked with UI/UX design at “.com” startups before that • Based in Boston at Jornata HQ Thinking SharePoint? Think Jornata.

3. About Jornata • Founded in 2006 (~7 years of successful projects) • 20 full-time resources dedicated to SharePoint and Office 365 – and we’re hiring! • Located in downtown Boston – next to Faneuil hall • Nationally Managed Office 365 Partner • Gold Competency partner in SharePoint Thinking SharePoint? Think Jornata.

4. What is Branding? • What is branding? • Something that distinguishes your site from everyone else’s • What does branding mean to you or your organization? • Could be as simple as a logoor a whole site overhaul Thinking SharePoint? Think Jornata.

5. How can Branding help user adoption? • SharePoint is very generic • Connects target prospects emotionally • Make navigation more instinctual • Add personalized elements for social interaction • Tie in internal, corporate resources and information Thinking SharePoint? Think Jornata.

6. Thinking SharePoint? Think Jornata.

7. Planning • The first three steps of branding: planning, planning, planning • What is your goal? Business Requirements? (ex - helpdesk link on every page, shared navigation, etc) • Who is your audience? Think of the user! • Involve the business, get the right people on board • What Browsers will you be supporting? • Firefox vs. IE vs. Chrome • Test early and often… very important! Thinking SharePoint? Think Jornata.

8. What’s new with SharePoint 2013 Site Development?? Check it out here! Thinking SharePoint? Think Jornata.

9. On-Premise vs. Office 365 • Keep in mind there are some differences between SharePoint on-premise and Office 365 • Feature comparison for on-premise and 365: http://technet.microsoft.com/en-us/library/jj819267.aspx • Some development limitations also exist between the two (no “Full Control” apps in 365, etc) Thinking SharePoint? Think Jornata.

10. Tools • Developer tools for Branding • IE “F12” Developer Tools (also in Chrome, Safari) • Remember to refresh after page load! • Browser and document modes • Firebug for Firefox, Chrome Dev Tools • SharePoint Designer 2010/2013 • Visual Studio CSS syntax plugins • Web Essentials • W3Schools.com • Color Calculator Thinking SharePoint? Think Jornata.

11. Elements of Branding Elements of Branding • Master Pages – defines the functionality and content areas/layouts on the page • Page Layouts • NEW for 2013: Device Channels – define different master pages for different browsers (mobile vs. desktop), MSDN Reference • JavaScript/JQuery • CSS – “Cascading StyleSheets”; defines visual stylelike fonts, colors, sizes • Images Taken from “Overview of the SharePoint 2013 Page Model” (MSDN) Thinking SharePoint? Think Jornata.

12. Master Pages • Never modify system pages directly! Make a copy • Creates a consistent “frame” for your portal • Clean v4 – Tom Daly, B&R Solutions; basic V4.master with inline documentation and no V3 content areas • Starter Master Pages – Randy Drisgill, SharePoint 911; inline documentation comments, some issues with Treeview(updated for 2013) • Just the Essentials – Heather Solomon • Responsive HTML 5 “V5” – Kyle Schaeffer; some known issues • SharePoint 2013 Branding Feature - Codeplex • Portal pages use V4, search uses minimal.master (convert V4 for Search) Thinking SharePoint? Think Jornata.

13. Branding Delegate Controls • AdditionalPageHead • GlobalSiteLink0 • GlobalSiteLink2 • GlobalSiteLink3 • PublishingConsole • PageHeader • TopNavigationDataSource • TreeViewAndDataSource • PageFooter • QuickLaunchDataSource • SmallSearchInputBox • GlobalNavigation • SuiteBarBrandingDelegate (2013) – changes the top left bar in 2013 • SuiteLinksDelegate(2013) – replace the top right links bar with custom links • PromotedActions(2013) – customize links under top right links Most Delegate Controls only allow for one delegate to be added. To add multiple items to one control, add the AllowMultipleControls=“TRUE”. Thinking SharePoint? Think Jornata.

14. Branding Delegate Controls SuiteBarBrandingDelegate SuiteLinksDelegate PromotedActions SuiteBarBrandingDelegate (2013) – changes the top left bar in 2013 SuiteLinksDelegate(2013) – replace the top right links bar with custom links PromotedActions(2013) – customize links under top right links Thinking SharePoint? Think Jornata.

15. DEMO DevTools and Delegate Control Branding Thinking SharePoint? Think Jornata.

16. Farm Solutions • “Full trust” solutions, unrestricted access to servers • Code can change data, functionality • Must be deployed on servers by an administrator Thinking SharePoint? Think Jornata.

17. DEMO Branding with Farm Solutions Thinking SharePoint? Think Jornata.

18. Sandboxed Solutions • Self contained to a site collection (isolated) • Can be deployed by end users through the SharePoint UI • Created through SP Designer or Visual Studio • Requires Sandboxed Code Service, can be controlled by administrators MSDN Code Example Thinking SharePoint? Think Jornata.

19. DEMO Branding with Sandboxed Solutions Thinking SharePoint? Think Jornata.

20. Feature Based Development • Why it’s awesome • Easily repeatable branding across sites/webs • Automatically apply branding with feature stapling based on definitions • POWERFUL! Change theme, master pages, apply CSS, replace images, etc. • Why it’s a pain • Need to know Visual Studio • Need to recompile and redeploy to make changes (resets IIS, need maintenance windows) Thinking SharePoint? Think Jornata.

21. Appendix A: What’s New in 2010 • SharePoint Controls Thinking SharePoint? Think Jornata.

22. Thinking SharePoint? Think Jornata.

23. Appendix B: Helpful CSS Tricks • > • Example: table.MyCustomTable > tr > td {style:value;} • !important; • Add this to overwrite cascading classes, example: {font-family: Arial, sans-serif !important;} • Conditional Browser Statements • <SharePoint:CssRegistrationrunat=“server” Name=“CustomCSS.css” ConditionalExpression=“IE 7.0” /> • Conditional CSS Statements (MSDN link)<!-- [if IE 7]> .class {style:value;} <![endif]--> • Hide left side “quick launch” navigation links Thinking SharePoint? Think Jornata.

24. CSS • Special Classes (definitely 2010, some may have changed in 2013) • noindex: prevent content from being indexed • s4-notdlg: hide elements from dialog boxes • s4-notsetwidth: stops JavaScript from resizing element when using fixed width master pages • Note about the s4-workspace: be very careful about removing or modifying, may break scrolling • Heather Solomon CSS chart for SP2010 • Use dev tools to find classes (refresh after page load!) • Delegate Controls and AdditionalPageHead for if no access to Master page (VS User Control) • Hide SharePoint/ASP controls rather than remove Thinking SharePoint? Think Jornata.

25. Resources • W3 Documentation:http://www.w3.org/Style/CSS/ • W3Schools Documentation:http://www.w3schools.com/css/ Thinking SharePoint? Think Jornata.

26. Questions? • James Sturges • james@jornata.com • http://sharepoint.jsturges.com • Twitter: @jcsturges Thinking SharePoint? Think Jornata.