Designing SharePoint 2010 for Business

1-888-777-6850 x130 [email protected]

Designing SharePoint 2010

for Business

Kanwal KhippleBrightStarr


About Me• Kanwal Khipple• Passionate about branding and

optimizing SharePoint sites• SharePoint MVP (2009-Present)• Canadian

Twitter @kkhipple

@sharepointbuzz


About You

The SharePoint Person in your company

Designer Experience (200)• HTML• CSS• SharePoint Designer 2010

Developer Experience (100)


Agenda

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


Follow & RT 2 win @balsamiq mockups - the best #sharepoint wireframing tool

TWEET CONTEST

@kkhipple

1-888-777-6850 x130 [email protected] 6

WHAT IS BRANDING?


SharePoint Branding Overview

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



WHAT’S NEWSharePoint 2010


Browser Market Share


Browser Resolutions & Market Share


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


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


Here’s What You Get Out of the Box

Make It Not Look Like SharePointConsistent User Experience


NEW INTERFACEDEMO


What Do Your Users Want?





http://spbuzz.it/sptopsiteshttp://spbuzz.it/bsdesigns


What’s Involved?

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


Ice Berg Principle


Communities

Search

Sites

Composites

ContentInsights

SharePoint is a Platform


General web principles and their relation to SharePoint

F & Z reading patterns


General web principles and their relation to SharePoint

Design follows same principles as other WCM’s like:• Fibonacci principle 0,1,1,2,3,5,8,13,21• Golden ratio 1.618

http://upload.wikimedia.org/wikipedia/commons/9/95/FibonacciBlocks.svg


Agenda



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


Start with a Wireframe

http://designm.ag/news/8-awesome-accordion-fold-brochure-designs/attachment/11819-revision/


BALSAMIQ MOCKUPDEMO


Follow & RT 2 win @balsamiq mockups - the best #sharepoint wireframing tool

TWEET CONTEST

@kkhipple


Wireframes• Balsamiq Mockups– http://spbuzz.it/bmockupsdemo

• 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/bmockupsdemo

http://spbuzz.it/bmockupsdemo

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


THEMESSharePoint Terminology


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



New CSS Registration Property

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



After<SharePoint:CSSRegistration Name=“1.css” After=“corev4.css” runat=“server”/><SharePoint:CSSRegistration Name=“2.css” After=“corev4.css” runat=“server”/>

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


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


SHAREPOINT 2010 THEMESDEMO


MASTER PAGES & PAGE LAYOUTSSharePoint Terminology


Master Page

Master Page

Page Layout


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


SharePoint Frontend – how the site is built


<asp:ContentPlaceholder ID="PlaceHolderLeftNavBar" runat="server" />http://spbuzz.it/sp2010dcph


MASTER PAGES & PAGE LAYOUTSDEMO


Agenda



Use a Favicon

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


Handling Legacy Browsers

Warn users when they are using an unsupported browser

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


Hide Design Elements from Dialog Boxes

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


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>

http://spbuzz.it/mskb931509


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

Blue Background

Blue Heading 1

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

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


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>



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


Float Ribbon

1. body { overflow:auto; }2. Remove scroll="no" from the <body> tag3. body #s4-workspace {

left:0;overflow:visible;position:relative;}

4. html.ms-dialog body #s4-workspace {overflow-x:auto;overflow-y:scroll;}

http://lh3.ggpht.com/_aV40Jy5RzE8/S1DBWV4JpQI/AAAAAAAAAas/Xw50HSeM6FY/s1600-h/image%5B5%5D.png



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


Design Considerations• Be easy on the portal home page

– Use F / Z pattern– Make sure colors do not clash– Avoid anything unnecessary

• Think like an end user– Show quick wins– Test SharePoint even on Windows 7– Cross browsers and Accessibility

• Change is the only Constant – Ask for feedback– Keep it fresh


Advanced Topics

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


Tools for Branding?

Take Baby Steps


Ice Berg Principle


SharePoint Master Pages

http://spbuzz.it/cpspmp


Agenda



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


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.brightstarr.comhttp://www.kanwalkhipple.com

@kkhipple @sharepointbuzz

Designing SharePoint 2010 for Business

Thank you!Submit Feedback

CloudShare - http://spbuzz.it/mQbInb

Technology

Designing SharePoint 2010 for Business