SharePoint Branding From Start to Finish
•Als PPTX, PDF herunterladen•
28 gefällt mir•32,478 views
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
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (15)
Ähnlich wie SharePoint Branding From Start to Finish
Ähnlich wie SharePoint Branding From Start to Finish (20)
Mehr von Kanwal Khipple
Mehr von Kanwal Khipple (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
SharePoint Branding From Start to Finish
- 1. 1 SharePoint Branding From START to FINISH Kanwal Khipple Independent Consultant
- 2. About Me KanwalKhipple 2x SharePoint MVP 6 years of SharePoint consulting experience Focused on WCM Passionate about designing and optimizing SharePoint sites Twitter @kkhipple @sharepointbuzz
- 4. CSS
- 5. SharePoint Designer 2010Level 100-300
- 6. 50% Of Top Intranet’s Use SharePointSource: Nielsen Norman Group 4 Secrets to Successful Branding
- 7. Agenda Why Brand SharePoint? Tools for Branding Advanced Tips & Tricks Secrets to Successful Branding!
- 8. What is branding? 6
- 9. What is Branding? HTML tags Images Colors Fonts Logos Styles
- 11. Here’s What You Get Out of the Box 9 Make It Not Look Like SharePoint Consistent User Experience
- 12. What Do Your Users Want?
- 16. SharePoint Branding Overview Branding is more than adding a pretty header to your site and making it another color besides SharePoint blue
- 17. SharePoint Branding Overview Branding is about site AND content design. Spend the time and plan a site taxonomy. With a solid taxonomy, site requirements are easily identifiable.
- 18. SharePoint Branding Overview With a solid taxonomy, site requirements are easily identifiable. SharePoint features Custom web parts & features Content Types Page Layouts Audience needs drive page content
- 19. What’s Involved? Information Architecture Design Wireframes Branding Page Layouts Master Pages HTML, CSS, JavaScript
- 20. What’s Involved?
- 21. Agenda Why Brand SharePoint? Tools for Branding Advanced Tips & Tricks Secrets to Successful Branding!
- 22. http://spbuzz.it/jGZIuB Tools for Branding? Take Baby steps
- 25. Wireframes Paper Prototyping Collaborative Wireframes http://spbuzz.it/bmockupsdemo
- 26. Wireframes Microsoft Visio Wireframe http://spbuzz.it/sp2007visiotemplate Adobe PDF Wireframe http://spbuzz.it/sp2007pdftemplate Photoshop PSD file http://spbuzz.it/sp2007psdtemplate http://spbuzz.it/sp2010psdtemplate Balsamiq Mockups wireframe http://spbuzz.it/sp2010bmockupstemplate
- 27. What’s New SharePoint 2010
- 28. WCM Features Better Browser Support Status Bar Themes Server Ribbon Tagging & Rating Client OM
- 29. Integrated Editing & Ribbon Interface
- 31. Accessibility Improvements Cross-browser support Built-in support for keyboard navigation WCAG 2.0 Level AA Proper use of heading structures (H1, DIV, SPAN, etc.)
- 34. Supported Browsers Internet Explorer 9 Coming in SharePoint 2010 Service Pack 1 Internet Explorer 7-8 (32-bit) IE Dev Toolbar (embedded in IE8+) Mozilla Firefox 3.6 FireBug (addon to Firefox) Safari 4.04 Google Chrome (Service Pack 1) Coming in SharePoint 2010 Service Pack 1 http://spbuzz.it/sp2010browsers
- 35. Customization Options Change Site Logo, Format, Parts Browser easy Change Colors, Backgrounds, Fonts Edit CSS files Change Page Layout and Content Edit Master PagesEdit Page Templates (SharePoint Server only) SharePoint Designer complex Share Your Customization with Others Build Themes and Site Definitions SPD + Visual Studio
- 37. Themes 12 colors, 2 Fonts Control look and feel of your site Uses Office theme (.thmx files) Create theme via PowerPoint
- 38. 36
- 39. SharePoint 2010 Themes DEMO
- 40. Custom Theming Options Theme colors override your CSS /* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65; Recolor images – Blending, Tinting, Fill/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/image.png") no-repeat;
- 41. History on CSSRegistration Control <SharePoint:CSSRegistration name=“2.css” runat=“server”/> <SharePoint:CSSRegistration name=“1.css” runat=“server”/> Outputs <link rel=“stylesheet” type=“text/css” href=“1.css”/> <link rel=“stylesheet” type=“text/css” href=“2.css”/> <link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/> Trick - getting your CSS to be the last to load
- 42. 3 New CSS Registration Properties Conditional Expression <SharePoint:CSSRegistration Name=“1.css” ConditionalExpression=“lt IE 8” runat=“server”/> Outputs <!--[if lt IE 8]> <link rel=“stylesheet” type=“text/css” href=“NonIE8.css”/> </![endif]-->
- 43. 3 New CSS Registration Properties After <SharePoint:CSSRegistration Name=“1.css” After=“2.css” runat=“server”/> <SharePoint:CSSRegistration Name=“2.css” runat=“server”/> Outputs <link rel=“stylesheet” type=“text/css” href=“2.css”/> <link rel=“stylesheet” type=“text/css” href=“1.css”/> <link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/>
- 44. 3 New CSS Registration Properties After <SharePoint:CSSRegistration Name=“1.css” After=“corev4.css” runat=“server”/> <SharePoint:CSSRegistration Name=“2.css” After=“corev4.css” runat=“server”/> Outputs <link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/> <link rel=“stylesheet” type=“text/css” href=“2.css”/> <link rel=“stylesheet” type=“text/css” href=“1.css”/>
- 45. 3 New CSS Registration Properties EnableCSSTheming Themes colors overriding your CSS Set to True by default .kanwalsclass { /* [ReplaceColor(themeColor: “Accent1”)] */ backgrond-color: red; }
- 46. MASTER PAGeS & Page LAyouts SharePoint Terminology
- 47. Master Pages + Page Layouts
- 48. Master Page Master Page Page Layout
- 49. Content Placeholders <asp:ContentPlaceholderID="PlaceHolderLeftNavBar"> runat="server" />
- 50. 48
- 51. 49
- 54. Lots and lots of styles
- 55. Mostly same list of content placeholders
- 56. Inconsistent Web Part markup injection
- 57. Same default and custom master page tokensCustom Master Pages: Copy V4.master and tweak Start with Minimal or the *Starter* Master Page
- 58. What’s new with Master Pages Placeholders the same between content and application pages Master Page changes apply to Application (_layouts) pages Greater use of DIV/CSS layouts -> Fewer Tables XHTML Strict document type Much better support for Accessibility Cross-Browser support
- 59. Master Pages
- 60. Master Pages & Page Layouts DEMO
- 61. UPGRADING YOUR DESIGNS SharePoint 2007 to SharePoint 2010
- 62. Visual Upgrade Visual upgrade allows separation of data upgrade from UI upgrade The UI mode can be changed: PSConfig during upgrade Web Application Site Collection Site Default upgrade UI mode is V3 When upgrading a content database, there is an optional parameter to preserve the old “V3” UI Allows controlling when and how you upgrade your users to the new Ribbon UI, and other new UX features
- 63. Visual Upgrade Attach a WSSv3 content database Preserve the V3 UI Preview site in V4 Upgrade site to V4 Use PowerShell to revert site back to V3 http://spbuzz.it/sp2010vu
- 64. Agenda Why Brand SharePoint? Tools for Branding Advanced Tips & Tricks Secrets to Successful Branding!
- 66. Blob Caching
- 67. CSS Sprites
- 68. Consolidate JS and CSS files
- 69. Cache JS, CSS and image files in browser
- 70. Minification of JS and CSS
- 72. Fiddler
- 74. Advanced Tips & Tricks Remove specific content from Search Results <div class=“footer noindex”/> <!--- footer content ---> </div> http://spbuzz.it/msdnspbasepermissions Security controlled content <Sharepoint:SPSecurityTrimmedControlrunat="server" Permissions="ManageWeb"> <!--- content here ---> </Sharepoint:SPSecurityTrimmedControl>
- 75. Handling Legacy Browsers Warn users when they are using an unsupported browser <SharePoint:WarnOnUnsupportedBrowsersrunat="server"/> http://spbuzz.it/ie6-upgrade-warning
- 76. Advanced Tips & Tricks Including a footer in your design? Add s4-notdlg for HTML elements that you don’t want to show in the dialog boxes <div class=“customFooter”> <div class=“customFooter s4-notdlg”>
- 77. Easily show a Favicon in SharePoint 2010 Easily show a Favicon in SharePoint 2010 SharePoint 2007 approach <link rel=“shortcut icon” href=“/Style Library/images/favicon.ico”/> SharePoint 2010 approach <SharePoint:SPShortcutIconrunat=“server” IconUrl=“/Style Library/images/favicon.ico”/>
- 78. Custom Ribbon Fonts & Styles .ms-rteStyle-BlueBackground {-ms-name:Blue Background; background-color: blue; color: white;} H1.ms-rteElement-H1Blue {-ms-name:Blue Heading 1; color: blue;}
- 79. Handling the Name.dll ActiveX Control 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. <script type="text/javascript"> function ProcessImn(){} function ProcessImnMarkers () {} </script>
- 80. 67
- 81. Want more? Content Query Web Part Data view web part in SharePoint Designer XSLT templates JQuery SPServices ClientOM 68
- 83. master pages
- 84. page layouts
- 86. XSLT
- 87. jQuery
- 89. Agenda Why Brand SharePoint? Tools for Branding Advanced Tips & Tricks Secrets to Successful Branding!
- 90. Secrets to Successful Branding Organize your content End users are more likely to use search then navigation Follow Web Standards Optimize and accessibility and standards Listen To Your Users http://spbuzz.it/iYKom7
- 91. Your Feedback Is Very Important To Me Thank you! SharePoint Branding From START to FINISH http://www.kanwalkhipple.com @kkhipple @sharepointbuzz
Hinweis der Redaktion
- Run zoomit
- how many developers do we have in the room?How many are famiiliar with html / css ?
- Nielson norman group do a study every year on what the top 10 best intranets in the world are and writes a report for what makes that successful.At the end of the session, I’ll share with you on how to make your site the best it can be – they are my secrets to successful branding.
- Please feel free to interrupt at any time to ask questionsIn 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.AUDIENCE: Developers - Power UsersTOPICS: Information Architecture - Case Studies - Tools and Technics100 - Introductory Track
- Site content is not branding. Branding is anything that is used to implement the "skin" of the user interface of the site. Branding assets can be master pages, images, or CSS files—elements that implement a corporate brand or theme.
- This ismicrosoft’s brand image. Looking at sharepoint makes you think of microsoft.When employees view your intranet or visitors view your public facing site, they should be thinking of your company’s brand not microsoft’s
- Hawaiian Air Website http://www.hawaiianair.comCase Study: How we did it http://is.gd/gvbo
- I have taken some samples from Ian Morrish’s WSS Demo Top 100 Best Looking Public SharePoint sites. My intention of putting these slides in is to give you a feeling that anything is possible. However, it’s not to say that every sharepoint site should have a wiz and bang effect.It really depends on the user base and how the site is going to be used.You would not want to put a 600px high header in a corporate internal website for 120 thousand users who really just care about getting access to their project documents.
- 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.AUDIENCE: Developers - Power UsersTOPICS: Information Architecture - Case Studies - Tools and Technics100 - Introductory Track
- http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/5-steps-for-wireframing-and-paper-prototyping-mobile-apps/
- 1 Create a new site2 Activate Wiki Page home page feature site settings > manage site features > enable Wiki Page Home Page3 Change Permissions – allow anonymous access Site settings > Users and Permissions > Site Permissions >
- Level 1Level 2
- Site actions > site settings > site themepreview changes applied with Graham theme
- http://blogs.msdn.com/b/sharepointdesigner/archive/2010/04/09/working-with-the-sharepoint-theming-engine.aspxhttp://hermansberghem.blogspot.com/2010/04/2010-how-to-apply-corporate-branding.htmlhttp://blogs.msdn.com/b/sharepointdesigner/archive/2010/04/09/working-with-the-sharepoint-theming-engine.aspxhttp://mosshowto.blogspot.com/2010/06/sharepoint-2010-registering-css.html
- Now that pages are the topic of discussion, master pages and a little branding fits in too. SharePoint 2010 ships with a number of master pages. Important topics to discuss on this slide is how application pages can now also make use of branded master pages, and how there is a default.master that ships the (non-fluent) v3 UI for backwards compatibility.SharePoint 2010 brings a few new master pages that you may want to know about. There are additional master pages to accommodate both the old and new versions of UI. There are also some simplified pages to take note in.The first master page we will talk about is v4.master. This is the default team site master page used with version 4 (obviously) of the UI. This will be the master page you typically use. It provides the ribbon bar and all of the other new visual UI changes such as the site actions menu on the left side.If you did an upgrade to SharePoint 2010 and haven’t transitioned to the new UI yet, the old master page is still in default.master. This looks just like the master page you use in SharePoint v3 today. It doesn’t have the ribbon bar and the site actions menu is still on the right side.The search pages by default now use minimal.master. This is a really slimmed down master page with next to nothing on it. It doesn’t even have navigation. I’m not sure why they opted to use this page in Search Center, but I think it provides and issue with people trying to leave the search center. The Office Web Applications also use this master page but that makes a little more sense because it provides more screen real estate.The last page I will mention is simple.master. This page is used for login and error pages. From what I understand, it can’t be customized (I have no idea why), but it can be replaced.I hope this helps if you were curious about the new master pages. I’ll also remind you again that application pages can also now make use of any branded master pages you might have created. I’ll also point out that the master pages all use properly formed XHTML although I am not sure about default.master. I will check that when I get a chance.Types of SharePoint 2010 Master Pages This section was largely derived from Quick Overview of Master Pages in SharePoint 2010 by Corey Roth v4.masterDefault team site master page. Provides ribbon bar and other UI changes.Characteristics· Site actions are updated for 2010 and appear on left.· Ribbon bar is availabledefault.masterSites upgraded from SharePoint 2007 use this unless they are changed to use a v4 version.Characteristics· Site actions on right side and are same as SharePoint 2007 version· No ribbon bar.minimal.masterMaster page contains almost nothing. It is used by the Search Center and Office Web Applications. This master should not be confused with minimal master pages from 2007 which were trimmed down custom master pages developed by users. The minimal.master is now an out-of-the box master page. These trimmed-down custom master pages are commonly referred to as Starter Master Pages in SharePoint 2010. Characteristics of minimal.masterNo navigation includedStarter Master PagesCommonly referred to as “minimal master pages” in SharePoint 2007, these quick start pages are created by developers to better enhance their ability to quickly create and customize a functional master. Sources for Starter Master PagesStarter Master Pages for SharePoint 2010 by Randy Drisgrillsimple.masterThis master is used by login and error pages. To customize these pages, a replacement page must be created and stored in the _layouts directory on the server. For more information see Default Master Pages in SharePoint on MSDN.Pages using simple.master· Login.aspx· SignOut.aspx· Error.aspx· ReqAcc.aspx· Confirmation.aspx· WebDeleted.aspx· AccessDenied.aspxOther Master PagesOther miscellaneous master pages are generally not manipulated when branding a site. These include:· application.master· applicationv4.master· dialog.master· layouts.master· layoutsv3.master· pickerdialog.master· rtedialog.master· simple.master· simplev4.master· mwsdefault.master· mwsdefaultv4.master· admin.master· popup.master
- Master Pages & Page Layouts---------------------------6 Launch SharePoint Designer and open website7 Create a new master page Browse to Master Pages library Copy and paste v4.master code into custom.master Create a new blank master page (custom.master)8 Set custom.master as site master Right click on custom.master Select “Set as Default Master Page” Select “Set as Custom Master Page”cant do this via UI -? ???? question to audiencewe are going to continue using SPD as this would apply to foundation, as well as sp in the cloud.Change page layout to Three columns with header-----------------------------------------------move image to headercopy content into three columns - show rich text editing and how it changes the html9 Create custom.css file in SiteAssets folderAdd link to css before </head><SharePoint:CssRegistration name="http://sp2010/companya/SiteAssets/custom.css" After="corev4.css" runat="server"/>Change Width------------ /* fix the width of the workspace, center it and turn off its scrollbar. Also add a default padding to the top to cope with the ribbon in its standard form */ body #s4-workspace { background: transparent; height: auto; margin: 0 auto; padding: 0px; width: 980px; overflow: auto;}width is not maintained. whats going on?<div id="s4-workspace" class="s4-nosetwidth" ../>11 Hide Quick launch--------------------- body #s4-leftpanel { display: none; } quick css solution. this allows you to manage via css when to show / hide contentplaceholders.NOTE: this hides the quick launch but we still have spacemargin via iedev toolbar.s4-ca { margin-left: 0px; }Change Top Navigation-----------------------copy images to site assets / images directory.s4-tn LI.static > .menu-item {color: #fff;height : 26px !important; border: 0px; margin: 0px; padding: 10px 0px 0px0px; text-align: center; width: 102px !important;}.s4-toplinks .s4-tn A:hover, .s4-toplinks .s4-tn A.selected { background: #757575 url('http://sp2010/companya/SiteAssets/images/topnav-on.png') repeat-x; color: #fff !important; text-decoration: none !important; }.s4-toplinks { background: #757575 url('http://sp2010/companya/SiteAssets/images/topnav-off.png') repeat-x; }12B Change search /** search area */.s4-search { padding: 5px 10px 0px 0px !important; text-align: center; }.s4-search TABLE { margin: 0px; width: 137px;}.s4-search INPUT.ms-sbplain { color: #000; border: 0px !important; float: right; width: 110px !important; }13 Cosmetic Changes /** Remove padding */ .ms-rte-layoutszone-inner { border: 0px; margin: 0px; padding: 0px } /**Hide logo / title */ .s4-titletable { display: none; } /** Hide Help button */ .s4-help { display: none; } /** remove border on title area */ .ms-titlerowborder { border-right: none; }8C Add items to Top Link Bar Store, Mac, iPod, iPhone, iPad, iTunes, Supportadd sponair.png imagemention you too can run Sharepoint 2010 on macbook air just like duxpadding on image <img alt="SharePoint 2010 on MacBook Air" src="/test/SiteAssets/images/sponair.png" style="padding-top: 5px;"/>launch site in google chrome/*** float ribbon */body.v4master { overflow: auto; }change master page / css body #s4-workspace to body #s4-myworkspaceadd overflow: hidden; to cssbody #s4-myworkspace { background: transparent; height: auto; margin: 0 auto; padding: 0px; width: 980px; overflow: hidden; }
- Use existing 2007 Master PageStart from ScratchUpgrade Master Page
- 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.AUDIENCE: Developers - Power UsersTOPICS: Information Architecture - Case Studies - Tools and Technics100 - Introductory Track
- http://www.sharepointnutsandbolts.com/2009/06/my-checklist-for-optimizing-sharepoint.html
- - Hide Ribbon <Sharepoint:SPSecurityTrimmedControlrunat="server" Permissions="ManageWeb"> before s4-ribbonrow </Sharepoint:SPSecurityTrimmedControl> before s4-myworkspaceShow this in internet explorer - authenticated userShow this in google chrome – anonymous user
- H1.ms-rteElement-H1Blue { -ms-name:Blue Heading 1; color: blue;}H3.ms-rteElement-H1Blue { -ms-name: SharePoint Fest Blue; color: blue;display:inline-block; padding-left:20px;background:transparenturl(http://sp2010/test/SiteAssets/images/spfest.png) center left no-repeat;}
- The result.This is what we created within 1 hour
- 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.AUDIENCE: Developers - Power UsersTOPICS: Information Architecture - Case Studies - Tools and Technics100 - Introductory Track
- These secrets have less to do with the what tools you are using and more to do with the how you are going to achieve and knowing your audience