SharePoint Branding Guidance @ SharePoint Saturday San Diego
•Télécharger en tant que PPTX, PDF•
2 j'aime•1,600 vues
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.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à SharePoint Branding Guidance @ SharePoint Saturday San Diego
Similaire à SharePoint Branding Guidance @ SharePoint Saturday San Diego (20)
Plus de Kanwal Khipple
Plus de Kanwal Khipple (20)
Dernier
Dernier (20)
SharePoint Branding Guidance @ SharePoint Saturday San Diego
- 1. 1 Branding Guidance for SharePoint Kanwal Khipple Enterprise Architect Navantis
- 2. Audience Introduction to Branding Designers Developers Information Workers Level 100
- 3. Who am I? Enterprise Architect for Navantis 5 years of SharePoint consulting experience MVP for SharePoint Server Contact Details http://www.kanwalkhipple.com kanwal@khipple.com @kkhipple on twitter 416-888-7777
- 4. Welcome! What is Branding? Why Brand SharePoint? Real World Examples New Features in SharePoint 2010 OOTB Customization Tools for Branding Gathering Requirements Upgrade Guidance
- 6. What is Branding? Make SharePoint Not Look Like SharePoint Manage your brand image Consistent User Experience 6
- 8. What is SharePoint Branding? HTML tags Images Colors Fonts Logos Styles
- 14. What’s New SharePoint 2010
- 15. The SharePoint 2010 User Interface
- 16. WCM Features Browser Support WSIWYG Editor Dialog Boxes Status Bar Notifications Themes Server Ribbon Rich AJAX Interactions Managed Metadata Service Tagging & Rating Content Organizer Client OM
- 17. What’s Involved? Taxonomy design Information Architecture Wireframes Design Branding Page Layouts Master Pages HTML, CSS, JavaScript
- 19. MASTER PAGe SharePoint Terminology
- 20. Top Navigation Content Frame Footer
- 22. Master Pages
- 23. Pages using simple.master Login.aspx SignOut.aspx Error.aspx ReqAcc.aspx Confirmation.aspx WebDeleted.aspx AccessDenied.aspx
- 24. Other Master Pages Other miscellaneous master pages are generally not manipulated when branding a site. These include:
- 26. Lots and lots of styles
- 27. Mostly same list of content placeholders
- 28. Inconsistent Web Part markup injection
- 29. Same default and custom master page tokensCustom Master Pages: Copy V4.master and tweak Start with Minimal or the *Starter* Master Page
- 30. PAGe Layout SharePoint Terminology
- 31. Page Layouts
- 35. Anatomy of Themes Location: 14emplatelobalistshemes Packaged using Office Open XML format (.THMX)
- 36. Putting it All Together
- 37. DEMO SharePoint Master Pages
- 39. Customization Options In-browser editing E.g. Apply a different master page, hide and target navigational links SharePoint Designer E.g. Create a new master pages, change the style of the navigation Visual Studio 2010 E.g. Create custom Web parts, build custom workflows
- 40. 3 Approaches to Branding Out-of-the-box customization by selecting different themes Customize an instance of a site template using SharePoint Designer Customize a site by Site Definitions and Visual Studio
- 41. Master Pages Three ways to build the custom master pages: From scratch Not recommended as SharePoint 2007 needs a few placeholders to be present in the master page or else the pages will not work. From minimal.master Not recommended for a collaboration intranet You want to use OOB features and controls From default.master Recommended as it provides most of the collaborative controls already present on the master page Master page does have a learning curve though
- 42. Tools SharePoint Designer 2010 Visual Studio 2010 Photoshop Balsamiq Mockups Notepad++ Supported Browsers (http://bit.ly/sp2010browsers) Internet Explorer 7 & 8 (32-bit) IE Dev Toolbar (embedded in IE8) Mozilla Firefox 3.6 FireBug (addon to Firefox) Safari 4.04
- 43. Wireframes Paper Prototyping Comes First Wireframes Come Second and Must be Shared
- 44. DEMO Building a site from scratch
- 45. UPGRADING YOUR DESIGNS SharePoint 2007 to SharePoint 2010
- 46. 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
- 47. 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
- 48. ADVANCED TIPS SharePoint 2010
- 49. Accessibility Built-in support for keyboard navigation Web Content Accessibility Guidelines 2.0, WCAG 2.0, and set a goal for Level AA. perceivable, operable, understandable, and robust Proper use of heading structures (H1, DIV, SPAN, etc.) informational, organizational, and navigational benefits Improved language support Support for browser zoom settings and OS increase font sizes Dramatically improved the cross-browser support - Doc Types and specify CSS-standards rendering for the master pages Rich text editor - clean markup and a function to convert its content into XHTML.
- 50. Usability
- 51. Advanced Tips & Tricks Show content based on UI version <SharePoint:UIVersionedContentrunat="server" UIVersion="<=3"> Security controlled content <Sharepoint:SPSecurityTrimmedControlrunat="server" Permissions="ManageWeb"> Warn users when they are using an unsupported browser <SharePoint:WarnOnUnsupportedBrowsersrunat="server"/>
- 52. DEMO SharePoint Advanced Tips
- 54. Performance CSS Sprites Reduces number of images downloaded from the client browser improves the overall page loading speed Consolidate JS and CSS files multiple JS or CSS files into single large file improve the overall resource load times Group CSS files by Browser type Anonymous access for CSS, JS and image files
- 55. Performance Cache JS, CSS and image files in browser Files hosted in SharePoint layouts folder can use MakeBrowserCacheSafeLayoutsUrl() function to render unique url Minificationof JS and CSS removes extra characters and spaces in the JS & CSS files to reduce the file size improve the download speed Include JS files and CSS files in the header all script references in head tag are loaded after the page is loaded and references in body tag are loaded at the time page load
- 57. master pages
- 58. page layouts
- 60. XSLT
- 61. jQuery
- 62. Silverlight Provides expert tips, techniques, and insights from the author team of SharePoint 2010 branding experts
- 63. SharePoint Branding SharePoint can be transformed into whatever you want
- 64. Your Feedback Is Very Important To Me SharePoint Saturday San Diego 2011 Topic: SharePoint Branding Guidance http://www.kanwalkhipple.com kanwal@khipple.com @kkhipple Thank you!
Notes de l'éditeur
- 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
- 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.
- Why brand sharepoint?Builds user loyaltyConnects people emotionallyDelivers your message clearly
- 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.
- Launch
- Show the sharepoint demo siteCreate a new siteActivate Wiki Page home page featureChange page layout to Three columns with headerAdd items to Top Link BarChange Permissions – allow anonymous accessSite settings > Users and Permissions > Site Permissions >
- 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
- If your master page has errors, you will get errors. If you have errors then visiting some critical pages like Settings.aspx, sharepoint will revert back to the default.master
- http://hermansberghem.blogspot.com/2010/04/2010-how-to-apply-corporate-branding.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+HermansBerghem+%28Serv%C3%A9%27s+Sharepoint+blog%29&utm_content=Google+Reader/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;
- In SharePoint 2007, themes were a collection of CSS, Images and Theme information files stored relative to the SharePoint Root folder at 12\\Template\\Themes. In SharePoint 2010, you can still find the original SharePoint 2007 themes, for legacy reasons, in the same relative folder under 14\\Template\\Themes.Themes in SharePoint 2010 however, are now stored relative to the SharePoint Root folder under 14\\Template\\Global\\Lists\\Themes. The format has changed considerably as well. Themes are now packaged using the Office Open XML format as .THMX filesTHMX files are ZIP files that combine XML definitions for the theme styles, and image resources according to the standards. A full description of the internals of a Theme file is beyond the scope of this post, but you can read Creating Document Themes with the Office Open XML Formats on MSDN for more information.SharePoint 2010 monitors changes of themes. So, when a preinstalled theme is modified, a new theme called Custom is created automatically after the theme changes have been applied.There can only be one Custom theme for a site. SharePoint Server 2010 does not provide a way to save themes within the user interface. If you modify a preinstalled theme, apply the changes (thereby creating a new theme called Custom), and then modify a second preinstalled theme, the second preinstalled theme becomes the Custom theme when the settings are applied.To have multiple custom themes, you must create and upload your own custom themes to the theme gallery for the site collection.
- Create new master pageChange page layoutShow theme menu and default theme selected works for our scenario
- Google Chrome
- http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/5-steps-for-wireframing-and-paper-prototyping-mobile-apps/
- Use existing 2007 Master PageStart from ScratchUpgrade Master Page
- http://www.sharepointnutsandbolts.com/2009/06/my-checklist-for-optimizing-sharepoint.html
- CSS Sprites - are built by grouping small images into one large image and referring part of the image using CSS class. This reduces number of images downloaded from the client browser and improves the overall page loading speed. More details on CSS sprites can be found at http://css-tricks.com/css-sprites/. Since, CSS sprites are not supported in IE6, it cannot be used in organizations that still support IE6.Consolidate JS and CSS files - Since number of HTTP requests are more expensive than downloading single large file, consolidating multiple JS or CSS files into single large file would improve the overall resource load times. Also, we observed that combining most commonly used files together yielded better performance (combining too many files may adversely impact the download speed & processing performance due to large file size).Group CSS files by Browser type - Since, browser type is unique for each customer request, we observed it as the best way to combine the commonly used CSS files. Also, CSS expressions were avoided due to performance concerns.Anonymous access for CSS, JS and image files - Since NTLM requests require at least one additional roundtrip (typically for 401 unauthorized responses), enabling anonymous access to unsecure branding resources reduces the number of roundtrips and improves the page download speeds.Also, when SharePoint return “401 unauthorized” response, it includes the entire Error page response (see in Fiddler), reducing the size of “401 unauthorized” page would reduce the response payload and reduce bandwidth utilization.Cache JS, CSS and image files in browser - Since SharePoint supports this natively, no additional work is required to cache the resource files. However, if the resource files are dynamic in nature (changes with releases) then these resources should be accessed using unique querystring to invalidate the browser cache.In our implementation, to ensure unique query string for JS & CSS files, a simple HTTP handler was implemented to render unique query string based on file checksum. Files hosted in SharePoint layouts folder can use MakeBrowserCacheSafeLayoutsUrl() function to render unique url.Avoid Minification of JS and CSS - Minification removes extra characters and spaces in the JS & CSS files to reduce the file size and to improve the download speed. However, when the file is compressed, the minified file has little or no change in the download. Also, a minified file is harder to troubleshoot than a regular file. So, Minification was avoided for better maintainability.Include JS files and CSS files in the header - Since browser interpret HTML head content and body content differently, i.e., all script references in head tag are loaded after the page is loaded and references in body tag are loaded at the time page load, reducing the referenced content in body improves the page rendering experience. This is achieved - by referencing all required scripts at the time of page load in body tag and rest of them in the head tag. CSS files are always referenced in head tag.