Skip to content
Tech News
← Back to articles

Apple iPod Engraver (2019)

read original more articles
Why This Matters

A first-person account from an Apple online store UI engineer describes how the 2005 iPod engraving page was made interactive with rotatable product images, a live engraved-text preview, and a highlighted shipping-time change. It's a reminder that today's standard e-commerce product configurators were once hard-won hacks built from cycled JPEGs, server-side image generation, and CSS class swaps. The piece offers a useful historical lens on how browser limitations shaped web craft.

Key Takeaways

Dec 12, 2019 Apple iPod engraver

I spent 2004–2006 working at Apple as a UI engineer for their online store. Part of my job was to prototype concepts that would add some interactive sparkle to the site.

One such project improved the “Personalize your iPod” page, where customers could submit two lines of text to be engraved on the back of the iPod they were ordering.

As originally designed the page offered no interaction beyond a plain form. I added a rotatable iPod, a live “engraved” preview of the customer’s text, and a highlight of any change in shipping times.

I animated the iPod by cycling through a series of JPEGs using JavaScript. The engraving was created using imagemagick, which took the user’s text and returned an “engraved” image to be overlaid on the rear of the iPod. The shipping highlight was achieved by switching CSS classes to change the background color, in the style of a classic yellow fade.

There’s an old working demo if you’d like to try it yourself.

We obviously have much better ways of doing such things today, but in 2005, with limited browser technology, those solutions seemed a little bit magical.