Washing Machine Microsite
- CSS_Animation
- FrontEnd_Coding
- Motion_Design
To promote Washing Machine, a Mac App we designed at Urban Influence, this microsite was created to be linked from Intego's main sales site. This allowed us to be free of the visual and technical restraints posed by intego.com and focus on showing users how Washing Machine keeps your Mac tidy.
The site needed to quickly convey how Washing Machine cleans and organizes a Mac, be localized in multiple languages, and look great on high resolution retina displays.
Making Pixels Dance
From the get-go we knew static images would not be sufficient enough to show some of the more abstract concepts of organizing and deleting files. We wanted to show Washing Machine in action and use animation to illustrate its functions, but there were no pre-canned solutions.
After a some proof-of-concept testing we decided to create the animations using CSS3 and very minimal JavaScript. By using CSS 3D Transforms to render the animations via the GPU, animations were smooth and scalable across many devices.
Beauty in Any Language
Because Washing Machine is localized for five different languages, the Microsite needed to be too. Localization always provides a unique set of challenges when building a website. How to input different languages from multiple translators, how will the content grow or shrink depending on the displayed language, how to handle screenshots of the App?
For this approach, all languages were loaded in their own YAML file that was then rendered by Ruby on Rails. The App animations were recreated in HTML using live text. This allowed any content changes to be easily translated and updated in code rather than re-rendering images.
Standard or Tiny Pixels
Precision crafted graphics need not be lost on the web. We had created resolution independent and retina sites before, but this was the first endeavor in creating a retina site with image rich content.
To achieve pixel perfection on the web, every image on the page needs two files, a standard resolution and retina resolution that is twice the size. To automate this process a Sass Mixin was used to detect screen resolution based on a CSS Media Query and load the appropriate image.
The end result has screenshots looking as good on the web as the actual App.
