Proof of concept for the clean-up of a SharePoint-based enterprise website.

The Situation

The enterprise’s existing public site, based on Sharepoint CMS platform, was unwieldy and difficult to manage, due to one of the potential drawbacks of this highly-structured (but shared) publishing platform:

Too Many Cooks Spoil the Broth.

  • Size The enterprise site had grown to 60 template files, 11 CSS files, 96 WebPart files, and more than 2600 CSS tags.
  • Structure There was confusion across the entire range. The Templates were poorly designed to begin with and violated standard coding best practices.
  • Consistency The Content Management environment was compromized byredundancies andobscurity.
  • Integration The technical, design and business stakeholders had no common ground for working together.
  • Compliance The site did not conform to usability best practices.

In short – There was no system.

My Role

I was brought in to perform a “cleanup” on the environment – to reconcile the mess.

This is not simply “a coat of paint” on the surface of functional code.  In fact, it has no impact whatsoever on the styling of any pages. Yet it is integral to the creation and maintenance of the code itself in the SharePoint environment.  Our project has substantial implications for the IT DevTeam, as well as the Content Managers who use and maintain that platform.

Initial Stage: SharePoint CSS & Template Cleanup

The CSS Cleanup stage deals exclusively with the semantic “information architecture” of the enterprise website, which is embodied in the templates & tags of the site’s Cascading Stylesheets (CSS).

kpmg-templateThese CSS tags are the common ground among the IT Development Team, Marketing, which defines presentational standards, and the SharePoint Content Management System which is the structural backbone of our site.

This image shows markup of a legacy template.  The colors identify code which is redundant, essential,extraneous, belongs elsewhere, or needs to be re-configured.

CSS is the semantic structure of the enterprise’s web presence. It is the fundamental building block of any intelligent information system. Any changes to CSS have implications across all vectors of the endeavor: programming, database maintenance, design and “user interface”.

The enterprise website is the basis for more than 140 global websites which are maintained and customized locally. The scale and scope of all of those sites are directly affected by our CSS Cleanup.

This is why it is necessary to execute a fully-featured Proof of Concept for the CSS Cleanup stage.

We expect to address Workflow, Behaviors and Presentational Styling issues in future stages.

CSS Cleanup

In CSS Cleanup we focus on Four main areas:

  • Best Practices
  • Compliance with Accessibility Standards
  • Management & Maintenance Process
  • Design Platform

We already knew:

  • Several of the templates were obsolete
  • Many of the CSS files were redundant
  • The core templates employed only ~150 CSS tags (i.e. More than 2300 tags must be ‘cleaned’)

It’s an exercise in semantic Information Architecture

The challenge:  Fix it without breaking it.


Best Practices

Our CSS Cleanup process conforms to industry “best practices”, which ensure that the CSS and Templates are well-configured, well-formed and well-integrated. These are being captured as reference-able guidance documents.

Compliance with Accessibility Standards

Our commitment to Best Practices also inherently implies our conformance with the enterprise’s Accessibility, SEO andUsability policies , which echo accepted industry standards.

Effective Management & Maintenance Process

You can’t fix it until you know what you have, where it is, and what it’s called. CSS & Template Cleanup provides the map, as well as the first phase of solutions. Theimplications for ongoing management, maintenance and cross-discipline & enterprise-wide communication should be obvious. Note: The information identification and mapping collateral that we produce in the course of CSS & Template Cleanup have “legs” beyond IT and fixing the code. The knowledge management aspects of this project should not be overlooked.

Viable Design Platform

  • Enterprise Marketing wants to maintain brand identity & consistency
  • Site creators and managers want a simple, easy-to-use editorial environmentthat is based on pre-formatted, re-usable components
  • … that still allow for some flexibility (the notion that you have some creative elbow room within a well-defined, well-regulated structure)

The CSS & Template Cleanup process is fundamental to usability.

Proof of Concept

The challenge of CSS & Template Cleanup is daunting because we do not have the luxury of “a clean slate”. The Cleanup is expected to deal with substantial legacy problems. The Cleanup has implications for both technical code environment (IT DevTeam) and the user interface design arena (Marketing and the Editorial interface).

The POC is driven by several factors:

  • The style sheets, the templates, design components, code generation modules and the SharePoint platform are inextricably intertwined. It is almost impossible to work on one without also addressing the others.
  • The inter-relationship among the technical programming and design elements is highly complex. They must be addressed, tested, and solved in context.
  • One reason for bringing UX expertise onboard in order to implement CSS Cleanup is because the fundamental information architecture aspect of CSS in the legacy enterprise site was not particularly well-organized ordocumented up to this point.
  • The production and design environment is made more complex by the inclusion of 3rd party CMS software SharePoint, which imposes its ownproprietary CSS structure and coding metaphor.
  • A goal of the UX engagement is to provide best practices guidance and workable, efficient process in the handling of CSS going forward.

The Proof of Concept allows the CSS-oriented UX resource and the IT DevTeam to work out and test the underlying assumptions across a range of challenges.

View the original KPMG case study


© The Communication Studio LLC