SharePoint Best PracticesPublic Websites and Portals
Quick FactsAbout Us           Approach          Partnerships• 21st Year        • Vendor          • Microsoft Gold• Grand R...
Expertise
C/D/H News: C/D/H Purchases Plante             Moran Web Development/SharePoint Team • On July 15, C/D/H expanded with pur...
CDH   Talks Tech
Your PresenterJeff KinnellyConsultant, Design / DevelopmentJeffK@cdh.com
Agenda•   Understanding User Experience•   User Experience in SharePoint•   Case Study: Praxity•   Case Study: Chippewa Va...
Ferrari.com
AMD.com
The GoalMake It Not Look Like SharePoint!                                    10
UX. What is it?User Experiencen. the overall experience and satisfaction auser has when using a product or system
UX. What is it?User Experience ismultifaceted!
UX. What is it?User Experience is…a multi-disciplinary process of design•   Accessibility•   Information Architecture (IAI...
UX. What is it?• Differentiates a product or service• Creates business opportunities• Improves efficiency
The Proof is in the Returns       10         9                                                                        Desi...
A Valuable Investment• “Every $1 invested in usability returns between  $10 and $100” -- IBM, Cost-Justifying Ease of Use•...
UX with SharePoint
What Users Want1. Users don‟t care about how the software is built. They   want performance, convenience and results2. Unl...
What Users Expect: Conventions               Marcy Kellar / Universal Usability Guidelines
Successfully Improving User                     Experience• Use Web Analytics to identify when usability issues occur  (e....
Content is KingFacets of content relevant to SharePoint   – Governance & Ownership - Who owns, creates content? when     d...
Design Best Practices• Master Pages  – 2 or 3     • Home page     • Landing page     • Content Subpage• Content Types  – 1...
Design Best Practices• Build your own templates   –   Site definitions   –   Master pages   –   Style sheets   –   Content...
Case Studies
Case Study: Praxity• Public website and extranet• Rich-media enhancements• Convergent solution  – Authenticated user get a...
http://www.praxity.com/
Case Study:    Chippewa Valley Technical College•   Public website•   Rich-media enhancements•   Leverages OOTB functional...
http://www.cvtc.edu/
Analytics & OptimizationPerformance Goals: Reduce page weight (wait)Dev/Optimization     Analytics            SP2010 Techn...
Advanced Tips & TricksRemove specific content from Search Results  <div class=“footer noindex”/>     <!--- footer content ...
Advanced Tips & TricksIncluding a footer in your design?Add s4-notdlg for HTML elements that you don‟t want to show in the...
Easily show a Favicon in                           SharePoint 2010Easily show a Favicon in SharePoint 2010SharePoint 2007 ...
Improve Performance
CSS Optimization• Minify you CSS
Javascript Optimization           The problem…                – SP2010 Javascript payload is large (480k)                –...
Javascript Optimization    Chris OBrien - SharePoint MVP (www.sharepointnutsandbolts.com)
Aptimize• Automates many optimizations  – Image sprites  – Combining/minifying JavaScript & CSS• Filter is installed on WF...
Aptimize
In Conclusion• Design should be about making business  sense and achieving business objectives• Users aren‟t concerned abo...
Questions about whether design isnecessary or affordable are quitebeside the point. Design is inevitable.The alternative t...
Thank YouRoyal Oak                                 Grand Rapids306 S Washington Ave                      15 Ionia SWSuite ...
Upcoming SlideShare
Loading in …5
×

Best Practices for SharePoint Public Websites

2,960 views
2,766 views

Published on

This fall, C/D/H presented to a group of IT professionals and leaders on best practices for optimizing and branding the user experience of SharePoint 2010 public websites and portals.

Attendees learned how SharePoint 2010 solutions can generate measurable business results from improvements in SharePoint information architecture, usability, visual design, and data visualization/integration. Real world projects were used to demonstrate how adhering to best practices drives adoption and provides valuable user feedback for continuous improvement.

Download the slide deck (PDF, 1 MB).

And for more information on this or other SharePoint topics, visit our blog at www.cdhtalkstech.com.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,960
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
66
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Best Practices for SharePoint Public Websites

  1. 1. SharePoint Best PracticesPublic Websites and Portals
  2. 2. Quick FactsAbout Us Approach Partnerships• 21st Year • Vendor • Microsoft Gold• Grand Rapids & Independent • Central Region Client Experience Award Winner Royal Oak • Non-reseller • VMware Enterprise• 30 Staff • Professional • Citrix Silver Services Only • Novell Gold • Cisco Premier
  3. 3. Expertise
  4. 4. C/D/H News: C/D/H Purchases Plante Moran Web Development/SharePoint Team • On July 15, C/D/H expanded with purchase of Plante Moran Web Development/SharePoint team • Why care? – Acquisition brings expertise in web development, web content mgt, intranet and extranet, .NET, SQL, BizTalk and Java development. Also user interface and public web design expertise using SharePoint. – Makes C/D/H the largest SharePoint group in MI! • Meet the team:John Bissa Julie Boudro Jeff Kinnelly Dan Kohls Amy Moore Mark Sassin
  5. 5. CDH Talks Tech
  6. 6. Your PresenterJeff KinnellyConsultant, Design / DevelopmentJeffK@cdh.com
  7. 7. Agenda• Understanding User Experience• User Experience in SharePoint• Case Study: Praxity• Case Study: Chippewa Valley Technical College• Development Tools and Tips• Web Analytics and Optimization• Resources
  8. 8. Ferrari.com
  9. 9. AMD.com
  10. 10. The GoalMake It Not Look Like SharePoint! 10
  11. 11. UX. What is it?User Experiencen. the overall experience and satisfaction auser has when using a product or system
  12. 12. UX. What is it?User Experience ismultifaceted!
  13. 13. UX. What is it?User Experience is…a multi-disciplinary process of design• Accessibility• Information Architecture (IAI)• Information Design (IDA)• Interaction Design (IxDA)• Technical Writing (STC)• Usability Engineering (UPA)• User Research (HFES)• Visual Design / Branding• Web Analytics (WAA)
  14. 14. UX. What is it?• Differentiates a product or service• Creates business opportunities• Improves efficiency
  15. 15. The Proof is in the Returns 10 9 Design Organizations 8 7 6 S&P 500 5 4 3 2 1 0 Year 1 Year 3 Year 5Stock performance of 63 “Design Oriented Companies” versus the S&P 500 over 1, 3 and 5 yearsSource: Peer Research , Fast Company,
  16. 16. A Valuable Investment• “Every $1 invested in usability returns between $10 and $100” -- IBM, Cost-Justifying Ease of Use• Investing 10% of a total project budget yields: Metric Return Sales/ Conversion rate 100% Visitors/ Traffic 150% User Performance / Productivity 161% Use of (Key) Features 202% Jakob Nielson, Return on Investment for Usability
  17. 17. UX with SharePoint
  18. 18. What Users Want1. Users don‟t care about how the software is built. They want performance, convenience and results2. Unless it allows them to get their work/task done faster, they don‟t want to learn a new/different way of doing something3. They want a responsive UI with visual clues as to „what next‟. They don‟t want to guess what to do (or hunt for it)4. As far as they‟re concerned the experience is the product
  19. 19. What Users Expect: Conventions Marcy Kellar / Universal Usability Guidelines
  20. 20. Successfully Improving User Experience• Use Web Analytics to identify when usability issues occur (e.g. funnel analysis)• Find reasons why usability issues occur (e.g. expert review)• Evaluate different design solutions (e.g. usability testing)• Validate design solutions (e.g. multivariate Testing)• Use Web Analytics data to optimize navigation (e.g. order of navigation items)• Interdisciplinary teams of Information Architects, User Researchers, Designers, and Web Analysts can fulfill these requirements best Source: Nicolas Mohr - SapientNitro
  21. 21. Content is KingFacets of content relevant to SharePoint – Governance & Ownership - Who owns, creates content? when does content get created or removed? Is it centralized? Does it need approval?Format (that content is in) – Textual documents, articles,, newsletters, audio & videos, etc. – Volume – How big is your website going to be? How many content contributors do you have?Dynamism – What is the rate of growth of content? Should it expire?
  22. 22. Design Best Practices• Master Pages – 2 or 3 • Home page • Landing page • Content Subpage• Content Types – 1 – very generic and broad type• Page Layouts – Optimal number 5 to 7 • Less than 5  Limited layout options • More than 7  Difficult to support and train end-users – Consider maintenance
  23. 23. Design Best Practices• Build your own templates – Site definitions – Master pages – Style sheets – Content types – Page layouts• Leverage SharePoint Community resources• Randy Drisgill - MVP SharePoint Server – Starter Master Pages for SharePoint 2010
  24. 24. Case Studies
  25. 25. Case Study: Praxity• Public website and extranet• Rich-media enhancements• Convergent solution – Authenticated user get an enhanced experience• Deployed in a phased approach• Extranet leverages OOTB functionality – Mindful customization to allow team sites to stay flexible
  26. 26. http://www.praxity.com/
  27. 27. Case Study: Chippewa Valley Technical College• Public website• Rich-media enhancements• Leverages OOTB functionality• Leveraged staff‟s knowledge• Rich integration with data systems• Measureable objectives – Process Automation – Centralized course catalog
  28. 28. http://www.cvtc.edu/
  29. 29. Analytics & OptimizationPerformance Goals: Reduce page weight (wait)Dev/Optimization Analytics SP2010 Techniques• Yslow • Reinvigorate • Output Caching• Fiddler • Omniture • CSS Sprites• Firebug • Consolidate JS & CSS files• Hammerhead • Google Analytics • Cache JS, CSS and image• Aptimize • Web Trends files in browser • Minification of JS and CSS • Anonymous access for CSS, JS and image files • Javascript Suppression
  30. 30. Advanced Tips & TricksRemove 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>
  31. 31. Advanced Tips & TricksIncluding a footer in your design?Add s4-notdlg for HTML elements that you don‟t want to show in thedialog boxes<div class=“customFooter”><div class=“customFooter s4-notdlg”>
  32. 32. Easily show a Favicon in SharePoint 2010Easily show a Favicon in SharePoint 2010SharePoint 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”/>
  33. 33. Improve Performance
  34. 34. CSS Optimization• Minify you CSS
  35. 35. Javascript Optimization The problem… – SP2010 Javascript payload is large (480k) – Script On Demand framework (SOD) – Removal / suppression isn‟t currently supported The solution… – A custom control – Improves page load times by 16%-25%Chris OBrien - SharePoint MVP (www.sharepointnutsandbolts.com)
  36. 36. Javascript Optimization Chris OBrien - SharePoint MVP (www.sharepointnutsandbolts.com)
  37. 37. Aptimize• Automates many optimizations – Image sprites – Combining/minifying JavaScript & CSS• Filter is installed on WFEs• Good option where no optimization expertise?• Project decision – spend $ on product or implementation effort?
  38. 38. Aptimize
  39. 39. In Conclusion• Design should be about making business sense and achieving business objectives• Users aren‟t concerned about the technical solution• Users want performance, convenience and results• Every Web CMS has its quirks• SharePoint remains an evolving and flexible solution
  40. 40. Questions about whether design isnecessary or affordable are quitebeside the point. Design is inevitable.The alternative to good design is baddesign, not no design at all. Douglas Martin Book Design: A Practical Introduction
  41. 41. Thank YouRoyal Oak Grand Rapids306 S Washington Ave 15 Ionia SWSuite 212 Suite 270Royal Oak, MI 48067 Grand Rapids, MI 49503p: (248) 546-1800 p: (616) 776-1600 www.cdh.com (c) C/D/H 2007. All rights reserved

×