3 Ways To Design A Mobile Optimized Ecommerce Website And The Tradeoffs That You Must Make

Share On Facebook

This article is part 3 of a multi-part series on how to design a mobile optimized website for ecommerce.

In part 1, I demonstrated how big of an impact a mobile optimized website can have on the conversion rate of your store. In this article, I used actual numbers from our online store Bumblebee Linens to show how optimizing for mobile can effectively double your conversion rate.

In part 2, I went over some basic design principles that are essential to optimizing your site for mobile. Specifically, I showed you what you need to do in order to design a killer mobile ecommerce website that will boost sales.

Today, I want to talk about tradeoffs. Knowing the best design practices for creating a mobile optimized site is all fine and good, but implementation is the hard part.

Often times as a webmaster, you need to make some hard choices about your website because you can’t have it all.

In order to get your site up and running in a timely fashion, you will need to make some concessions.

Below, I’m going to talk about some of the design tradeoffs that I had to make in order to launch my mobile site within a reasonable timeframe.

My Implementation Goals

To understand what was going on in my head through this whole process, I’m going to start off by talking about some of my goals and priorities. After all, you can’t discuss tradeoffs unless you know the priorities. Here were my main criteria for designing the mobile site.

  • I wanted a highly usable site with an emphasis on great navigation and usability.
  • I did not want to have to write or edit any complicated code.
  • I wanted the mobile site to be easily maintainable and upgradable.
  • I didn’t want to touch the functionality of the main site. As many of you probably already know, our store is open 24 hours a day, 7 days a week and we make money constantly. Therefore, I didn’t want to take the chance of accidentally breaking my desktop site during the mobile development process.
  • I wanted both my main site and my mobile site to share the same database and images. In other words, both the mobile and desktop versions of my site had to share product and category data from the same source.
  • I didn’t want to have to deal with cross browser and cross phone compatibility. I had a nightmare dealing with IE6 during the early days and I didn’t want to relive that experience.
  • I wanted to reuse as much of the product descriptions and verbiage as possible without affecting the mobile experience.
  • I wanted to complete this project within a month. At some point, I debated whether to outsource this whole project but decided against it after assessing the complexity. It would easily take a month in itself to write a detailed design spec and find a competent developer.

To sum everything up in the list above in plain language, I wanted to get a good mobile site up and running relatively quickly without requiring a lot of maintenance and without disrupting sales. In a nutshell, I had 3 choices on how to proceed.

Choice #1: Keep Everything The Same And Change The Stylesheet

I can’t tell you how badly I wanted this solution to work. In most cases, when you run a content heavy site or a blog, you can make your site mobile by simply modifying your CSS style sheet and changing the way your site is displayed on a mobile phone without touching the source files.

For example, I could easily optimize MyWifeQuitHerJob.com for mobile by removing the menus and ads altogether and displaying all of the content in one skinny column. In fact, there are several free WordPress plugins out on the market that do precisely that.

The beauty of the “stylesheet only” solution is that very few lines of php code need to change. You can simply modify the CSS, have your content wrap and the user never has to scroll sideways on their cell phone. If I were to adopt this methodology, I could easily finish up my mobile site in a week or less.

But the big problem here is that ecommerce stores require extremely efficient navigation. You can’t just wrap everything up in a skinny column and hope that a customer will buy from you. The layout of a desktop site and mobile site is completely different in that you have to make much more efficient use of your screen real estate!

Even still, I messed around with the stylesheet of my online store for a few hours before I decided that this methodology was not going to work without heavy modification of the source code.

In reality, I probably could have forced things by conditionalizing certain parts of the code to display differently for mobile but it would have violated several of my main criteria.

  • No touching of the main site source. Might break the desktop site
  • Doesn’t address cross browser compatibility
  • Not easily upgradable as new mobile standards are introduced
  • Pain in the butt to maintain

Choice #2: Use A Mobile Plugin For My Shopping Cart

Once I shot down choice #1, I started scouring the net for good mobile plugins for my shopping cart. Under most circumstances, buying a mobile plugin is the best of both worlds.

One, you get a website that is mobile ready that works out of the box. And two, you don’t have to do that much work except for customizing the plugin.

There were several plugins for my particular shopping cart that were available for download, but after playing around with them for awhile, I realized that there was no single plugin that matched exactly with what I wanted to do. In other words, I was too anal retentive and couldn’t find anything I liked.

I thought about making custom changes to the source code for the plugins I tested but the code was very hard to read and probably would have taken me a good amount of time to modify correctly.

Plus, there was a risk of inadvertently breaking other features. Here were some of the things that I didn’t like about the mobile plugins I tried.

  • I wanted the option to display an abridged version of the descriptions to mobile users and full descriptions to desktop users
  • I wanted full control over how products and categories were displayed. In particular, our store sells personalized items so I wanted the user interface for that category to behave differently from the rest.
  • I wanted full control over all aspects of the navigation. In other words, I was very particular about where I wanted certain elements to be placed such as the search bar and breadcrumbs.

The problem with using a shopping cart plugin is that the mobile experience is very cookie cutter. Because the plugin developers have to cater to the general public, you will rarely find all of the necessary features that pertain to your specific shop.

Overall though, it was an extremely tough decision. On one hand, I could get up and running right away. But on the other hand, the mobile experience wouldn’t be quite what I wanted. The real question was whether it was good enough…

