728 X 90

Designing an e-Commerce Mobile Site with JQuery Mobile

By sichen — December 09, 2011

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!

About Author

(8) Readers Comments

  1. Warren Bell
    December 12, 2011 at 8:06 pm

    Really nice looking mobile app. I am in the process of deciding whether to go with Dojo mobile or JQuery mobile. Did you look at Dojo mobile and if you did what made you go with JQuery ? Thanks, Warren Bell

  2. Tom
    December 13, 2011 at 8:28 am

    Beautiful....pictures not visible....nice development...

  3. sichen
    December 13, 2011 at 8:44 am

    Honestly we liked JQuery mobile and found it pretty easy to work with, so we went with it. I'm sure there are a lot of other good mobile frameworks. The key is to use one that agrees with your coding style.

  4. sichen
    December 13, 2011 at 8:45 am

    Thanks! "Pictures not visible" -- on the blog post or on the mobile site?

  5. elatllat
    December 14, 2011 at 6:43 am

    I see no images :(

  6. sichen
    December 14, 2011 at 9:28 am

    No images in this blog post or no images on the mobile site?

  7. December 16, 2011 at 10:38 am

    The images should be there now. Why don't you try again?

  8. December 16, 2011 at 10:38 am

    The images should be there now.

Leave A Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>