1

SharePoint Branding Guidance

Kanwal KhippleEnterprise ArchitectNavantis

Audience

• Introduction to Branding– Designers– Developers– Information Workers

• Level 100

Who am I?• Enterprise Architect for Navantis• 5 years of SharePoint consulting experience• MVP for SharePoint Server

• Contact Details– http://www.kanwalkhipple.com– kanwal@khipple.com– @kkhipple on twitter– 416-888-7777

Welcome!

• What is Branding?• Why Brand SharePoint?• Tools for Branding• New Features in SharePoint 2010• Real World Examples• OOTB Customization• Upgrade Guidance• Recommendations

What is Branding?

• HTML tags• Images• Colors

• Fonts• Logos• Styles

Why Brand SharePoint?

10

Why Brand SharePoint?

• Make SharePoint Not Look Like SharePoint• Manage your brand image• Consistent User Experience

http://www.wssdemo.com/livepivot/

WHAT’S NEWSharePoint 2010

The SharePoint 2010 User Interface

WCM Features• Better Browser Support• WSIWYG Editor• Dialog Boxes• Status Bar• Notifications• Themes• Server Ribbon• Rich AJAX Interactions• Managed Metadata Service• Tagging & Rating• Content Organizer• Client OM

Accessibility Improvements

• Built-in support for keyboard navigation• Web Content Accessibility Guidelines 2.0, WCAG 2.0, and set a

goal for Level AA.– perceivable, operable, understandable, and robust

• Proper use of heading structures (H1, DIV, SPAN, etc.)– informational, organizational, and navigational benefits

• Improved language support • Support for browser zoom settings and OS increase font sizes• Dramatically improved the cross-browser support - Doc Types

and specify CSS-standards rendering for the master pages• Rich text editor - clean markup and a function to convert its

content into XHTML.

Tools• SharePoint Designer 2010• Visual Studio 2010• Photoshop• Balsamiq Mockups• Notepad++

• Supported Browsers (http://bit.ly/sp2010browsers)– Internet Explorer 7 & 8 (32-bit)• IE Dev Toolbar (embedded in IE8)

– Mozilla Firefox 3.6• FireBug (addon to Firefox)

– Safari 4.04

Wireframes• Paper Prototyping Comes First• Wireframes Come Second and Must be Shared

DEMOBalsamiq Mockup

What’s Involved?

• Taxonomy design• Information Architecture• Wireframes• Design• Branding• Page Layouts• Master Pages• HTML, CSS, JavaScript

MASTER PAGESharePoint Terminology

Top Navigation

Content Frame

Footer

Master Pages

• Team site master page• User content pages (lists\content pages\etc)• _layouts pages (site settings, etc)

v4.master

• For app experiences, like Search or Office Web Applications• If you do not need site navigation, do not have a ribbon• If your app needs the space

minimal.master

• For error pages or login pages• Not customizable, but pages can be replacedsimple.master

• Show site using legacy interface• No Ribbon, no fluencydefault.master

Pages using simple.master

• Login.aspx• SignOut.aspx• Error.aspx• ReqAcc.aspx• Confirmation.aspx• WebDeleted.aspx• AccessDenied.aspx

What’s new with Master PagesChanges to Master Pages:• Placeholders the same between

content and application pages• Application (_layouts) pages use same

site master pages• Greater use of DIV/CSS layouts vs. Table

Layouts• XHTML Strict document type• Much better support for Accessibility• Cross-Browser support

What has not changed:• Complex nested page

structures• Lots and lots of styles• Mostly same list of content

placeholders• Inconsistent Web Part markup

injection• Same default and custom

master page tokens

Custom Master Pages:• Copy V4.master and tweak• Start with Minimal or the

*Starter* Master Page

DEMOSharePoint Master Pages

PAGE LAYOUTSharePoint Terminology

Page Layouts

Putting it All Together

THEMESSharePoint Terminology

/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;

CUSTOMIZATION OPTIONS

Customization Options

• In-browser editing– E.g. Apply a different master page, hide and target

navigational links• SharePoint Designer– E.g. Create a new master pages, change the style

of the navigation• Visual Studio 2010– E.g. Create custom Web parts, build custom

workflows

3 Approaches to Branding

1. Out-of-the-box customization by selecting different themes

2. Customize an instance of a site template using SharePoint Designer

3. Customize a site by Site Definitions and Visual Studio

1. Enterprise solutions2. Multi-server farm

Master PagesThree ways to build the custom master pages:

1. From scratch1. Not recommended as SharePoint 2007 needs a few

placeholders to be present in the master page or else the pages will not work.

2. From minimal.master1. Not recommended for a collaboration intranet2. You want to use OOB features and controls

2B CodePlex: Starter Master Page for SP2010http://startermasterpages.codeplex.com/

3. From default.master1. Recommended as it provides most of the collaborative

controls already present on the master page2. Master page does have a learning curve though

DEMOBuilding a site from scratch

UPGRADING YOUR DESIGNSSharePoint 2007 to SharePoint 2010

Visual Upgrade• Visual upgrade allows separation of data

upgrade from UI upgrade• The UI mode can be changed:

– PSConfig during upgrade– Web Application– Site Collection– Site

• Default upgrade UI mode is V3• When upgrading a content database, there is

an optional parameter to preserve the old “V3” UI

• Allows controlling when and how you upgrade your users to the new Ribbon UI, and other new UX features

Visual Upgrade

1. Attach a WSSv3 content database– Preserve the V3 UI

2. Preview site in V43. Upgrade site to V44. Use PowerShell to revert site back to V3

ADVANCED TIPSSharePoint 2010

Advanced Tips & Tricks

• Show content based on UI version– <SharePoint:UIVersionedContent runat="server" UIVersion="<=3">

• Security controlled content– <Sharepoint:SPSecurityTrimmedControl runat="server"

Permissions="ManageWeb">

• Warn users when they are using an unsupported browser– <SharePoint:WarnOnUnsupportedBrowsers runat="server"/>

• Remove specific content from Search Results– Add noindex css class to specific content– <div class=“noindex” …/>

DEMOSharePoint Advanced Tips

Performance

Goals• Reduce page weight

Techniques• Output Caching• Blob Caching• Ensure not downloading core.js etc for anonymous

users/delay-loading for authenticated.

Tools• YSlow

Performance• CSS Sprites

– Reduces number of images downloaded from the client browser – improves the overall page loading speed

• Consolidate JS and CSS files – multiple JS or CSS files into single large file – improve the overall resource load times

• Anonymous access for CSS, JS and image files • Cache JS, CSS and image files in browser

– Files hosted in SharePoint layouts folder can use MakeBrowserCacheSafeLayoutsUrl() function to render unique url

• Minification of JS and CSS– removes extra characters and spaces in the JS & CSS files to reduce the

file size – improve the download speed

Professional SharePoint 2010 Branding and User Interface Design

• CSS• master pages• page layouts• SharePoint themes• XSLT• jQuery• Silverlight

Provides expert tips, techniques, and insights from the author team of SharePoint 2010 branding experts

Secret to Success in Branding

Fail to plan, is a plan to fail- Unknown

http://www.kanwalkhipple.comkanwal@khipple.com

Twitter @kkhipple @sharepointbuzz

Your Feedback Is Very Important To Me

SharePoint Saturday Redmond 2011

Topic: SharePoint Branding Guidance

Thank you!