1

Prepared for

Prepared byJornata63 Chatham StreetBoston, MA

Submitted on 04/22/2023

Thinking SharePoint? Think Jornata.

Driving User Adoption with Custom Branding Development

SPS Boston 2013James Sturges

2Thinking SharePoint? Think Jornata.

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

3Thinking 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

4Thinking 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

5Thinking 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

6Thinking SharePoint? Think Jornata.

7Thinking 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!

8Thinking SharePoint? Think Jornata.

SharePoint 2010 SharePoint 2013Theming 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!SharePoint Designer

• “Front End” developmentCustom code/Feature (Visual Studio 2012)

• Farm-wide or using the App model (SharePoint/Office Apps Samples, SharePoint 2013 Code Samples, Understanding “Apps”)

• Feature stapling custom master pages

Global Metadata Navigation Options

What’s new with SharePoint 2013 Site Development?? Check it out here!

9Thinking 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)

10Thinking SharePoint? Think Jornata.

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.

Elements of BrandingElements 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 stylelike fonts, colors, sizes

• Images Taken from “Overview of the SharePoint 2013 Page Model” (MSDN)

12Thinking 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)

13Thinking 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”.

14Thinking SharePoint? Think Jornata.

Branding Delegate Controls

SuiteBarBrandingDelegate (2013) – changes the top left bar in 2013SuiteLinksDelegate(2013) – replace the top right links bar with custom linksPromotedActions(2013) – customize links under top right links

SuiteBarBrandingDelegate

SuiteLinksDelegate

PromotedActions

15Thinking SharePoint? Think Jornata.

DEV TOOLS AND DELEGATE CONTROL BRANDING

DEMO

16Thinking 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

17Thinking SharePoint? Think Jornata.

BRANDING WITH FARM SOLUTIONS

DEMO

18Thinking 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

19Thinking SharePoint? Think Jornata.

BRANDING WITH SANDBOXED SOLUTIONS

DEMO

20Thinking 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)

21Thinking SharePoint? Think Jornata.

Appendix A: What’s New in 2010

• SharePoint ControlsControl DescriptionSharePoint: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

22Thinking SharePoint? Think Jornata.

Control DescriptionSharePoint: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

23Thinking 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

24Thinking 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

25Thinking SharePoint? Think Jornata.

Resources• W3 Documentation:

http://www.w3.org/Style/CSS/• W3Schools Documentation:

http://www.w3schools.com/css/

26Thinking SharePoint? Think Jornata.

Questions?• James Sturges– james@jornata.com– http://sharepoint.jsturges.com– Twitter: @jcsturges