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

Doing more with less

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.

Comments and faves

  1. judemat (53 months ago | reply)

    Schiller for internet president!

  2. Kevin (53 months ago | reply)

    *votes*

  3. Dunstan (53 months ago | reply)

    Yes Tuquan!

  4. Rev Dan Catt (53 months ago | reply)

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

  5. jspaw (53 months ago | reply)

    Will be hugging you soon.

  6. coda (53 months ago | reply)

    The perfectionist in me wishes to buy you a beer

  7. shanan (53 months ago | reply)

    I'm going to vote twice for schill.

  8. : Nils (53 months ago | reply)

    Cerberus thanks you!

  9. Kevin (53 months ago | reply)

    "Cerberus thanks you!"

  10. lclek, christhomson, getluky, and @superamit added this photo to their favorites.

  11. warrenski (53 months ago | reply)

    Great attention to detail - kudos

  12. anomaji, Cordobo, and Latente 囧 www.latente.it added this photo to their favorites.

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