Jornata llc   sps baltimore 2012 - share point branding
Upcoming SlideShare
Loading in...5
×
 

Jornata llc sps baltimore 2012 - share point branding

on

  • 1,403 views

 

Statistics

Views

Total Views
1,403
Views on SlideShare
632
Embed Views
771

Actions

Likes
0
Downloads
15
Comments
0

3 Embeds 771

http://sharepoint.jsturges.com 767
http://www.netvibes.com 2
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Show delegate control CSS with additional page head only, show synchronous application of feature
  • Show MS Sandboxed solution
  • Show global nav, master pages applied, CSS, images

Jornata llc   sps baltimore 2012 - share point branding Jornata llc sps baltimore 2012 - share point branding Presentation Transcript

  • Thinking SharePoint? Think Jornata. Driving User Adoption withCustom Branding DevelopmentPrepared for SPS BaltimorePrepared by James Sturges and Anastasia Czerw Jornata 63 Chatham Street Boston, MASubmitted on 5/15/2012 1
  • 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.
  • 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.
  • Overview• Planning• Branding Elements• Deployment Options – Best Practices – Farm vs. Sandboxed• “Auto Branding”• Demos• Extras 4 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 logo or a whole site overthrow 5 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 6 Thinking SharePoint? Think Jornata.
  • 7Thinking 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! 8 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”) 9 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 10 Thinking SharePoint? Think Jornata.
  • 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 PageRequest 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) 12 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 13 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 14 Thinking SharePoint? Think Jornata.
  • DEMODEV TOOLS AND DELEGATECONTROL BRANDING 15 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 16 Thinking SharePoint? Think Jornata.
  • DEMOBRANDING WITH SANDBOXEDSOLUTIONS 17 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) 18 Thinking SharePoint? Think Jornata.
  • DEMOBRANDING WITH FARMSOLUTIONS 19 Thinking SharePoint? Think Jornata.
  • Appendix A: What’s New in 2010• New SharePoint ControlsControl DescriptionSharePoint:SPShortcutIcon Sets the favicon in the top left of the browser URL barSharePoint:CssRegistration Tells SharePoint what to load after Corev4.cssAfter=“corev4.css”SharePoint:SPRibbon Adds the Fluent UI (the ribbon) to the pageSharePoint: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 ribbontSharePoint:PageStateActionButton Loads the page edit and save icon button near the top left of the pageSharePoint:LanguageSpecificContent Displays content specific to the selected language 20 Thinking SharePoint? Think Jornata.
  • Control DescriptionSharePoint:DeveloperDashboardLaunch Launches the developer dashboard (hidden byer default, but can be activated with STSADM or PowerShell)SharePoint:ClusteredDirectionalSepa Loads the arrow near the site icon after the pageratorArrow titleSharePoint:AspMenu Renders navigation without tablesUseSimpleRendering=“true”SharePoint:VisualUpgradePreviewStat Displays the Visual Upgrade status in the status barusSharePoint:VersionedPlaceholder Enables the capability to target page elements to v3UIVersion=“3” or v4 capabilitiesSharePoint:ClusteredSPLinkButton How SharePoint makes use of CSS spritesSharePoint:DeveloperDashboard Loads the actual developer dashboard at the bottom of the master page; hidden until the launcher is clickedSharePoint:WarnOnUnsupportedBrowser Displays a warning to users accessing SharePoints with unsupported browsers such as IE 6Wssuc:MUISelector Sets the MUI language selected that shows up in the welcome menu if language packs are installedSPSWC:MySiteCssRegistration Allows the use of specific CSS 21 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: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.
  • Resources• W3 Documentation: http://www.w3.org/Style/CSS/• W3Schools Documentation: http://www.w3schools.com/css/ 23 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 24 Thinking SharePoint? Think Jornata.