Jason Robb

A few observations about Gmail’s HTML and CSS. In short, Gmail uses a very intriguing method to round corners and show icons. Their use of class names is less desirable.

gUltKtd … You call that a class name?

Like your typical web designer, I have an approach to using class and ID’s in CSS, and it works for me; carefully choosing semantic names, and using CamelCase to keep them readable. Gmail, however uses some kind of cryptic class naming convention. I have no idea how they do this, or why. I’d love for someone to explain it. (See screen captures below, for a sample of their ridiculous class names.)

The Gmail icons

One thing that’s caught my eye, is the way Gmail implements their icons. It’s quite intriguing, and reminiscent of the spacer gif shim days. First they use a clear gif for the image. Then they use CSS to position one of the many icons on the single png. Neat. They’re also using a patterned pink and blue background, I assume that’s so it’s easy to spot when they’re a pixel off whilst positioning the icons. Smart.

The rounded corners

What a great idea, use a single image and position it the way we position all the icons. Definitely an improvement upon the traditional 4 images split and positioned separately. Try Zach Beane’s Corner Shop if you’re looking for a quick way to produce 4 rounded corners.

But wait, there’s more!

They’re creating the corners by passing some parameters through a URL. It’s fascinating. Dion Almaer at Ajaxian has posted how to use Google as a rounded corner service. Sadly, Google has disabled this “service” some time in 2007. So, this isn’t a new concept. But it’s new to me darn it.

Fun with rounded corners

Dragan Enspenschied made a neat whale entirely out of rounded corners. I can dig it.