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

2. 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

3. 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

4. #SPSUK25

5. C5 Client Base
#SPSUK25

6. #SPSUK25

7. What is Branding?
#SPSUK25

8. #SPSUK25

9. What is Branding?
 Identity
 Ownership
 Culture
 User Experience
#SPSUK25

10. Why Brand?
#SPSUK25

11. “I DON’T WANT IT TO LOOK
Why Brand an internal system?
LIKE SHAREPOINT!”
#SPSUK25

12. 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

13. Internet vs Intranet
#SPSUK25

14. Public Facing SharePoint WCM Site
 Rigid design
 Low number of contributors
 Lots of great examples
 www.topsharepoint.com
#SPSUK25

15. SharePoint Intranet
 Must be flexible
 Wider scope
 High number of contributors – everybody
in the organisation!
 Few examples; not many companies
willing to share
#SPSUK25

16. How to Brand SharePoint 2010
#SPSUK25

17. Wireframing
 Start with a Wireframing tool (e.g. Balsamiq)
#SPSUK25

18. 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

19. Without Governance..
#SPSUK25

20. #SPSUK25

21. Without Governance
 Navigation
 Adoption
 Consistency
 Search
#SPSUK25

22. 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

23. Demos
#SPSUK25

24. 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

25. 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

26. Thank You
 Gus Fraser
 Twitter: @gusfraser
 Email: af@c5.je
#SPSUK25