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– [email protected]– @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
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://[email protected]
Twitter @kkhipple @sharepointbuzz
Your Feedback Is Very Important To Me
SharePoint Saturday Redmond 2011
Topic: SharePoint Branding Guidance
Thank you!
