Earlier this year I wrote a blog on the Top 10 Mistakes in SharePoint 2010 Branding and UI Design (http://bit.ly/ITzlJl) and had such an overwhelming response that I wanted to present it to the community. I brought in a front end developer (Tom Daly) and a Developer (Mike Mukalian) to help me convey the different perpsectives that each of our roles takes. My original list of mistakes changed a bit when we brainstormed on overall cost and commonality of branding messes. I still stand by my original listing in the blog but by adding different roles in the mix, we were able to provide a depth of experience to support these 10 costly and common mistakes in SharePoint Branding and UI Development.­

1. Tom Daly, Marcy Kellar, and Michael Mukalian
and Host: Jason Himmelstein
SharePoint Saturday NYC | July 28, 2012

4. What You Will Get Out of this Panel
– The ability to steer clear of making big
mistakes
– An opportunity to ask questions and share
your experience
– The excitement of watching the MAGIC
between different roles

5. Panel Contact Information
Designer Front End Developer Developer
Marcy Kellar Tom Daly Mike Mukalian
@marcykellar @_tomdaly_ @mmukalian
thesharepointmuse.com thomasdaly.net www.mukalian.com/blog

6. Don’t Let the Designer Get Carried Away
What Is It?
Designers have “crazy” ideas
that may not translate well into
SharePoint.

7. Summary:
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
• What is the impact or cost?
– Dissatisfied business customers
– Inaccurate budget / timeline
• Are there any exceptions?
– No – But SharePoint Branders should be involved in part of the design
process and/or should be used to provide guidance
• What is the fix or workaround if I’ve already made the mistake?​
– Come to “insert religious icon or choice” meeting (Come to Jesus meeting)
– Work with designers /design firm that understands SharePoint

8. Impossible Drop Down Navigation
Having the flyouts render horizontal instead of vertically.
This was with the 2007 table based navigation
Wouldn’t work correctly in all browsers
No budget + not in scope to create new navigation

9. Re-inventing SharePoint Forms
No custom code budgeted, or even possible to deploy in
timeframe
People Picker
Upload Control

10. Impossible Left Navigation
• No way to accomplish this with OOTB Nav
• Need 3rd party or custom control
2 levels w/ grouping (Fine) with
expanding children on the current
site.
3 levels (impossible w/ OOTB) with
expanding children on the current
site

11. Rounded Corners
http://freecsstemplates.over-blog.com/

12. Applying Fixed Width to Collaboration Sites
and System Pages
What Is It?
Fixing the width of the layout
on any site where users are
primarily collaborating.
Collaboration Sites:
• Team Site
• Meeting Workspace
• Document Center
• Record Center
• Etc..

13. Summary:
Applying Fixed Width to Collaboration Sites & System
Pages
• What is It?
– Fixing the width of the layout on any site where users are primarily
collaborating.
• Why is this a mistake?
– Limits space for collaboration
– Users have to scroll
– Content spillage
• What is the impact or cost?
– User Experience
– Usability
• Are there any exceptions?
– Never
– Must keep lists views, web parts – keep small; governance on content
• What is the fix or workaround if I’ve already made the mistake?​
– Width:95%;display table ;margin:0 auto;
– Make system pages inherit default branding or branded without fixed width
– Make inner scroll

14. Constrained
WebPart

15. System Page Issue with Fixed Width

16. Content “Spillage” on System Pages

17. Quick CSS Fix on Content Area

18. Solution: Add 95% Width instead of Fixed

20. Collaboration Site Example

21. Using Too Many Master Pages
What Is It?
Using Master Pages to manage
variations and using too many.

22. Summary:
Using Too Many Master Pages
• What is This?
– 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
• 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

23. Example Scenario
• 1 Distinct Design
My Sites
• All sites in scope
Collaboration Search Center
Meeting
Workspaces Publishing

24. Example Scenario
Master Pages
1 Master Page per distinct Site
Publishing Meeting Workspace Template = 6 Master Pages
Potential to need a separate
master page for system pages.
Collaboration Minimal (Search)
My Site Personal My Site Host
(My Content) (Newsfeed, Profile)

25. 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)
mysitepers mysitehost.
onal.css css

