Responsive web design for e-commerce website?

Question

I'm going to build a big e-commerce website and client want that website should be for all user Desktop, Tablets and Smartphones. and budget is not a problem. Site is an e-commerce website lost of categories and products , "add to cart, checkout functions, credit card and paypal payment etc.

Would it be good to make responsive website with mobile first approach or it will be good to make separate website for mobile?

And if I go with separate website approach I cannot leave any feature of desktop website to make it on mobile because it's e-commerce website so every product, purchase system , form validation should be on mobile website too.

What would be good for users?

Answer 1

If budget is not a problem, then use the same website having different styles for different devices. If you look at a good site on both web and mobile, you'll find that almost everything is there (browse to http://ux.stackexchange.com on your phone and be amazed).

You need to decide which features to leave out (Yes I know its not what you want, but please consider it) from the mobile view. Especially those that doesn't add an value and just clutters the users progress to purchase an item on a mobile device. That's really the hard part, to make the design for each device(s) as straight forward as possible.

I would group into two different categories; mobile and non-mobile. Why? A tablets browser is as good as a laptops or a desktop computer - but you need to make sure you can use the site on tablets through testing. We're building an apartment let site (might be wrong word for it) and on each page in each state we test on iPad and Android tablet to know that it actually works. Tablet UI obviously doesn't have a mouse or a hardware keyboard, which we need to design for. The mobile view would work on any mobile OS with a browser implementing the W3C standard.

Now you have only two different groups of CSS/JavaScript files to worry about, and with unlimited (Yeah I know, it doesn't exist, but anyway) budget you have the possibility to make the e-commerce site of the year. I'd love to follow your work as you move along and hopefully you'll keep posting potential issues here, so we can follow progress and learn collectively.

Answer 2

If budget is no object, and to best serve the needs of your users, I highly encourage you to take a mobile first philosophy. It will allow you to find the absolute essential features that users will need, that can be augmented for desktop and tablet, based on the available screen real estate and adding value to the experience. If you take a desktop first approach, especially if you believe that you will need to put every single feature on the mobile e-commerce site, you will end up with a overwhelming mobile experience.

Hard to believe, but not all features of a desktop e-commerce site need to be available on mobile -- yes, all payment processing, data-collection and selection criteria for a product need to be there, but as you evaluate your content with a mobile-first mindset, you will find that some elements of an item inventory dataset do not need to be displayed in mobile, but can be displayed on desktop. How you think about images when planning mobile-first, and the variety of sizes needed across devices will help you keep a light and nimble desktop experience because you are being conscious of the bandwidth issues for your mobile users - and that will trickle down to your desktop experience. Rather than a highly dense experience, you can create something light and joyful to engage with.

Whether you use responsive design may depend on your user base, the penetration of latest-gen smart phones among your users and whether you are a local, regional, national or international site, and whether you need to also accommodate a variety of languages and different user expectations.

It would be great to see a solid e-commerce site that was fully responsive, and that users can scale down to the available screen real estate they have. I liked the Tom's Shoes mini shopping module that followed you around the site. It was basically a mobile shopping experience attached to a larger web site.

If you have to support feature phones, you will probably have to build a separate mobile site for them, since most of those phones are not html5/css3 enabled. Take a look at the users, their devices and the percentage of sales your client already does on mobile (or their competitors). This number will grow. You want these users to be as happy as your desktop users, and you don't want them to feel like navigating your site is a burden - or that they are on a miniaturized version of the desktop site.

Answer 3

For your first query, I would recommend creating a full featured website without any mobile consideration at the outset. After which, move with distilling those features into the mobile space as a separate entity altogether. My reasoning is simply due to the fact that both web and mobile streams are becoming increasingly complicated in very disparate ways. It makes more sense then, to handle each streams separately than to have it all burdened on a single point.

Although very similar to mobile devices, I would also recommend that you build a separate entity for the tablet space. In my perspective, UX on tablets don't necessarily fall into the "mobile" category as we know it, although it is fairly mobile. With different screen sizes, retina or high resolution displays, interaction, and cognitive precept, you'll end up with completely different cases to trial than with regular mobile devices.

In my experience, you can translate any and every feature on a robust e-comm site onto the mobile viewport. Key differences would occur at the display, interaction and feedback mechanisms, whereas the actual feature and goal itself may not need to change since your business requirements will not change. For example, a requirement for a form that collects specific customer data will not go away, however, certain attributes in the form's look and feels may change slightly on mobile given the difference in medium.

Answer 4

I have used Bigcommerce platform in a few projects and I would give 8.5 out of 10. The pros: It allows you to focus on UI design for the desktop version with total freedom and the mobile version is built automatically, sharing the same database of products and customers and one centralised CMS interface for administration.

The cons: You do not have much freedom editing the mobile version. Also the database has restricted access: You only insert data via their CMS- no direct access to DB. It may be annoying sometimes.

The mobile version does the job very well, no complaints here.

I have not tried other platforms, but I know that there other out there with similar resources (such as the popular Magento). I suggest you to shop around and do some trials.

Magento: http://www.magentocommerce.com/product/mobile#mobile-tabs Bigcommerce: http://www.bigcommerce.com/p/10921-0-1-10.html

I know that it might go a little beyond your question but the point is that finding the most adequate solution will save you time and allow you to concentrate in other aspects of the user experience.

Cheers

Answer 5

Your question of whether you should use responsive design versus a purely mobile site is something only you can answer. Is one more effort than the other for you? How many users are visiting the current site today from a mobile or tablet device?

I dislike the idea of mobile first. It often leads to "I guess I can leave this out because it's for mobile.." type of thinking and usually doesn't solve the problem of "What is important?"

If something is important, it needs to be there. Is quick view important? I don't know, how many users currently use quick view? Is add to wishlist important? I don't know, how many users are currently adding to wishlist and converting within X amount of time? Is having a huge banner on the homepage that says "Free Shipping" important? I don't know, how many users are currently adding a product to their cart and checking out with the Free Shipping option instead of $13.99 for expedited shipping?

Also, depending on what platform you're using, some have a mobile theme. I know the latest Enterprise version of Magento and the perhaps the latest Community version as well, have a mobile HTML5 theme out of the box. I'm using it on a new project and it's great. Perhaps take a look at that and see how they work with mobile.