Website link: Made.com
Whilst working at Made.com I worked on three projects: The mobile Magento template, the “How Made.com works” animation on the home page and the HTML/CSS template for the new accordion checkout process.
For the mobile site I did:
A new child template for the existing desktop theme. Magento sends users to the child mobile template when a visitor visits on a specific user agent. This had to be done due to the size of the existing template and the time scale for when the mobile site needed to be launched. Media queries are used to recognise screen size and orientation. It is restricted in terms of width for both media queries.
The template is to be progressed to tablet and desktop in the near future.
For the homepage animations I used:
Scriptaculous and Prototype were used to create the “how Made.com works” animation. These libraries were used as jQuery was not available in the current Megento setup. The animation runs once on a fresh page load. Steps are advanaced with user interaction. The animation script is small as effects and easing is pre-built in a Scriptaculous.
For the accordion checkout I used:
Other new features include HTML5 form validation and pure CSS3 button gradients.
The new checkout process uses my custom responsive grid.