Branding Essentials for Developers presentation at TEC2012

704 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
704
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Branding Essentials for Developers presentation at TEC2012

  1. 1. Branding Essentials For DevelopersDerek Cash-Peterson
  2. 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. 3. I take this…
  4. 4. And turn it into this…
  5. 5. Or this…
  6. 6. What this session is• Developer focused• WCM focused• A look at the building blocks to creating a custom branded solution in SharePoint
  7. 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. 8. Agenda• What does it mean to “Brand” SharePoint?• Getting from design to SharePoint.• What are the custom components?• Deployment• Common Tools
  9. 9. Why would you brand SharePoint• Governance• User Experience• Messaging
  10. 10. How do you do it• Three ways to do it. – Themes (low) – Purchased packages or custom css (medium) – Custom MasterPages & PageLayouts (high)
  11. 11. Getting from design to SharePoint• Information Architecture• Site Map• Solution Design• Design Comp• HTML Comp
  12. 12. Information Architecture
  13. 13. Information Architecture
  14. 14. Information Architecture
  15. 15. Design Comp
  16. 16. HTML Comp
  17. 17. Custom Components• Site Columns & Content Types• Branding Files• WebParts
  18. 18. Site Columns and Content Types• Reference OOB where you can (14 hive) – Fields – Ctypes – PublishingResources• Leverage the Page Content Type• PublishingContent & PublishingImage
  19. 19. Demo: Content Types & Site Columns
  20. 20. Branding• MasterPages• PageLayouts• Javascript• CSS• Images
  21. 21. Demo: MasterPages & PageLayouts
  22. 22. WebParts• Use OOB when you can• CQWP and RSS feed are your friends• Build a tool of commonly used components
  23. 23. Demo: WebParts
  24. 24. 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
  25. 25. Demo: Site Definitions
  26. 26. Deployment Guidelines• WSP: All the way• Sandboxed solutions• Site Assets – Styles Library vs 14 hive• Activate Branding features via PowerShell on development environment
  27. 27. 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
  28. 28. Tools• Firebug/IE Dev • Jquery Toolbar • SPServices/SPXSLT• Yslow • U2U CAML Creator• Fiddler • SPManager• SPDisposeCheck
  29. 29. 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

×