Sharepoint "CSS Cleanup"
KPMG
KPMG needed a “CSS Cleanup” of their existing kpmg.com public site, with a focus on information architecture, best practices, conformance to accessibility standards, clear terminology, removing redundant code, integration with SharePoint, and bringing the technical development team up to speed on good process.The Value Proposition
- Guide process and stakeholders in making KPMG's public site manageable
- Educate technical staff on effective UI techniques for using SharePoint platform
- Group UX resource for "best practices", styling, tools, and features
- Bring KPMG's public site into compliance with accessibility standards
Challenges
The existing public site, based on Sharepoint CMS platform, was unwieldy and difficult to manage.
Size The KPMG 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
- Define a pathway towards resolution of technical, design and business issues that could be accommodated by KPMG's organizational structure
- Provide design guidance and mentoring in CSS best practices to KPMG's remote technical development team.
Solutions
Cleaning & Compacting requires a grasp of the interrelationships identified in the Map. This is based on the color-coded mapping in first screenshot, as well as the structural relationships in the second screenshot.
Mapping
- 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, like Webparts (See first screenshot)
- Visualize the structure of CSS within Templates and Containers (See second screenshot)
- Explain & Annotate the purpose and usage of files and tags
Cleanup
- Remove and convert extraneous in-page HTML
- Remove attribute redundancies
- Rename and Group CSS tags into a clear organization with consistent, sensible naming conventions that can be used and understood by a range of enterprise stakeholders
Compliance
- Conform CSS attributes to industry design & accessibility best practices
- Bring UI and structure into conformance with W3C Accessibility Standards