This document discusses branding and customizing the look and feel of SharePoint sites. It provides tips for taking a pragmatic approach to SharePoint branding that focuses on making compromises where necessary to work within SharePoint's limitations. Some key points include embracing tables and removing doctype declarations, putting assets in the Style Library, using divs sparingly, and overriding core styles. The design process is also discussed and modified to better suit SharePoint projects by focusing on specific page structures during planning, approval, and development. CSS and HTML techniques are presented, emphasizing organization, commenting code, and avoiding outdated practices. Layout pages can help provide structure and variations to web part pages. SharePoint 2010 is noted as being more standards compliant but still requiring

1. SharePoint branding The Pragmatist’s Approach prag·ma·tist [prag-muh-tist] –noun 1. a person who is oriented toward the success or failure of a particular line of action, thought, etc.; a practical person.

2. About Me Who: Stu King – User Experience Designer Where: Magenic Studios – Magenic Technologies, Inc. Focused on Design, User Experience Analysis and RIA development What: SharePoint Technical Specialist What the?: Beating SharePoint into submission since 2003 On the web: www.thedesigndrifter.com On the twitter: @designdrifter

3. Learning Objectives Understand the do’s and don’ts of SharePoint branding Learn techniques that will help your productivity and sanity Discover how the design process can be adapted to better suit SharePoint branding projects Identify tools you can use to make your job easier, or at least more interesting

4. Rules of engagement How to not go crazy

5. The Dream “We will write standards compliant markup that will shine in HTML and CSS validation tools. Design innovation is key. It’s not necessary or wise to design with SharePoint in mind if you want really cutting edge design.”

6. The Reality “We will do our best to create standards compliant markup, when possible, understanding that SharePoint doesn’t care about our desires. We understand that as interesting as this new design is, making it work in SharePoint could cause our staff to step out on a ledge and perhaps it’s better to make some compromises.”

7. The Pragmatist’s “Concepts to Embrace” Don’t waste time - Standards compliant markup is impossible Deviation from established design process does not equal failure, where SharePoint is concerned it’s a necessity Your approach to cross-browser compatibility should adapt to your situation – internal vs. external

8. The Conventional Rules of SharePoint Branding Don’t delete controls from pages Avoid inline styles when you can Don’t modify core styles Understand how SharePoint renders a page Core classes Page level classes Inline classes

9. The Pragmatist’s Rules of SharePoint Branding Embrace the <table> Remove DOCTYPE declarations, trust me Put your design assets and style sheets in the Style Library Use <div> for the larger framework of your site but try not to use too many of them Use a Base or Starter master page whenever you can IE Developer Toolbar is your friend You will almost always have to override some core classes Learn how to use conditional comments to load custom style sheets for versions of IE You can’t always control the mess but you can control how it looks, format and comment!

10. Design Process and SharePoint You can apply the rules of Design Process to SharePoint…mostly

15. Collaboration activities

16. Publishing activities

17. Blogging and Social Media

18. Site Owners

19. Contributors

21. Page Layout – There will be multiple layouts. Wireframes and content inventories are good inputs

23. Page Design – Create page design wireframes and mockups based on approved master page styles

26. Internet Explorer Developer Tool Bar

27. A good web editor, I like Expression Web

29. Screen Ruler – Great for measuring mockups without the overhead of PhotoShop

30. MS Super Preview – browser test IE5, 6, 7, 8 and Fire Fox from one application

33. Only SharePoint Controls are left

38. Front-end Development Techniques (CSS tips) Most of your custom branding work will be done in CSS, so make sure you get familiar! Organize your code, you can do it your way but make sure you always do it. Most of your SharePoint class overrides will be associated with modifications to how web parts display. Keep notes on how you did things just in case you need to do it again. SharePoint class names are case sensitive

39. CSS SharePoint Class Override DEMO

41. Header

42. Navigation

43. Main

44. Sidebar

49. LAYOUT PAGES

53. Questions and… Thank you for your time and attention