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.
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!
- How To Organize Your Mobile Website To Maximize Usability And Sales
- How To Design A Killer Mobile Ecommerce Website That Will Boost Sales
- How We Doubled Our Mobile Sales By Designing A Mobile Version Of Our Website
- An Inside Look At How My Online Store Redesign Has Increased Sales
- The Moment I Realized How To Achieve Limitless Productivity