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.
As much as there are things to complain about Apple in 2026, it's nice that it still seems like their design and UX teams have latitude to do things like this. See the folding animation on the Duo, for example.
That dedicated sparkle role is rare and honestly kind of beautiful. Most teams treat micro-interactions as leftover polish rather than something worth assigning ownership to.
Since this is about old iPod technology, I thought this might be interesting here:
I’ve been working on getting the real Apple iPod Classic 6G firmware running in QEMU. It currently emulates two clickwheel iPods, including the display ,click wheel input and music player.
> 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
Nah, this still seems like a pretty good way of doing things. Yes, we can probably run the image engraving on the client now, but to address a wide audience of older devices, we probably shouldn't change very much about this process.
Well for starters, any modern web browser with JS disabled is going to display the original page just fine, but will not be able to render a canvas-based solution. That may put the user outside your target demographic, which is fine, but it is worth being aware of.
Cool. I wonder if there could be a minor inconsistency with the iPod in the mockup. Looks like a 4th gen iPod, not the iPod photo. My memory says the iPod photo had a color display.
It was very exciting to work at Apple. In one way it felt like I was at the center of the creative world (despite not being in the hardware or software division). But the interesting _web_ stuff was all happening elsewhere. Stewart Butterfield kindly kept asking me to join the Flickr team, and eventually the pull of that outweighed the allure of Apple.
I spent the next four and a half years at Flickr and it was foundational to the rest of my working life. The people I was lucky enough to be around and learn from there were extraordinary, and the environment and opportunities were second to none.
In retrospect another six months at Apple, further taking advantage of their employee stock purchase program, would have been life changing. Shares were about $7 each back then after the discount. But you do what you think is right at the time, and I'm grateful for every moment I got to spent in Cupertino.
> But you do what you think is right at the time, and I'm grateful for every moment I got to spent in Cupertino.
It often surprises me when people express deep regret for things like this, because if you feel you made the correct decision at the time, it's hard to feel that it was a mistake.
But I suppose this comes from a position of the relative privilege of having savings.
> 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.
Couldn't this be handled client-side, just overlaying plain text in gray 'Helvetica, Arial, sans-serif' on top of the image? At this scale, the specific font doesn't matter.
I was wondering the same thing. Maybe it had to be done server side for accuracy. I can imagine customers returning their iPod because the shipped result didn't match what the webpage was showing. At that time, text rendering in the browser was still fairly pixelated.
I used to love that glossy gradient header that looked like physical tabs. Apple used to be so colorful and skeumorephic in their interfaces, I kind of miss that.
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?
Ask yourself, why do apple provide this engraving service free of charge? They would never tell that to you in a million years. It’s because the normal consumer protection laws doesn’t apply if a product has been personalized! A very smart way of steve jobs to circumvent consumer protections, a thing he was actually known for.
And reselling your second-hand, personalized iPod isn't really feasible. So people probably more likely to buy a new one, which likely helped Apple sell more devices.
That depends entirely on where you are. This is explicitly not allowed within Australian Consumer Law, for example. Impeding resale is an entirely legal and effective dark pattern this provides though.
This might have been true in the past (I’m not going to verify their old T&Cs), but it’s not true anymore - you can send back engraved items back to Apple with no issues.
You can’t _exchange_ them for a different item/credit, but normal returns are absolutely allowed.
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.
> This was also a time when Flash content was supported by Apple QuickTime
While QuickTime supported some Flash content, my recollection is that it only supported simple animations which could be mapped onto QuickTime's own interactive video features. I don't think it supported ActionScript, so this kind of interactivity would have been beyond it.
Flash => HTML5 was a travesty for creative little games on the web. It never recovered. Even today the authoring tools are crap for the average person with an idea, if you ignore AI vibe coding for a minute, which overcomes the tooling deficiency by being experts at the difficult tooling. (But I guess Flash => HTML5 was only a part of it, the rise of IAP everything, which was also pioneered/popularized by Apple, may have played an equal or larger role in the demise of that game genre.)
Nahhh it's so you have a reason to buy on the Apple Store.
Otherwise other retailer often beat them on price.
If they wanted to reduce resale value they would just add it to the iPhone and eliminate the 2nd life those phones have.
It is interesting to think about the socio-technical reasons to make a serverside roundtrip for each keypress. Another approach might be to load up the dictionary client-side and use javascript to swap letterforms in various pre-determined locations. Presumably using browser-text with a transparent background wouldn't sufficiently simulate what the real product looked like.
It helps that it's not very big. In the working demo, the image is 132x26, and the actual JPEG file size is about 2-4 kB (depending on the text).
So even on a 56k modem, it might take less than 1 second to load each image.
You could also optimize it so it skips intermediate images if the user types fast. Suppose the user mashes "12345" in a fraction of a second. You start loading "1.jpg" on the first keypress. When you've finished loading "1.jpg", the field contains "12345", so skip straight to loading "12345.jpg".
The demo page's JS doesn't seem to include any optimization code like that. It just updates the img src whenever the text changes. Yet my browser seems to do it automatically! If I mash several keys, the console network log shows only some intermediate images get loaded.
I guess the browser is smart enough to know that, by the time it would have started the download, the resource no longer exists in the page. I'm not sure if browsers ~20 years ago did this, but it would have been worthwhile given how slow networks were.
Yes, this is pretty much how we did such things already in the 1990s. The problem with this is that this only supports a predefined, rather limitted character set. But you could have expanded on this and may have loaded custom characters on demand (which would have been a rather small payload for a single character.) But there's yet another problem, namely color management, which isn't supported by GIF (which we need for the transparent background), and they probably really wanted to go with JPEG for this. (At that time, CRTs were still much around and those tended to show greys with a reddish tint when managed badly. Something Apple would have certainly wanted to avoid.)
BTW, here's a PoC (a website from 1998 written in about two hours [so not much of hassle even then] demoing pure JS rendering from a data file, all just classic table layout rendered in the browser, all styled text and the ticker are rendered from single-character images): https://www.masswerk.at/demospace/relayWeb_en/welcome.htm
Basically, it was easier. Or even... barely even possible to do what you describe. Maybe you could, but it would have been nightmarish whack-a-mole, and a good chance that the next update to any given browser would break it completely.
In ‘05, you had IE6, plenty of folks still on IE5, IE5 for Mac was still in use (don’t be fooled by the name - it did not behave like IE5 on windows), safari was 2.0, respectable but still a minority browser, and Firefox was on 1.0. Plenty of folks were still on Netscape navigator, which by that point was actively decomposing.
IE6 was what you built for, as it was the majority browser by a country mile. Transparency was hit and miss. Alpha PNGs just weren’t supported, you had to hack them in via JS.
Most websites were laid out using <table>. Using a <div> was new and exotic.
Oh, and you could only do custom fonts using… flash. sIFR, if you want to delve into the hell that was web dev back then. Most folks would just end up with TNR. Transparency on sIFR you could only achieve by replicating your background into the SWF, and good luck getting it to line up.
So. Support an absolute soup of edge cases across a bunch of different browser engines, and deal with “IT LOOKS NOTHING LIKE IT DID ON THE WEBPAGE” from customers, or just do it server side.
Also, it was perfectly acceptable to wait for a website to load - 50% of the U.S. was still on dialup, and “broadband” was commonly 512k.
I remember transparency was handled with gifs back then, which had their own problems and limitations.
Alignment was either done via position: absolute or by using a table. The animated background here would be a bit more complicated with a table.
Risk of it breaking with some upgrade, or looking different for some people? As you said, very likely.
So server-side image generation was indeed the best option. And it was a popular and widely solved problem, even in the 90s: visit counters that showed the visits in the shape of an image were super popular.
Yes, you could have done similar with GIFs already with Netscape 3 and IE 3 (I think, IE 3.1, or was this just the Mac version?). "Dynamic HTML" with z-layering became a thing with Netscape 4.0 and Internet Explorer 4.0, which became available in Summer/Fall 1997. With this, relative positioning and proportional text (at variable character width) wouldn't have been a problem.
(With the NS/IE 3 generation, you would have been limited to lines of prepositioned fixed-width characters in a table. So, not really applicable for this.)
I think, the decisive factor may have been badly managed CRTs tending to display greys with a somewhat reddish hue (esp. on Windows, not so much on Macs with a screen gamma of 1.8) and JPEGs generally enjoying better color support.
(JPEG was displayed at sRGB or at any embedded IEC profile, which wasn't available for GIF, where the effective color was pretty much hit and miss. So, if you had HTML text with a defined hex-color, a GIF of the same color wouldn't match, while a sRGB JPEG would. Matching JPEG and GIF colors would have posed a similar problem. A reddish hue on grey looked kind of cheap and brownish text was probably the last thing Apple would have wanted.)
Yeah, transparency on gifs is binary, so you always had a crunchy edge. Plenty of use cases, but nice looking text wasn't one of them.
And position: absolute did not behave the same way across IE, NN, FF, or safari.
For some reason I feel the sudden urge to have a drink.
Just don't tell the kids about how eCommerce used to work. Credit card number in an email, courtesy of Mal's eCommerce? Pretty much industry standard. shudders, swigs
Lots of things were different on the front end back then:
- IE was an albatross around every web developers neck
- Even better browsers like Firefox and Safari had tons of inconsistencies
- jQuery and Prototype weren't around yet
- CSS is not remotely close to what it is today
Honestly, placing text over an image was a lofty task back then. We used to use lots of images with text as part of the image. Text images and table layouts were two of the main ways to get around all those cross-browser issues.
Oh yeah, I forgot what the table layout stuff used to be like. Since the back has a shine gradient across the back, each position would need all the possible characters. iirc, in that period an article on A List Apart [0] proposed something like that. I think they were doing curved box corners and sending all corners in the same file and using background positioning to only show the portion of the image depicting that corner. As I scan the article it is heavy on CSS positioning, which is used in the demo but I recall IE5 had quirks.
How true to period is the demo? I see in the source "I've tried to preserve the core of this code as it was when I wrote it in June 2005." but most of the page is a static image in the background.
The demo is taken from the archive of my work back then, so it’s all true to that period.
On my site it shows a static background image just to give the demo something contextual to play against. On the actual site the page was obviously all live HTML.
Off topic: why would someone engrave their item? If you or whoever is gifted the item ever decides to resell it some day, it becomes a headache. And I don't recall any other company offer such service for consumer electronics.
Many people don’t care about resale or pass-along value in the things that they own or gift.
And even if one does, then you just consider the diminished value as another cost of having the personalized item.
For many people, especially gift givers where the item is about far more than economics, it is worth it. And it is very unclear to me why "resale value" should trump about a million other considerations.
Engraving was pretty common for items that are made to be used for decades. High quality watches, clothing items, etc. all had the initials engraved.
Maybe back in the day people believed that iPods can be used for decades (I guess they can be if the battery can be switched, I’ve never had one. So not sure)
This was very much a thing. The emotions wrapped up in iPods back in the day are incalculable. It was the tool that set us lumpenproles free back in the day
I’ve been working on getting the real Apple iPod Classic 6G firmware running in QEMU. It currently emulates two clickwheel iPods, including the display ,click wheel input and music player.
https://github.com/davidmonterocrespo24/qemu-ipod-classic
Still a work in progress
Wow, over 100k commits! It is definitively a work in progress, and an impressive one as well. :)
Edit: Ah, I now see that it is a fork of qemu-ios, but it is still cool. :)
Nah, this still seems like a pretty good way of doing things. Yes, we can probably run the image engraving on the client now, but to address a wide audience of older devices, we probably shouldn't change very much about this process.
https://everymac.com/systems/apple/ipod/specs/ipod_photo_30g...
I spent the next four and a half years at Flickr and it was foundational to the rest of my working life. The people I was lucky enough to be around and learn from there were extraordinary, and the environment and opportunities were second to none.
In retrospect another six months at Apple, further taking advantage of their employee stock purchase program, would have been life changing. Shares were about $7 each back then after the discount. But you do what you think is right at the time, and I'm grateful for every moment I got to spent in Cupertino.
Were you writing WebObjects? Internally, how was WebObjects viewed at the time?
It often surprises me when people express deep regret for things like this, because if you feel you made the correct decision at the time, it's hard to feel that it was a mistake.
But I suppose this comes from a position of the relative privilege of having savings.
https://bookofjoe2.blogspot.com/2026/09/there-is-no-such-thi...
Couldn't this be handled client-side, just overlaying plain text in gray 'Helvetica, Arial, sans-serif' on top of the image? At this scale, the specific font doesn't matter.
Although interestingly, Apple still renders the text server-side (and offers engraving only for iPads, apparently): https://www.apple.com/shop/preview/engrave/PH304LL/A?th=hell...
Do we?
I mean you can skip imagemagick and use HTML5 canvas, but otherwise I think I wouldn't change a thing.
We have much more complicated ways of doing such things today, for sure.
You can’t _exchange_ them for a different item/credit, but normal returns are absolutely allowed.
I wonder if a SWF was ever hosted on the apple.com domain.
While QuickTime supported some Flash content, my recollection is that it only supported simple animations which could be mapped onto QuickTime's own interactive video features. I don't think it supported ActionScript, so this kind of interactivity would have been beyond it.
store.apple.com/Catalog/US/Images/vday07/img/PersonalizationHome.swf
(Reported a security problem to them back in the good old days 2013)
Not sure about swf files on www.apple.com directly, would have to dig into my older collections on a dusty server.
That’s the real reason it got added.
So even on a 56k modem, it might take less than 1 second to load each image.
You could also optimize it so it skips intermediate images if the user types fast. Suppose the user mashes "12345" in a fraction of a second. You start loading "1.jpg" on the first keypress. When you've finished loading "1.jpg", the field contains "12345", so skip straight to loading "12345.jpg".
The demo page's JS doesn't seem to include any optimization code like that. It just updates the img src whenever the text changes. Yet my browser seems to do it automatically! If I mash several keys, the console network log shows only some intermediate images get loaded.
I guess the browser is smart enough to know that, by the time it would have started the download, the resource no longer exists in the page. I'm not sure if browsers ~20 years ago did this, but it would have been worthwhile given how slow networks were.
BTW, here's a PoC (a website from 1998 written in about two hours [so not much of hassle even then] demoing pure JS rendering from a data file, all just classic table layout rendered in the browser, all styled text and the ticker are rendered from single-character images): https://www.masswerk.at/demospace/relayWeb_en/welcome.htm
In ‘05, you had IE6, plenty of folks still on IE5, IE5 for Mac was still in use (don’t be fooled by the name - it did not behave like IE5 on windows), safari was 2.0, respectable but still a minority browser, and Firefox was on 1.0. Plenty of folks were still on Netscape navigator, which by that point was actively decomposing.
IE6 was what you built for, as it was the majority browser by a country mile. Transparency was hit and miss. Alpha PNGs just weren’t supported, you had to hack them in via JS.
Most websites were laid out using <table>. Using a <div> was new and exotic.
Oh, and you could only do custom fonts using… flash. sIFR, if you want to delve into the hell that was web dev back then. Most folks would just end up with TNR. Transparency on sIFR you could only achieve by replicating your background into the SWF, and good luck getting it to line up.
So. Support an absolute soup of edge cases across a bunch of different browser engines, and deal with “IT LOOKS NOTHING LIKE IT DID ON THE WEBPAGE” from customers, or just do it server side.
Also, it was perfectly acceptable to wait for a website to load - 50% of the U.S. was still on dialup, and “broadband” was commonly 512k.
Alignment was either done via position: absolute or by using a table. The animated background here would be a bit more complicated with a table.
Risk of it breaking with some upgrade, or looking different for some people? As you said, very likely.
So server-side image generation was indeed the best option. And it was a popular and widely solved problem, even in the 90s: visit counters that showed the visits in the shape of an image were super popular.
(With the NS/IE 3 generation, you would have been limited to lines of prepositioned fixed-width characters in a table. So, not really applicable for this.)
I think, the decisive factor may have been badly managed CRTs tending to display greys with a somewhat reddish hue (esp. on Windows, not so much on Macs with a screen gamma of 1.8) and JPEGs generally enjoying better color support. (JPEG was displayed at sRGB or at any embedded IEC profile, which wasn't available for GIF, where the effective color was pretty much hit and miss. So, if you had HTML text with a defined hex-color, a GIF of the same color wouldn't match, while a sRGB JPEG would. Matching JPEG and GIF colors would have posed a similar problem. A reddish hue on grey looked kind of cheap and brownish text was probably the last thing Apple would have wanted.)
And position: absolute did not behave the same way across IE, NN, FF, or safari.
For some reason I feel the sudden urge to have a drink.
Just don't tell the kids about how eCommerce used to work. Credit card number in an email, courtesy of Mal's eCommerce? Pretty much industry standard. shudders, swigs
- IE was an albatross around every web developers neck - Even better browsers like Firefox and Safari had tons of inconsistencies - jQuery and Prototype weren't around yet - CSS is not remotely close to what it is today
Honestly, placing text over an image was a lofty task back then. We used to use lots of images with text as part of the image. Text images and table layouts were two of the main ways to get around all those cross-browser issues.
How true to period is the demo? I see in the source "I've tried to preserve the core of this code as it was when I wrote it in June 2005." but most of the page is a static image in the background.
0. https://alistapart.com/article/sprites/
On my site it shows a static background image just to give the demo something contextual to play against. On the actual site the page was obviously all live HTML.
And even if one does, then you just consider the diminished value as another cost of having the personalized item.
For many people, especially gift givers where the item is about far more than economics, it is worth it. And it is very unclear to me why "resale value" should trump about a million other considerations.
Maybe back in the day people believed that iPods can be used for decades (I guess they can be if the battery can be switched, I’ve never had one. So not sure)
Apple was clearly thinking outside the category of “consumer electronics.”
Then recall that premium silver, especially items given as presents, are very often engraved, and have been for hundreds of years.
Apple is a premium brand, not "any other company," especially in the era this post covers.