branding essentials for developers presentation at tec2012
DESCRIPTION
TRANSCRIPT
Branding Essentials
For Developers Derek Cash-Peterson
Who the heck is this guy?
• SharePoint Developer
• Information Architect
• User Experience Designer
• The Branding Guy
• Agency Background
Derek Cash-Peterson
[email protected] twitter: @spdcp Blog: http://blogs.sentri.com/branding www.sentri.com
I take this…
And turn it into this…
Or this…
What this session is
• Developer focused
• WCM focused
• A look at the building blocks to creating a custom branded solution in SharePoint
What this session is not
• A session about jQuery, CSS, and HTML 5
• Check out Mark Rackley tomorrow 9:45 jQuery and SharePoint
Agenda
• What does it mean to “Brand” SharePoint?
• Getting from design to SharePoint.
• What are the custom components?
• Deployment
• Common Tools
Why would you brand SharePoint
• Governance
• User Experience
• Messaging
How do you do it
• Three ways to do it.
– Themes (low)
– Purchased packages or custom css (medium)
– Custom MasterPages & PageLayouts (high)
Getting from design to SharePoint
• Information Architecture
• Site Map
• Solution Design
• Design Comp
• HTML Comp
Information Architecture
Information Architecture
Information Architecture
Design Comp
HTML Comp
Custom Components
• Site Columns & Content Types
• Branding Files
• WebParts
Site Columns and Content Types
• Reference OOB where you can (14 hive)
– Fields
– Ctypes
– PublishingResources
• Leverage the Page Content Type
• PublishingContent & PublishingImage
Demo: Content Types & Site Columns
Branding
• MasterPages
• PageLayouts
• Javascript
• CSS
• Images
Demo: MasterPages & PageLayouts
WebParts
• Use OOB when you can
• CQWP and RSS feed are your friends
• Build a tool of commonly used components
Demo: WebParts
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
Demo: Site Definitions
Deployment Guidelines
• WSP: All the way
• Sandboxed solutions
• Site Assets
– Styles Library vs 14 hive
• Activate Branding features via PowerShell on development environment
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
Tools
• Firebug/IE Dev Toolbar
• Yslow
• Fiddler
• SPDisposeCheck
• Jquery
• SPServices/SPXSLT
• U2U CAML Creator
• SPManager
Handy Information
• Useful Links – Derek Cash-Peterson
– @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