Top 10 Mistakes in SharePoint 2010 Branding and UI Design

I’ve been brought in to fix or consult on Branding and UI projects that have gone wrong. These short “break-fix” projects have opened my eyes to some bad practices that seem to be trending. I’ve compiled a list of the worst mistakes that I have been seeing more frequently or that I have seen consistently over the years when SharePoint Branding projects that go wrong.

10. Using Inline Styles

Inline styles are styles applied directly to HTML content and looks like the example below:

image

Inline styles are the most specific and the highest priority of all other styles so it’s tempting to use them instead of fighting with the cascading style sheets of SharePoint. You don’t want to manage styling this way because inline styling mixes content and presentation (look and feel) together. This is a bad practice because styles aren’t managed in a central place, pages can become inconsistent and they are pesky little buggers to find and correct.

Area of Impact: Consistency, Sustainability, My Patience

Resources:

9. Applying a Fixed Width To a Collaboration Site

A fixed width layout has a set width around the main content area and doesn’t expand to fill the browser window. When you fix the width of a site meant for collaboration and document management, you have to potential of eliminating extra space for users to add content and collaborate.

If you must fix the width on a collaboration site, fix the width of the content area using a percentage rather than a set pixel value. This ensures the maximum amount of space and focuses on function rather than form.

Area of Impact: User Experience, User Adoption

Resources:

8. Not Designing Around Real Content

“Lorem Ipsum” is commonly used as placeholder text to demonstrate layout and general look and feel without focusing on content. A design with Lorem Ipsum placeholders only represents one possible scenario with content. Most designs using Lorem Ipsum require rework later in the implementation. It’s not enough to just use placeholder text. You need to design around real content.

Area of Impact: Aesthetics; Usability; Timeline and Development Costs

Resources:

7. Using Too Many Master Pages

30. That is the most master pages I’ve seen in use in a single site collection. Apparently, a new master page was created for every design variation even if it something small such as a different logo or a background color. Over the course of a year, the differences between the master pages became significant. Consolidating these master pages was part of the upgrade path and it cost the client a fortune. Be wary as those master page numbers start climbing.

If you are using over four master pages to manage branding for any given site or site collection, you are probably doing it wrong. If you forced me at gunpoint to come up with an ideal number of master pages, I would say 1 master page per parent design and then I would probably wet my pants (because I’m at gunpoint).

If you are using multiple master pages that share the same parent design, try to consolidate them. First define how they are different. Determine if those variations can be managed using page layouts, custom controls, alternate CSS, or scripts. You can generally manage styling differences in a design such as colors, logos, and icons using CSS and page layouts. Variations in master content such as header and footer links can be managed with SharePoint lists and custom web parts or controls.

Area of Impact: Development time and cost, Sustainability, Consistency

Resources:

6. Removing the Quick Launch ContentPlaceholder from the Master Page (Especially When You Need Left Navigation)

This is the most common fix that I do because of the following scenario: The home page is the only page that has been mocked up in a design composite. The home page mockup doesn’t have left navigation. The left navigation control is removed because it is not needed on the home page. Just as content is being added to the site, the need for left navigation is uncovered.

SharePoint left navigation may not be perfect but understand the compromises you make when you delete it. If you remove left nav entirely, you affect the functionality of calendars, blogs, meeting sites, and managed metadata navigation.

So what do you do when you remove Quick Launch from the master page and then realize you need it? The best solution is to add it back to the master page. Hide it where you don’t need it, display it where you do (see resources below).

Area of Impact: Sustainability, Functionality, User Experience

Resources:

5. Fixing the Width of the Ribbon

Fixed Width Ribbon in SharePoint

Sometimes a fixed width layout will be applied to the ribbon too. This is a mistake because administrative tools are hidden when the width is fixed.

fixed width SharePoint ribbon overflow problem

Additionally, fixing the width alters the consistency of the User Experience intended by Microsoft’s ribbon used throughout Microsoft Office 2010’s platform. Fixing the width of the ribbon squishes the icons and moves site actions to nearly the middle of the page on high resolution. screens.

Don’t fix the width of the ribbon, fix the width of everything below the content area.

Area of Impact: Consistency, User Experience

4. Using Content Editor Web Parts instead of Field Controls for Web Content

The HTML, text, images, scripts and CSS found in web pages is called web content. SharePoint Publishing offers many tools to manage web content, such as page layouts, content types, site columns, field controls and the rich text editor.

Please note that I did not mention the Content Editor Web Part in that list. It is a useful web part in many scenarios but it is not the right tool to manage web content. The most notable reason why you shouldn’t use this web part to manage web content: An accidental deletion of the content in a Content Editor Web Part means it’s gone forever even if versioning is turned on.

One of the best articles to help you understand why you should be using a field controls to manage web content instead of Content Editor Web parts is article, Understanding Field Controls and Web Parts in SharePoint Server 2007 Publishing Sites (MSDN). I caught up with the author Andrew Connell and asked him whether this article still applies to SharePoint 2010

