My First WWDC Above: Apple’s live App Store wall at WWDC. It showed icons of 20,000 iPhone apps,…
Getting creative with transparent PNGs for Delivery Status
The old Delivery Status graphics system
When I started the Delivery Status widget it didn’t support many services. I wanted each service to be visually distinct, so I created entirely separate graphics for each one. It was sensible at the time, but as I started adding more services it turned into a hassle. Each service was four separate graphics (left, middle, right, and logo) for each size (small and large) plus another for the Growl notification, making nine total. Some had to be customized further with their own status icons (loading, in transit, delivered check mark, and error).
That’s a lot of graphics for just one service! Whenever I added a new service it was often more work to create the graphics than it was to write the code. The iPhone app added another graphic I needed to create for each one.
The solution: transparent PNGs
I couldn’t do the backgrounds with CSS alone because it’d look very flat. I didn’t want to lose the subtle gradient or beveled edge. Transparent PNGs are a great solution to problems like this though: I could have a flat color in the background, and put a transparent graphic on top with just the shadows and highlights. Perfect!
Well, almost. Some of the services are lighter colors and some are darker. On the lighter ones the shadows needed to be lighter and the highlights needed to be brighter. On the darker ones it was the opposite. And there are some that fall in between. With this new approach, a few of the services looked great and a lot of them looked awful.
Better solution: more PNGs with varying opacity!
If I separated the shadows and highlights, then I could control the opacity of each separately. The light colors could have brighter highlights, and the dark colors could have darker shadows. They all need the same drop shadow, so that was another layer. (I tried to do the drop shadow with CSS, but the rounded corners looked awful.)
This looks more complicated—and in a way it is—but it’s much simpler to update. The brown box is done entirely with CSS, I just pick a color. Adjusting the shadows and highlights is done by changing two numbers. Most of the services now have a single logo graphic that’s scaled up or down for the two widget sizes. The CSS used to set the whole thing up is more complicated, but the CSS unique to each service is much simpler.
The new system isn’t just easier to set up, it’s also much faster to tweak. As a result I think the different services have a much more unified appearance now. With the old graphics I always though some looked a bit flatter than others, but redoing all those graphics would have been a huge amount of work.
You should see the results of these changes in Delivery Status 4.6 and Delivery Status touch 2.1. Both are in beta testing now, and we’re hoping to release them in the next week. Aside from the new graphics system, we’ve also added support for City Link in the UK and Yamato Transport in Japan. We’ve fixed the FedEx problem that came up yesterday as well, and made a lot of other improvements!
Business Cards My new business cards finally showed up today, and they look awesome. Same as with…
Welcome to Junecloud! When I first started running my own business full time a few years back, I really…
Delivery Status touch icon Above you can see how the Delivery Status icon progressed from sketch to finished…