Creating rounded rectangles has become a bit of a quest.

This blog links to a utility that lets you create a rounded rectangle image that can be used in a page to help organize the content (http://wirehopper.com/design/rounded.php). It has a link to an approach that allows you to create nine images and use them to display a rounded rectangle using CSS and XHTML. Unfortunately, it doesn’t work (http://www.wirehopper.com/design/rr/). So far, the nicest implementation of rounded corner rectangles I’ve found for page layout is eZ publish’s ezwebin (http://now.ezpublish.no/).

Another approach I tried was to use dojox/gfx, which uses javascript to draw on a page.(http://docs.dojocampus.org/dojox/gfx#rectangle). This works really nicely, however, if you want to place text in the rectangle, you must be creative. The approach I tried was to use divs to position the rectangles, then use absolute positioning of additional divs to put text in the boxes. To be dynamic, the dimensions of the rectangles must be adjusted to work well with the content they’ll surround. This can be done fairly easily with javascript, by getting the dimensions of the text div using screen.clientWidth and screen.clientHeight.

After investing a significant amount of time in this fundamental layout issue, I have come to the conclusion that if you have a framework or library that has themes (http://docs.dojocampus.org/dijit-themes), you should choose one and use it, and if not, unless you’ve already found a great way to do rounded rectangles, or you really have to have them, it’s probably not worth the effort.

Rounded rectangles are excellent learning tools for web designers and developers, because they include several skill areas.

• Proper image format. .gifs are probably the best for simple rounded rectangles, including those with transparency, .jpgs or .pngs would be good if there are gradients. It’s worth checking the file sizes and checking how they look on the page.
• CSS layout and dimension control. Depending on the implementation, you may have a three by three block. Each ‘row’ will float, and between the rows, there must be a break. Browser compatibility must be tested.
• Page construction. Computing the bandwidth required for each rounded rectangle is another good exercise. The bandwidth required includes the XHTML, CSS, and all images. Reusing CSS and images can reduce both bandwidth and the number of requests.
• Server-side support. I looked into using PHP to help set up the dojox/gfx rounded rectangles, but abandoned it due to time constraints. Using a server-side technology, or template engine / taglib may be helpful.
• Appreciation of complexity. Many people mistake the simplicity of the XHTML language as an indicator that web work is “easy”. It’s not.
• Cost of labor. As above, it is good to understand that if a task takes longer, one must consider the cost. Spending many hours on rounded rectangles will undoubtedly reduce the time available for other, more important, tasks. In the business world, time is money.

This ends the quest for rounded rectangles. I learned:

• Rounded rectangles are not simple.
• Even if you invest a lot of time, sometimes, there isn’t a ‘graceful’ solution. Bear in mind this is a subjective definition - others may feel that some of the offered ideas are perfect.

• A lot about ImageMagick (http://imagemagick.org). Including …

  • How to draw a rounded rectangle
  • How to crop pieces out of an image
  • How to tint an image
  • How to apply a gradient to an image
• The CSS border attributes and how to apply them
• Rounded corners on images look really nice with ezwebin
• Many other people have posted cool ideas about rounded corners and rectangles - it’s a popular pursuit, or a necessary one. :)
• Rounded rectangles just aren’t that important to me anymore

Additional posts in this blog:

http://web-notes.wirehopper.com/2009/07/05/imagemagick-rounded-rectangles
http://web-notes.wirehopper.com/2009/06/07/smoother-imagemagick-rounded-rectangles
http://web-notes.wirehopper.com/2009/05/11/imagemagick-rounded-corners
http://web-notes.wirehopper.com/2009/11/19/ez-publish-rounded-image-corners
http://web-notes.wirehopper.com/2009/11/06/tint-with-imagemagick
http://web-notes.wirehopper.com/2009/06/27/round-image-corners-imagemagick
http://web-notes.wirehopper.com/2009/05/17/imagemagick-rounded-corners-images