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

dcash-peterson@sentri.com 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

– 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