240 likes | 413 Views
Driving User Adoption with Custom Branding Development. SPS Baltimore. James Sturges and Anastasia Czerw. About Us. James Sturges Manager of PMO & Quality at Jornata, focusing on custom application design and branding
E N D
Driving User Adoption with Custom Branding Development SPS Baltimore James Sturges and Anastasia Czerw
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! Thinking 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 Thinking SharePoint? Think Jornata.
Overview • Planning • Branding Elements • Deployment Options • Best Practices • Farm vs. Sandboxed • “Auto Branding” • Demos • Extras 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 logoor a whole site overthrow 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.
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! Thinking 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”) Thinking 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 Branding 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 Page Content Page Master Page Web Request Content Page 11 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 • 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) Thinking 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 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.
DEMO Dev Tools and Delegate Control Branding 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 Thinking SharePoint? Think Jornata.
DEMO 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.
DEMO Branding with Farm Solutions Thinking SharePoint? Think Jornata.
Appendix A: What’s New in 2010 • New SharePoint Controls 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:CssRegistrationrunat=“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.
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 • @jcsturges • Anastasia Czerw • anastasia.czerw@jornata.com • http://czerwsup.wordpress.com/ • http://www.jornata.com Thinking SharePoint? Think Jornata.