Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

SharePoint Branding From Start to Finish

39.615 Aufrufe

Veröffentlicht am

In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.

This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.

Visit http://www.kanwalkhipple.com

Veröffentlicht in: Technologie
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Unlock Her Legs is your passage way to a life full of loving and sex... read more ... ◆◆◆ http://scamcb.com/unlockher/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you...  http://ishbv.com/unlockher/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • GIVE HER A BIGGER PACKAGE THIS VALENTINE'S DAY ♣♣♣ http://t.cn/Ai88iYkP
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Does Penis Size REALLY Matter? The truth comes out... ●●● https://bit.ly/30G1ZO1
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

SharePoint Branding From Start to Finish

  1. 1. 1<br />SharePoint Branding<br />From START to FINISH<br />Kanwal Khipple<br />Independent Consultant<br />
  2. 2. About Me<br />KanwalKhipple<br />2x SharePoint MVP<br />6 years of SharePoint consulting experience<br />Focused on WCM<br />Passionate about designing and optimizing SharePoint sites<br />Twitter <br />@kkhipple<br />@sharepointbuzz<br />
  3. 3. About You<br />The SharePoint Person in your company<br />Familiar with:<br /><ul><li>HTML
  4. 4. CSS
  5. 5. SharePoint Designer 2010</li></ul>Level 100-300<br />
  6. 6. 50% Of Top Intranet’s Use SharePointSource: Nielsen Norman Group<br />4<br />Secrets to Successful Branding<br />
  7. 7. Agenda<br />Why Brand SharePoint?<br />Tools for Branding<br />Advanced Tips & Tricks<br />Secrets to Successful Branding!<br />
  8. 8. What is branding?<br />6<br />
  9. 9. What is Branding?<br />HTML tags<br />Images<br />Colors<br />Fonts<br />Logos<br />Styles<br />
  10. 10.
  11. 11. Here’s What You Get Out of the Box<br />9<br />Make It Not Look Like SharePoint<br />Consistent User Experience<br />
  12. 12. What Do Your Users Want?<br />
  13. 13.
  14. 14. http://spbuzz.it/sptopsites<br />
  15. 15. SharePoint Branding<br />Overview <br />
  16. 16. SharePoint Branding Overview<br />Branding is more than adding a pretty header to your site and making it another color besides SharePoint blue<br />
  17. 17. SharePoint Branding Overview<br />Branding is about site AND content design.<br />Spend the time and plan a site taxonomy.<br />With a solid taxonomy, site requirements are easily identifiable.<br />
  18. 18. SharePoint Branding Overview<br />With a solid taxonomy, site requirements are easily identifiable.<br />SharePoint features<br />Custom web parts & features<br />Content Types<br />Page Layouts<br />Audience needs drive page content<br />
  19. 19. What’s Involved?<br />Information Architecture<br />Design<br />Wireframes<br />Branding<br />Page Layouts<br />Master Pages<br />HTML, CSS, JavaScript<br />
  20. 20. What’s Involved?<br />
  21. 21. Agenda<br />Why Brand SharePoint?<br />Tools for Branding<br />Advanced Tips & Tricks<br />Secrets to Successful Branding!<br />
  22. 22. http://spbuzz.it/jGZIuB <br />Tools for Branding?<br />Take Baby steps<br />
  23. 23. http://spbuzz.it/jGZIuB <br />
  24. 24. BalsamiqMockup<br />DEMO<br />
  25. 25. Wireframes<br />Paper Prototyping<br />Collaborative Wireframes<br />http://spbuzz.it/bmockupsdemo<br />
  26. 26. Wireframes<br />Microsoft Visio Wireframe<br />http://spbuzz.it/sp2007visiotemplate<br />Adobe PDF Wireframe<br />http://spbuzz.it/sp2007pdftemplate<br />Photoshop PSD file<br />http://spbuzz.it/sp2007psdtemplate <br />http://spbuzz.it/sp2010psdtemplate<br />Balsamiq Mockups wireframe<br />http://spbuzz.it/sp2010bmockupstemplate<br />
  27. 27. What’s New<br />SharePoint 2010<br />
  28. 28. WCM Features<br />Better Browser Support<br />Status Bar<br />Themes<br />Server Ribbon<br />Tagging & Rating<br />Client OM<br />
  29. 29. Integrated Editing & Ribbon Interface <br />
  30. 30. NEW INTERFACE<br />DEMO<br />
  31. 31. Accessibility Improvements<br />Cross-browser support<br />Built-in support for keyboard navigation<br />WCAG 2.0 Level AA<br />Proper use of heading structures (H1, DIV, SPAN, etc.)<br />
  32. 32. Browser Market Share<br />
  33. 33. Browser Resolutions<br />
  34. 34. Supported Browsers<br />Internet Explorer 9<br />Coming in SharePoint 2010 Service Pack 1<br />Internet Explorer 7-8 (32-bit)<br />IE Dev Toolbar (embedded in IE8+)<br />Mozilla Firefox 3.6<br />FireBug (addon to Firefox)<br />Safari 4.04<br />Google Chrome (Service Pack 1)<br />Coming in SharePoint 2010 Service Pack 1<br />http://spbuzz.it/sp2010browsers<br />
  35. 35. Customization Options<br />Change Site Logo, Format, Parts<br />Browser<br />easy<br />Change Colors, Backgrounds, Fonts<br /> Edit CSS files<br />Change Page Layout and Content<br />Edit Master PagesEdit Page Templates (SharePoint Server only)<br />SharePoint Designer<br />complex<br />Share Your Customization with Others<br />Build Themes and Site Definitions<br />SPD + Visual Studio<br />
  36. 36. Themes<br />SharePoint Terminology<br />
  37. 37. Themes<br />12 colors, 2 Fonts<br />Control look and feel of your site<br />Uses Office theme (.thmx files)<br />Create theme via PowerPoint<br />
  38. 38. 36<br />
  39. 39. SharePoint 2010 Themes<br />DEMO<br />
  40. 40. Custom Theming Options<br />Theme colors override your CSS<br />/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;<br />Recolor images – Blending, Tinting, Fill/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/image.png") no-repeat;<br />
  41. 41. History on CSSRegistration Control<br /><SharePoint:CSSRegistration name=“2.css” runat=“server”/><br /><SharePoint:CSSRegistration name=“1.css” runat=“server”/><br />Outputs <br /><link rel=“stylesheet” type=“text/css” href=“1.css”/><br /><link rel=“stylesheet” type=“text/css” href=“2.css”/><br /><link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/><br />Trick - getting your CSS to be the last to load<br />
  42. 42. 3 New CSS Registration Properties<br />Conditional Expression<br /><SharePoint:CSSRegistration Name=“1.css” ConditionalExpression=“lt IE 8” runat=“server”/><br />Outputs <br /><!--[if lt IE 8]><br /> <link rel=“stylesheet” type=“text/css” href=“NonIE8.css”/><br /></![endif]--><br />
  43. 43. 3 New CSS Registration Properties<br />After<br /><SharePoint:CSSRegistration Name=“1.css” After=“2.css” runat=“server”/><br /><SharePoint:CSSRegistration Name=“2.css” runat=“server”/><br />Outputs <br /><link rel=“stylesheet” type=“text/css” href=“2.css”/><br /><link rel=“stylesheet” type=“text/css” href=“1.css”/><br /><link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/><br />
  44. 44. 3 New CSS Registration Properties<br />After<br /><SharePoint:CSSRegistration Name=“1.css” After=“corev4.css” runat=“server”/><br /><SharePoint:CSSRegistration Name=“2.css” After=“corev4.css” runat=“server”/><br />Outputs <br /><link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/><br /><link rel=“stylesheet” type=“text/css” href=“2.css”/><br /><link rel=“stylesheet” type=“text/css” href=“1.css”/><br />
  45. 45. 3 New CSS Registration Properties<br />EnableCSSTheming<br />Themes colors overriding your CSS<br />Set to True by default<br />.kanwalsclass {<br /> /* [ReplaceColor(themeColor: “Accent1”)] */<br />backgrond-color: red;<br />}<br />
  46. 46. MASTER PAGeS & Page LAyouts<br />SharePoint Terminology<br />
  47. 47. Master Pages + Page Layouts<br />
  48. 48. Master Page<br />Master Page<br />Page Layout<br />
  49. 49. Content Placeholders<br /><asp:ContentPlaceholderID="PlaceHolderLeftNavBar"> runat="server" /><br />
  50. 50. 48<br />
  51. 51. 49<br />
  52. 52. Content Placeholders<br />http://spbuzz.it/sp2010dcph<br />
  53. 53. What’s the Same?<br />What has not changed from SharePoint 2007<br /><ul><li>Complex nested page structures
  54. 54. Lots and lots of styles
  55. 55. Mostly same list of content placeholders
  56. 56. Inconsistent Web Part markup injection
  57. 57. Same default and custom master page tokens</li></ul>Custom Master Pages:<br />Copy V4.master and tweak<br />Start with Minimal or the *Starter* Master Page<br />
  58. 58. What’s new with Master Pages<br />Placeholders the same between content and application pages<br />Master Page changes apply to Application (_layouts) pages<br />Greater use of DIV/CSS layouts -> Fewer Tables<br />XHTML Strict document type<br />Much better support for Accessibility<br />Cross-Browser support<br />
  59. 59. Master Pages<br />
  60. 60. Master Pages & Page Layouts<br />DEMO<br />
  61. 61. UPGRADING YOUR DESIGNS<br />SharePoint 2007 to SharePoint 2010<br />
  62. 62. Visual Upgrade<br />Visual upgrade allows separation of data upgrade from UI upgrade<br />The UI mode can be changed:<br />PSConfig during upgrade<br />Web Application<br />Site Collection<br />Site<br />Default upgrade UI mode is V3<br />When upgrading a content database, there is an optional parameter to preserve the old “V3” UI<br />Allows controlling when and how you upgrade your users to the new Ribbon UI, and other new UX features<br />
  63. 63. Visual Upgrade<br />Attach a WSSv3 content database<br />Preserve the V3 UI<br />Preview site in V4<br />Upgrade site to V4<br />Use PowerShell to revert site back to V3<br />http://spbuzz.it/sp2010vu <br />
  64. 64. Agenda<br />Why Brand SharePoint?<br />Tools for Branding<br />Advanced Tips & Tricks<br />Secrets to Successful Branding!<br />
  65. 65. Advanced Tips & Tricks<br />Performance Goals<br /><ul><li>Reduce page weight</li></ul>Techniques<br /><ul><li>Output Caching
  66. 66. Blob Caching
  67. 67. CSS Sprites
  68. 68. Consolidate JS and CSS files
  69. 69. Cache JS, CSS and image files in browser
  70. 70. Minification of JS and CSS
  71. 71. Anonymous access for CSS, JS and image files </li></ul>Tools<br /><ul><li>Yslow
  72. 72. Fiddler
  73. 73. Wireshark</li></li></ul><li>Advanced Tips & Tricks<br />During Visual Upgrade, show content based on UI version<br /><Sharepoint:UIVersionedContent ID="myContentIDv3" runat="server" UIVersion="3"><br /> <ContentTemplate> <br /> <p>This content displays only when UIVersion=3.</p> <br /> </ContentTemplate><br /></SharePoint:UIVersionedContent> <br /><Sharepoint:UIVersionedContent ID=" myContentIDv4" runat="server" UIVersion="4"> <br /> <ContentTemplate> <br /> <p>This content displays only when UIVersion=4.</p> <br /> </ContentTemplate> <br /></SharePoint:UIVersionedContent> <br />
  74. 74. Advanced Tips & Tricks<br />Remove specific content from Search Results<br /><div class=“footer noindex”/><br /> <!--- footer content ---><br /></div><br />http://spbuzz.it/msdnspbasepermissions<br />Security controlled content<br /><Sharepoint:SPSecurityTrimmedControlrunat="server" Permissions="ManageWeb"><br /> <!--- content here ---><br /></Sharepoint:SPSecurityTrimmedControl><br />
  75. 75. Handling Legacy Browsers<br />Warn users when they are using an unsupported browser<br /><SharePoint:WarnOnUnsupportedBrowsersrunat="server"/><br />http://spbuzz.it/ie6-upgrade-warning <br />
  76. 76. Advanced Tips & Tricks<br />Including a footer in your design?<br />Add s4-notdlg for HTML elements that you don’t want to show in the dialog boxes<br /><div class=“customFooter”><br /><div class=“customFooter s4-notdlg”><br />
  77. 77. Easily show a Favicon in SharePoint 2010<br />Easily show a Favicon in SharePoint 2010<br />SharePoint 2007 approach<br /><link rel=“shortcut icon” href=“/Style Library/images/favicon.ico”/><br />SharePoint 2010 approach<br /><SharePoint:SPShortcutIconrunat=“server” IconUrl=“/Style Library/images/favicon.ico”/><br />
  78. 78. Custom Ribbon Fonts & Styles<br />.ms-rteStyle-BlueBackground {-ms-name:Blue Background; background-color: blue; color: white;}<br />H1.ms-rteElement-H1Blue {-ms-name:Blue Heading 1; color: blue;}<br />
  79. 79. Handling the Name.dll ActiveX Control<br />You can turn off the message on the General Settings page of the Manage Web Applications section of Central Administration. Set Enable Person Name smart tag and Online Status for members to No. <br /><script type="text/javascript"> <br />function ProcessImn(){} <br />function ProcessImnMarkers () {} <br /></script> <br />
  80. 80. 67<br />
  81. 81. Want more?<br />Content Query Web Part<br />Data view web part in SharePoint Designer<br />XSLT templates<br />JQuery<br />SPServices<br />ClientOM<br />68<br />
  82. 82. Professional SharePoint 2010 Branding and User Interface Design<br />Provides expert tips, techniques, <br />and insights from the author team of <br />SharePoint 2010 and branding experts <br /><ul><li>CSS
  83. 83. master pages
  84. 84. page layouts
  85. 85. SharePoint themes
  86. 86. XSLT
  87. 87. jQuery
  88. 88. Silverlight </li></ul>http://spbuzz.it/prosp2010ui <br />
  89. 89. Agenda<br />Why Brand SharePoint?<br />Tools for Branding<br />Advanced Tips & Tricks<br />Secrets to Successful Branding!<br />
  90. 90. Secrets to Successful Branding<br />Organize your content<br />End users are more likely to use search then navigation<br />Follow Web Standards<br />Optimize and accessibility and standards<br />Listen To Your Users<br />http://spbuzz.it/iYKom7<br />
  91. 91. Your Feedback Is Very Important To Me<br />Thank you!<br />SharePoint Branding<br />From START to FINISH<br />http://www.kanwalkhipple.com<br />@kkhipple<br />@sharepointbuzz<br />

×