Upload
kanwal-khipple
View
3.407
Download
0
Embed Size (px)
DESCRIPTION
A 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.
Citation preview
1-888-777-6850 x130 [email protected]
Designing SharePoint 2010
for Business
Kanwal KhippleBrightStarr
1-888-777-6850 x130 [email protected]
About Me• Kanwal Khipple• Passionate about branding
and optimizing SharePoint sites
• Canadian
Twitter @kkhipple
@sharepointbuzz
1-888-777-6850 x130 [email protected] 3
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)
1-888-777-6850 x130 [email protected]
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
1-888-777-6850 x130 [email protected] 6
WHAT IS BRANDING?
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
1-888-777-6850 x130 [email protected]
1-888-777-6850 x130 [email protected]
Ice Berg Principle
1-888-777-6850 x130 [email protected]
WHAT’S NEWSharePoint 2010
1-888-777-6850 x130 [email protected]
WCM Features• Status Bar• Themes• Server Ribbon• Tagging & Rating• Client OM
1-888-777-6850 x130 [email protected]
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.)
1-888-777-6850 x130 [email protected] 13
1-888-777-6850 x130 [email protected]
Browser Market Share
1-888-777-6850 x130 [email protected]
Browser Resolutions
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
1-888-777-6850 x130 [email protected] 17
Here’s What You Get Out of the Box
Make It Not Look Like SharePointConsistent User Experience
1-888-777-6850 x130 [email protected]
NEW INTERFACEDEMO
1-888-777-6850 x130 [email protected]
What’s Involved?
• Information Architecture• Design• Wireframes• Branding• Page Layouts• Master Pages• HTML, CSS, JavaScript
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
1-888-777-6850 x130 [email protected] 21
1-888-777-6850 x130 [email protected] 22
1-888-777-6850 x130 [email protected] 23
1-888-777-6850 x130 [email protected] 24
1-888-777-6850 x130 [email protected]
1-888-777-6850 x130 [email protected] 26
1-888-777-6850 x130 [email protected]
What Do Your Users Want?
1-888-777-6850 x130 [email protected]
http://spbuzz.it/sptopsiteshttp://spbuzz.it/bsdesigns
1-888-777-6850 x130 [email protected]
General web principles and their relation to SharePoint
• SharePoint is just a platform• Design follows same principles as other
WCM’s like:• Fibonacci principle 0,1,1,2,3,5,8,13,21• Golden ratio 1.618• F & Z reading patterns
1-888-777-6850 x130 [email protected]
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
1-888-777-6850 x130 [email protected]
Wireframes1. Paper Prototyping2. Collaborative Wireframes
http://spbuzz.it/bmockupsdemo
1-888-777-6850 x130 [email protected]
BALSAMIQ MOCKUPDEMO
1-888-777-6850 x130 [email protected]
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
1-888-777-6850 x130 [email protected]
MASTER PAGES & PAGE LAYOUTSSharePoint Terminology
1-888-777-6850 x130 [email protected]
Master Pages + Page Layouts
1-888-777-6850 x130 [email protected]
SharePoint Frontend – how the site is built
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 fluency
default.master
1-888-777-6850 x130 [email protected] 41
1-888-777-6850 x130 [email protected]
Content Placeholders<asp:ContentPlaceholder ID="PlaceHolderLeftNavBar"> runat="server" />
1-888-777-6850 x130 [email protected]
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
1-888-777-6850 x130 [email protected]
MASTER PAGES & PAGE LAYOUTSDEMO
1-888-777-6850 x130 [email protected]
THEMESSharePoint Terminology
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
1-888-777-6850 x130 [email protected] 48
1-888-777-6850 x130 [email protected]
SHAREPOINT 2010 THEMESDEMO
1-888-777-6850 x130 [email protected] 55
1-888-777-6850 x130 [email protected]
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
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
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>
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
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
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”>
1-888-777-6850 x130 [email protected]
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”/>
1-888-777-6850 x130 [email protected]
Custom Ribbon Fonts & Styles
.ms-rteStyle-BlueBackground { -ms-name:#SPSTCDC; background-color: blue; color: white;}
H1.ms-rteElement-H1Blue { -ms-name:#SPSTCDC; color: blue;}
1-888-777-6850 x130 [email protected] 64
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;}
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
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
1-888-777-6850 x130 [email protected] 70
Advanced Topics
• Content Query Web Part• Data view web part in SharePoint Designer• XSLT templates• JQuery • SPServices• ClientOM
1-888-777-6850 x130 [email protected]
Ice Berg Principle
1-888-777-6850 x130 [email protected]
Agenda
• Why Brand SharePoint?• Tools for Branding• Advanced Tips & Tricks• Secrets to Successful Branding!
1-888-777-6850 x130 [email protected] 76
50% Of Top Intranet’s Use SharePointSOURCE: NIELSEN NORMAN GROUP
Secrets to Successful Branding
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
1-888-777-6850 x130 [email protected]
http://www.kanwalkhipple.com
@kkhipple @sharepointbuzz
Your Feedback Is Very Important To Me
Designing SharePoint 2010
for Business
Thank you!Submit Feedback