Undercover Color was a promotion for Hanes Underwear’s new line of women’s underpants. I was responsibile primarily for the mobile version [1] of the site, which is only viewable on smartphones and tablets.
This web app features an interactive color selector [2] tons of photos [3] related to colors for users to share/tweet.
Also there are some nice animations here and there to enhances the user’s experience of the app.
This was the first project that I worked on that used RESS (Responsive Design + Server Side components). In addition to using media queries to make sure the design played nice on any number of widths, the server detected the user agent of the device. Users viewing the site on a smartphone or tablet were directed to the mobile experience, while desktop users were directed to a different experience (coded by another developer).
The color selector comprises of a raindbow gradient entirely generated by CSS3 and a delicate dance of touch and drag event listeners.
There were 7 colors with about 20 images for each color. It didn’t make sense for mobile users, who might be on a limited bandwidth/data plan to load over 100 images at once. When the user first visits the page, only the first image of each color is loaded. If a user selects and color and scrolls, subsequent images are loaded dynamically (lazy load technique). There’s also a loader graphic (generated by CSS3) to tell the user that there’s more content coming their way.