26. Breaking the Master Page Development
What Is It?
Breaking the Master Page
During Development
If you don’t test along the way,
its get’s messy

27. Summary:
Breaking the Master Page During Development
• What is it?
– Breaking the Master Page During Development
• Why is this a mistake?
– There are so many ways to break the master page
• What is the impact or cost?
– Broken Master Pages
– Rework, Scratching an idea
– Functional issues that aren’t evident until site being used.
– The further along you get, the harder is to fix a break
• Are there any exceptions?
– No
• What is the fix or workaround if I’ve already made the
mistake?​
– Constantly test
– Start over

28. Use Code View in SPD

29. Not Designing Around Real Content
What Is It?
• Not using real content to guide the design.
• Using filler / fake content
Vector Graphic courtesy of http://dryicons.com

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

31. First View of Mockup
Example of Mockup
provided
Use of Lorem Ipsum
(Placeholder Text) • Marcy - screenshot of Top Nav wrap

32. Fixing the Width of the Ribbon
What Is It?
Fixing the width of the ribbon to match the fixed width of the content
area

33. Summary:
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%
Why is this a mistake?
– Not consistent throughout organization
– Administrative tools change size, icon, location
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

35. Using Content Editor Web Parts for Web
Content
What Is It?
Using the Content Editor Web
Part for Web Content

36. Summary:
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
• 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;

37. Removing the Quick Launch
ContentPlaceholder from Master Page
What Is It?
Removing the Quick Launch
control from the Master Page

38. Summary:
Removing the Left Nav Controls from Master Page
• What is it?
– Removing the Left Navigation Controls from master page
• Why is this a mistake?
– Can’t take advantage of left nav anywhere that master page is
referenced.
• What is the impact or cost?
– Can’t use QL on other pages
– Lost functionality on calendars, wiki pages, blogs, meeting sites,
tree view, group work site, and managed metadata navigation
• Are there any exceptions?
– Public facing SharePoint sites
• What is the fix or workaround if I’ve already made the
mistake?​
– Add QL back into MP
– Use page layouts to dictate hiding or showing

41. Not Considering the UI in Custom
Development
What Is It?
When developing a web
part or ui component, you
need to consider how it Joe Cool’s WebPart
will be presented in the
UI.
• Simple Example
• No way to select the items in the web part cleanly
using css

42. Johnny Smith’s code
All items are easily accessible via CSS Selectors

43. 3rd Party Control
Class on every
level
They are even nice
enough to class
the first and last
items of sets

44. Summary:
Not Considering the UI in Custom Development
• What is this?
– When developing a web part or ui component, you need to consider how it will
be presented in the UI.
• Why is this a mistake?
– Without “hooks” to manipulate the UI, hard to style
• What is the impact or cost?
– Hard or impossible to brand
– Development time
• Are there any exceptions?
– No. Bad practice.
• What is the fix or workaround if I’ve already made the mistake?​
– Specificity
– Pseudo classes
– Jquery (not recommended)
– Change web parts if designed in house
– Be considerate of the UI interface and put css classes on your web controls. If
you're unsure of what to class, then heres my rule; #1 Class Everything.

45. Modifying Default Files
What Is It?
Going into the 14 hive in SharePoint
and modifying default files
A Violation of the
#1 Rule of SharePoint
Branding Club
Graphic by Marcy Kellar

46. Summary:
Modify Default Files
• What is It?
– Making changes to default files on the SharePoint Server (14 hive)
• 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.
• 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 originals
– Move your customizations out of the file and package into a feature

47. Summary:
The Top 10 Worst Mistakes in SharePoint Branding
1. Letting the Designer Get Carried Away
2. Applying Fixed Width to Collaboration Sites and System
Pages
3. Using Too Many Master Pages
4. Breaking the Master Page During Development
5. Not Designing Around Real Content
6. Fixing the Width of the Ribbon
7. Using Content Editor Web Parts for Web Content
8. Removing the Left Nav Controls from Master Page
9. Not Considering the UI in Custom Development
10. Modifying Default Files

49. Panel Contact Information
Designer Front End Developer Developer
Marcy Kellar Tom Daly Mike Mukalian
@marcykellar @_tomdaly_ @mmukalian
thesharepointmuse.com thomasdaly.net www.mukalian.com/blog