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.
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.