Article | Date posted : 12 November, 2013 | Updated on : 30 January, 2014

Building a mobile checkout (Part 1 of 8)

Sponsored Links

In the first part of this article I will talk about the pointers that you need to look at before starting to build you mobile checkout and in my next article I will show and explain to you with a live example on how to build a mobile checkout.

Ever since 2010 we have seen a yearly increase in mobile visitors by 200%. This year (2013) there is a total mobile visitor percentage of 40%. That’s a huge market to cater for. So the big question is, have you updated your checkout system? Is it compatible with mobile devices, and do you know what to focus on?

If any of my customers has anything above 15% being mobile visitors, I’ll be starting to suggest in optimizing their checkout for mobiles.

Optimizing a checkout that fits nicely in a mobile device is not the only development you need to look into. It’s also the steps and ease of use. Today I’m going point out and explain the key elements in developing an excellent checkout system.

Is a mobile device simple?

mobile complexity

A mobile device is not simple, there are two categories one being Smart Phones and the other being Tablets. There is also a secondary level on these devices that can cause a bit of a headache. Which is the pixel density of these devices. There are 2 platforms that in my professional development I focus on, and that is Apple iOS and Android.

  • Apple iOS  high pixel density starts at 2 and is labeled as Retina Display.
  • While Android devices define their high pixel density starting at 1.5 and not 2 like apple does, this does not mean that android does not have higher pixel density, it’s simply defined at a lower multiplier.

So why is the pixel density even important?

The pixel density is important when displaying images such as jpg and png, when looking at images on high-end devices that where originally build for desktop devices will look blurry. There are workarounds by using plugins to overwrite the image URL to load higher resolution ones, such as Retina.js. But this script requires an extra resource that needs to be loaded.

Another method which is the same as the retina jQuery plugin is to target the pixel density in a CSS file directly using media queries. You can use the code below to target devices with a 1.5 or higher pixel ratio. The only problem with using CSS is that all images will have to be set as background inside your container, and not an IMG tag. This way your are not loading an extra resource.

A third option is to use server-side detection with Mobile Detect to target specific mobile devices. (Which is not a very easy way, as Android has to many devices that you need to target). This method will allow you to use the IMG tag in the html structure. This is only an option to show you that there are more ways available to you, but using this method is highly unpractical.

My conclusion about higher pixel density for the year 2013

Don’t worry on integrating higher quality images for mobile devices and focus on CSS styling only. CSS is scalable in all different pixel densities. My secondary reason, is not to bother with these devices is because you are actually going to double the size of the image which will result in heavier page loads, increasing the image time load by 2. There are parts in the world where the connectivity for mobile devices are not fast, and remember we are optimizing the checkout system to include mobile devices not to build a separate system.

So why don’t you build a separate checkout? This decision is a derivative of the rest of the site. By splitting up the site you are splitting up the page rank. So what I do, is build the site to show or hide certain elements of the site based on the device using a combination of CSS media queries, jQuery and server side programming, I have already covered an article on how to set up a perfect detection program.

Just be careful that you don’t hide content from mobile devices, as Google assumes you are doing something evil. What I’m talking about, is removing certain elements for example change the menu, remove unused containers etc…

Using the method in the article linked above, you can show and hide elements depending on the device. The reason why I don’t use CSS styling to hide elements is to make the page lighter. All items that you hide via jQuery or CSS are still loaded (each extra character is equal to 1kb of data), while using server-side exclusions we will remove this factor. Improving the page load speed for mobile devices.

Now that we have established not to use images or limit them, we know that we will focus on a pure CSS styled checkout, which is extremely easy to build.

An important question to ask yourself.

customer queue

  • Are my customers returning?

If they are not returning than don’t build a registration section. The main reason in building a registration system is for them to retrieve all their shipping and delivery details and maybe even secured details. Ignoring this will create an extra step for no reason other than collecting data. If you really want to have customers register, simply tell them that they can register at the end of the checkout process. This way you are not forcing them.

Pointers to remember!

  • Show errors easily, highlight the area of errors to avoid customer confusions
  • Let visitors update their shopping contents add/reduce
  • Visual checkout process, always show a progress bar
  • Show security seal (SSL)
  • Show credit card logos that you accept
  • Think about using quick payment portals such as (Google Wallet, PayPal, MasterPass etc…)
  • Show the delivery charge from the beginning
  • Allow them to edit the basket wherever they are in the checkout
  • Copy forward the delivery details to the billing details, with an option to edit (reduces the time for the visitor to re-enter all data)
  • Don’t ask to register in the beginning, treat all visitors as guests
  • On every stage offer an edit button
  • Show that the items are in stock
  • Show your telephone number for if they get stuck in the checkout process
  • Enable a back button
  • Keep everything simple, don’t over explain each step (if you have a complicated step explain it with a hover popup function)
  • Show delivery times
  • Before finilizing the order, review your order page / summary
  • When finalizing the order, explain to the customer what is happening next
  • Always send out an email to the customer
  • Give users the option to continue shopping during the checkout process
  • Don’t use the same color for continue shopping and continue
  • Add privacy policy and returns policy at the bottom of your checkout
  • Have a FAQ section
  • Ensure they can amend the order the same day before a certain time, and provide on your site and link in email to the form where they can amend / edit the order.


  • Show pictures of the products
  • Include product ratings
  • Offer free shipping
  • Offer free shipping when they spend an extra x amount
  • Offer a discount on the next order
  • Offer a freebie
  • Offer a promotion / voucher section
  • Show was x and is now y price (Customers love to see they have saved money)
  • Show a shipping date
  • Have a recommended products section (accessories)
  • Allow customers to print out their basket (some mobile users will have a cloud printing setup so they can print out via their mobile device)
  • Include gift wrap, personalized message
  • Wishlist save cart details
  • Offer international delivery

Should I use a one click buy checkout?

When building a checkout system, integrating a payment portal such as Google Wallet or PayPal which will improve your CTR. I highly recommend using a one click system due to the reason that anybody on a mobile device would not want to pull out there credit card in a public place. But if you offer them the opportunity to order via a one click system than they would only need to know their email address and password to process the order.

This will result in a higher CTR.

Several sites I have built are refusing to use these payment portal so I’m developing a new easy to use mobile checkout, which does not use the one click checkout. In the next article I will show you how to develop one while not using a one click system, optimized for mobile visitors.

Sponsored Links


Leave a Reply

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

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me