Embed Size (px)
DESCRIPTION
Citation preview
1
Prepared for
Prepared byJornata63 Chatham StreetBoston, MA
Submitted on 04/09/2023
Thinking SharePoint? Think Jornata.
Driving User Adoption with Custom Branding Development
SPS Baltimore
James Sturges and Anastasia Czerw
2Thinking SharePoint? Think Jornata.
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!
3Thinking SharePoint? Think Jornata.
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
4Thinking SharePoint? Think Jornata.
Overview• Planning• Branding Elements• Deployment Options– Best Practices– Farm vs. Sandboxed
• “Auto Branding”• Demos• Extras
5Thinking 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 overthrow
6Thinking 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
7Thinking SharePoint? Think Jornata.
8Thinking SharePoint? Think Jornata.
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!
9Thinking SharePoint? Think Jornata.
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”)
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
• SharePoint Designer 2010• Visual Studio CSS syntax plugins– Web Essentials
• W3Schools.com• ColorCalculator
Thinking SharePoint? Think Jornata.
Elements of BrandingElements 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
11
Web Request
Content Page
Master Page
Master Page
Content Page
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
– 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)
13Thinking SharePoint? Think Jornata.
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
14Thinking 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
15Thinking SharePoint? Think Jornata.
DEV TOOLS AND DELEGATE CONTROL BRANDING
DEMO
16Thinking 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
17Thinking SharePoint? Think Jornata.
BRANDING WITH SANDBOXED SOLUTIONS
DEMO
18Thinking 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)
19Thinking SharePoint? Think Jornata.
BRANDING WITH FARM SOLUTIONS
DEMO
20Thinking SharePoint? Think Jornata.
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 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
21Thinking SharePoint? Think Jornata.
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
22Thinking 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
23Thinking SharePoint? Think Jornata.
Resources• W3 Documentation:
http://www.w3.org/Style/CSS/• W3Schools Documentation:
http://www.w3schools.com/css/
24Thinking SharePoint? Think Jornata.
Questions?• James Sturges– [email protected]– http://sharepoint.jsturges.com–@jcsturges
• Anastasia Czerw– [email protected]– http://czerwsup.wordpress.com/
• http://www.jornata.com
