sharepoint saturday uk - intranet branding for developers

26
www.c5alliance.com SharePoint Saturday 12 th November 2011 Aonghus (Gus) Fraser SharePoint Lead Consultant, C5 Alliance SharePoint 2010 Intranet Branding #SPSUK25

Upload: gus-fraser

Post on 01-Nov-2014

1.911 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: SharePoint Saturday UK - Intranet Branding for Developers

www.c5alliance.com

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

SharePoint 2010 Intranet Branding#SPSUK25

Page 2: SharePoint Saturday UK - Intranet Branding for Developers

#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

Page 3: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Gus Fraser SharePoint Evangelist & Lead Consultant @ C5 Developing Enterprise Solutions since SharePoint 2003 Twitter: @gusfraser Email: [email protected] 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

Page 4: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Page 5: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

C5 Client Base

Page 6: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Page 7: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

What is Branding?

Page 8: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Page 9: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

What is Branding?

Identity Ownership Culture User Experience

Page 10: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Why Brand?

Page 11: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

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

LIKE SHAREPOINT!”

Page 12: SharePoint Saturday UK - Intranet Branding for Developers

#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

Page 13: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Internet vs Intranet

Page 14: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Public Facing SharePoint WCM Site

Rigid design Low number of contributors Lots of great examples

www.topsharepoint.com

Page 15: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

SharePoint Intranet

Must be flexible Wider scope High number of contributors – everybody

in the organisation! Few examples; not many companies

willing to share

Page 16: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

How to Brand SharePoint 2010

Page 17: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Wireframing

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

Page 18: SharePoint Saturday UK - Intranet Branding for Developers

#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

Page 19: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Without Governance..

Page 20: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Page 21: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Without Governance

Navigation Adoption Consistency Search

Page 22: SharePoint Saturday UK - Intranet Branding for Developers

#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

Page 23: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Demos

Page 24: SharePoint Saturday UK - Intranet Branding for Developers

#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

Page 25: SharePoint Saturday UK - Intranet Branding for Developers

#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/

Page 26: SharePoint Saturday UK - Intranet Branding for Developers

#SPSUK25

Thank You

Gus Fraser Twitter: @gusfraser Email: [email protected]