Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1<br />SharePoint Branding Guidance<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 />Tools for Branding<br />New Features in SharePoint 2010<br...
What is Branding?<br />HTML tags<br />Images<br />Colors<br />Fonts<br />Logos<br />Styles<br />
Why Brand SharePoint?<br />
Why Brand SharePoint?<br />Make SharePoint Not Look Like SharePoint<br />Manage your brand image<br />Consistent User Expe...
http://www.wssdemo.com/livepivot/<br />
What’s New<br />SharePoint 2010<br />
The SharePoint 2010 User Interface<br />
WCM Features<br />Better Browser Support<br />WSIWYG Editor<br />Dialog Boxes<br />Status Bar<br />Notifications<br />Them...
Accessibility Improvements<br />Built-in support for keyboard navigation<br />Web Content Accessibility Guidelines 2.0, WC...
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 />Balsamiq Mockup<br />
What’s Involved?<br />Taxonomy design<br />Information Architecture<br />Wireframes<br />Design<br />Branding<br />Page La...
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...
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...
DEMO<br />SharePoint Master Pages<br />
PAGe Layout<br />SharePoint Terminology<br />
Page Layouts<br />
Putting it All Together<br />
Themes<br />SharePoint Terminology<br />
/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;<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...
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 />
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...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
SharePoint Authentication and Authorization presented by Liam Cleary
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

SharePoint Branding Guidance @ SharePoint Saturday Redmond

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

SharePoint Branding Guidance @ SharePoint Saturday Redmond

  1. 1. 1<br />SharePoint Branding Guidance<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 />Tools for Branding<br />New Features in SharePoint 2010<br />Real World Examples<br />OOTB Customization<br />Upgrade Guidance<br />Recommendations<br />
  5. 5.
  6. 6. What is Branding?<br />HTML tags<br />Images<br />Colors<br />Fonts<br />Logos<br />Styles<br />
  7. 7.
  8. 8.
  9. 9. Why Brand SharePoint?<br />
  10. 10. Why Brand SharePoint?<br />Make SharePoint Not Look Like SharePoint<br />Manage your brand image<br />Consistent User Experience<br />10<br />
  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 />Better 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. Accessibility Improvements<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 />
  18. 18. 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 />
  19. 19. Wireframes<br />Paper Prototyping Comes First<br />Wireframes Come Second and Must be Shared<br />
  20. 20. DEMO<br />Balsamiq Mockup<br />
  21. 21. 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 />
  22. 22. MASTER PAGe<br />SharePoint Terminology<br />
  23. 23. Top Navigation<br />Content Frame<br />Footer<br />
  24. 24.
  25. 25. Master Pages<br />
  26. 26. 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 />
  27. 27. 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 />What has not changed:<br /><ul><li>Complex nested page structures
  28. 28. Lots and lots of styles
  29. 29. Mostly same list of content placeholders
  30. 30. Inconsistent Web Part markup injection
  31. 31. 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 />
  32. 32. DEMO<br />SharePoint Master Pages<br />
  33. 33. PAGe Layout<br />SharePoint Terminology<br />
  34. 34. Page Layouts<br />
  35. 35. Putting it All Together<br />
  36. 36.
  37. 37. Themes<br />SharePoint Terminology<br />
  38. 38. /* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;<br />
  39. 39. CUSTOMIZATION OPTIONS<br />
  40. 40. 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 />
  41. 41. 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 />Enterprise solutions<br />Multi-server farm<br />
  42. 42. 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 />2BCodePlex: Starter Master Page for SP2010<br />http://startermasterpages.codeplex.com/<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 />
  43. 43. DEMO<br />Building a site from scratch<br />
  44. 44. UPGRADING YOUR DESIGNS<br />SharePoint 2007 to SharePoint 2010<br />
  45. 45. 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 />
  46. 46. 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 />
  47. 47. ADVANCED TIPS<br />SharePoint 2010<br />
  48. 48. 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 />Remove specific content from Search Results<br />Add noindexcss class to specific content<br /><div class=“noindex” …/><br />
  49. 49. DEMO<br />SharePoint Advanced Tips<br />
  50. 50. 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 />
  51. 51. 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 />Anonymous access for CSS, JS and image files<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 />Minification of 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 />
  52. 52. Professional SharePoint 2010 Branding and User Interface Design<br /><ul><li>CSS
  53. 53. master pages
  54. 54. page layouts
  55. 55. SharePoint themes
  56. 56. XSLT
  57. 57. jQuery
  58. 58. Silverlight </li></ul>Provides expert tips, techniques, and insights from the author team of SharePoint 2010 branding experts <br />
  59. 59. Secret to Success in Branding<br />Fail to plan, is a plan to fail<br />- Unknown<br />
  60. 60. Your Feedback Is Very Important To Me<br />SharePoint Saturday Redmond 2011<br />Topic: SharePoint Branding Guidance<br />http://www.kanwalkhipple.com<br />kanwal@khipple.com<br />Twitter @kkhipple<br />@sharepointbuzz<br />Thank you! <br />
  • suvros

    Aug. 8, 2014

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.

Views

Total views

3,820

On Slideshare

0

From embeds

0

Number of embeds

8

Actions

Downloads

112

Shares

0

Comments

0

Likes

1

×