Andrew wrote, “(Microsoft) hasn’t updated the article because things didn’t change in 2010… The only reason this could be mitigated is because you can put a CEWP in the rich text area in 2010, but why would you do that when it’s a rich text area?”

Andrew goes on to say,“If you use any web parts, specifically the (Content Editor Web Part), you lose 100% of the version history when content pages are updated. Only content fields mapped to [site] columns retain the version history.”

Area of Impact: Sustainability, Consistency, User Adoption, Peace of Mind

Resources:

3. Using Dreamweaver Directly with SharePoint

Dreamweaver is a popular web design tool made by Adobe. It’s used to develop HTML and applications for the web. Do NOT use Dreamweaver to open SharePoint sites and edit HTML. Dreamweaver is not designed to work with SharePoint and doesn’t play nicely. Dreamweaver can corrupt SharePoint pages by letting you open rendered page instances, which detaches publishing pages from their page layout and makes it impossible to reattach. The non-functional SharePoint site that I saw built with DreamWeaver had hundreds of pages and all were detached from their page layout.

SharePoint Designer is the appropriate and FREE recommended tool for editing HTML and customizing the UI (in addition to Visual Studio) in SharePoint. Download either SharePoint Designer 2010 32-bit or SharePoint Designer 2010 64-bit.

There are many disadvantages of using Dreamweaver verses SharePoint Designer. You don’t have visibility of SharePoint information and can’t do SharePoint-y things like publish your content, see what is checked out, approve content, create workflows, build data view web parts, create content types, page layouts and much much more.

You don’t have to give up your Dreamweaver though. You can use Dreamweaver OFFLINE far away from SharePoint to create HTML and scripts to use in SharePoint. Think of it as a very expensive version of NotePad.

Area of Impact: Functionality, Development Time & Cost, Um..You Broke SharePoint

Resources:

2. Modifying Default Files

fc-tyler1

The First Rule of SharePoint Branding is Don’t Modify Default Files!

Although it’s possible to modify CSS, JS and Master pages found in your SharePoint Server directory C:\Program Files\Common files\Microsoft Shared\Web Server Extensions\14, (aka the 14 hive), it’s not best practice to modify these master files. If you modify these files, you will grow hair on your palms and your SharePoint site will blow up. (Not really) But seriously, don’t modify default core SharePoint files. Once you modify these files, your changes will impact the entire farm. By modifying these files, you are at risk to lose all of your changes with Cumulative Updates. These files are the originals. You just don’t mess with the originals.

If you want to modify master pages, CSS or scripts found in the 14 hive, create a copy of the file(s), make modifications, package those up into a Feature and deploy via a Solution.

Area of Impact: Support, Functionality, Farm Health, Content Migration, Upgrade,

1. Focusing on the Styling, Not the User’s Experience

SharePoint Sites that "Pop" Comic Strip by Marcy Kellar

Have you ever found yourself behaving like the user in the comic strip above: No? Neither will your users. Sometimes you have to step back from the design and ask yourself if what you are doing makes sense. It’s important to think about how content will be updated and styled by real users that aren’t as skilled in web design or coding as you. Could a real business user such as your mom/grandma/teacher/grandpa/uncle/dad figure it out?

Area of Impact: User Adoption, Maintenance, Sustainability, Development Cost; Training Cost; Functionality, Overall Success, Your Future in this Field

Resources:

Summary

Hopefully this list of mistakes will help you remember danger spots and understand the impact if you are headed down that path. Here’s a summary of how you can avoid the 10 worst mistakes in branding and customizing SharePoint 2010.

10. Don’t use inline styles; use external style sheets.

9. Don’t apply a fixed width to a collaboration site. Give collaborators all the page real estate they need.

8. Don’t design around Lorem Ipsum; Design around real content.

7. Don’t use too many master pages; too many master pages is usually an indicator you aren’t doing it right.

6. Don’t remove the Quick Launch ContentPlaceholder from the master page if you plan to use left navigation; hide and display it using CSS.

5. Don’t fix the width of the ribbon; If you Fix the Width of the design; Fix the width of the content area below the ribbon.

4. Don’t use Content Editor Web Parts to manage web content; use field controls and rich text areas;

3. Don’t use Dreamweaver to edit SharePoint pages; use SharePoint Designer or Visual Studio.

2. Don’t modify default files (namely corev4.css) that live in the 14 hive; make copies and modify your copies.

1. Don’t sacrifice user experience for visual design; Design for user needs.

 

Would you like to add to this list? Please share your own war stories and warnings.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

About Marcy Kellar

Marcy Kellar is a SharePoint Solution Architect at Perficient and well known for her expertise in SharePoint branding. Her specialties include user experience design, branding and UI customization, information architecture, web content management, and usability testing. Marcy’s experience spans over 20 years and includes work in design, life sciences, psychology and R&D. Marcy is co-author of Beginning SharePoint Designer 2010 (Wrox, October 2010) and is a former professor at the Art Institute teaching user centered design courses, “Intro to User Centered Design” and “Usability Testing.” She is a popular speaker, author and award-winning artist and photographer.

Branding, sharepoint 2010, User Interface Design

