Post on 08-May-2015
description
transcript
416-888-7777 kanwal@khipple.com 1
SharePoint BrandingFrom START to FINISH
Kanwal KhippleIndependent Consultant
416-888-7777 kanwal@khipple.com
About Me• Kanwal Khipple• 2x SharePoint MVP• 6 years of SharePoint
consulting experience• Focused on WCM• Passionate about designing
and optimizing SharePoint sites
Twitter @kkhipple
@sharepointbuzz
416-888-7777 kanwal@khipple.com
About You
The SharePoint Person in your company
Familiar with:• HTML• CSS• SharePoint Designer 2010
Level 100-300
416-888-7777 kanwal@khipple.com 4
50% Of Top Intranet’s Use SharePointSOURCE: NIELSEN NORMAN GROUP
Secrets to Successful Branding
416-888-7777 kanwal@khipple.com
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
416-888-7777 kanwal@khipple.com 6
WHAT IS BRANDING?
416-888-7777 kanwal@khipple.com
What is Branding?
• HTML tags• Images• Colors
• Fonts• Logos• Styles
416-888-7777 kanwal@khipple.com
416-888-7777 kanwal@khipple.com 9
Here’s What You Get Out of the Box
Make It Not Look Like SharePointConsistent User Experience
416-888-7777 kanwal@khipple.com
What Do Your Users Want?
416-888-7777 kanwal@khipple.com
416-888-7777 kanwal@khipple.com
http://spbuzz.it/sptopsites
416-888-7777 kanwal@khipple.com
SHAREPOINT BRANDINGOverview
416-888-7777 kanwal@khipple.com
SharePoint Branding Overview
Branding is more than adding a pretty header to your site and making it another color besides SharePoint blue
416-888-7777 kanwal@khipple.com
SharePoint Branding Overview
• Branding is about site AND content design.• Spend the time and plan a site taxonomy.• With a solid taxonomy, site requirements are
easily identifiable.
416-888-7777 kanwal@khipple.com
SharePoint Branding Overview
With a solid taxonomy, site requirements are easily identifiable.– SharePoint features– Custom web parts & features– Content Types– Page Layouts– Audience needs drive page content
416-888-7777 kanwal@khipple.com
What’s Involved?
• Information Architecture• Design• Wireframes• Branding• Page Layouts• Master Pages• HTML, CSS, JavaScript
416-888-7777 kanwal@khipple.com
What’s Involved?
416-888-7777 kanwal@khipple.com
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
416-888-7777 kanwal@khipple.com
Tools for Branding?
Take Baby steps
416-888-7777 kanwal@khipple.com
416-888-7777 kanwal@khipple.com
BALSAMIQ MOCKUPDEMO
416-888-7777 kanwal@khipple.com
Wireframes1. Paper Prototyping2. Collaborative Wireframes
http://spbuzz.it/bmockupsdemo
416-888-7777 kanwal@khipple.com
Wireframes• Microsoft Visio Wireframe– http://spbuzz.it/sp2007visiotemplate
• Adobe PDF Wireframe– http://spbuzz.it/sp2007pdftemplate
• Photoshop PSD file– http://spbuzz.it/sp2007psdtemplate – http://spbuzz.it/sp2010psdtemplate
• Balsamiq Mockups wireframe– http://spbuzz.it/sp2010bmockupstemplate
416-888-7777 kanwal@khipple.com
WHAT’S NEWSharePoint 2010
416-888-7777 kanwal@khipple.com
WCM Features• Better Browser Support• Status Bar• Themes• Server Ribbon• Tagging & Rating• Client OM
416-888-7777 kanwal@khipple.com
Integrated Editing & Ribbon Interface
416-888-7777 kanwal@khipple.com
NEW INTERFACEDEMO
416-888-7777 kanwal@khipple.com
Accessibility Improvements
• Cross-browser support• Built-in support for keyboard navigation• WCAG 2.0 Level AA• Proper use of heading structures (H1, DIV, SPAN, etc.)
416-888-7777 kanwal@khipple.com
Browser Market Share
416-888-7777 kanwal@khipple.com
Browser Resolutions
416-888-7777 kanwal@khipple.com
Supported Browsers• Internet Explorer 9– Coming in SharePoint 2010 Service Pack 1
• Internet Explorer 7-8 (32-bit)– IE Dev Toolbar (embedded in IE8+)
• Mozilla Firefox 3.6– FireBug (addon to Firefox)
• Safari 4.04• Google Chrome (Service Pack 1)– Coming in SharePoint 2010 Service Pack 1
http://spbuzz.it/sp2010browsers
416-888-7777 kanwal@khipple.com
Customization OptionsChange Site Logo, Format, Parts
Change Colors, Backgrounds, Fonts Edit CSS files
Change Page Layout and ContentEdit Master Pages
Edit Page Templates (SharePoint Server only)
Share Your Customization with Others Build Themes and Site Definitions
easyBrowser
SharePoint Designer
SPD + Visual Studio
complex
416-888-7777 kanwal@khipple.com
THEMESSharePoint Terminology
416-888-7777 kanwal@khipple.com
Themes
• 12 colors, 2 Fonts• Control look and feel of your site• Uses Office theme (.thmx files)• Create theme via PowerPoint
416-888-7777 kanwal@khipple.com 36
416-888-7777 kanwal@khipple.com
SHAREPOINT 2010 THEMESDEMO
416-888-7777 kanwal@khipple.com
Theme colors override your CSS/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;
Recolor images – Blending, Tinting, Fill/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Tinting")] */ background:url("/Style Library/images/image.png") no-repeat;
Custom Theming Options
416-888-7777 kanwal@khipple.com
History on CSSRegistration Control<SharePoint:CSSRegistration name=“2.css” runat=“server”/><SharePoint:CSSRegistration name=“1.css” runat=“server”/>
Outputs
<link rel=“stylesheet” type=“text/css” href=“1.css”/><link rel=“stylesheet” type=“text/css” href=“2.css”/><link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/>
Trick - getting your CSS to be the last to load
416-888-7777 kanwal@khipple.com
3 New CSS Registration Properties
1. Conditional Expression<SharePoint:CSSRegistration Name=“1.css” ConditionalExpression=“lt IE 8” runat=“server”/>
Outputs
<!--[if lt IE 8]> <link rel=“stylesheet” type=“text/css” href=“NonIE8.css”/></![endif]-->
416-888-7777 kanwal@khipple.com
3 New CSS Registration Properties
2. After<SharePoint:CSSRegistration Name=“1.css” After=“2.css” runat=“server”/><SharePoint:CSSRegistration Name=“2.css” runat=“server”/>
Outputs <link rel=“stylesheet” type=“text/css” href=“2.css”/><link rel=“stylesheet” type=“text/css” href=“1.css”/><link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/>
416-888-7777 kanwal@khipple.com
3 New CSS Registration Properties
2. After<SharePoint:CSSRegistration Name=“1.css” After=“corev4.css” runat=“server”/><SharePoint:CSSRegistration Name=“2.css” After=“corev4.css” runat=“server”/>
Outputs <link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/><link rel=“stylesheet” type=“text/css” href=“2.css”/><link rel=“stylesheet” type=“text/css” href=“1.css”/>
416-888-7777 kanwal@khipple.com
3 New CSS Registration Properties
3. EnableCSSTheming
Themes colors overriding your CSSSet to True by default
.kanwalsclass { /* [ReplaceColor(themeColor: “Accent1”)] */ backgrond-color: red;}
416-888-7777 kanwal@khipple.com
MASTER PAGES & PAGE LAYOUTSSharePoint Terminology
416-888-7777 kanwal@khipple.com
Master Pages + Page Layouts
416-888-7777 kanwal@khipple.com
Master Page
Master Page
Page Layout
416-888-7777 kanwal@khipple.com
Content Placeholders<asp:ContentPlaceholder ID="PlaceHolderLeftNavBar"> runat="server" />
416-888-7777 kanwal@khipple.com 48
416-888-7777 kanwal@khipple.com 49
416-888-7777 kanwal@khipple.com
Content PlaceholdersContent Placeholder Description
PlaceHolderAdditionalPageHeadUsed to add extra components such as JavaScript, Jscript, and Cascading Style Sheets in the head section of the page.
PlaceHolderBodyAreaClass The class of the body area. This placeholder is no longer used in SharePoint 2010.
PlaceHolderBodyLeftBorderThis placeholder does not appear as part of the interface but must be present for backward compatibility.
PlaceHolderBodyRightMarginThis placeholder does not appear as part of the interface but must be present for backward compatibility.
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page.
http://spbuzz.it/sp2010dcph
416-888-7777 kanwal@khipple.com
What’s the Same?What has not changed from SharePoint 2007• 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
416-888-7777 kanwal@khipple.com
What’s new with Master Pages• Placeholders the same between content and application pages• Master Page changes apply to Application (_layouts) pages• Greater use of DIV/CSS layouts -> Fewer Tables• XHTML Strict document type• Much better support for Accessibility• Cross-Browser support
416-888-7777 kanwal@khipple.com
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 fluency
default.master
416-888-7777 kanwal@khipple.com
MASTER PAGES & PAGE LAYOUTSDEMO
416-888-7777 kanwal@khipple.com
UPGRADING YOUR DESIGNSSharePoint 2007 to SharePoint 2010
416-888-7777 kanwal@khipple.com
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
416-888-7777 kanwal@khipple.com
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
http://spbuzz.it/sp2010vu
416-888-7777 kanwal@khipple.com
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
416-888-7777 kanwal@khipple.com
Advanced Tips & Tricks
Performance Goals• Reduce page weight
Techniques• Output Caching• Blob Caching• CSS Sprites • Consolidate JS and CSS
files • Cache JS, CSS and
image files in browser • Minification of JS and
CSS• Anonymous access for
CSS, JS and image files
Tools• Yslow• Fiddler• Wireshark
416-888-7777 kanwal@khipple.com
Advanced Tips & Tricks
During Visual Upgrade, show content based on UI version
<Sharepoint:UIVersionedContent ID="myContentIDv3" runat="server" UIVersion="3"> <ContentTemplate> <p>This content displays only when UIVersion=3.</p> </ContentTemplate></SharePoint:UIVersionedContent>
<Sharepoint:UIVersionedContent ID=" myContentIDv4" runat="server" UIVersion="4"> <ContentTemplate> <p>This content displays only when UIVersion=4.</p> </ContentTemplate> </SharePoint:UIVersionedContent>
416-888-7777 kanwal@khipple.com
Advanced Tips & Tricks
Remove specific content from Search Results<div class=“footer noindex”/> <!--- footer content ---></div>
Security controlled content
<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="ManageWeb"> <!--- content here ---></Sharepoint:SPSecurityTrimmedControl>
http://spbuzz.it/msdnspbasepermissions
416-888-7777 kanwal@khipple.com
Handling Legacy Browsers
Warn users when they are using an unsupported browser
<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>http://spbuzz.it/ie6-upgrade-warning
416-888-7777 kanwal@khipple.com
Advanced Tips & Tricks
• Including a footer in your design?
Add s4-notdlg for HTML elements that you don’t want to show in the dialog boxes
<div class=“customFooter”>
<div class=“customFooter s4-notdlg”>
416-888-7777 kanwal@khipple.com
Easily show a Favicon in SharePoint 2010
• Easily show a Favicon in SharePoint 2010
SharePoint 2007 approach<link rel=“shortcut icon” href=“/Style Library/images/favicon.ico”/>
SharePoint 2010 approach<SharePoint:SPShortcutIcon runat=“server” IconUrl=“/Style Library/images/favicon.ico”/>
416-888-7777 kanwal@khipple.com
Custom Ribbon Fonts & Styles
.ms-rteStyle-BlueBackground { -ms-name:Blue Background; background-color: blue; color: white;}
H1.ms-rteElement-H1Blue { -ms-name:Blue Heading 1; color: blue;}
416-888-7777 kanwal@khipple.com
Handling the Name.dll ActiveX Control
You can turn off the message on the General Settings page of the Manage Web Applications section of Central Administration. Set Enable Person Name smart tag and Online Status for members to No.
<script type="text/javascript"> function ProcessImn(){} function ProcessImnMarkers () {} </script>
416-888-7777 kanwal@khipple.com 67
416-888-7777 kanwal@khipple.com 68
Want more?
• Content Query Web Part• Data view web part in SharePoint Designer• XSLT templates• JQuery • SPServices• ClientOM
416-888-7777 kanwal@khipple.com
Professional SharePoint 2010 Branding and User Interface Design
Provides expert tips, techniques, and insights from the author team of SharePoint 2010 and branding experts
• CSS• master pages• page layouts• SharePoint themes• XSLT• jQuery• Silverlight
http://spbuzz.it/prosp2010ui
416-888-7777 kanwal@khipple.com
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
416-888-7777 kanwal@khipple.com
Secrets to Successful Branding
• Organize your content– End users are more likely to use search then
navigation• Follow Web Standards– Optimize and accessibility and standards
• Listen To Your Users
http://spbuzz.it/iYKom7
416-888-7777 kanwal@khipple.com
http://www.kanwalkhipple.com
@kkhipple @sharepointbuzz
Your Feedback Is Very Important To Me
SharePoint BrandingFrom START to FINISHThank you!