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. At the end of the session, I walk users through branding a SharePoint site from scratch!

1. SharePoint Branding Guidance 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 http://www.sharepointbuzz.com @sharepointbuzz on twitter 416-888-7777 http://www.sharepointbuzz.com @sharepointbuzz on twitter

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

7. Why Brand SharePoint?

8. What is SharePoint Branding? HTML tags Images Colors Fonts Logos Styles

13. http://www.wssdemo.com/livepivot/

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

18. DEMO SharePoint 2010

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

33. Themes SharePoint Terminology

35. Anatomy of Themes Location: 14emplatelobalistshemes Packaged using Office Open XML format (.THMX)

36. Putting it All Together

37. DEMO SharePoint Master Pages

38. CUSTOMIZATION OPTIONS

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. 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

41. 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

42. Wireframes Paper Prototyping Comes First Wireframes Come Second and Must be Shared

43. DEMO Building a site from scratch

44. UPGRADING YOUR DESIGNS SharePoint 2007 to SharePoint 2010

45. 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

46. 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 Visual Upgrade

47. ADVANCED TIPS SharePoint 2010

48. 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.

49. 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"/>

50. DEMO SharePoint Advanced Tips

52. 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

53. 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

55. master pages

56. page layouts

57. SharePoint themes

58. XSLT

59. jQuery

60. Silverlight Provides expert tips, techniques, and insights from the author team of SharePoint 2010 branding experts

61. SharePoint Branding SharePoint can be transformed into whatever you want

62. Your Feedback Is Very Important To Me Toronto SharePoint Summit 2011 Topic: SharePoint Branding Guidance http://www.kanwalkhipple.com Thank you!