16 Responses to Top 10 Mistakes in SharePoint 2010 Branding and UI Design

  1. Marcy Kellar April 11, 2012 at 10:04 pm #

    Please try the Print PDF plugin on this site with this post. It is awesome. I’m so impressed.

  2. Nadine April 11, 2012 at 10:34 pm #

    Thanks Marcy! All great to know, as just getting into SharePoint implementation :)

    PS: you’re right the Print PDF plugin IS Awesome! Nice work!

  3. Erik Swenson
    Twitter:
    April 12, 2012 at 7:41 am #

    Great breakdown Marcy!
    I would have to agree that over the last 8 years of branding SharePoint I have seen every one of these mistakes being done. I sometimes find myself going down some of these rabbit holes and need to pull myself out. I really think we all need to sit back and look at the project as a whole and identify areas of consolidation and simplification. I totally agree that we have been so quick to jump into creating new master pages or page layouts due to the fact that it is really easy to apply them with feature stapling. And like you said in most cases CSS used in the right way can solve most of the user and business needs.
    Thanks again! And your PDF plugin does really rock! I might have to find a way to get that as a SharePoint 2010 option for printing pages…

  4. Drew Bills April 12, 2012 at 8:23 am #

    Very nice! Great point about the fixed ribbon, glad you have it on here.

    • Marcy Kellar April 12, 2012 at 11:25 am #

      I’m glad I took the original #5 out. Your persistent debate was valuable :) Thanks for helping me with review.

  5. Veronique Palmer April 12, 2012 at 8:53 am #

    Nice one Marcy, thanks.

  6. Christophe
    Twitter:
    April 12, 2012 at 5:39 pm #

    Great post! I especially liked your points 1 and 8.

    As for point 6: instead of tweaking the home page to hide the QuickLaunch, you can simply create a new Web Part page (QuickLaunch is hidden by default) and make it the home page (with just one click in the ribbon).

  7. Tom Daly
    Twitter:
    April 30, 2012 at 10:25 am #

    Great Post! definitely seen one or many of these when re-branding client sites.

  8. Rahul August 1, 2012 at 7:25 am #

    Thanks for this great post. It really helps me understand the SharePoint better. I liked Point 5, 6 & 9. And Print PDF option is super cool. :)

  9. Mike August 9, 2012 at 2:03 pm #

    Disagree about using filler text. It’s not always feasible to wait on actual content. Lorem Ipsum can be a great way to give you an idea of what the text might look like. I have never had an issue replacing filler text with actual text and having it look funny.

    • Cheri November 5, 2012 at 2:51 pm #

      I agree about the filler text, but I sympathize strongly with Mike’s point that it’s not always feasible. It also depends on the complexity of the site. If it’s a simple, mostly static, brochure site, then all the content is going to be unchanging text, images and media anyway. But for more ‘functional’ or ‘dynamic’ sites, there are a lot of reasons to fight for real content, if you have that kind of say-so. it just saves a lot of headaches in the end, for everybody. And the most successful sites are dynamic and ‘fresh’ in their content.

      If you can’t… I think if you keep the spirit of it, e.g. don’t just put in the filler without thinking about it but instead consider what kind of content is likely to be there. Maybe that would at least help. For example, it’s easy to just put filler text in the whole page, but consider if there may be areas where dynamic content might be desirable once real content is available, and design enough placeholders to allow plugging in web parts, too. Try to get your content providers to think ahead as much as possible by asking them pointed questions like ‘would you like to have the site automatically show the last three headlines in this spot?’ if you can help them to understand what is possible, they can help you by asking for what they really want.

      After all, what’s the point in using SharePoint to host your website if you don’t need/want the features it offers. If you want a basic site, there are far easier and cheaper ways than SharePoint. Too many times I’ve seen technical folks think strictly of doing what was asked for instead of allowing a requirements/brainstorming phase to occur before forging ahead. it may be easier to just follow a spec. But if we care about quality, it’s not just our job as SharePoint professionals to build what they ask. It’s our job to give them something useful and teach them how to utilize the features that makes this tool uniquely valuable. To do that we need to think of the things they don’t. And we need to take the time to try and understand what they are trying to do and even help them design their content to take advantage of available features they may not know about. Working with their real content is easier, but you can do it the hard way if you have to.

  10. Lanod October 16, 2012 at 7:24 am #

    Hmm. Currently breaking two of those rules (sort of). Using CEWPs and Dreamweaver to manage the content. The content is currently hosted externally (being reused in a few places) but is about to be baselined and move in.

  11. Bilawal October 19, 2012 at 2:58 am #

    Nice points

Trackbacks/Pingbacks

  1. SharePointのデザイン開発でやってはいけない10のルール+1 - April 16, 2012

    [...] Top 10 Mistakes in SharePoint 2010 Branding and UI Design 10. Using Inline [...]

  2. Branding Resources for those who don’t do branding… | Adaptive Group Blog - October 10, 2012

    [...] http://www.thesharepointmuse.com/2012/04/the-10-worst-mistakes-in-sharepoint-branding-and-ui-design/ [...]

Leave a Reply