0
1<br />Branding Guidance for SharePoint<br />Kanwal Khipple<br />Enterprise Architect<br />Navantis<br />
Audience<br />Introduction to Branding<br />Designers<br />Developers<br />Information Workers<br />Level 100<br />
Who am I?<br />Enterprise Architect for  Navantis<br />5 years of SharePoint consulting experience<br />MVP             fo...
Welcome!<br />What is Branding?<br />Why Brand SharePoint?<br />Real World Examples<br />New Features in SharePoint 2010<b...
What is Branding?<br />Make SharePoint Not Look Like SharePoint<br />Manage your brand image<br />Consistent User Experien...
Why Brand SharePoint?<br />
What is SharePoint Branding?<br />HTML tags<br />Images<br />Colors<br />Fonts<br />Logos<br />Styles<br />
http://www.wssdemo.com/livepivot/<br />
What’s New<br />SharePoint 2010<br />
The SharePoint 2010 User Interface<br />
WCM Features<br />Browser Support<br />WSIWYG Editor<br />Dialog Boxes<br />Status Bar<br />Notifications<br />Themes<br /...
What’s Involved?<br />Taxonomy design<br />Information Architecture<br />Wireframes<br />Design<br />Branding<br />Page La...
DEMO<br />SharePoint 2010<br />
MASTER PAGe<br />SharePoint Terminology<br />
Top Navigation<br />Content Frame<br />Footer<br />
Master Pages<br />
Pages using simple.master<br />Login.aspx<br />SignOut.aspx<br />Error.aspx<br />ReqAcc.aspx<br />Confirmation.aspx<br />W...
Other Master Pages<br />Other miscellaneous master pages are generally not manipulated when branding a site. <br />These i...
What’s new with Master Pages<br />Changes to Master Pages:<br />Placeholders the same between content and application page...
Lots and lots of styles
Mostly same list of content placeholders
Inconsistent Web Part markup injection
Same default and custom master page tokens</li></ul>Custom Master Pages:<br />Copy V4.master and tweak<br />Start with Min...
PAGe Layout<br />SharePoint Terminology<br />
Page Layouts<br />
Themes<br />SharePoint Terminology<br />
Anatomy of Themes<br />Location: 14TemplateGlobalListsThemes<br />Packaged using Office Open XML format (.THMX)<br />
Putting it All Together<br />
DEMO<br />SharePoint Master Pages<br />
CUSTOMIZATION OPTIONS<br />
Customization Options<br />In-browser editing<br />E.g. Apply a different master page, hide and target navigational links<...
3 Approaches to Branding<br />Out-of-the-box customization by selecting different themes<br />Customize an instance of a s...
Master Pages<br />Three ways to build the custom master pages:<br />From scratch<br />Not recommended as SharePoint 2007 n...
Tools<br />SharePoint Designer 2010<br />Visual Studio 2010<br />Photoshop<br />Balsamiq Mockups<br />Notepad++<br />Suppo...
Wireframes<br />Paper Prototyping Comes First<br />Wireframes Come Second and Must be Shared<br />
DEMO<br />Building a site from scratch<br />
UPGRADING YOUR DESIGNS<br />SharePoint 2007 to SharePoint 2010<br />
Visual Upgrade<br />Visual upgrade allows separation of data upgrade from UI upgrade<br />The UI mode can be changed:<br /...
Visual Upgrade<br />Attach a WSSv3 content database<br />Preserve the V3 UI<br />Preview site in V4<br />Upgrade site to V...
ADVANCED TIPS<br />SharePoint 2010<br />
Accessibility<br />Built-in support for keyboard navigation<br />Web Content Accessibility Guidelines 2.0, WCAG 2.0, and s...
Usability<br />
Advanced Tips & Tricks<br />Show content based on UI version<br /><SharePoint:UIVersionedContentrunat="server" UIVersion="...
DEMO<br />SharePoint Advanced Tips<br />
Performance<br />Goals<br /><ul><li>Reduce page weight</li></ul>Techniques<br />Output Caching<br />Blob Caching<br />Ensu...
Performance<br />CSS Sprites<br />Reduces number of images downloaded from the client browser <br />improves the overall p...
Performance<br />Cache JS, CSS and image files in browser <br />Files hosted in SharePoint layouts folder can use MakeBrow...
Upcoming SlideShare
Loading in...5
×

SharePoint Branding Guidance @ SharePoint Saturday San Diego

