1. Branding Essentials
For Developers
Derek Cash-Peterson

2. Who the heck is this guy?
• SharePoint Developer
• Information Architect
• User Experience
Designer
• The Branding Guy
• Agency Background
Derek Cash-Peterson
dcash-peterson@sentri.com
twitter: @spdcp
Blog: http://blogs.sentri.com/branding
www.sentri.com

3. I take this…

4. And turn it into this…

5. Or this…

6. What this session is
• Developer focused
• WCM focused
• A look at the building blocks to creating a
custom branded solution in SharePoint

7. What this session is not
• A session about jQuery, CSS, and HTML 5
• Check out Mark Rackley tomorrow 9:45
jQuery and SharePoint

8. Agenda
• What does it mean to “Brand” SharePoint?
• Getting from design to SharePoint.
• What are the custom components?
• Deployment
• Common Tools

10. Why would you brand SharePoint
• Governance
• User Experience
• Messaging

11. How do you do it
• Three ways to do it.
– Themes (low)
– Purchased packages or custom css (medium)
– Custom MasterPages & PageLayouts (high)

13. Getting from design to SharePoint
• Information Architecture
• Site Map
• Solution Design
• Design Comp
• HTML Comp

14. Information Architecture

15. Information Architecture

16. Information Architecture

17. Design Comp

18. HTML Comp

19. Custom Components
• Site Columns & Content Types
• Branding Files
• WebParts

20. Site Columns and Content Types
• Reference OOB where you can (14 hive)
– Fields
– Ctypes
– PublishingResources
• Leverage the Page Content Type
• PublishingContent & PublishingImage

21. Demo: Content Types & Site Columns

22. Branding
• MasterPages
• PageLayouts
• Javascript
• CSS
• Images

23. Demo: MasterPages & PageLayouts

24. WebParts
• Use OOB when you can
• CQWP and RSS feed are your friends
• Build a tool of commonly used components

25. Demo: WebParts

26. Don’t fear the Site Definition
• Enforce governance policies
• Make navigation consistent across site
• Limit available site templates and page layouts
• Idiot-proof your site

27. Demo: Site Definitions

28. Deployment Guidelines
• WSP: All the way
• Sandboxed solutions
• Site Assets
– Styles Library vs 14 hive
• Activate Branding features via PowerShell on
development environment

29. The Devil is in the details
• Learn to use PhotoShop
• Use more than one browser
• Make sure things line up and match the comps
• Invite the design team to help with a visual QA

30. Tools
• Firebug/IE Dev • Jquery
Toolbar
• SPServices/SPXSLT
• Yslow
• U2U CAML Creator
• Fiddler
• SPManager
• SPDisposeCheck

31. Handy Information
• Useful Links
– Derek Cash-Peterson
– dcash-peterson@sentri.com
– @spdcp
– http://blogs.sentri.com/branding
• References
– Starter MasterPages http://bit.ly/7UDZbb
• Randy Drisgill
– SPServices/SPXSLT http://bit.ly/12gHek
• Marc Anderson
• @sympmarc
– OOB Styles http://bit.ly/q4c8Fz
• Heather Solomon