SharePoint Best Practices Public Websites and Portals

Quick Facts

About Us • 21st Year • Grand Rapids &

Royal Oak • 30 Staff

Approach • Vendor

Independent • Non-reseller • Professional

Services Only

Partnerships • Microsoft Gold

• Central Region Client Experience Award Winner

• VMware Enterprise • Citrix Silver • Novell Gold • Cisco Premier

Expertise

C/D/H News: C/D/H Purchases Plante Moran Web Development/SharePoint Team

John Bissa Julie Boudro Jeff Kinnelly Dan Kohls Amy Moore Mark Sassin

• 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:

Talks Tech C D H

Your Presenter

Jeff Kinnelly Consultant, Design / Development JeffK@cdh.com

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

Ferrari.com

AMD.com

The Goal

10

Make It Not Look Like SharePoint!

UX. What is it?

User Experience n. the overall experience and satisfaction a user has when using a product or system

UX. What is it?

User Experience is multifaceted!

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)

UX. What is it?

• Differentiates a product or service • Creates business opportunities • Improves efficiency

The Proof is in the Returns

012345678

9

10

Year 1Year 3

Year 5

Design Organizations

S&P 500

Stock performance of 63 “Design Oriented Companies” versus the S&P 500 over 1, 3 and 5 years Source: Peer Research , Fast Company,

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

UX with SharePoint

What Users Want

1. Users don‟t care about how the software is built. They want performance, convenience and results

2. Unless it allows them to get their work/task done faster, they don‟t want to learn a new/different way of doing something

3. 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

What Users Expect: Conventions

Marcy Kellar / Universal Usability Guidelines

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

Content is King

Facets 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?

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

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

Case Studies

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

http://www.praxity.com/

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

http://www.cvtc.edu/

Analytics & Optimization

Performance Goals: Reduce page weight (wait)

SP2010 Techniques • Output Caching • CSS Sprites • Consolidate JS & CSS files • Cache JS, CSS and image

files in browser • Minification of JS and CSS • Anonymous access for

CSS, JS and image files • Javascript Suppression

Dev/Optimization • Yslow • Fiddler • Firebug • Hammerhead • Aptimize

Analytics • Reinvigorate • Omniture • Google Analytics • Web Trends

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>

Advanced Tips & Tricks

Including a footer in your design?

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

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

Improve Performance

CSS Optimization

• Minify you CSS

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 O'Brien - SharePoint MVP (www.sharepointnutsandbolts.com)

Javascript Optimization

Chris O'Brien - SharePoint MVP (www.sharepointnutsandbolts.com)

• 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?

Aptimize

Aptimize

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

Questions about whether design is necessary or affordable are quite beside the point. Design is inevitable. The alternative to good design is bad design, not no design at all.

Douglas Martin Book Design: A Practical Introduction

Royal Oak 306 S Washington Ave Suite 212 Royal Oak, MI 48067 p: (248) 546-1800

Thank You

Grand Rapids 15 Ionia SW Suite 270 Grand Rapids, MI 49503 p: (616) 776-1600

(c) C/D/H 2007. All rights reserved www.cdh.com