Thursday, October 13, 2011

Is Your Site Ready For Mobile Commerce?

Many top websites have optimized their website for mobile or have mobile pages.  So many sites have done this that smart phone users are beginning to expect that sites will have a mobile version. Pinching to enlarge and squinting at the content is no longer acceptable for many smart phone users.  So is your website ready?

ShopSite is planning to have a mobile capability built into their next release where users will be redirected to a mobile optimized version of your website.  So what do you need to do to prepare to use this upcoming feature?
  • Logo. Start by creating a mobile sized version of your logo.  Many websites that you visit will have a header/logo area that takes up no more than 60-70 pixels of the top of the mobile screen.
  • Navigation. No doubt you have many different ways for users to find what they are looking for on your website, but since space is limited on a phone, narrow your main categories down to about 4 main categories that will be listed on every page.  The first link should be a "home" link or a "categories" link so that customers can always return to your main list of store categories.  The other three links should be your top categories, or your most interesting categories such as "sale" or "new items." Decide what 4 links you would like at the top of all your mobile pages.
  • Template Tags. If you are using built in templates within ShopSite, this is not an issue for you.  However, if you are using custom templates, you will need to add the new mobile tags to your custom page and custom more information page template so that the redirect code will be included on your pages.  Below are the two required template tags for mobile.
             [-- MOBILE_JAVASCRIPT --] - goes within the <head></head> tags.
             [-- SS_MOBILE_REDIRECT --] - goes right after the <body> tag.
  • Footer. Your footer should be simple but informative.  Many merchants will include their company information links in their footer such as the "about us" page, the "shipping and returns information" page and "terms and conditions." If you have copyright information that you would like to include, you can include that in the footer as well. 
  • Emails. Often, smart phone users have one or more of their email accounts tied to their phone, so when they receive an email, they can check that email without going to their computer.  Because of this, you will want to make sure that ALL of your emails to customers are mobile optimized.
I am excited to delve more into the capabilities of mobile as there become more and more mobile users and mobile optimized websites causing mobile to evolve. If you are planning to have a mobile optimized website, make sure you keep up on mobile trends.  This technology if rapidly expanding and changing.

3 comments:

  1. FYI, the mobile version of ShopSite is out now. It is version 11 service pack 1 (v11 sp1)

    ReplyDelete
  2. Hi, I am having an issue with the mobile default template for shopsite I am using your code for a slider on the home page, and this causes a fade slideshow error when someone visits the site on a smartphone. Is there some way to apply a If on a mobile then exclude the slider ?

    ReplyDelete
    Replies
    1. The slider code I have on my site gives a flag if the DIV that the slideshow is in (fadeshow1 or something similar) is not found on the page. With the ShopSite mobile redirect, the redirect happens after the HEAD of the page has been loaded, but before the BODY of the page is loaded. This causes the javascript to give a warning saying that the DIV was not found on the page. To remove this, you could (1) add the DIV, and all applicable javascript to the mobile pages (would need to be done in the template if you are using the extra page field 1), (2) in your regular page template, move the mobile redirect javascript to below where the DIV is for the slideshow (this will delay the mobile redirect by a little on your home page), or (3) remove the alert/flag from the javascript (near the end of the javascript file) that warns that the DIV was not found.

      Delete