Responsive Retrofit: MaxiShop.com
The official retail site for Maxinutrition products
Take the non-responsive MaxiShop and make it responsive within a month, for a conversion "quick win" until a completely bespoke responsive shop can be designed & developed.
A carousel of screenshots from the finished pre-release site is above, iterative screenshots showing design progression are shown throughout this page. The retrofitted site has since been replaced by the new responsive shop.
The majority of the HTML on the original site was dynamically generated by back-end code, so responsive functionality had to be bolted-on through CSS and jQuery only.
As the site was Bootstrap-based, the responsive grid was applied as a starting point. Each type of page and most types of content on the site had unique IDs which could be targeted and altered. For more tricky content, the desired result was usually achieved through "selector-fu" and jQuery was applied to inject additional functionality & tweaks.
Once the technical challenges had been overcome and the site was functional across test devices, the look and feel was tweaked for release. Since release, the site has produced impressive uplifts in revenue from mobile devices.
Responsive Retrofit: MaxiRAW.com
The official brand site for MaxiRAW sports nutrition products
A responsive retrofit of the previously non-responsive MaxiRAW brand site.
A carousel of screenshots from the finished pre-release site is above, and various screenshots of the site on larger mobile devices are displayed throughout the article. The MaxiRAW brand has since been retired, so the site is no longer live.
Similar to MaxiShop, RAW is a Bootstrap-based site so the responsive grid was applied as a starting point for the retrofit. Although the structure is dynamically generated and a lot of CSS specificity & some jQuery was required to edit certain DOM elements, because the site is focused on content instead of e-commerce, it was possible to edit a lot of the HTML contained within to optimise the layout across devices.
After a short period of testing & tweaking, the site was released successfully in February 2014. In the weeks following release, the responsive site vastly increased engagement (avg. time on site) and reduced bounce & exit rates on mobile devices.