Branding sharepoint
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Branding sharepoint

on

  • 2,045 views

 

Statistics

Views

Total Views
2,045
Views on SlideShare
2,044
Embed Views
1

Actions

Likes
0
Downloads
30
Comments
1

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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…
  • Nice presentation. Let me introduce you Bind Tuning a tool that comes to revolutionize the way how SharePoint sites are branded, with a lot of themes that are fully customizable you can give to the sharepoint site a unique design in just a few clicks.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Branding sharepoint Presentation Transcript

  • 1. Presented at Branding SharePoint Enhancing the End-User Experience November, 21, 2009 Slide 1
  • 2. Speaker Info Name Jeff Hansen Job Title/Role Senior Consultant Company Dominion Digital, Inc. http://www.dominiondigital.com Work E-mail jhansen@dominiondigital.com MCTS MOSS Application Development & Configuration November 21, 2009 Slide 2
  • 3. Dominion Digital Overview We are a process and technology consulting firm committed to your success and the success of your business. • Microsoft Gold Certified Partner • Founded in 1997 • Offices in Richmond and Charlottesville • Consultants average 10 years of relevant experience • Serve Fortune 500 & progressive mid-cap firms throughout the Mid-Atlantic region • Renowned for delivering right-sized solutions • Industry awards and recognition • Over 100 client firms with an “A” score on client satisfaction November 21, 2009 Slide 3
  • 4. Disclaimers • I am not a designer • This is not an entirely technology-focused presentation • This is MOSS specific • This is not a case study of a single solution • This is not a best practices presentation! – Tim’s one and only best practice: Do what makes sense to provide a value-added solution to a business problem in the most efficient manner possible. • Use SharePoint at your own risk… November 21, 2009 Slide 4
  • 5. Take a deep breath November 21, 2009 Slide 5
  • 6. Origin/Background • This presentation grew out of two things I see happen all too often: – A company makes a sizable investment in standing up SharePoint, then using it for only some small portion of what it can really do, and ignoring it for things it could really help them with. – Designers and developers work with SharePoint for a few days or weeks and start asking the question, “Why is this markup straight out of a website from 1998?” Too often, designers and developers get stuck on one or two common pain points and want to cast SharePoint aside as useless, when really there are ways to work with SharePoint to meet marketing, branding, and business needs. November 21, 2009 Slide 6
  • 7. Contents 1 Business Situation 2 What MOSS Can and Cannot Do for You (or Should and Shouldn’t) 3 Fundamentals of MOSS Branding 4 Tools 5 Techniques 6 Tying it All Together November 21, 2009 Slide 7
  • 8. Business Situation • A SharePoint environment has been established Situation • .NET is preferred for application development • Demand exists (often from Marketing) for custom branding on internal or external sites • Produce a consistent, custom brand Business • Provide a way for additions and changes to be made at Objective minimal cost • Maximize Return on Investment (ROI) for SharePoint • MOSS is, at its core, an ASP.NET web application – Customizable Strategic – Extensible Response • Leverage the SharePoint web content management capabilities to build a site that no one will believe is SharePoint November 21, 2009 Slide 8
  • 9. Contents 1 Business Situation 2 What MOSS Can and Cannot Do for You (or Should and Shouldn’t) 3 Fundamentals of MOSS Branding 4 Tools 5 Techniques 6 Tying it All Together November 21, 2009 Slide 9
  • 10. MOSS is/has… SharePoint’s Feats of Strength • Built entirely in ASP.NET • Robust API • Supporting Web Services for most MOSS functions • Configurable for integration with other Microsoft server products • Security/authentication model already in place • Version-controlled Lists/Libraries are great for lookups – Configuration documents – Application lookup values • BDC is probably the fastest way to give read-only access to RDBMS data • Publication Framework – Don’t underestimate its value! • Use built-in SharePoint/MOSS controls to build apps faster November 21, 2009 Slide 10
  • 11. SHARP-ness Scalability, High Availability, Reliability, and Performance • Scalability – Slap in another WFE, deploy customizations, configure for load balance, and away you go • High Availability – How much effort and expense went into ensuring MOSS system up-time? (If you’re thinking, “not much,” you might want to reconsider!) • Reliability – SharePoint is extremely stable if you follow best practices for managing your farm • Performance – List Indexing, Output Cache can drastically improve MOSS Performance November 21, 2009 Slide 11
  • 12. MOSS is not/does not have… The Airing of Grievances • Not long-term transactional data storage/ODS – Inefficient storage & retrieval – Not directly accessible to other systems – Very weak for referential integrity • Lacks built-in support for WCF • Lacks built-in support for AJAX, Silverlight • Outputs non-standards compliant HTML markup November 21, 2009 Slide 12
  • 13. Contents 1 Business Situation 2 What MOSS Can and Cannot Do for You (or Should and Shouldn’t) 3 Fundamentals of MOSS Branding 4 Tools 5 Techniques 6 Tying it All Together November 21, 2009 Slide 13
  • 14. What is MOSS? • ASP.NET 2.0 + – Master Pages & Page Layouts – Styles – Web Parts – User Controls – Microsoft.SharePoint.dll – Microsoft.Office.Server.dll – Some other stuff… November 21, 2009 Slide 14
  • 15. What are we starting with? Collaboration Portal Publishing Portal November 21, 2009 Slide 15
  • 16. Anatomy of a MOSS Publishing Page Master Page Page Layout List Item November 21, 2009 Slide 16
  • 17. The Master Page • HTML and ASPX markup that provides the structure for all publishing pages November 21, 2009 Slide 17
  • 18. The Page Layout • Overrides content placeholders defined in the masterpage • Enables distinctly different layouts of content within a single overarching look-and-feel • Contains page fields that render content from specific list items (pages) November 21, 2009 Slide 18
  • 19. The List Item • Individual pages are just another list item • Publishing pages inherit from the Page content type, which defines a few default fields: – Title – Description – Scheduling Start Date – Scheduling End Date – Contact – Rollup Image – etc. • Extended content types, like Article Page, have additional fields defined that can be inserted into page layouts that are associated with the content type – Article Date – Byline – etc. November 21, 2009 Slide 19
  • 20. Put It All Together… and you’ve got yourself a publishing page. November 21, 2009 Slide 20
  • 21. September 23, 2010 Slide 21
  • 22. HEADER PAGE PAGE IMAGE 2 IMAGE 1 PAGE TITLE LOCAL NAV PAGE CONTENT c WEB PART 1 WEB PART 2 September 23, 2010 FOOTER Slide 22
  • 23. Branding in MOSS • It’s all about CSS – Default CSS files live in the 12 hive. Styles that you might want to override live in: • Core.css • Calendar.css • DatePicker.css • Portal.css • HtmlEditorCustomStyles.css • HtmlEditorTableFormats.css • 20 or 30 others… • …and good HTML markup – Get rid of tables (except for tabular data) – <div> is your friend (but don’t get too friendly) – Unordered lists for menus – Think semantically November 21, 2009 Slide 23
  • 24. Semantic HTML small h3 dfn thead hr samp dd blockquote br tr var span area p h1 legend abbr code cite strong fieldset h2 q button th dt table tfoot acronym sub address dl em h6 caption h5 a sup div ul h4 pre li label tbody big ol td November 21, 2009 Slide 24
  • 25. Using CSS – An Embarrassment of Riches • Variety of ways to include CSS in your site • Various techniques depend on: – Scope – Level of access – Product version • Common techniques include: – Content Editor Web Part (CEWP) – Embedded <style> section – <link> to CSS file – AlternateCSS November 21, 2009 Slide 25
  • 26. CEWP & Me Affecting Styles One Page at a Time • Scope is narrow (page level) • Anyone who can add a web part can affect styling • Included inside the <body> tag of HTML, so it’s likely to be the last style applied except for inline styles • Good for one-off solutions, but not as a general branding strategy November 21, 2009 Slide 26
  • 27. Embedded <style> • Often used in a page layout’s PlaceHolderAdditionalPageHead • Can override styles from linked stylesheets (depending on position) • When it becomes repetitive, consider rolling into an external file. November 21, 2009 Slide 27
  • 28. Linking to CSS • HTML <link> element – Can be placed anywhere on the page – Is rendered without CssLink • <SharePoint:CssRegistration> element – Added to internal collection and rendered alphabetically • <SharePoint:CssLink> element – Applies CSS referenced by CssRegistration – Applies core.css or AlternateCSS This one wins! – Can also reference a default CSS file • All together now! November 21, 2009 Slide 28
  • 29. AlternateCSS • Renders instead of core.css • Can be defined in Onet.xml for a site definition –OR – • Through Site Settings > Look and Feel > Master page (MOSS) • Applies to Master pages other than your own November 21, 2009 Slide 29
  • 30. Contents 1 Business Situation 2 What MOSS Can and Cannot Do for You (or Should and Shouldn’t) 3 Fundamentals of MOSS Branding 4 Tools 5 Techniques 6 Tying it All Together November 21, 2009 Slide 30
  • 31. Accessibility Kit for SharePoint (AKS) https://aks.hisoftware.com/aks.aspx • SDK for accessibility • “Smart Control Adapters” • Can be used to remove Web Part Zone tables • Can override chrome rendering on individual web parts November 21, 2009 Slide 31
  • 32. Web Part Zone with Adapter – Edit & Display Edit Display November 21, 2009 Slide 32
  • 33. Web Part with Default Chrome • Linkable title • Optional image • Theme controlled border • Context menu (permissions based) November 21, 2009 Slide 33
  • 34. Web Part Chrome Override November 21, 2009 Slide 34
  • 35. Web Part Web Part Zone Chrome (div) September 23, 2010 Slide 35
  • 36. CSS-Friendly Adapters http://www.codeplex.com/cssfriendly • Read this first! – http://www.sharepointblogs.com/mossman/archive/2007/03/08/css-friendly- control-adapters-in-sharepoint-2007-a-walk-through.aspx • Requires some configuration to install • Menu adapter only • You may want to crack it open and customize the output (not for the faint of heart) November 21, 2009 Slide 36
  • 37. Default MOSS Menu Markup November 21, 2009 Slide 37
  • 38. Our Take on CSS-Friendly Menu Adapter November 21, 2009 Slide 38
  • 39. CSS-Friendly In Action November 21, 2009 Slide 39
  • 40. Community Kit for SharePoint http://www.codeplex.com/CKS • Enhanced Blog Edition – Theme-based styles – Support for anonymous comments, CAPTCHA, etc. – Allows application of existing brand to Blog sites • Enhanced Wiki Edition • User Group Edition November 21, 2009 Slide 40
  • 41. September 23, 2010 Slide 41
  • 42. September 23, 2010 Slide 42
  • 43. Minimal Publishing Site Definition • http://www.codeplex.com/BasicWCMSite • http://www.codeplex.com/features • Pick one! • Implements minimal master page from the SDK • Strips out all of the extra master pages, CSS, and page layouts that you get when you activate the publishing features • Creates a clean slate for you to start from November 21, 2009 Slide 43
  • 44. Contents 1 Business Situation 2 What MOSS Can and Cannot Do for You (or Should and Shouldn’t) 3 Fundamentals of MOSS Branding 4 Tools 5 Techniques 6 Tying it All Together November 21, 2009 Slide 44
  • 45. CSS Resets • Always assume that MOSS is going to mess with your styles • Core.css affects almost everything • Make sure that your style sheet wins (i.e., is loaded last) • Reset everything you can think of November 21, 2009 Slide 45
  • 46. The CSS Body Class • CSS class applied to the <body> tag of the master page • Provides a way to have a “theme” for a particular page independent of the page’s page layout • Useful examples: – Underline or highlight color of text on a page that varies from section to section November 21, 2009 Slide 46
  • 47. CSS Body Class – Master Page • Add an ID to the <body> tag • Add runat=“server” • Set body class and onload attributes through code Before After November 21, 2009 Slide 47
  • 48. CSS Body Class – Codebehind and Site Column November 21, 2009 Slide 48
  • 49. CSS Body Class in Action November 21, 2009 Slide 49
  • 50. Development & Deployment • Designers: use whatever you want for designing (our designers use Dreamweaver) • Have an end-to-end process in place for branding, e.g.: – Graphic designers: create comps – Web designers: create templates & CSS – Developer: slice templates into master page, page layout; determine dynamic content areas – Web designers: clean up developer’s mess • Use SharePoint Designer for building and Visual Studio for deployment • Use WSPs and Features! This is a published best practice that works. • WSPBuilder – Great open source utility on CodePlex – Structure your projects (folders) to match the SharePoint folder structure and save hours on building deployment projects • SPSource – Useful tool to help package up artifacts November 21, 2009 Slide 50
  • 51. September 23, 2010 Slide 51
  • 52. Contents 1 Business Situation 2 What MOSS Can and Cannot Do for You (or Should and Shouldn’t) 3 Fundamentals of MOSS Branding 4 Tools 5 Techniques 6 Tying it All Together November 21, 2009 Slide 52
  • 53. Zen and the Art of MOSS • It is what it is • Think Judo, not Boxing • When things start to work, resist the temptation to question why • Think before slicing • Ying and Yang: Designer and Developer November 21, 2009 Slide 53
  • 54. CEWP PAGE PAGE CONTENT CONTENT September 23, 2010 Slide 54
  • 55. CEWP SummaryLinks PAGE CONTENT PAGE PAGE CONTENT CONTENT PAGE CONTENT PAGE CONTENT PAGE CONTENT September 23, 2010 Slide 55
  • 56. AdRotator PAGE CONTENT CQWP PAGE CONTENT CQWP Custom Web Part September 23, 2010 Slide 56
  • 57. Tying It All Together What to do, and what not to do when using SharePoint as a web content management system What to do What not to do • Isolated development, testing, staging, • Avoid giving developers and designers production environments direct access to production systems. • Leverage SharePoint’s Strengths, while They’ll take shortcuts! avoiding its weaknesses • Don’t let your implementation become • Follow deployment best practices (.wsp) more custom code than SharePoint • Override where necessary, and live with unless you have really good reasons the rest • Don’t forget that SharePoint is ASP.NET; • Invest serious time and thought during an don’t let it intimidate you! inception phase. Anyone can build • Don’t keep the tips & tricks you discover something right, but not everyone can to yourself. Share with the community! build the right thing. November 21, 2009 Slide 57
  • 58. Thank You! Dominion Digital UX Team Darrell Estabrook John Hilowitz November 21, 2009 Slide 58
  • 59. Sites Referenced in this Presentation • http://www.cmrinstitute.org • http://www.farmbureauadvantage.com • http://www.mrccommission.org • http://www.saveourfood.org • http://www.virginiafarmbureau.org November 21, 2009 Slide 59
  • 60. Speaker Info Name Jeff Hansen Job Title/Role Senior Consultant Company Dominion Digital, Inc. http://www.dominiondigital.com Work E-mail jhansen@dominiondigital.com MCTS MOSS Application Development & Configuration November 21, 2009 Slide 60