www.c5alliance.com

SharePoint Saturday 12th November 2011Aonghus (Gus) FraserSharePoint Lead Consultant, C5 Alliance

SharePoint 2010 Intranet Branding#SPSUK25

#SPSUK25

SharePoint 2010 Intranet Branding

Introductions Branding – What & Why? Branding – How? Governance Demos

Master pages & CSS Control adapters The Ribbon

Top Tips Examples Useful Links

#SPSUK25

Gus Fraser SharePoint Evangelist & Lead Consultant @ C5 Developing Enterprise Solutions since SharePoint 2003 Twitter: @gusfraser Email: af@c5.je C5 Alliance; ~60 IT consultants (17 SharePoint)

Based in Jersey & Guernsey Probably the highest concentration of SharePoint consultants on the planet*

*unconfirmed

Use the #SPSUK25 hashtag for opinion/feedback/debate

#SPSUK25

#SPSUK25

C5 Client Base

#SPSUK25

#SPSUK25

What is Branding?

#SPSUK25

#SPSUK25

What is Branding?

Identity Ownership Culture User Experience

#SPSUK25

Why Brand?

#SPSUK25

Why Brand an internal system?“I DON’T WANT IT TO LOOK

LIKE SHAREPOINT!”

#SPSUK25

Why Brand an internal system?

EVERYBODY is a client! Adoption - faster/easier/cheaper..

Sometimes necessary! Marketing/communications stakeholder Just because you CAN… doesn’t mean

you SHOULD

#SPSUK25

Internet vs Intranet

#SPSUK25

Public Facing SharePoint WCM Site

Rigid design Low number of contributors Lots of great examples

www.topsharepoint.com

#SPSUK25

SharePoint Intranet

Must be flexible Wider scope High number of contributors – everybody

in the organisation! Few examples; not many companies

willing to share

#SPSUK25

How to Brand SharePoint 2010

#SPSUK25

Wireframing

Start with a Wireframing tool (e.g. Balsamiq)

#SPSUK25

Branding Governance

Defined set of guidelines: Master pages & CSS SharePoint Designer policy Web part policy Ribbon options (Font restrictions etc.)

Procurement/preferred supplier list Reduces risk of non-compliance with style guide Quality assurance

#SPSUK25

Without Governance..

#SPSUK25

#SPSUK25

Without Governance

Navigation Adoption Consistency Search

#SPSUK25

SharePoint 2010 Branding Options

Low Effort Out of the Box Master Pages & UI with Themes PowerPoint/Word 2010

Medium Effort Custom CSS & Background Images SharePoint Designer 2010, Notepad, Photoshop

High Effort Custom Master Pages, Page Layouts, CSS, XSLT, Etc. Visual Studio 2010, SharePoint Designer 2010

#SPSUK25

Demos

#SPSUK25

Top Tips – Do & Don’t

Do: Use wire framing to define the UI/UX first Cut HTML & CSS outside of SharePoint first Use a simple base master page (not v4.master) Package in Visual Studio (CKS:DEV) – Web Templates Educate the designer(s)

Don’t: Break SharePoint… Get lost in SharePoint Designer for days hoping for the best… Accept a SharePoint-agnostic design/designer/agency

#SPSUK25

Useful Links

Professional SharePoint 2010 Branding and User Interface Design: http://amzn.to/ucG30x

Balsamiq: http://www.balsamiq.com/ & http://mockupstogo.net Starter Master Pages: http://startermasterpages.codeplex.com/ Heather Solomon:

http://blog.sharepointexperience.com/2011/09/09/just-the-essentials-sharepoint-master-pages/

http://sharepointexperience.com/csschart/csschart.html CSS Reset: http://kyleschaeffer.com/sharepoint/css-reset/ CSS 3 Pie: http://css3pie.com/ Randy Drisgill: http://blog.drisgill.com/ CKS:DEV: http://cksdev.codeplex.com/

#SPSUK25

Thank You

Gus Fraser Twitter: @gusfraser Email: af@c5.je