1

Branding Guidance for SharePoint

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?• Real World Examples• New Features in SharePoint 2010• OOTB Customization• Tools for Branding• Gathering Requirements• Upgrade Guidance

6

What is Branding?

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

Why Brand SharePoint?

What is SharePoint Branding?

• HTML tags• Images• Colors

• Fonts• Logos• Styles

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

WHAT’S NEWSharePoint 2010

The SharePoint 2010 User Interface

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

What’s Involved?

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

DEMOSharePoint 2010

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

Other Master Pages

• Other miscellaneous master pages are generally not manipulated when branding a site.

• These include:

application.masterapplicationv4.masterdialog.masterlayouts.masterlayoutsv3.master

pickerdialog.masterrtedialog.mastersimple.mastersimplev4.master

mwsdefault.mastermwsdefaultv4.masteradmin.masterpopup.master

What’s new with Master Pages

Changes 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

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

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

PAGE LAYOUTSharePoint Terminology

Page Layouts

THEMESSharePoint Terminology

Anatomy of Themes• Location: 14\Template\Global\Lists\Themes• Packaged using Office Open XML format (.THMX)

Putting it All Together

DEMOSharePoint Master Pages

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

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

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

collaborative controls already present on the master page

2. Master page does have a learning curve though

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

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

Accessibility• 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.

Usability

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

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

• Group CSS files by Browser type• Anonymous access for CSS, JS and image files

Performance

• 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

• Include JS files and CSS files in the header – all script references in head tag are loaded after the page

is loaded and references in body tag are loaded at the time page load

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

SharePoint Branding

SharePoint can be transformed into whatever you want

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

@kkhipple

Your Feedback Is Very Important To Me

SharePoint Saturday San Diego 2011

Topic: SharePoint Branding Guidance

Thank you!