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 logo or 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. 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.

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:
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 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.

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 Style Sheets”; defines visual style like 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. 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.

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. Branding with Farm Solutions
DEMO
Show global nav, master pages applied, CSS, images
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. Branding with Sandboxed Solutions
DEMO
Show MS Sandboxed solution
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
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.

22. 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.

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: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.

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:
Thinking SharePoint? Think Jornata.

26. Questions? James Sturges james@jornata.com
Thinking SharePoint? Think Jornata.