The Web Design Trifecta

The Web Design Trifecta
April 23, 2009, 9:15 am - By: Chad Halvorson

Let's face it. The biggest no-no or reluctance in web design is a site who's live area consists of rounded corners with drop-shadow on a patterned background. We've faced this issue twice recently. The first time we used some fancy javascript & CSS with PNG images (http://www.loft.org). It worked fine, but we had hoped it could be simpler. The second time I think we nailed it. We managed to keep the entire integrity of the design by using standard CSS techniques and simple JPGs; —no PNGs (http://www.tcspine.com).

First, we assumed a maximum resolution width of 1920. Then we broke the site into essentially three rows. The top row, or header, is a long JPG stretching 1920 pixels wide. The second row is the content area and is a wide 1920 pixel JPG that is 7 pixels tall. The height of this JPG is important because it repeats vertically and needs to maintain the patterned background. The third row is pretty much the same as the top row. The footer JPG only needs to be tall enough to accommodate your bottom rounded corners. Finally, using CSS the positioning of these three rows needs to be centered.

This method only applies to fixed width website designs, but it allows for a fluid background pattern up to 1920 pixels wide. If you desire to accommodate larger resolutions, just make the widths of the JPGs wider. What's really neat about this approach is it works natively with the main browsers. It also eliminate the weird one pixel shift that shows up in Firefox and Safari.