SharePoint Branding From Start to Finish

416-888-7777 [email protected] 1

SharePoint BrandingFrom START to FINISH

Kanwal KhippleIndependent Consultant

416-888-7777 [email protected]

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


About You

The SharePoint Person in your company

Familiar with:• HTML• CSS• SharePoint Designer 2010

Level 100-300


50% Of Top Intranet’s Use SharePointSOURCE: NIELSEN NORMAN GROUP

Secrets to Successful Branding

http://www.sharepointjoel.com/Lists/Posts/Attachments/201/intranetsharepointtrend_2_41071B20.gif


Agenda

• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!


WHAT IS BRANDING?


What is Branding?

• HTML tags• Images• Colors

• Fonts• Logos• Styles



Here’s What You Get Out of the Box

Make It Not Look Like SharePointConsistent User Experience


What Do Your Users Want?



http://spbuzz.it/sptopsites


SHAREPOINT BRANDINGOverview


SharePoint Branding Overview

Branding is more than adding a pretty header to your site and making it another color besides SharePoint blue



• Branding is about site AND content design.• Spend the time and plan a site taxonomy.• With a solid taxonomy, site requirements are

easily identifiable.



With a solid taxonomy, site requirements are easily identifiable.– SharePoint features– Custom web parts & features– Content Types– Page Layouts– Audience needs drive page content


What’s Involved?

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


What’s Involved?


Agenda



Tools for Branding?

Take Baby steps



BALSAMIQ MOCKUPDEMO


Wireframes1. Paper Prototyping2. Collaborative Wireframes

http://spbuzz.it/bmockupsdemo


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

http://spbuzz.it/sp2007visiotemplate

http://spbuzz.it/sp2007visiotemplate

http://spbuzz.it/sp2007pdftemplate

http://spbuzz.it/sp2007pdftemplate

http://spbuzz.it/sp2010psdtemplate




http://spbuzz.it/sp2010bmockupstemplate

http://spbuzz.it/sp2010bmockupstemplate


WHAT’S NEWSharePoint 2010


WCM Features• Better Browser Support• Status Bar• Themes• Server Ribbon• Tagging & Rating• Client OM


Integrated Editing & Ribbon Interface


NEW INTERFACEDEMO


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


Browser Market Share


Browser Resolutions


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


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


THEMESSharePoint Terminology


Themes

• 12 colors, 2 Fonts• Control look and feel of your site• Uses Office theme (.thmx files)• Create theme via PowerPoint



SHAREPOINT 2010 THEMESDEMO


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


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


3 New CSS Registration Properties

1. Conditional Expression<SharePoint:CSSRegistration Name=“1.css” ConditionalExpression=“lt IE 8” runat=“server”/>

Outputs





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=…”/>



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



3. EnableCSSTheming

Themes colors overriding your CSSSet to True by default

.kanwalsclass { /* [ReplaceColor(themeColor: “Accent1”)] */ backgrond-color: red;}


MASTER PAGES & PAGE LAYOUTSSharePoint Terminology


Master Pages + Page Layouts

http://community.bamboosolutions.com/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/bambooteamblog/clip_5F00_image004_5F00_2.jpg




Master Page

Master Page

Page Layout


Content Placeholders<asp:ContentPlaceholder ID="PlaceHolderLeftNavBar"> runat="server" />




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


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


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


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


MASTER PAGES & PAGE LAYOUTSDEMO


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

http://spbuzz.it/sp2010vu


Agenda



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



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>



Remove specific content from Search Results<div class=“footer noindex”/> </div>

Security controlled content

<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="ManageWeb"> </Sharepoint:SPSecurityTrimmedControl>

http://spbuzz.it/msdnspbasepermissions


Handling Legacy Browsers

Warn users when they are using an unsupported browser

<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>http://spbuzz.it/ie6-upgrade-warning



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


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


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

http://public.bay.livefilestore.com/y1p51eKesHKpUC7tOEd-YgJTSNsnq0RRd0-IjYh9B2VlgiRMx13dTPdkzVeppjEWwvc5yphCdSm_NgWnLpunBYlIw/BlueBackgroundApplied.gif?psid=1

http://public.bay.livefilestore.com/y1p51eKesHKpUCn3ACrt0pY9lDOHSr0H51EF_PIikU7TkkxkGppFhqMpB6yCK0BQbgNZBfjkL6LoZ3cDXBPBZ9T6Q/BlueHeading.gif?psid=1


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>



Want more?

• Content Query Web Part• Data view web part in SharePoint Designer• XSLT templates• JQuery • SPServices• ClientOM


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


Agenda



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


http://www.kanwalkhipple.com

@kkhipple @sharepointbuzz

Your Feedback Is Very Important To Me

SharePoint BrandingFrom START to FINISHThank you!

Date post:	08-May-2015
Category:	Technology
Upload:	kanwal-khipple
View:	27,617 times
Download:	5 times

SharePoint Branding From Start to Finish

Technology