Making sure your new ecommerce website has a responsive design is a pretty important component of building an ecommerce website these days. More and more people are using smartphones and tablets to view websites on these days, and the range of different devices and operating systems is growing rapidly. There is still a valid debate about native Apps Vs Html5 Hybrids, but in our opinion the latter is the clear winner when it comes to cost effectiveness.
Once the decision to go responsive has been made this still leaves a bit of a conundrum, because bespoke responsive web design can be a very time consuming and therefore costly exercise. The choice to make is whether or not to go for an off the shelf theme, a modified off the shelf theme, or have a completely bespoke design created from scratch.
Option 1 of an off the shelf theme can mean you are up and running for a relatively low cost in a few days, where as the opposite end of the scale option 3 of a completely bespoke design can mean many weeks of work for designers & developers. The decision will be a complicated one factoring in things like: the needs of the project (e.g. how important is it to be unique), the budget available, timescales for development, what themes are available for the platform in question etc….
Let’s take a recent build we did for example using NopCommerce: http://www.butterfliesanddragons.co.uk/. Whilst there are certainly some good out of the box responsive themes out there for NopCommerce: (e.g. NOP Template, the needs of this project were such that a completely unique site was required, and none of the themes we found came close to what the client wanted. Therefore option 3 was the only logical choice.
We therefore started down our usual build process path and at the relevant juncture begin wireframing. The decision had already been made to create the design on top of the twitter bootstrap responsive framework in order to give us a head start. This gave us 5 different viewports to create a design for: Large display, default, portrait tablets, phones to tablets, and phones (see here for more info).
Very quickly we and the client realised what a task this would be. For wireframing purposes we were doing 4 key screens (home, category listing, product details and cart), which meant 20 separate wireframes needed to be created and tested (i.e. 5 variations of each of the 4 screens). We then needed 15 pages designed by Anna our graphic designer, again each of which needed 5 variations… that made 75 individual designs eeeek.
As anyone who’s done responsive design knows, creating these variations is not simply a case of squishing things and moving a few boxes around, each screen has to be individually designed. What you can logically fit onto a widescreen TV is completely different to a phones screen, and it requires a completely differently layout and sometimes content. It also needs to be designed with development efficiency in mind. What we don’t want is to have to repeat content and code all over the place so as to achieve what we want (i.e. different code and content for each viewport). In an ideal world we want 1 set of HTML and content which is altered by CSS media queries to achieve what we need to across the different viewports.
A very long month later we had all our designs signed off and ready to be built, easy days then I hear you say…. Our developers would most certainly not agree. In the end it took nearly 4 weeks to get the site coded up into static HTML files, sometimes with 3 guys working on it simultaneously. At the end of it they could hardly bare to look at the designs any more.
The final step was then creating a new custom theme for NopCommerce: and ripping out all the existing UI code. Whilst this wasn’t a simple job by any means, compared to the previous stages it felt like a breeze. Coupled with this the great way in which layout is separated in Nops architecture made it pretty easy. We had to make very few source code modifications to get this all working as we needed it to, which is a testament to how well built and flexible NopCommerce: is as an ecommerce platform.
The end result after months of hard work was http://www.butterfliesanddragons.co.uk/. Take a bit of time to resize pages in your browser and you will see the different layouts. Now it’s not pixel perfect across all viewports by any means, but that’s because of the realities of budgets and what we wanted to achieve with the site. Suffice to say testing results of the site were very positive, as has been the clients reaction and anyone else who’s looked at the site. This is down to the hard work of everyone involved and the creativity of Anna who designed the site.
