October 31, 2007

Rounded Corners, Drop Shadows, and Other Inconvenient Facts of Life

One of our favorite internal discussions--right up there with the true cause of global warming and why folks can't seem to park in one space--concerns the best way to do rounded corners, drop shadows, translucent backgrounds, and other tasty browser candy. Here are techniques from three of Yahoo!'s finest front-end engineers, Scott Schiller, Leslie Sommer, and Hedger Wang:

• Even More Rounded Corners with CSS - Scott's work showed throughout Yahoo! Photos, and is starting to be seen here and there on Flickr. Examples here are single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency, gradients, patterns, and more.
• CSS Mojo: Adding Visual Polish To Your Pages - Leslie's presentation for Web Design World 2007. Four examples, including rounded corners with solid background and image-free "pointy tail," two-sided translucent drop shadows with and without translucent content areas and gradients, and four-sided "glowy shadows." Leslie's technique is easy on the markup, uses no Javascript, and is (mostly) semantically valid; currently it's being used in Mash, 360, and other places.
• Single-Image Backgrounds - Hedger's examples stretch and apply translucency to a single image, to achieve maximum flexibility with minimum markup and server load. Look for Hedger's magic boxes in a future version of Yahoo! Groups.

If you're feeling overwhelmed, remember that your voice counts. Ask questions, especially when a decoration-heavy design flies over the wall between design and engineering and lands on your desk. Is all that really necessary? Does it add meaning to the page, or is it just really pretty?

And if you're tired of the wall, try a few of these suggestions:

Tearing Down the Wall between Design and Front-End Engineering

• Show up early. If possible, get to that very first meeting, when everything is still up in the air. By doing so you will make clear to your product manager, your designer, and your back-end support that front-end engineering is a discipline at least as important as any of theirs.
• Make your presence known. Contribute bright ideas, and ask hard questions. If your designer is asking for something that's only going to make sense in Safari, be loud and clear when you point out that most of your audience is still using IE, and deserves the full experience. Understand the tools available to you; there are a ton upstairs in the Yahoo! User Interface section. (First-time visitors should pay special attention to the Grids, Reset, and Fonts sections.)
• Be a champion of the New. Prototype those sweet new approaches; make sure your designer knows you are actually interested in building the new stuff, not just thinking up reasons why the old stuff is sufficient and should not be changed. And, speaking of which:
• Release the Old. This is especially important if you had anything to do with the previous version's design or implementation; your designer is dealing with enough stress as it is without having to worry about potential foot-dragging from you. Make a special point--yes, say it out loud, or in an e-mail--of telling the rest of your team that you are ready, willing, and able to move things along to the next level.
• Just say Yes. Remember the first rule of improvisational comedy: no suggestion, no matter how bizarre, can ever be met with resistance. This is especially true during those early brainstorming meetings; whatever it is, take it, run with it, make it even crazier, and toss it back. Designers love this; it takes away their chief source of anxiety, the possibility that they're promising something that you can't deliver.

Are we overstepping? Did we miss anything? Got a hot tip for rounded corners? Please leave us a comment and let us know.

Kent Brewster

Posted at October 31, 2007 8:24 AM

Comments

Posted by: Christian Watson at November 1, 2007 2:00 PM

Posted by: nick at November 15, 2007 1:18 AM