Project Description:
INTRODUCTION
Looking for a CSS expert to review, optimize and organize multiple CSS files for a large, complex web site. Current website has been through multiple project updates over time and can use some CSS optimization to ensure we are consistent in our CSS use, minimize the file size and CSS classes and help determine overlap classes that can be combined and streamlined. The secondary part of this project is to provide new CSS for mouseover states and improved user experience and interaction design.
CSS OPTIMISATION GOALS
1. Create a new global CSS file that contains global CSS elements used on most pages.
2. Create top-level navigation specific CSS files for each site section that will contain all CSS classes and definitions for section-specific CSS.
3. Minimize the file size of CSS files loaded to reduce page load times
4. Come up with a consistent set of classes and styles to use on existing and new pages
5. Analyze on-page inline-css and create recommendations to replace inline-css with global classes.
INTERACTION DESIGN GOALS
1. Provide consistent mouseover states for links, images, other site features.
2. Improve usability and user experience by providing hover states and visual cues to the user interacting with on-page elements.
3. Additional interaction designs to be provided.
PROJECT GOALS
1. Minimum 20% reduction in total CSS file size
2. Reduce average page load CSS from 515KB to 300KB (or less)
3. Removal of inline-css from page, document page filesize reduction from doing this.
PROCESS
1. Review existing CSS files, locate duplicate classes and the main sources of CSS duplication.
2. Merge Master_1.0.css and Master_1.1.css to remove duplication of many classes. New Master CSS file will be created with global CSS elements only.
3. Each top level navigation section will have a separate, additional CSS file. This will reduce page load times on key landing pages and the homepage. (Still to be determined - find out if we can get page id’s or section classes applied to the code)
4. Classes specific to sections will be moved into their respective CSS files - only global CSS elements will remain in the new Master CSS file.
5. Ensure all CSS definitions are utilizing CSS shorthand properties and combine similar classes for smaller CSS file size.
6. Review inline CSS and provide recommendations on how to reduce page load sizes by applying generic classes instead of utilizing inline CSS code.
