• UI nitpick (fixed with sprite)
  • Chrome resizable form UI element

Doing more with less

Newer Older

Reducing page weight/load time and improving UI quality simultaneously? Bonus!

In this case, up to 15 HTTP requests can be shaved off this bit of UI depending on browser support (IE 6 still uses the old stuff, but everyone else benefits with a sprite at minimum.) The extra requests stem from legacy code, using multiple images for rounded corners and drop shadows.

In the best case, the rounded corner images are ditched for CSS' border-radius (or -khtml-border-radius, etc.), which renders native and anti-aliased rounded corners wonderfully in Safari and Firefox (Chrome should eventually, too.) That's 8 requests saved there. Additionally, the 8 images used to make the drop shadow can be reduced to one "sprite" image which is reused, saving another seven requests. Win!

Finally, there was a very small color shift on the right side of the old drop shadow that had been annoying me, which I fixed with the sprite-based one.

Rev Dan Catt, flickrjo, shanan, and 7 other people added this photo to their favorites.

  1. judemat 64 months ago | reply

    Schiller for internet president!

  2. Dunstan 64 months ago | reply

    Yes Tuquan!

  3. Rev Dan Catt 64 months ago | reply

    Scott wins the interwebs for the year, and it's only the 2nd.

  4. jspaw 64 months ago | reply

    Will be hugging you soon.

  5. coda 64 months ago | reply

    The perfectionist in me wishes to buy you a beer

  6. shanan 64 months ago | reply

    I'm going to vote twice for schill.

  7. : Nils 64 months ago | reply

    Cerberus thanks you!

  8. Kevin 64 months ago | reply

    "Cerberus thanks you!"

  9. warrenski 64 months ago | reply

    Great attention to detail - kudos

keyboard shortcuts: previous photo next photo L view in light box F favorite < scroll film strip left > scroll film strip right ? show all shortcuts