designing sharepoint 2010 for business
DESCRIPTION
Abstract - Designing SharePoint 2010 for BusinessA business owner nowadays needs to be able to attract and engage people to their website. In this session, learn to implement your company's brand on SharePoint 2010. During this session, we'll use the right tools to take a design from concept to a fully functioning SharePoint 2010 site. Based on real world experiences, this session is sure to give you some practical tips, tricks, and advice you can use immediately. Learn to leverage SharePoint 2010 tools to customize your experiences, and make them unique. You will be able to take this knowledge and deliver the best end to end experiences to your customers. Bio - Kanwal Khipple, is a SharePoint Most Valued Professional (MVP) and Principal SharePoint Architect for BrightStarr. Kanwal focuses on designing adoptable solutions using SharePoint. In the past 7 years, he has developed, implemented and architected hundreds of SharePoint solutions from small single server deployments to globally dispersed SharePoint server farms that can handle 120,000+ users. Kanwal lives in Toronto, Canada and you can find him tweeting, buzzing and blogging on his personal blog. Connect with him on LinkedIn to learn how you can quickly start getting ROI for your SharePoint Intranet.TRANSCRIPT
![Page 1: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/1.jpg)
1-888-777-6850 x130 [email protected]
Designing SharePoint 2010
for Business
Kanwal KhippleBrightStarr
![Page 2: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/2.jpg)
1-888-777-6850 x130 [email protected]
About Me• Kanwal Khipple• Passionate about branding and
optimizing SharePoint sites• SharePoint MVP (2009-Present)• Canadian
Twitter @kkhipple
@sharepointbuzz
![Page 3: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/3.jpg)
1-888-777-6850 x130 [email protected]
About You
The SharePoint Person in your company
Designer Experience (200)• HTML• CSS• SharePoint Designer 2010
Developer Experience (100)
![Page 4: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/4.jpg)
1-888-777-6850 x130 [email protected]
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
![Page 5: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/5.jpg)
1-888-777-6850 x130 [email protected]
Follow & RT 2 win @balsamiq mockups - the best #sharepoint wireframing tool
TWEET CONTEST
@kkhipple
![Page 7: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/7.jpg)
1-888-777-6850 x130 [email protected]
SharePoint Branding Overview
Branding is more than adding a pretty header to your site and making it another color besides SharePoint blue
![Page 8: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/8.jpg)
1-888-777-6850 x130 [email protected]
![Page 12: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/12.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 13: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/13.jpg)
1-888-777-6850 x130 [email protected]
WCM Features• Status Bar• Themes• Server Ribbon• Tagging & Rating• Client OM
![Page 14: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/14.jpg)
1-888-777-6850 x130 [email protected] 14
Here’s What You Get Out of the Box
Make It Not Look Like SharePointConsistent User Experience
![Page 17: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/17.jpg)
1-888-777-6850 x130 [email protected] 17
![Page 18: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/18.jpg)
1-888-777-6850 x130 [email protected] 18
![Page 19: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/19.jpg)
1-888-777-6850 x130 [email protected] 19
![Page 21: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/21.jpg)
1-888-777-6850 x130 [email protected]
What’s Involved?
• Information Architecture• Design• Wireframes• Branding• Page Layouts• Master Pages• HTML, CSS, JavaScript
![Page 23: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/23.jpg)
1-888-777-6850 x130 [email protected]
Communities
Search
Sites
Composites
ContentInsights
SharePoint is a Platform
![Page 24: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/24.jpg)
1-888-777-6850 x130 [email protected]
General web principles and their relation to SharePoint
F & Z reading patterns
![Page 25: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/25.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 26: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/26.jpg)
1-888-777-6850 x130 [email protected]
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
![Page 27: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/27.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 30: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/30.jpg)
1-888-777-6850 x130 [email protected]
Follow & RT 2 win @balsamiq mockups - the best #sharepoint wireframing tool
TWEET CONTEST
@kkhipple
![Page 31: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/31.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 33: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/33.jpg)
1-888-777-6850 x130 [email protected]
Themes• 12 colors, 2 Fonts• Control look and feel of your site• Uses Office theme (.thmx files)• Create theme via PowerPoint
![Page 34: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/34.jpg)
1-888-777-6850 x130 [email protected] 34
![Page 35: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/35.jpg)
1-888-777-6850 x130 [email protected]
New CSS Registration Property
Conditional Expression <SharePoint:CSSRegistration Name=“1.css” ConditionalExpression=“lt IE 8” runat=“server”/>
<!--[if lt IE 8]> <link rel=“stylesheet” type=“text/css” href=“NonIE8.css”/></![endif]-->
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”/>
![Page 36: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/36.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 40: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/40.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 42: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/42.jpg)
1-888-777-6850 x130 [email protected] 42
<asp:ContentPlaceholder ID="PlaceHolderLeftNavBar" runat="server" />http://spbuzz.it/sp2010dcph
![Page 44: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/44.jpg)
1-888-777-6850 x130 [email protected]
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
![Page 45: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/45.jpg)
1-888-777-6850 x130 [email protected]
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”/>
![Page 46: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/46.jpg)
1-888-777-6850 x130 [email protected]
Handling Legacy Browsers
Warn users when they are using an unsupported browser
<SharePoint:WarnOnUnsupportedBrowsers runat="server"/>http://spbuzz.it/ie6-upgrade-warning
![Page 47: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/47.jpg)
1-888-777-6850 x130 [email protected]
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”>
![Page 48: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/48.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 49: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/49.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 50: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/50.jpg)
1-888-777-6850 x130 [email protected]
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>
![Page 51: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/51.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 52: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/52.jpg)
1-888-777-6850 x130 [email protected] 52
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;}
![Page 53: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/53.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 54: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/54.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 55: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/55.jpg)
1-888-777-6850 x130 [email protected] 55
Advanced Topics
• Content Query Web Part• Data view web part in SharePoint Designer• XSLT templates• JQuery • SPServices• ClientOM
![Page 59: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/59.jpg)
1-888-777-6850 x130 [email protected]
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
![Page 60: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/60.jpg)
1-888-777-6850 x130 [email protected] 61
50% Of Top Intranet’s Use SharePointSOURCE: NIELSEN NORMAN GROUP
Secrets to Successful Branding
![Page 61: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/61.jpg)
1-888-777-6850 x130 [email protected]
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
![Page 62: Designing SharePoint 2010 for Business](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554c4661b4c9056b648b537f/html5/thumbnails/62.jpg)
1-888-777-6850 x130 [email protected]
http://www.brightstarr.comhttp://www.kanwalkhipple.com
@kkhipple @sharepointbuzz
Designing SharePoint 2010 for Business
Thank you!Submit Feedback
CloudShare - http://spbuzz.it/mQbInb