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

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.

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.

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 logo or a whole site overhaul Thinking SharePoint? Think Jornata.

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.

Thinking SharePoint? Think Jornata.

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.

Using PowerPoint to build themes SharePoint Designer Theming engine MS Theme Builder Using PowerPoint to build themes SharePoint Designer “Front End” development Custom code/Feature (Visual Studio 2010) Farm or sandboxed (MS Sandboxed Example, video); Sandboxed solutions deprecated in 2013! Feature stapling custom master pages Deploying to Style Library vs. Layouts Breaking site definition of files (“unghosting”) – don’t do it! Make copies Composed Looks Advanced background images, fonts, colors, etc. ThemeBuilder App Design Manager Create Master Pages from HTML! Create Design Packages; reusable designs without Visual Studio! Custom code/Feature (Visual Studio 2012) Farm-wide or using the App model (SharePoint/Office Apps Samples, SharePoint 2013 Code Samples, Understanding “Apps”) Global Metadata Navigation Options What’s new with SharePoint 2013 Site Development?? Check it out here! Thinking SharePoint? Think Jornata.

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.

Tools Developer tools for Branding SharePoint Designer 2010/2013 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.

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 Style Sheets”; defines visual style like fonts, colors, sizes Images Taken from “Overview of the SharePoint 2013 Page Model” (MSDN) Thinking SharePoint? Think Jornata.

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.

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.

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.

Dev Tools and Delegate Control Branding DEMO Show delegate control CSS with additional page head only, show synchronous application of feature Dev Tools and Delegate Control Branding Thinking SharePoint? Think Jornata.

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.

Branding with Farm Solutions DEMO Show global nav, master pages applied, CSS, images Branding with Farm Solutions Thinking SharePoint? Think Jornata.

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.

Branding with Sandboxed Solutions DEMO Show MS Sandboxed solution Branding with Sandboxed Solutions Thinking SharePoint? Think Jornata.

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.

Appendix A: What’s New in 2010 SharePoint Controls Control Description SharePoint:SPShortcutIcon Sets the favicon in the top left of the browser URL bar SharePoint:CssRegistration After=“corev4.css” Tells SharePoint what to load after Corev4.css SharePoint:SPRibbon Adds the Fluent UI (the ribbon) to the page SharePoint:PopoutMenu Adds the breadcrumb that shows the pop-out displaying your current location in the site when clicked (hierarchal tree structure) SharePoint:SPRibbonPeripheralContent Adds various items attached to the ribbon SharePoint:PageStateActionButton Loads the page edit and save icon button near the top left of the page SharePoint:LanguageSpecificContent Displays content specific to the selected language Thinking SharePoint? Think Jornata.

SharePoint:DeveloperDashboardLauncher Control Description SharePoint:DeveloperDashboardLauncher Launches the developer dashboard (hidden by default, but can be activated with STSADM or PowerShell) SharePoint:ClusteredDirectionalSeparatorArrow Loads the arrow near the site icon after the page title SharePoint:AspMenu UseSimpleRendering=“true” Renders navigation without tables SharePoint:VisualUpgradePreviewStatus Displays the Visual Upgrade status in the status bar SharePoint:VersionedPlaceholder UIVersion=“3” Enables the capability to target page elements to v3 or v4 capabilities SharePoint:ClusteredSPLinkButton How SharePoint makes use of CSS sprites SharePoint:DeveloperDashboard Loads the actual developer dashboard at the bottom of the master page; hidden until the launcher is clicked SharePoint:WarnOnUnsupportedBrowsers Displays a warning to users accessing SharePoint with unsupported browsers such as IE 6 Wssuc:MUISelector Sets the MUI language selected that shows up in the welcome menu if language packs are installed SPSWC:MySiteCssRegistration Allows the use of specific CSS Thinking SharePoint? Think Jornata.

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:CssRegistration runat=“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.

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.

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

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