1. Thinking SharePoint? Think Jornata.
Driving User Adoption with
Custom Branding Development
Prepared for SPS Baltimore
Prepared by James Sturges and Anastasia
Czerw
Jornata
63 Chatham Street
Boston, MA
Submitted on 5/15/2012
1

2. About Us
• James Sturges
– Manager of PMO & Quality at Jornata, focusing
on custom application design and branding
– Been with Jornata just over 2 years, worked with
UI/UX design at “.com” startups before that
– Based in Boston at Jornata HQ
• Anastasia Czerw
– Developer at Jornata, client side, server side,
you name it side
– Worked with SharePoint for a little over a year
– Moved to Baltimore in December – not as scary
as everyone said it would be!
2
Thinking SharePoint? Think Jornata.

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

4. Overview
• Planning
• Branding Elements
• Deployment Options
– Best Practices
– Farm vs. Sandboxed
• “Auto Branding”
• Demos
• Extras
4
Thinking SharePoint? Think Jornata.

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

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

7. 7
Thinking SharePoint? Think Jornata.

8. Planning
• The first step of branding is planning,
planning, planning
– What is your goal?
– 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!
8
Thinking SharePoint? Think Jornata.

9. Development
• Theming engine
– MS Theme Builder
– Using PowerPoint to build themes
• SharePoint Designer 2010
• Custom code/Feature (Visual Studio
2010)
– Farm or sandboxed (MS Sandboxed
Example, video)
– Feature stapling custom master pages
• Deploying to Style Library vs. Layouts
– Breaking site definition of files (“unghosting”)
9
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
• SharePoint Designer 2010
• Visual Studio CSS syntax plugins
– Web Essentials
• W3Schools.com
• ColorCalculator
10
Thinking SharePoint? Think Jornata.

11. Elements of Branding
• Master Pages – defines the functionality and
content areas/layouts on the page
– Page Layouts
• JavaScript/JQuery
• CSS – “Cascading Style Sheets”; defines visual
styles
• Images
Master Content Master Page
Web Page Page
Content Page
Request
11
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
– Just the Essentials – Heather Solomon
– Responsive HTML 5 “V5” – Kyle Schaeffer; some
known issues
• Portal pages use V4, search uses minimal.master
(convert V4 for Search)
12
Thinking SharePoint? Think Jornata.

13. CSS
• Special Classes
– 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 13
Thinking SharePoint? Think Jornata.

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

15. DEMO
DEV TOOLS AND DELEGATE
CONTROL BRANDING
15
Thinking SharePoint? Think Jornata.

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

17. DEMO
BRANDING WITH SANDBOXED
SOLUTIONS
17
Thinking SharePoint? Think Jornata.

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

19. DEMO
BRANDING WITH FARM
SOLUTIONS
19
Thinking SharePoint? Think Jornata.

20. Appendix A: What’s New in 2010
• New SharePoint Controls
Control Description
SharePoint:SPShortcutIcon Sets the favicon in the top left of the browser URL
bar
SharePoint:CssRegistration Tells SharePoint what to load after Corev4.css
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:SPRibbonPeripheralConten Adds various items attached to the ribbon
t
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
20
Thinking SharePoint? Think Jornata.

21. Control Description
SharePoint:DeveloperDashboardLaunch Launches the developer dashboard (hidden by
er default, but can be activated with STSADM or
PowerShell)
SharePoint:ClusteredDirectionalSepa Loads the arrow near the site icon after the page
ratorArrow title
SharePoint:AspMenu Renders navigation without tables
UseSimpleRendering=“true”
SharePoint:VisualUpgradePreviewStat Displays the Visual Upgrade status in the status bar
us
SharePoint:VersionedPlaceholder Enables the capability to target page elements to v3
UIVersion=“3” 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:WarnOnUnsupportedBrowser Displays a warning to users accessing SharePoint
s 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
21
Thinking SharePoint? Think Jornata.

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

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

24. Questions?
• James Sturges
– james@jornata.com
– http://sharepoint.jsturges.com
– @jcsturges
• Anastasia Czerw
– anastasia.czerw@jornata.com
– http://czerwsup.wordpress.com/
• http://www.jornata.com
24
Thinking SharePoint? Think Jornata.