Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

made.com

Website link: Made.com

Website features:

  1. Responsive design – new checkout process currently being developed
  2. Responsive grid integration – new checkout process currently being developed
  3. Media queries – new checkout process currently being developed
  4. Cross browser (IE7+) compatible
  5. CSS3 – Mobile site and new checkout process currently being developed
  6. HTML5 – Mobile site andnew checkout process currently being developed
  7. jQuery – Mobile site andnew checkout process currently being developed
  8. Hand coded JavaScript – Mobile site andnew checkout process currently being developed
  9. CSS3 animations – on mobile site
  10. High resolution screen friendly – on mobile site
  11. Prototype
  12. 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 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:
The new checkout process is built for tablet and desktops. The process is optimisied 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.

latest work

  1. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  2. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  3. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd