Macintosh 128K

May, 2013 - #Code, #Open Source, #University, #Web, #Webdesign

TapeIdag & Inatt is often referred to as “the most important event of the year” by the students of Interaction and Design so when Albin Hübsch and I where put in charge of the event website we knew we had to deliver. Since the theme was set to “Retro” we decide to look at some old tech to get inspired. After a lot of research we decided on using the iconic design of the Macintosh 128K from 1984. I was also in charge of creating the logotype for the event and after consulting the rest of the PR-group we decided on using an old Cassette Tape (more on that here), which was a perfect match to the old Mac.

The “Hardware”

hardwareMaking a Macintosh in Photoshop and then putting an “interactive iframe” on-top is as simple as it is ineffective, so we agreed on making it a bit harder: no images, only CSS & HTML. The Mac chassis (and the floppy disk) is created using over 100 divs all styled, rotated and positioned to give the user a realistic feel. For the boot up process some simple Javascript generates a couple of printouts and then pushes the floppy disk into the slot.

The “Software”

softwareAfter the computer has been turned on and done it’s startup procedures, the “application” enters fullscreen mode. The user is then presented with an almost identical graphical user interface of the old Macs, all built on web technologies (such as jQuery UI, CSS, HTML, etc.). Yes, we “had” to use some images here. Here the possibilities are pretty much endless, but we chose to only include a Registration-“application”, a Nomination-“application”, and a Astroids game that we found here.


At the moment the code is quite cluttered an uncommented, but we have plans on releasing it on GitHub in a near future, structured and commented. For now, the project can be found, and tested(!), here.