Choice #3: Design My Own Mobile Site

I’ll stop the suspense here and tell you that this was the choice that I ultimately made. But to be honest, everything about this choice didn’t make sense in the beginning.

For one thing, I didn’t know jack about how to design a mobile website. Two, I wanted to finish my mobile site within a month. With two kids, a full time job, an online store, a blog and an online store course, my time was extremely limited.

And three, I didn’t know jack about how to design a mobile website. By the way, did I mention that I didn’t know jack about how to design a mobile website?

Thankfully, while I was doing my research, I came across a mobile design framework called JQuery mobile. If you’ve never heard of JQuery Mobile before, I recommend that you check out their website.

In a nutshell, the JQuery mobile framework allows you use pre-built constructs that are guaranteed to work across multiple mobile platforms in designing your website.

In other words, by using the framework I didn’t have to worry about my mobile site being compatible on different phones. The maintenance of my mobile site would be minimal because I could simply upgrade the JQuery framework files and not my source code when new features were available.

In my next article, I’ll go over the exact features that JQuery mobile offers and how I used these elements with my mobile site. What’s nice is that JQuery mobile allows you to be a competent mobile web designer without having to deal with a lot of extra overhead. Since I knew my shopping cart extremely well, I was able to easily adapt my website to the JQuery mobile framework.

Conclusion

Ultimately, I managed to design a fully custom mobile website in 3 solid weekends of hard work. Just to illustrate the tradeoffs that I ultimately made, here’s a list of things that I had to concede.

  • I ended up with 2 completely different sets of source code, one for mobile and one for desktop. Once I started, I knew that this was inevitable. However both websites use the same exact database and the exact same images so maintenance is minimal. I also ended up modifying the database slightly to optionally include separate product and category descriptions.
  • I ended up having to write a lot of code. The bright side of all this is that I now know the ins and outs of how to create a mobile site. Plus, I finished it in under a month!

If I were to do this all over again, I would still go with Choice #3 for my online store. However, most shop owners can probably get by with a mobile plugin as long as the shop does not require too much customization. The main thing is to decide up front which aspects of mobile design are important to you and to decide on the tradeoffs.

One of my greatest weaknesses is that I like everything the way I want which sometimes ends up being a lot more work. But in this case however, I still managed to meet my scheduled goals thanks to JQuery Mobile. In my next article, I’ll go into more detail about specific design choices that I made with my mobile site. Stay tuned!

Ready To Get Serious About Starting An Online Business?


If you are really considering starting your own online business, then you have to check out my free mini course on How To Create A Niche Online Store In 5 Easy Steps.

In this 6 day mini course, I reveal the steps that my wife and I took to earn 100 thousand dollars in the span of just a year. Best of all, it's absolutely free!

Give Me Access To The Free Course!
Enter Your Email Address:
Share On Facebook

Similar Posts

Have you read these?

14 thoughts on “3 Ways To Design A Mobile Optimized Ecommerce Website And The Tradeoffs That You Must Make”

  1. Georgia says:

    I’m so sorry Steve, but all of this information has gone over my head. What should I do to optimize for mobile? Is this something that I should do now or can I wait until later? What do you recommend for my site?

    1. Hey Georgia,
      Send me your URL and I’ll take a look.

  2. Jim Planar says:

    Great article Steve,
    I’m currently using a mobile template that is built into my shopping cart and it seems to be ok so far. I don’t get a whole lot of mobile sales right now so I’ll probably worry about it more later.

  3. Vince D says:

    Awesome! Can’t wait for your next article. I really enjoy these technical articles. You provide great insights on how to attack a problem head on.

    1. Thanks Vince. Based on some of the emails that I’ve been getting, I’m not sure if some of my readers are ready for the mobile scene just yet. Many of them are just getting up their basic website.

  4. I keep telling myself I need to update my site with a mobile version. Guess I might want to make that a priority 😀

    I don’t have an ecommerce site now, but plan to do one in the future, so it’s great to have this resource where I can get some ideas! Thanks for sharing!

  5. This is some super technical insight and I love the way you took us through your own learning curve as you explored the various options. Great post and thanks for sharing over at BizSugar.

  6. Thanks for filling me in on the importance of having a mobile version.

  7. 452 says:

    What were some of the moible plugins you found but rejected?

  8. Good article. I think we need to design first for a mobile site and need to deviate to a desktop site. So the workflow might be much easier, but it will only work if we are building a website from scratch. Indeed a good read, thanks bro for sharing your thoughts and brain :).

    1. Yeah. If I was building everything from complete scratch, I definitely would have done things differently. The most ideal solution would have been to have a single site that automatically sizes down according to screen size. But I absolutely didn’t want to break anything with our main site so thus, we had to compromise and create a separate site on a separate domain.

  9. Hi Steve. Thank you so much for sharing your amazing knowledge and experience. I’m researching a lot before building my website. Having said that I would like it to work with mobile compatibility since day one but I don’t know how to write codes. So what would it be the most acceptable shopping cart plug in to make my life easier in this aspect and also compatible with a hybrid concept of blog and e-commerce?
    Thanks again!

  10. good post dear
    anyone can easily learn through this post
    thanks

Leave a Reply

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