How To Organize Your Mobile Website To Maximize Usability And Sales

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

In case you missed them, here are the links to the previous 3 articles.


In today’s article, I’m going to discuss the most important elements of mobile website design. One of the hardest parts of designing a mobile optimized website is that the screen is so darn tiny. In most cases, you have as little as one-tenth of the screen real estate compared to that of a desktop or a laptop, yet you still need to convey the same level of information to your potential customers.

Because the discrepancy in screen real estate is so large, you need to make some hard choices when designing the pages and navigation on your mobile site. And it becomes even more crucial that you utilize each and every pixel on the screen to its full advantage. Here’s how I made some of the design decisions with our online store website.

Designing The Header And Footer

The header and footers for your mobile website are probably the most important parts of your entire design. Why? It’s because the header and the footer is shown on every single page of your website. And since they both take up valuable screen real estate, it’s crucial that you use this space wisely.

If you’ve been running your shop for long enough, you should already have an idea of how your customers navigate through your shop. In my case, I used Crazy Egg to tell me which links and navigational elements were used the most. Below is a heat map of the customer activity on my online store.



First off, what is heat map? A heat map is a graphical representation of how a customer interacts with a website. The brighter the spot, the more customers clicked on that particular link. Looking at the heat map for my online store, it becomes pretty obvious what the hottest navigation points are.

The most glaring hotspot that I see is the search bar. Most customers are not willing to randomly navigate through your shop and as a result, they go straight for search. And if they don’t find what they are looking for on the current page and they can’t find the search bar, they are going to abandon your website. It’s that simple.

The other hotspots that stand out are the “About Us” page, the “Contact Us” page, the “View Cart” page, the “My Account” page and the various other content pages that I have on my online store.

How I Decided To Organize My Header/Footer

So based on this information, I came up with the following header and footer design.

Due to constraints on screen real estate, I obviously couldn’t just shove everything into the header.

So what I decided to do was split these links between both the header and the footer.

Ultimately, I placed all of the shopping and checkout related navigation in the header and included all of the informational content about our store in the footer.

This turned out to be a good compromise because all of the most visited links for my shop can still be found on every single page of the site without too much trouble and it doesn’t look too cluttered.

Designing The Product Pages

How you choose to organize your product pages on your mobile website is extremely important as well. Why? People on mobile phones don’t like scrolling down very far in order to add something to their shopping cart.

So while it’s all fine and good that you have very detailed product descriptions, chances are most customers will not want to read a lot of text on their tiny phone screens.

Therefore, it’s essential that you make all of the content elements on your product pages collapsible.

When a customer first arrives on a product page, by default they should see nothing but a high level description. And if they choose, they can click on a collapsible link to see the rest of the information.

In my mobile design, the picture to the right shows what a customer sees when they first land on a product page. If they click on “Description”, the paragraph will expand and they will get a more in depth description of the product.

However by default, if all they want to do is see a picture of the item, they can add it to their shopping cart without scrolling down at all.

The other key element of my product page to make a note of is the breadcrumb navigation at the top. At any point in time, the customer can backtrack through the exact path that they took to arrive at the current product.

A breadcrumb makes navigation through the website much more convenient.

Optimizing General Navigation

Overall, one of the main differences between a desktop and a mobile site is that there should be as few text based links as possible on a mobile site. Text links aren’t necessarily bad as long as you keep them well spaced apart but in general, you want to use more substantial navigational elements.

The key is to think of someone you know with fat fingers and pretend that you are optimizing your website for that person. In a nutshell, all links should be large buttons or images.

In the picture to the right, all of my category and product level navigation links are large buttons that contain a picture of the product or the category and the name.

As a result, there is very little chance of someone tapping on the wrong link by mistake.

Optimizing Checkout

The checkout process for a mobile customer is much more tedious than a desktop customer because mobile users don’t have full mechanical keyboards. As a result, you need to make life easier for them by minimizing typing as much as possible. Here are some general guidelines on how to design your checkout pages.

  • Use pull down menus instead of text fields – For example, instead of making a customer type out their state of residence, use a pull down menu instead.
  • Limit forms to just the bare essentials – Don’t ask for any more information than you need in order to complete the sale.
  • Use checkboxes and pre-populate fields if possible – For example, instead of making a customer type in their city and state, you can infer this information from their zip code.
  • Offer Paypal Express – What’s nice about Paypal Express is that a customer’s address information can automatically be loaded when they log in to their account which reduces the amount of typing during checkout

All of the practices above also apply to a regular desktop ecommerce site but become even more crucial on a cell phone.

Conclusion

There are many tradeoffs and design changes that you need to make if you want to convert a mobile customer. And unfortunately no matter what, the mobile shopping experience is always going to be worse than shopping on your desktop.

Your goal as a mobile web designer is to minimize the negative impact of a small screen and a slower internet connection. Fortunately, every design element that I’ve described above can be easily implemented using JQuery Mobile. And the best part is that the JQuery Mobile framework is completely free.

To be honest, I’ve only scratched the surface of what JQuery mobile can do. So if you are interested in creating a mobile optimized website for your online store, you should definitely check out their website. The world is moving towards mobile whether you like it or not and you can either jump on that wave or miss the boat.

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:

Similar Posts

Have you read these?

17 thoughts on “How To Organize Your Mobile Website To Maximize Usability And Sales”

  1. Zainhab says:

    I really enjoyed this series though I’m not quite sure where to go from here. I know that I need a mobile site. Should I just get a plugin? Where can I find them?

    1. Hi Zainhab,
      Depending on your shopping cart, you should do a search for “mobile templates” for your exact platform. Most if not all of the open source shopping carts now have mobile templates you can buy or add on to.

  2. Larry P says:

    Awesome guide! Are you going to discuss some of the other details involved like doing to mobile redirect and how to detect mobile browsers? Why did you decide on a completely separate domain for your site?

    1. Hi Larry,
      I was thinking about doing that at some later point. Based on the emails that I’ve been getting, I think much of this tutorial went over my readers heads. A lot of people are just trying to start their own websites let alone having to worry about mobile

  3. We’re basically in stage 1 of our mobile mapping, so this guide has been a big help in serving as a road map.

    1. Thanks LilyPants! I’m glad you’ve found this helpful

  4. Pingback: Google News
  5. Mobile web development is empowers businesses. Website to mobile website leverages this advantage further. Mobile web is the order of the day now.

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>