Designing an e-Commerce Mobile Site with JQuery Mobile

How do we fit great design into your palm?

That was our dilemma.  Since our company’s mission is to bring great home design from around the world, we’ve always worked hard to make our products come alive online at GraciousStyle.com:

But ever since we’ve become inseparable from our iPhone, we’ve been thinking about how to do the same on a little screen.  How can we give you the same visually exciting feeling about our products — indeed, about our brand — on the go?

A Mobile Site or an App

The first thing we asked ourselves was, should we build an app or a mobile version of our site?  While an app has a lot of advantages, there would always be many visitors who would want to access our site through the browser on their phones.  Therefore, we would have to cater to their needs with a mobile website, even if we had an app, so we decided to work on a mobile site first.

Goals for our Mobile Commerce Site

We wanted our mobile site to have the rich, visual experience of our main site.  We also wanted it to feel like using a mobile app, not just a standard web site transplanted to the smaller screen.  When you browse the site, the buttons and menus should be easy on the fingers.  Finally, we wanted it to “fit” within the phone, so you can see what you need without scrolling through the rest.

Here’s What It Looks Like

Since a picture is worth a thousand words, we start with the largest images possible to tell you what we do:

When you scroll through the site, the links to categories and products are like large buttons, so they’re easy for large fingers:

We have a lot of information about products.  So as not to hog up your screen, we decided to show the most important thing first.  If you want to see all the other images, there’s a button for it.  If you want to read more detailed information, notice there’s a plus sign.

Clicking on the plus sign opens up more information on the same page, such as details about the design or the artist:

In case you don’t need to see all that, you can click on the minus sign to close it.  The list of products also allows you to use a filter, in case you want only to see some the pieces in a collection:

And of course, some of our other favorites:

We hope our mobile site will make it fun to browse for great design for your home while you’re on the go!

If you’re interested in knowing more about how we built the site, read on — the next section is a little technical.

How We Did It

A large-scale online store like ours is actually pretty complicated, so it couldn’t be translated to a mobile format with a canned service.  We were, however, able to reuse most of our existing online store — all the heavy lifting in the background for getting you the products, information, prices, orders, etc.  Then, using a freely available tool kit called JQuery Mobile, we redesigned the pages of our main website for mobile screens.  JQuery Mobile was not only free but very easy to integrate into an existing website, and using simple markups, we were able to create the nice buttons and menus that made our mobile site look like a mobile app.

Have you tried our online store on your mobile phone?  We’d love to hear your comments!

The Gracious Style mobile e-commerce site was developed by Open Source Strategies, Inc. using opentaps Open Source ERP + CRM and JQuery Mobile.

Like this post? Sign up for our email list to get news and special offers!