- Personal – Container Alpha
2011/12Design & CodeAndrew Chee
Designed, coded, and released in June 2009, Container Alpha, titled "Work in Progress," served as my personal site until the end of 2011. The concept for the "container" was an experiment in pushing the portfolio user interface past the conventional blog formats that did not make full use of any given container's real estate / resolution.
Large hit areas, all buttons, adaptive to any container / resolution / device by generous use of the CSS (Cascading Style Sheets) float property. It was to be an entire design portfolio, photo blog, CV, and growing collection of data —contained in a shell composed of just a single square unit with only 4 variations. The resulting composition, dependent on the viewport used, would be different every day for frequently updated pages, generating an unexpected large pixel pattern each time it was visited.
The 4 units were designed as follows: 1) Navigation (black, dark grey, and light grey), 2) Text Content (white), 3) Images (full bleed), and 4) Inactive (background color and/or striped for system messages).
The right arrow → indicated reading and float order, housed in the only inactive unit of the system, the background. Thus, every unit in the foreground is active. The presence of the up arrow ↑ on rollover of any active unit, indicated that the resulting link would open a new window. The start and end of all content on any page of the site was straddled by a beginning and ending black block —the nameplate and the copyright.With this system, any number of pages and variations could be composed.
All made possible with many thanks to JQuery / MooTools (swapped to the former in early 2011), mySQLicious, phpFlickr, and Slimbox for image viewers. Everything was coded from scratch in TextMate, tested locally in XAMPP, and debugged countless times via Firebug.
Container Alpha lived through many iterations for its nearly 3 years online, finding itself adapting to new resolutions and devices —from desktop to mobile— around the world, living up to its name. Here are a few screenshots.
In early 2012, right before retiring Container Alpha, I decided to test the limits of the liquid layout by stretching viewports to their current limits via software —things a normal user would never do, but generates some interesting results. These are composites of Container Alpha constrained to 1 unit wide to 60 wide, the captures then sliced up and recombined to make the following.