Portfolio

Scarosso, the online shoe retailer needed to make their site responsive to capitalise on the rise in mobile browsing. The stylesheet that we implemented resulted in a step change in their mobile sales.

Type of Work: 
Design
Sector: 
Retail
Technologies: 
CSS3, Responsive Web Design
Launch year: 
2015

The Brief: 

With the number of Mobile users overtaking Desktop in 2015, it has become of utmost importance for online retailers to cater for smartphones and tablets. Scarosso, an online shoe retailer, approached us to help them translate their desktop site to mobile, in the hope that they could boost sales from mobile browsers. With the site unusable before our input, the focus was to make sure that users could browse and select products, view their cart and use the checkout successfully at a range of screen sizes.

The Solution: 

Without a copy of the main codebase or database, we were not able to set the site up locally. Instead, we used the CSS Inject chrome extension to layer our styles on top of the existing stylesheets. This meant that we could not make any changes to the markup, and so we had to be inventive in our approach to some of the trickier components, including the menu and the checkout process.

The project implemented LESS preprocessing compiled by Grunt. This structure allowed us to separate parts of the site into individual less files, which are smaller and easier to manage than large CSS files, while still delivering one CSS file at the end, which was implemented by the client’s in house development team.

The site was made responsive by using media queries to apply styles at smaller screen widths. We applied both a small and medium breakpoint to cater to both mobile and tablet devices.

Our solution provided an almost immediate boost to the client’s sales, with mobile conversion rate overtaking desktop in the months following the deployment.