Wharton Web Conference

July 12 –14, 2011, in Philadelphia part-day workshop:

“Rebuild a Website with CSS”

In this 3-hour workshop, we examined a real site and walked through cleaning up and enhancing its CSS and HTML to improve its performance and maintainability. Enhancements included:

  • converting the fixed-width layout to a responsive, fluid layout utilizing CSS3 media queries and flexible images
  • rebuilding an image-based nav bar to flex to the window size and use real text styled with @font-face
  • utilizing display:table to rebuild a grid of featured content on the home page
  • reducing the CSS file from 747 lines to 261 lines, or 18 kb to 5 kb
  • reducing HTTP requests, resulting in a loading time decrease of about 20 percent