1. 10 Worst Mistakes in
SharePoint Branding
Presented by Marcy Kellar

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

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

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

5. 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
Why is this a mistake?
– Just because you can design it, doesn’t mean it will work in
SharePoint
– Potential compromise of functionality

6. 9. Don’t Let The Designer Get
Carried Away
What is the impact or cost?
– Dissatisfied business customers
– Inaccurate budget / timeline
Are there any exceptions?
– No. But SharePoint experts should be involved in part of the
design process and/or should be used to provide guidance
during design
What is the fix or workaround if I’ve already made the
mistake?​
– Regroup meeting to set expectations
– Work with designers /design firm that understands
SharePoint

7. Example

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

9. Example: Fixed Width Publishing applied
to Collaboration Site

10. Example: Content Spillage

11. Example: Content “Spillage” on System Pages

12. 8. Applying Fixed Width to
Collaboration Sites and System Pages
What is the impact or cost?
– User Experience
– Usability
Are there any exceptions?
– No.
What is the fix or workaround if I’ve already made the
mistake?​
– 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

13. Example: Quick CSS Fix on Content Area

14. Solution: Add 95% Width instead of Fixed

15. 7. Using Too Many Master Pages
What is it?
Using Master Pages to manage variations and using too many.
Why is this a mistake?
– More assets to manage
– More development work
– Costly and /or complex Migration

16. 7. Using Too Many Master Pages
What is the impact or cost?
– Migration and / or redesign cost and time
– Consistency across sites
– Hard to maintain/manage changes
Are there any exceptions?
– “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

17. Example Scenario
Master Pages 1 Master Page per distinct Site
Template = 6 Master Pages
Publishing Meeting Workspace
Collaboration Minimal (Search)
My Site Personal My Site Host
(My Content) (Newsfeed, Profile)

18. Base Branding
Example Scenario
sharepoint
style.css
Master Pages
Publishing Meeting Workspace
Pub.css mws.css
Collaboration Minimal (Search)
collab.css minimal.css
My Site Personal My Site Host
(My Content) (Newsfeed, Profile)
mysitepersonal.c
mysitehost.css
ss

19. 6. Removing QuickLaunch
ContentPlaceholder
What is it?
Removing the Quick Launch Control because you don’t want left navigation
on the home page.
Why is this a mistake?
– 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

22. 6. Removing QuickLaunch
ContentPlaceholder
What is the impact or cost?
– Rework; Extended Development Time
– Loss of Functionality
Are there any exceptions?
No
What is the fix or workaround if I’ve already made
the mistake?​
– Add it back to the master page

23. 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”
Why is this a mistake?
– Impacts layout, growth / stretching/ empty areas
– Real content helps define patterns

24. 5. Not Designing Around Real
Content
What is the impact or cost?
– Rework based on real content to support actual content once
migrated or created.
Are there any exceptions?
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

25. 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%

26. Example: Fixed Width Ribbon

27. 4. Fixing the Width of the Ribbon
Why is this a mistake?
– Not consistent throughout Office Products
– Not consistent through organization
– Administrative tools change size, icon, location

28. 4. Fixing the Width of the Ribbon
What is the impact or cost?
– Training -- especially 3rd party
Are there any exceptions?
– If design is very important to your organization
What is the fix or workaround if I’ve already made
the mistake?​
– Update your implementation to expand Ribbon to full
width.
– Or create your own training materials to reflect the look of
the custom ribbon

29. 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
Why is this a mistake?
– No versioning of content
– Not best method for managing web content

30. 3. Using Content Editor Web Parts for
Web Content
What is the impact or cost?
– No versioning
– Publishing model / Approval
– Search
Are there any exceptions?
– 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;

31. 2. Using Dreamweaver Directly with
SharePoint
What is it?
– Opening up SharePoint site using Dreamweaver and editing
pages /content
Why is this a mistake?
– Destroys SharePoint functionality
– Basically turns pages into static content only editable in an HTML
editor

32. 2. Using Dreamweaver Directly with
SharePoint
What is the impact or cost?
– Rework costs
Are there any exceptions?
– No
What is the fix or workaround if I’ve already made
the mistake?​
– There isn’t one. Sorry.
– Start over

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

34. 1. Modifying Default Files
Why is this a mistake?
– 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.

35. 1. Modifying Default Files
What is the impact or cost?
– Difficult to troubleshoot
– Cumulative Updates
– Migration
Are there any exceptions?
– No
What is the fix or workaround if I’ve already made the
mistake?​
– 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

37. Contact Information
Marcy Kellar
SharePoint Soapbox
mkellar@sharepointsoapbox.com
+1-317-902-8057
twitter - @marcykellar
LinkedIn - http://linkedin.com/in/marcykellar
Blog – http://thesharepointmuse.com
SharePoint Event Photography -
http://marcykellarstudio.com