Designing SharePoint 2010 for Business

1-888-777-6850 x130 kanwal@brightstarr.com

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 kanwal@brightstarr.com 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

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

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

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

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

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

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

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.

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

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

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

• 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

Designing SharePoint 2010 for Business

Technology

E-Book: Designing A User-Centered Intranet For SharePoint Online

SharePoint Business Value

Sharepoint small business template

SP2013 WCM Bootcamp - DSN Designing for SharePoint 2013

Designing the new generation of SharePoint intranet

Business Intelligence for SharePoint

SharePoint Online Business Intelligence - SPS Events SharePoint Online Business Intelligence Grace Ahn, SharePoint Design Architect at AOS SharePoint Saturday KC 2015 January 9th,

Designing your SharePoint Internet site: The basics

Business Intelligence in SharePoint

Envision IT - Designing your SharePoint Extranet to work for you

SharePoint Fest Social Business

SPCA2013 - Best Practices & Considerations for Designing Your SharePoint Logical Architecture

Microsoft ® Official Course Designing and Managing Features and Solutions Microsoft SharePoint 2013 SharePoint Practice

Sharepoint Business Intelligence Presentation

The People-Centric SharePoint Alternative · The People-Centric SharePoint Alternative SHAREPOINT: YOUR BUSINESS DESERVES MORE 75% 59% 18.6% 2.1% 1.2% OneDrive for Business SharePoint

Designing SharePoint 2010 for Business

SharePoint Fest NYC - Designing Change - Triggering Cultural Metamorphisis final

The Business Value of Business Intelligence in SharePoint 2010 · 2018-12-05 · 2 The Business Value of Business Intelligence in SharePoint 2010 Executive Summary SharePoint 2010

Evo conf - Designing SharePoint Solutions

SharePoint Business Governance