How a 2005 Apple Engineer Made the iPod Engraving Page Feel Like Magic
Apple iPod Engraver (2019)
In 2005, while working as a UI engineer on Apple's online store, Dunstan Orchard built an interactive iPod engraving preview using JavaScript, ImageMagick, and CSS class switching. The page let customers rotate a virtual iPod, see their engraved text live, and watch shipping times update with a yellow fade. Orchard shares the working demo and reflects on how magical those limited-browser solutions felt at the time.
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.
- georgecalm
I really appreciate that someone's job (or at least part of it) was to "prototype concepts that would add some interactive sparkle to the site". Working on a larger team, we generally add this kind of interaction at the start of a project or during redesign. There are larger prototypes, of course. But very rarely is someone designated to independently go out and just find small ways of making the experience just a bit nicer for the users, and build that; and I really like that idea.
- dunstanorchard
That’s my site. I’d be happy to answer any questions you might have about it.
- hahla
We all want to be able to afford to do what Apple did back in 2019. Have a full developers salary dedicated to adding sparkle. I wonder in todays day and age how do you add that level of personalization and differentiation?
- eclipticplane
The article mentions the 'yellow fade' or 'yellow flash' to highlight when elements change -- I miss that!
- rezmason
I think it's worth noting that 2004-2006 was a time period where a Flash applet could have done this on the client. This was also a time when Flash content was supported by Apple QuickTime, so it's interesting that they didn't make use of it here.
I wonder if a SWF was ever hosted on the apple.com domain.