MicksGrage.com - Responsive Retrofit

Making MicksGarage.com Mobile Friendly
Swipe / Click ← → to proceed
  • MicksGarage - Responsive Product Filtering
    Product Filtering.
  • MicksGarage - Responsive Navigation for Tablets
    Navigation for Tablets.
  • MicksGarage - Responsive Basket
    Responsive Basket.
  • MicksGarage - Responsive Product Listings
    Product Listings.
  • MicksGarage - Responsive Contact
    Contact Us.

Project Details

Through feedback from customers and a carefully designed focus group it was determined that the priority for development on the site should be to improve the experience for the rapidly growing number of visits from customers using various mobile devices.

We decided to achieve our goals by retrofitting the site to be responsive. Responsive meant that we didn't have to fit the site to a specified set of screen sizes and retrofitting had the advantage of much faster development time.

Sketching & Prototyping

The first step in this process was, as usual, sketching out ideas on paper and whiteboards. One simple process I found very helpful in the early stages of this project was the use of A4 pages printed with phones. Sometimes paper is still mildly useful.

More useful was InVision which allowed all the stakeholders on the project to interact with and discuss working prototypes. This greatly increased the speed of decision making.

Enforced Rethink

Many of the layouts throughout the site had to be redesigned from the ground up for the retrofit to work. Luckily we had this in mind during the redesign that we had already completed of the basket, checkout and account sections so many of the most essential pages were half way there.

Optimisation

Preparing the site for mobile visitors involved more than simply making the layout stretchy, we also had to take a close look at page load times and our use of javascript throughout the site. I discovered that one of the drawbacks of a responsive retrofit is that there can be bloat in the code. For this project we sprinted to get a version of the responsive site out and then took some time after launch to try and speed the site back up as much as possible.

Micksgarage.com Work