Presented at




Branding SharePoint
Enhancing the End-User Experience




November, 21, 2009                  Slide   1
Speaker Info


           Name             Jeff Hansen
           Job Title/Role   Senior Consultant
           Company   ...
Dominion Digital Overview

    We are a process and technology consulting firm
    committed to your success and the succe...
Disclaimers

 •     I am not a designer
 •     This is not an entirely technology-focused presentation
 •     This is MOSS...
Take a deep breath


November 21, 2009                  Slide   5
Origin/Background

 • This presentation grew out of two things I see happen all too often:
        – A company makes a siz...
Contents



                1   Business Situation

                2   What MOSS Can and Cannot Do for You (or Should and...
Business Situation

                     • A SharePoint environment has been established
         Situation   • .NET is pr...
Contents



                1   Business Situation

                2   What MOSS Can and Cannot Do for You (or Should and...
MOSS is/has…
SharePoint’s Feats of Strength



 •     Built entirely in ASP.NET
 •     Robust API
 •     Supporting Web Se...
SHARP-ness
Scalability, High Availability, Reliability, and Performance



 • Scalability
         – Slap in another WFE, ...
MOSS is not/does not have…
The Airing of Grievances



 • Not long-term transactional data storage/ODS
        – Inefficie...
Contents



                1   Business Situation

                2   What MOSS Can and Cannot Do for You (or Should and...
What is MOSS?

 • ASP.NET 2.0 +
        –    Master Pages & Page Layouts
        –    Styles
        –    Web Parts
      ...
What are we starting with?




                                        Collaboration Portal



                    Publish...
Anatomy of a MOSS Publishing Page




           Master Page
            Page Layout
               List Item




November...
The Master Page

 • HTML and ASPX markup that provides the structure for all publishing pages




November 21, 2009       ...
The Page Layout

 • Overrides content placeholders defined in the masterpage
 • Enables distinctly different layouts of co...
The List Item
 • Individual pages are just another list item
 • Publishing pages inherit from the Page content type, which...
Put It All Together…




    and you’ve got yourself a publishing page.




November 21, 2009                           Sl...
September 23, 2010   Slide   21
HEADER




                       PAGE      PAGE IMAGE 2
                     IMAGE 1

                                   ...
Branding in MOSS

 • It’s all about CSS
        – Default CSS files live in the 12 hive. Styles that you might want to ove...
Semantic HTML
                                                                                    small
                  ...
Using CSS – An Embarrassment of Riches

 • Variety of ways to include CSS in your site
 • Various techniques depend on:
  ...
CEWP & Me
Affecting Styles One Page at a Time



 • Scope is narrow (page level)
 • Anyone who can add a web part can affe...
Embedded <style>

 • Often used in a page layout’s PlaceHolderAdditionalPageHead
 • Can override styles from linked styles...
Linking to CSS

 • HTML <link> element
        – Can be placed anywhere on the page
        – Is rendered without CssLink
...
AlternateCSS

 •     Renders instead of core.css
 •     Can be defined in Onet.xml for a site definition –OR –
 •     Thro...
Contents



                1   Business Situation

                2   What MOSS Can and Cannot Do for You (or Should and...
Accessibility Kit for SharePoint (AKS)
https://aks.hisoftware.com/aks.aspx



 •     SDK for accessibility
 •     “Smart C...
Web Part Zone with Adapter – Edit & Display


                    Edit            Display




November 21, 2009           ...
Web Part with Default Chrome

 •     Linkable title
 •     Optional image
 •     Theme controlled border
 •     Context me...
Web Part Chrome Override




November 21, 2009          Slide   34
Web Part
Web Part Zone          Chrome
    (div)




  September 23, 2010              Slide   35
CSS-Friendly Adapters
http://www.codeplex.com/cssfriendly



 • Read this first!
        – http://www.sharepointblogs.com/...
Default MOSS Menu Markup




November 21, 2009          Slide   37
Our Take on CSS-Friendly Menu Adapter




November 21, 2009                       Slide   38
CSS-Friendly In Action




November 21, 2009        Slide   39
Community Kit for SharePoint
http://www.codeplex.com/CKS



 • Enhanced Blog Edition
        – Theme-based styles
        ...
September 23, 2010   Slide   41
September 23, 2010   Slide   42
Minimal Publishing Site Definition

 • http://www.codeplex.com/BasicWCMSite
 • http://www.codeplex.com/features
 • Pick on...
Contents



                1   Business Situation

                2   What MOSS Can and Cannot Do for You (or Should and...
CSS Resets

 •     Always assume that MOSS is going to mess with your styles
 •     Core.css affects almost everything
 • ...
The CSS Body Class

 • CSS class applied to the <body> tag of the master page
 • Provides a way to have a “theme” for a pa...
CSS Body Class – Master Page

 • Add an ID to the <body> tag
 • Add runat=“server”
 • Set body class and onload attributes...
CSS Body Class – Codebehind and Site Column




November 21, 2009                             Slide   48
CSS Body Class in Action




November 21, 2009          Slide   49
Development & Deployment

 • Designers: use whatever you want for designing (our designers use
   Dreamweaver)
 • Have an ...
September 23, 2010   Slide   51
Contents



                1   Business Situation

                2   What MOSS Can and Cannot Do for You (or Should and...
Zen and the Art of MOSS

 • It is what it is
 • Think Judo, not Boxing
 • When things start to
   work, resist the
   temp...
CEWP     PAGE      PAGE
                            CONTENT   CONTENT




September 23, 2010                              ...
CEWP             SummaryLinks




                       PAGE
                     CONTENT        PAGE
                   ...
AdRotator




                     PAGE CONTENT
                                           CQWP



                       ...
Tying It All Together
    What to do, and what not to do when using SharePoint as a web content management system


      ...
Thank You!




                    Dominion Digital UX Team
                        Darrell Estabrook
                    ...
Sites Referenced in this Presentation

 •     http://www.cmrinstitute.org
 •     http://www.farmbureauadvantage.com
 •    ...
Speaker Info


           Name             Jeff Hansen
           Job Title/Role   Senior Consultant
           Company   ...
Upcoming SlideShare
Loading in...5
×

Branding sharepoint

1,799

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • 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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,799
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Branding sharepoint

  1. 1. Presented at Branding SharePoint Enhancing the End-User Experience November, 21, 2009 Slide 1
  2. 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. 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. 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. 5. Take a deep breath November 21, 2009 Slide 5
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. What are we starting with? Collaboration Portal Publishing Portal November 21, 2009 Slide 15
  16. 16. Anatomy of a MOSS Publishing Page Master Page Page Layout List Item November 21, 2009 Slide 16
  17. 17. The Master Page • HTML and ASPX markup that provides the structure for all publishing pages November 21, 2009 Slide 17
  18. 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. 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. 20. Put It All Together… and you’ve got yourself a publishing page. November 21, 2009 Slide 20
  21. 21. September 23, 2010 Slide 21
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. Web Part Zone with Adapter – Edit & Display Edit Display November 21, 2009 Slide 32
  33. 33. Web Part with Default Chrome • Linkable title • Optional image • Theme controlled border • Context menu (permissions based) November 21, 2009 Slide 33
  34. 34. Web Part Chrome Override November 21, 2009 Slide 34
  35. 35. Web Part Web Part Zone Chrome (div) September 23, 2010 Slide 35
  36. 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. 37. Default MOSS Menu Markup November 21, 2009 Slide 37
  38. 38. Our Take on CSS-Friendly Menu Adapter November 21, 2009 Slide 38
  39. 39. CSS-Friendly In Action November 21, 2009 Slide 39
  40. 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. 41. September 23, 2010 Slide 41
  42. 42. September 23, 2010 Slide 42
  43. 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. 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. 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. 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. 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. 48. CSS Body Class – Codebehind and Site Column November 21, 2009 Slide 48
  49. 49. CSS Body Class in Action November 21, 2009 Slide 49
  50. 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. 51. September 23, 2010 Slide 51
  52. 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. 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. 54. CEWP PAGE PAGE CONTENT CONTENT September 23, 2010 Slide 54
  55. 55. CEWP SummaryLinks PAGE CONTENT PAGE PAGE CONTENT CONTENT PAGE CONTENT PAGE CONTENT PAGE CONTENT September 23, 2010 Slide 55
  56. 56. AdRotator PAGE CONTENT CQWP PAGE CONTENT CQWP Custom Web Part September 23, 2010 Slide 56
  57. 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. 58. Thank You! Dominion Digital UX Team Darrell Estabrook John Hilowitz November 21, 2009 Slide 58
  59. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×