sharepoint exchange forum - 10 worst mistakes in sharepoint branding

10 Worst Mistakes in SharePoint Branding

Presented by Marcy Kellar

About Me: Marcy Kellar

• Principal, SharePoint Soapbox – Co-author of Beginning SharePoint Designer 2010 (Wrox, October 2010)

– Professor, Art Institute, Intro to User Centered Design” and “Usability Testing.”

• Specialties include

– User Experience Design (UX) – SharePoint Strategy and Solution Design – SharePoint Branding and UI customization – Information Architecture – Web content management – Usability testing

Twitter: @marcykellar Blog: http://thesharepointmuse.com Linkedin: http://linkedin.com/in/marcykellar

http://thesharepointmuse.com/

http://linkedin.com/in/marcykellar

10. Using Inline Styles

What is it?

– Inline styles are styles applied directly to HTML content

Why is this a mistake?

– Styles aren’t centrally managed – Pages can become inconsistent – Hard to maintain/troubleshoot

10. Using Inline Styles

What is the impact or cost?

– Maintenance Cost – Inconsistent Look and Feel – My Patience

Are there any exceptions?

– During Development – Designer/Developer workflow

What is the fix or workaround if I’ve already made the mistake?

– Remove styles from HTML and add to CSS style sheet – Add process steps to designer developer workflow

9. Don’t Let The Designer Get Carried Away

What is it?

– Designers define and document a vision without considering implementation costs and/or feasibility in SharePoint


– Just because you can design it, doesn’t mean it will work in SharePoint

– Potential compromise of functionality

9. Don’t Let The Designer Get Carried Away


– Dissatisfied business customers – Inaccurate budget / timeline


– No. But SharePoint experts should be involved in part of the design process and/or should be used to provide guidance during design


– Regroup meeting to set expectations – Work with designers /design firm that understands

SharePoint

Example

8. Applying Fixed Width to Collaboration Sites and System Pages

What is it?

– Designers define and document a vision without considering implementation costs and/or feasibility in SharePoint

Why is this a mistake? ⁻ Limits space for collaboration ⁻ Users have to scroll ⁻ Content spillage

Example: Fixed Width Publishing applied to Collaboration Site

Example: Content Spillage

Example: Content “Spillage” on System Pages

8. Applying Fixed Width to Collaboration Sites and System Pages


– User Experience – Usability


– No.


– Use % rather than set pixel value (Width:95%;display table ;margin:0 auto;)

– Make system pages inherit default branding or branded without fixed width

– Make inner scroll

Example: Quick CSS Fix on Content Area

Solution: Add 95% Width instead of Fixed

7. Using Too Many Master Pages

What is it?

Using Master Pages to manage variations and using too many.


– More assets to manage

– More development work

– Costly and /or complex Migration

7. Using Too Many Master Pages


– Migration and / or redesign cost and time – Consistency across sites – Hard to maintain/manage changes


– “Too Many” is relative to scenario – 1 master page per distinct design and template

What is the fix or workaround if I’ve already made the mistake? – Enforce governance/ remove permissions – Consolidate master pages. Manage variations with page layouts,

alternate CSS or custom controls – Most of the reasons you think you need a new master page, you can

use page layout or alternate CSS

Master Pages

Example Scenario

Publishing

Collaboration

My Site Personal (My Content)

Minimal (Search)

My Site Host (Newsfeed, Profile)

Meeting Workspace

1 Master Page per distinct Site Template = 6 Master Pages

mws.css

minimal.css

mysitehost.css

Pub.css

collab.css

mysitepersonal.css

Master Pages

Example Scenario

Publishing

Collaboration

My Site Personal (My Content)

Minimal (Search)

My Site Host (Newsfeed, Profile)

Meeting Workspace

sharepoint

style.css

Base Branding

6. Removing QuickLaunch ContentPlaceholder

What is it? Removing the Quick Launch Control because you don’t want left navigation on the home page.


– Lose the ability to use left navigation when removed from master page (“Throwing the baby out with the bathwater”)

– May have a need to use left nav deeper in site

6. Removing QuickLaunch ContentPlaceholder


– Rework; Extended Development Time

– Loss of Functionality


No


– Add it back to the master page

5. Not Designing Around Real Content

What is it?

– A design that hasn’t considered real content;

– Using non-representative filler/fake content

– Using “Lorem Ipsum”


– Impacts layout, growth / stretching/ empty areas

– Real content helps define patterns

5. Not Designing Around Real Content


– Rework based on real content to support actual content once migrated or created.


Yes. Sites where design dictates content or that have copywriters

What is the fix or workaround if I’ve already made the mistake? – Set expectations that rework will occur after content is introduced.

– Go back to design phase. Make changes accordingly after real content is reviewed. Use representative content in Photoshop design

– Try to anticipate areas where there could be issues by doing bounds testing.

– Staging environment

4. Fixing the Width of the Ribbon

What is it? – Fixing the width of the ribbon to match the fixed width of the

content area – Constraining the ribbon (a huge UX investment) to a width smaller

than 100%

Example: Fixed Width Ribbon



– Not consistent throughout Office Products

– Not consistent through organization

– Administrative tools change size, icon, location



– Training -- especially 3rd party


– If design is very important to your organization


– Update your implementation to expand Ribbon to full width.

– Or create your own training materials to reflect the look of the custom ribbon

3. Using Content Editor Web Parts for Web Content

What is it?

– Using a Content Editor Web Part instead of using the right tools for web content


– No versioning of content

– Not best method for managing web content

3. Using Content Editor Web Parts for Web Content


– No versioning

– Publishing model / Approval

– Search


– Foundation Server only

– You Tube Videos

What is the fix or workaround if I’ve already made the mistake? – Plan to move most frequently changed content into RTE (PageContent Control) in

page layouts

– If default SharePoint page layouts don’t work, create custom page layouts with field controls. This is the right way to do it.

– If you have a lot of web content, consider a standard or enterprise license.

– In SP2010, use txt files to manage content;

2. Using Dreamweaver Directly with SharePoint

What is it?

– Opening up SharePoint site using Dreamweaver and editing pages /content


– Destroys SharePoint functionality

– Basically turns pages into static content only editable in an HTML editor

2. Using Dreamweaver Directly with SharePoint


– Rework costs


– No


– There isn’t one. Sorry.

– Start over

1. Modifying Default Files

What Is It?

Making changes to default files on the SharePoint Server (14 hive)

A Violation of the #1 Rule of SharePoint Branding Club



– These files are the originals. You just don’t mess with the originals.

– Changes may impact the entire farm.

– Multiple WFE with load balancing mean changes need to be made in more than one place.



– Difficult to troubleshoot

– Cumulative Updates

– Migration


– No


– Replace anything that has been modified with a clean copy of the original file (s)

– Move your customizations out of the file and package into a feature

Contact Information

Marcy Kellar

SharePoint Soapbox

[email protected]

+1-317-902-8057

twitter - @marcykellar

LinkedIn - http://linkedin.com/in/marcykellar

Blog – http://thesharepointmuse.com

SharePoint Event Photography - http://marcykellarstudio.com

mailto:[email protected]

http://linkedin.com/in/marcykellar

http://thesharepointmuse.com/

http://marcykellarstudio.com/

sharepoint exchange forum - 10 worst mistakes in sharepoint branding

Technology