MADE.COM

Website link: Made.com

Website features:

• Responsive design - new checkout process currently being developed
• Responsive grid integration - new checkout process currently being developed
• Media queries - new checkout process currently being developed
• Cross browser (IE7+) compatible
• CSS3 - Mobile site and new checkout process currently being developed
• HTML5 - Mobile site and new checkout process currently being developed
• jQuery - Mobile site and new checkout process currently being developed
• Hand coded JavaScript - Mobile site and new checkout process currently being developed
• CSS3 animations - on mobile site
• High resolution screen friendly - on mobile site
• Prototype
• Scriptaculous

More information: 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 Magento setup. The animation runs once on a fresh page load. Steps are advanced with user interaction. The animation script is small as effects and easing is pre-built in a Scriptaculous.

For the accordion checkout I used: The new checkout process is built for tablet and desktops. The process is optimised for tablets with small changes in the design. objects like buttons and text size is scaled up and down. I've hand coded JavaScript effects and validation - The credit card field uses 'regex' and JavaScript 'Case' to detect what type of card the visitor has. Once the card type has been identified the matching logo is displayed. This creates a smoother and faster checkout process for card payments.

Other new features include HTML5 form validation and pure CSS3 button gradients.

The new checkout process uses my custom responsive grid.