The Communication Studio

CSS Cleanup

Heuristic ( heuristics; Greek: , "find" or "discover") refers to experience-based techniques for problem solving, learning, and discovery. Heuristic methods are used to speed up the process of finding a good enough solution, where an exhaustive search is impractical. Examples of this method include using a "rule of thumb", an educated guess, an intuitive judgment, or common sense.

The Site Evaluation is often the first step in an engagement. This high-level insight is pretty effective at identifying the low-hanging fruit.�

Challenges

The client's existing public site, based on Sharepoint CMS platform, was unwieldy and difficult to manage.

Corporate Template

Size The 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 by redundancies and obscurity.

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.

High-Level Goals

  • Scope and structure the Cleanup tasks
  • Provide a pathway towards resolution of technical, design and business issues
  • Provide design guidance and mentoring in CSS best practices to KPMG's remote technical development team.

Solutions

Mapping

The first screenshot shows the initial cut at cleaning up KPMG's Sharepoint Templates.

Template Structure

Color Coding:

Blue: In-page HTML <Table> code (convert & remove)

Orange: In-page HTML styling (replace & remove)

Green: Clean code (keep)

White: CSS Tags (keep and map structurally)

  • Map the legacy CSS tags and their containers: Master templates, Layout templates, Page instances, CSS files, CSS tags, Sharepoint zones and reusable in-page containers (pods and Webparts)
  • Visualize the structure of CSS within Templates and Containers
  • Explain & Annotate the purpose and usage of files and tags

Cleanup

Clean & Compact requires a grasp of the interrelationships identified in the Map.

  • Remove in-page HTML <table>, <script>, <style> (Convert, as necessary)
  • Remove attribute redundancies
  • Convert CSS attributes to design & accessibility best practices
  • Rename with consistent, sensible naming conventions

View the case study in my portfolio: KPMG