SharePoint Branding Guidance @ SharePoint Saturday Redmond

1
SharePoint Branding Guidance
Kanwal Khipple
Enterprise Architect
Navantis

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

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

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

What’s New
SharePoint 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

DEMO
Balsamiq Mockup

What’s Involved?
Taxonomy design
Information Architecture
Wireframes
Design
Branding
Page Layouts
Master Pages
HTML, CSS, JavaScript

MASTER PAGe
SharePoint Terminology

Top Navigation
Content Frame
Footer

Master Pages

Pages using simple.master
Login.aspx
SignOut.aspx
Error.aspx
ReqAcc.aspx
Confirmation.aspx
WebDeleted.aspx
AccessDenied.aspx

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

DEMO
SharePoint Master Pages

PAGe Layout

Page Layouts

Putting it All Together

Themes

/* [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
Out-of-the-box customization by selecting different themes
Customize an instance of a site template using SharePoint Designer
Customize a site by Site Definitions and Visual Studio
Enterprise solutions
Multi-server farm

Master Pages
Three ways to build the custom master pages:
From scratch
Not recommended as SharePoint 2007 needs a few placeholders to be present in the master page or else the pages will not work.
From minimal.master
Not recommended for a collaboration intranet
You want to use OOB features and controls
2BCodePlex: Starter Master Page for SP2010
http://startermasterpages.codeplex.com/
From default.master
Recommended as it provides most of the collaborative controls already present on the master page
Master page does have a learning curve though

DEMO
Building a site from scratch

UPGRADING YOUR DESIGNS
SharePoint 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
Attach a WSSv3 content database
Preserve the V3 UI
Preview site in V4
Upgrade site to V4
Use PowerShell to revert site back to V3

ADVANCED TIPS
SharePoint 2010

Advanced Tips & Tricks
Show content based on UI version
<SharePoint:UIVersionedContentrunat="server" UIVersion="<=3">
Security controlled content
<Sharepoint:SPSecurityTrimmedControlrunat="server" Permissions="ManageWeb">
Warn users when they are using an unsupported browser
<SharePoint:WarnOnUnsupportedBrowsersrunat="server"/>
Remove specific content from Search Results
Add noindexcss class to specific content
<div class=“noindex” …/>

DEMO
SharePoint 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

Your Feedback Is Very Important To Me
SharePoint Saturday Redmond 2011
Topic: SharePoint Branding Guidance
http://www.kanwalkhipple.com
kanwal@khipple.com
Twitter @kkhipple
@sharepointbuzz
Thank you!

SharePoint Branding Guidance @ SharePoint Saturday Redmond

by Kanwal Khipple

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

SharePoint Branding Guidance @ SharePoint Saturday Redmond Presentation Transcript