2,671

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,671
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
96
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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&apos;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&apos;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 &quot;skin&quot; 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 &gt; Users and Permissions &gt; Site Permissions &gt;
  • 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&amp;utm_medium=feed&amp;utm_campaign=Feed%3A+HermansBerghem+%28Serv%C3%A9%27s+Sharepoint+blog%29&amp;utm_content=Google+Reader/* [ReplaceColor(themeColor:&quot;Dark2&quot;)] */ 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 &amp; 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 &amp; 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 &amp; 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.
  • Transcript of "SharePoint Branding Guidance @ SharePoint Saturday San Diego"

    1. 1. 1<br />Branding Guidance for SharePoint<br />Kanwal Khipple<br />Enterprise Architect<br />Navantis<br />
    2. 2. Audience<br />Introduction to Branding<br />Designers<br />Developers<br />Information Workers<br />Level 100<br />
    3. 3. Who am I?<br />Enterprise Architect for Navantis<br />5 years of SharePoint consulting experience<br />MVP for SharePoint Server<br />Contact Details<br />http://www.kanwalkhipple.com<br />kanwal@khipple.com<br />@kkhipple on twitter<br />416-888-7777<br />
    4. 4. Welcome!<br />What is Branding?<br />Why Brand SharePoint?<br />Real World Examples<br />New Features in SharePoint 2010<br />OOTB Customization<br />Tools for Branding<br />Gathering Requirements<br />Upgrade Guidance<br />
    5. 5.
    6. 6. What is Branding?<br />Make SharePoint Not Look Like SharePoint<br />Manage your brand image<br />Consistent User Experience<br />6<br />
    7. 7. Why Brand SharePoint?<br />
    8. 8. What is SharePoint Branding?<br />HTML tags<br />Images<br />Colors<br />Fonts<br />Logos<br />Styles<br />
    9. 9.
    10. 10.
    11. 11.
    12. 12.
    13. 13. http://www.wssdemo.com/livepivot/<br />
    14. 14. What’s New<br />SharePoint 2010<br />
    15. 15. The SharePoint 2010 User Interface<br />
    16. 16. WCM Features<br />Browser Support<br />WSIWYG Editor<br />Dialog Boxes<br />Status Bar<br />Notifications<br />Themes<br />Server Ribbon<br />Rich AJAX Interactions<br />Managed Metadata Service<br />Tagging & Rating<br />Content Organizer<br />Client OM<br />
    17. 17. What’s Involved?<br />Taxonomy design<br />Information Architecture<br />Wireframes<br />Design<br />Branding<br />Page Layouts<br />Master Pages<br />HTML, CSS, JavaScript<br />
    18. 18. DEMO<br />SharePoint 2010<br />
    19. 19. MASTER PAGe<br />SharePoint Terminology<br />
    20. 20. Top Navigation<br />Content Frame<br />Footer<br />
    21. 21.
    22. 22. Master Pages<br />
    23. 23. Pages using simple.master<br />Login.aspx<br />SignOut.aspx<br />Error.aspx<br />ReqAcc.aspx<br />Confirmation.aspx<br />WebDeleted.aspx<br />AccessDenied.aspx<br />
    24. 24. Other Master Pages<br />Other miscellaneous master pages are generally not manipulated when branding a site. <br />These include:<br />
    25. 25. What’s new with Master Pages<br />Changes to Master Pages:<br />Placeholders the same between content and application pages<br />Application (_layouts) pages use same site master pages<br />Greater use of DIV/CSS layouts vs. Table Layouts<br />XHTML Strict document type<br />Much better support for Accessibility<br />Cross-Browser support<br />CodePlex: Starter Master Page for SP2010<br />http://startermasterpages.codeplex.com/<br />What has not changed:<br /><ul><li>Complex nested page structures
    26. 26. Lots and lots of styles
    27. 27. Mostly same list of content placeholders
    28. 28. Inconsistent Web Part markup injection
    29. 29. 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 />
    30. 30. PAGe Layout<br />SharePoint Terminology<br />
    31. 31. Page Layouts<br />
    32. 32.
    33. 33. Themes<br />SharePoint Terminology<br />
    34. 34.
    35. 35. Anatomy of Themes<br />Location: 14TemplateGlobalListsThemes<br />Packaged using Office Open XML format (.THMX)<br />
    36. 36. Putting it All Together<br />
    37. 37. DEMO<br />SharePoint Master Pages<br />
    38. 38. CUSTOMIZATION OPTIONS<br />
    39. 39. Customization Options<br />In-browser editing<br />E.g. Apply a different master page, hide and target navigational links<br />SharePoint Designer<br />E.g. Create a new master pages, change the style of the navigation<br />Visual Studio 2010<br />E.g. Create custom Web parts, build custom workflows<br />
    40. 40. 3 Approaches to Branding<br />Out-of-the-box customization by selecting different themes<br />Customize an instance of a site template using SharePoint Designer<br />Customize a site by Site Definitions and Visual Studio<br />
    41. 41. Master Pages<br />Three ways to build the custom master pages:<br />From scratch<br />Not recommended as SharePoint 2007 needs a few placeholders to be present in the master page or else the pages will not work.<br />From minimal.master<br />Not recommended for a collaboration intranet<br />You want to use OOB features and controls<br />From default.master<br />Recommended as it provides most of the collaborative controls already present on the master page<br />Master page does have a learning curve though<br />
    42. 42. Tools<br />SharePoint Designer 2010<br />Visual Studio 2010<br />Photoshop<br />Balsamiq Mockups<br />Notepad++<br />Supported Browsers (http://bit.ly/sp2010browsers)<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 />
    43. 43. Wireframes<br />Paper Prototyping Comes First<br />Wireframes Come Second and Must be Shared<br />
    44. 44. DEMO<br />Building a site from scratch<br />
    45. 45. UPGRADING YOUR DESIGNS<br />SharePoint 2007 to SharePoint 2010<br />
    46. 46. 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 />
    47. 47. 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 />
    48. 48. ADVANCED TIPS<br />SharePoint 2010<br />
    49. 49. Accessibility<br />Built-in support for keyboard navigation<br />Web Content Accessibility Guidelines 2.0, WCAG 2.0, and set a goal for Level AA.<br />perceivable, operable, understandable, and robust<br />Proper use of heading structures (H1, DIV, SPAN, etc.)<br />informational, organizational, and navigational benefits<br />Improved language support <br />Support for browser zoom settings and OS increase font sizes<br />Dramatically improved the cross-browser support - Doc Types and specify CSS-standards rendering for the master pages<br />Rich text editor - clean markup and a function to convert its content into XHTML.<br />
    50. 50. Usability<br />
    51. 51. Advanced Tips & Tricks<br />Show content based on UI version<br /><SharePoint:UIVersionedContentrunat="server" UIVersion="<=3"><br />Security controlled content<br /><Sharepoint:SPSecurityTrimmedControlrunat="server" Permissions="ManageWeb"><br />Warn users when they are using an unsupported browser<br /><SharePoint:WarnOnUnsupportedBrowsersrunat="server"/><br />
    52. 52. DEMO<br />SharePoint Advanced Tips<br />
    53. 53. Performance<br />Goals<br /><ul><li>Reduce page weight</li></ul>Techniques<br />Output Caching<br />Blob Caching<br />Ensure not downloading core.js etc for anonymous users/delay-loading for authenticated.<br />Tools<br />YSlow<br />
    54. 54. Performance<br />CSS Sprites<br />Reduces number of images downloaded from the client browser <br />improves the overall page loading speed<br />Consolidate JS and CSS files<br />multiple JS or CSS files into single large file <br />improve the overall resource load times<br />Group CSS files by Browser type<br />Anonymous access for CSS, JS and image files<br />
    55. 55. Performance<br />Cache JS, CSS and image files in browser <br />Files hosted in SharePoint layouts folder can use MakeBrowserCacheSafeLayoutsUrl() function to render unique url<br />Minificationof JS and CSS<br />removes extra characters and spaces in the JS & CSS files to reduce the file size <br />improve the download speed<br />Include JS files and CSS files in the header<br />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<br />
    56. 56. Professional SharePoint 2010 Branding and User Interface Design<br /><ul><li>CSS
    57. 57. master pages
    58. 58. page layouts
    59. 59. SharePoint themes
    60. 60. XSLT
    61. 61. jQuery
    62. 62. Silverlight </li></ul>Provides expert tips, techniques, and insights from the author team of SharePoint 2010 branding experts <br />
    63. 63. SharePoint Branding<br />SharePoint can be transformed <br />into whatever you want<br />
    64. 64. Your Feedback Is Very Important To Me<br />SharePoint Saturday San Diego 2011<br />Topic: SharePoint Branding Guidance<br />http://www.kanwalkhipple.com<br />kanwal@khipple.com<br />@kkhipple<br />Thank you! <br />
    1. A particular slide catching your eye?

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

    ×