CSS Reduction: Semantic HTML less CSS
An effort to simplify user interface rendering and data delivery for a commercial real estate marketplace data and mapping system.
An effort to simplify user interface rendering and data delivery for a commercial real estate marketplace data and mapping system.
An analysis of the site revealed ineffective, redundant and excessive reliance on nearly a dozen linked stylesheets and random inline CSS to retain the site's design requirements. Offering real-time search, the site operates by aggregating real estate market data from multiple sources and then applying analytic and mapping tools to render that data both textually and graphically. The back-end was complex and kept the small IT team busy. Ongoing maintenance of the front-end could be characterized as quick fixes by systems programmers who were neither expert in nor had the luxury of learning how to exploit the powerful benefits CSS provides content management.
After identifying a handful of page types I created semantically structured HTML templates and then proceeded to apply styles in a CSS file for positioning of major block elements and another to style specific content pieces found on different pages. I added comments to the templates to indicate what I had changed and why. In the end, a comparison of the weight of the HTML and CSS in production to the templates and CSS I wrote demonstrated a 90% reduction in the CSS definitions. The HTML templates were modestly smaller too despite the extra annotations.
Please see below to determine for yourself whether the design was compromised at all. (The additional elements you see in the "fixed" version were meant to appear in the original design but were "broken" in Firefox.)
After identifying a handful of page types I created semantically structured HTML templates and then proceeded to apply styles in a CSS file for positioning of major block elements and another to style specific content pieces found on different pages. I added comments to the templates to indicate what I had changed and why. In the end, a comparison of the weight of the HTML and CSS in production to the templates and CSS I wrote demonstrated a 90% reduction in the CSS definitions. The HTML templates were modestly smaller too despite the extra annotations.
Please see below to determine for yourself whether the design was compromised at all. (The additional elements you see in the "fixed" version were meant to appear in the original design but were "broken" in Firefox.)
