Tuesday, February 26, 2013

Responsive Design vs Mobile CGIs

I am often asked what are the pros and cons for doing a responsive design website verses using the mobile commerce CGI feature available in ShopSite.  So hopefully I will clear up some of the muddiness now.

I would like to start by saying that the trend for websites (and a trend that many believe will quickly become the norm) is to be completely responsive design.  Besides the fact that it is just plain awesome, it is much more compatible on the many devices used for surfing the web, and will be less maintenance as new devices are developed. That said, CGI driven mobile commerce is much easier to implement, has less bugs and is less expensive.

Now to the nitty-gritty.

Definitions
Responsive Design.  A web page where the browser width changes will change the look of the site.  You are not sent to a different page; A new page is not created for you. You stay on the same page, with the same code, it just looks different width different widths.  Below is an example. You will see that there are 6 navigation links on the full version, 5 on a typical tablet, and 3 on mobile. You can also see that on a desktop and on a tablet, there is a banner image (slightly different sizes) but on a mobile device the image is removed.


Mobile CGI Driven Pages.  This is where ShopSite takes your page and product databases, and recreates your pages when a customer comes to your website using their mobile device. These pages are created on the fly, so they only exist when a customer views your page, and they do take time to be 'built.'


Responsive Design CGI Driven Pages
Pricing (the biggie) over $1000 Free in ShopSite (Mgr and Pro)
SEO Friendly Great for SEO Doesn't harm SEO
Buggy? Can be. You often need to check ALL web pages. Not really. Custom code could mess things up, but for the most part its not buggy.
Speed Loads as fast as your regular site (same code). Built on the fly. Slower, but negligible.
Set Up Lots of work initially. Minimal work initially.
Adaptability Responds to different screen sizes, so will adapt as new devices come out. Only responds to mobile devices (not tablets), and is a little more specific on width of devices.
End User Comments No "view full HTML site" link. Must switch to full HTML site for some features.

Which is right for you?

Do you have a lot of mobile or tablet visitors?
You can check this in your Google Analytics account.  If you have lots of mobile visitors, then I would highly recommend responsive design.  If you don't have many yet, you can start with the CGI mobile pages and see if that has an impact on your mobile visitors.  You may also be in an industry where mobile is not as important, and you may not want to put forth the investment for the type of return you would get.

How large is your website?
If you have a smaller site (less than 100 pages, including product more information pages), then you may want to lean towards responsive design. It isn't too time consuming to go through 100 pages or less to double check that they all look the way you want.

Things To Consider

Be ahead of the curve
It is always better to get your mobile setup in place BEFORE you need a mobile setup.  This gives you time to trouble shoot without being inundated with mobile visitors.


What is the quick/mobile important information?
With both responsive design and CGI driven design, you typically want to remove some things from the page, or make them much less noticeable. Don't try to display everything that you have on your main site on a mobile device.  Mobile customers are typically going to your site with a purpose.  Make the main products, main contact links, or other focus information easy to navigate to (one click).

Have fun with mobile
I find mobile browsing and testing really enjoyable.  It is fun to see your website on many different devices, with slightly different looks, and even some different focuses. Whenever you make a change, note that change in your Google Analytics (or other tracking software) so that you can see what improves your website, what your customers respond to, and what may not be worth putting as much time into.

Friday, February 8, 2013

Using Google Sitemap

Within your Google Webmaster Tools account, you can click on your website, and on the left side, click "Optimization" then "Content Keywords." Here you should see a list of your website's top 20 keywords.  These are your top keywords throughout all the pages included in the sitemap that you had uploaded to Google.  If you are using ShopSite's Google Site Map integration, then this is all of your pages and product more information pages. Take a look at these keywords. Do the top 20 keywords on your website reflect what your website is about?  Are the main keywords you use in your meta keywords, title, and meta description tags match those that are found here.  If not, you will want to do two things. First, is locate and replace the keywords you don't want in this list with ones that you do want.  Second, re-work your meta keywords, titles and meta descriptions to contain more of the top 20 keywords of your website.  This second option is more obvious, so below I will provide more information on the first fix.

If you go through your list of 20 keywords, you might wonder why some are coming up.  For example, some common ones I see when I do this for websites are "jpg" "product" and "page." The main reason for "jpg" is because your images may not have alt tags attributed to them.  When you upload an image via the ShopSite Image Uploader in the back office, if you don't specify an alt tag, then the image file name is used.  If I upload "blue-shirt.jpg" the default setting will have the image tag looking like:
<img src="media/blue-shirt.jpg" alt="blue-shirt.jpg">
This makes "blue-shirt" a keyword on your website, then "jpg" after the period, a keyword on your website.  You will want to change this by going to Images > Edit Image, and in the alternate text field, replace "blue-shirt.jpg" with "Blue T-Shirt" or whatever keywords you want.

The next big ones I see are "product" and "page." These keywords often come up because merchants will write intro paragraphs which say something like "This product..." or "This page contains products that are..." Often times this is used so that you don't sound repetitive when writing descriptions. There are two approaches to fixing this.  The first is manually going through all your page text fields and product text fields and replacing all the pronouns with the actual name or category.  This can take a long time if you have tons of pages and products.  The second approach is making the change with a text replacement equation within a spreadsheet application such as Microsoft Excel. Don't be afraid that your descriptions are going to be too repetitive; many times customers ignore the text or just skim for bullet points.  The text is in large part for search engines.  You are still giving the customer useful page and product information, just using the full page/category/product name.

You can download your product (you can repeat this for pages) database with just the unique identifier field (either the product name or the product SKU) and the text fields. If your unique product identifier is the SKU, you will want to download the product name field just for pronoun replacement.  Open your database in Microsoft Excel.  You should have 3-4 columns.  In the first empty column, type "="the"&name-column-and-cell".  So for example, if your product name is in column 1, then the equation would be "="the"&A2". In your next empty column, type the equation "=(SUBSTITUTE(description-column-and-cell,"this product","the-name-column-and-cell")).  So for example, if you have the following:
Column A(name) - Blue Shirt
Column B(sku) - b-tee
Column C(description) - The blue shirt is great for crafts.  This product is made out of 100% cotton.
Column D(more information text) -
Column E(first empty column) - ="the"&A2
Column F(second empty column) - =(SUBSTITUTE(C2,"this product","E2"))
The end result in column F would be "The blue shirt is great for crafts.  The Blue Shirt is made out of 100% cotton." This is a quick way to replace text for all your products. When you upload the database back into your ShopSite store, ignore your original description field, and your first empty column.  have your second empty column be uploaded in your description field.

Tuesday, February 5, 2013

DIY Search Engine Optimization Prep

I frequently have merchants approaching me about doing Search Engine Optimization (SEO) work on their website.  You can make your website code clean, fast, and good for search engines, but there is more to SEO than just clean, fast code.  Some merchants will hire a Search Engine Optimization or advertising firm to enhance their website and improve their website's search engine rank.  However, in many cases, I would suggest that a merchant take much of the SEO into their own hands and do it themselves. The reason for this is that you, as the merchant, know your product and your clients the best.

To start, before going to your website, clear your browser's cache (typically under Tools > Clear Recent History) then look at your website with fresh eyes, as if you were a potential client.  Answer the following questions, making notes of things you see or notice.
  • Did your website load in a timely manner?
  • Does your home page instantly convey what your company is about?
  • Is there a call-to-action "above the fold?"
  • Can your customers purchase within 2 clicks?
If you found issues with any of the above questions, make sure you tackle those first, before making changes to your meta tags, keywords, etc.

If you haven't already, make sure you have Google Analytic Tracking Code on all your pages, your Google Analytics is setup for e-commerce tracking, and that you have submitted your website's XML sitemap to Google.

The first step in doing your own SEO is checking Google Webmaster Tools (where you have submitted your website's XML sitemap),  on the left click on "Optimization" then "HTML Improvements" and fix any errors or messages found in this section.

Check back for the next step in doing your own SEO.

Tuesday, December 11, 2012

Modified Google Trusted Stores Date

Below is modified JavaScript to add 7 days to the Google Trusted Stores code ship date.

var d = new Date();
var seven_date = d.getDate();
var curr_month = d.getMonth();
if (seven_date < 22) {
  var curr_year = d.getFullYear();
  var seven_date_two = seven_date + parseInt(7);
  if (curr_month < 9) {var curr_month_two = "0" + curr_month;} else {var curr_month_two = curr_month;}
  var weekDate =(curr_year + "-" + curr_month_two + "-" + seven_date_two);
}
else if (curr_month > 12) {
  var curr_year = d.getFullYear()+1;
  var curr_month_two = "01";
  var weekDate =(curr_year + "-" + curr_month_two + "-" + seven_date_two);
}
else {
  var curr_year = d.getFullYear();
  var curr_month_two = curr_month + parseInt(1);
  if (curr_month_two < 9) {var curr_month_three = "0" + curr_month_two;} else {var curr_month_three = curr_month_two;}
  var seven_date_two = "07";
  var weekDate =(curr_year + "-" + curr_month_three + "-" + seven_date_two);
}

Monday, November 5, 2012

Google Trusted Stores With Your ShopSite Website

Google Trusted Stores is a feature you can setup for your website if you have a Google Account.  You will need to have a verified website in Google. Google Trusted Stores is another way to let online shoppers know that you are a verified, secure, and trusted website.  Customers are encouraged to report feedback on your website. Shoppers can hover over or click on the Google Trusted Stores logo on your website to see your company's standing with Google Stores.

To set this up, you will need to add some custom JavaScript to all your store pages.  You will also need to get your Google Product ID for all your products (this can be done by moving this information into an extra product field).  Follow the instructions below for adding the Google Trusted Stores code to your website.
  1. Add Google Product ID For Products Into An Extra Product Field. For this example, I will be placing the Google Product ID in the extra product field 10.  Do this by downloading your products database (Utilities > Database > Download).  You only need to download your product identifier field (either name or SKU), and the Google Product ID field.  Once you have downloaded the file and saved it to your computer, re-upload it into your store.  When you get to the step where you can map the product fields, click on the link to map the fields, and change the Google Product ID field to the Product Field 10, then complete the upload. 
    Note: If you are already using the extra product field 10, you will want to use a different product field.
      
  2. Begin Setting Up Your Google Trusted Stores Account. If you have a Google Account for your business, you can go to http://www.google.com/trustedstores/merchants/, to begin setting up your Google Trusted Stores account.  Go through the process until you need to place the JavaScript code on your website, then go onto step 3.
     
  3. Paste Code Below Onto All Store Pages. The code below should be added to all store pages.  It should be included in the template.  What I would suggest is create an include file called "GoogleTrustedStoresPageCode" and paste this code into that include file, replacing the red fields below with your specific store information.  Then include the include file at the bottom of the page code in all the template types (in your page template and search template DEFINE PAGE section, product template DEFINE MORE_INFO_PAGE section, and the cart template DEFINEs).  For example, in your page template, at the bottom of the template it should look similar to:
    [-- INCLUDE GoogleTrustedStoresPageCode PROCESS --]
    </body>
    </html>
    [-- END_DEFINE PAGE --]

    You will also want to add the following VAR tag to the TOP of all your templates (except the product template).
    [-- VAR.Field10 "" --]

    Your product template should be slightly different.  In the product template, you will want to place the following VAR tag in both the [-- DEFINE PRODUCT --] and [-- DEFINE MORE_INFO_PAGE --] sections.
    [-- VAR.Field10 PRODUCT.Field10 --]

    Here is the JavaScript for the include file:
    <!-- BEGIN: Google Trusted Store -->
    <script type="text/javascript">
      var gts = gts || [];
      gts.push(["id", "555555"]);
      gts.push(["google_base_offer_id", "[-- IF VAR.Field10 --][-- VAR.Field10 --][-- ELSE --]90014c3c-6d63-11e1-9ced-000a5e410845[-- END_IF --]"]);
      gts.push(["google_base_subaccount_id", "555555"]);
      gts.push(["google_base_country", "ISO 3166-1"]);
      gts.push(["google_base_language", "ISO 639-1"]);
      (function() {
        var scheme = (("https:" == document.location.protocol) ? "https://" : "http://");
        var gts = document.createElement("script");
        gts.type = "text/javascript";
        gts.async = true;
        gts.src = scheme + "www.googlecommerce.com/trustedstores/gtmp_compiled.js";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(gts, s);
      })();
    </script>
    <!-- END: Google Trusted Store -->

    Note: 90014c3c-6d63-11e1-9ced-000a5e410845 in the code above should be replaced with ANY of your products' Google Product ID number.
     
  4. Add JavaScript To Your Thank You Screen. The last step involves adding the JavaScript code below into the DEFINE THANK_YOU section of your shopping cart template.  Again, replace the red information below with your specific store information.
    <script type="text/javascript">
    var d = new Date();
    var seven_date = d.getDate()+7;
    if (seven_date < 10) {var seven_date_two = "0" + seven_date;}
    else {var seven_date_two = seven_date;}
    var curr_month = d.getMonth();
    if (curr_month < 10) {var curr_month_two = "0" + curr_month;}
    else {var curr_month_two = curr_month;}
    var curr_year = d.getFullYear();
    var weekDate =(curr_year + "-" + curr_month_two + "-" + seven_date_two);
    var prodNum = number_products;
    document.write("<div id=\"gts-order\">");
      document.write("<span id=\"gts-o-id\">" + ss_ordernum + "<\/span>");
      document.write("<span id=\"gts-o-domain\">www.yourdomain.com<\/span>");
      document.write("<span id=\"gts-o-email\">" + ss_email + "<\/span>");
      document.write("<span id=\"gts-o-country\">US<\/span>");
      document.write("<span id=\"gts-o-currency\">USD<\/span>");
      document.write("<span id=\"gts-o-total\">" + ss_ordertotal + "<\/span>");
      document.write("<span id=\"gts-o-discounts\">" + ss_coupon_discount + "<\/span>");
      document.write("<span id=\"gts-o-shipping-total\">" + ss_shiptotal + "<\/span>");
      document.write("<span id=\"gts-o-tax-total\">" + ss_taxtotal + "<\/span>");
      document.write("<span id=\"gts-o-est-ship-date\">" + weekDate + "<\/span>");
      document.write("<span id=\"gts-o-has-preorder\">N<\/span>");
      document.write("<span id=\"gts-o-has-digital\">N<\/span>");
    for (i=0; i<prodNum; i++) {
      document.write("<span class=\"gts-item\">");
        document.write("<span class=\"gts-i-name\">" + ss_name[i] + "<\/span>");
        document.write("<span class=\"gts-i-price\">" + ss_price[i] + "<\/span>");
        document.write("<span class=\"gts-i-quantity\">" + ss_quantity[i] + "<\/span>");
        document.write("<span class=\"gts-i-prodsearch-id\">" + ss_field10[i] + "<\/span>");
        document.write("<span class=\"gts-i-prodsearch-store-id\">555555<\/span>");
        document.write("<span class=\"gts-i-prodsearch-country\">US<\/span>");
        document.write("<span class=\"gts-i-prodsearch-language\">en<\/span>");
      document.write("<\/span>");
    }
    document.write("<\/div>");
    </script>

    Note: The orange areas in the code above can be changed but don't necessarily have to.  The first one, d.getDate()+7, says that you are telling Google you will ship the order 7 days after it is placed.  If your average ship time is longer than that, you will want to modify the 7 to whatever is more accurate for your store. The next few, " + ss_coupon_discount + ", " + ss_shiptotal + ", " + ss_taxtotal + " should remain the same if you have coupons, use any shipping rates, and use tax rates.  If you do not use any of these, replace the orange with 0. Also, the codes provided above are generic codes and should work for most stores.  I am not guaranteeing that they work for all stores.
I hope that this article helps as you set up your Google Trusted Stores account.  There is a month probationary period from Google for the Google Trusted Stores seal, so make sure that you have everything setup correctly, before waiting through that probation period.  Good luck :).

Full Code Example (changed for 4 days out for shipping instead of 7):
<script type="text/javascript">
var d = new Date();
var seven_date = d.getDate();
var curr_month = d.getMonth() + parseInt(1);
if (seven_date < 25) {
  var curr_year = d.getFullYear();
  var seven_date_two = seven_date + parseInt(4);
  if (curr_month < 9) {var curr_month_two = "0" + curr_month;} else {var curr_month_two = curr_month;}
  var weekDate =(curr_year + "-" + curr_month_two + "-" + seven_date_two);
}
else if (curr_month > 11) {
  var curr_year = d.getFullYear()+1;
  var curr_month_two = "01";
  var weekDate =(curr_year + "-" + curr_month_two + "-" + seven_date_two);
}
else {
  var curr_year = d.getFullYear();
  var curr_month_two = curr_month + parseInt(1);
  if (curr_month_two < 9) {var curr_month_three = "0" + curr_month_two;} else {var curr_month_three = curr_month_two;}
  var seven_date_two = "04";
  var weekDate =(curr_year + "-" + curr_month_three + "-" + seven_date_two);
}
var prodNum = number_products;

document.write("<div id=\"gts-order\" style=\"display: none;\">");
  document.write("<span id=\"gts-o-id\">" + ss_ordernum + "<\/span>");
  document.write("<span id=\"gts-o-domain\">www.laurenhillsdesign.com<\/span>");
  document.write("<span id=\"gts-o-email\">" + ss_email + "<\/span>");
  document.write("<span id=\"gts-o-country\">US<\/span>");
  document.write("<span id=\"gts-o-currency\">USD<\/span>");
  document.write("<span id=\"gts-o-total\">" + ss_ordertotal + "<\/span>");
  document.write("<span id=\"gts-o-discounts\">0<\/span>");
  document.write("<span id=\"gts-o-shipping-total\">0<\/span>");
  document.write("<span id=\"gts-o-tax-total\">" + ss_taxtotal + "<\/span>");
  document.write("<span id=\"gts-o-est-ship-date\">" + weekDate + "<\/span>");
  document.write("<span id=\"gts-o-has-preorder\">N<\/span>");
  document.write("<span id=\"gts-o-has-digital\">N<\/span>");

for (i=0; i<prodNum; i++) {
  document.write("<span class=\"gts-item\">");
    document.write("<span class=\"gts-i-name\">" + ss_name[i] + "<\/span>");
    document.write("<span class=\"gts-i-price\">" + ss_price[i] + "<\/span>");
    document.write("<span class=\"gts-i-quantity\">" + ss_quantity[i] + "<\/span>");
    document.write("<span class=\"gts-i-prodsearch-id\">" + ss_field14[i] + "<\/span>");
    document.write("<span class=\"gts-i-prodsearch-store-id\">123455<\/span>");
    document.write("<span class=\"gts-i-prodsearch-country\">US<\/span>");
    document.write("<span class=\"gts-i-prodsearch-language\">en<\/span>");
  document.write("<\/span>");
}
document.write("<\/div>");
#### show this line only for testing the date purposes.
#document.write(weekDate);
</script>

Thursday, October 25, 2012

Re-Committing To Goals

Clearly I need to be on a path of repentance, especially since my last post wasn't even during this last season. So here I am, entering one of the busiest parts of the year for online sales, ready to lend some support and guidance to any who would like it. Below are my own personal short term goals:
  1. Post on setting up a Google Trusted Stores account. There is a 30 day (I actually think it is a 28 day) probation period, so if you would like to have a Google Trusted Stores account setup by December, you will need to get that set up by next week.
  2. Create New Friendlier Design. I have been looking at redesigning my website and blog for a while now.  With the hype of this holiday season approaching, I think I will be able to finally get the new look implemented.
  3. More Customer Support Avenues. I normally only provide customer support via email.  This goal has 2 parts, the first is setting up and advertising a website analysis option.  I will offer my own website analysis, as well as provide detailed information on how merchants can do their own website analysis.  I think this is especially important for merchants who hire companies to do work for them.  The merchant should be able to check, to some extent, the quality of the work being done.  The second is to actually setup a business phone number. I am sure that most of your companies already have a business phone number setup, but since my company is mostly just me, I haven't needed it.  I find that I have been a little hindered without an option for customers to call me directly, so I will be setting that up before the end of the year.
I would advise that you sit down and map out a few short term goals for your company that you would be able to complete before the holiday season gets crazy.  Make these goals things that can take advantage of the holiday season sales, such as setting up an avenue for new customers to be added to a newsletter, or to streamline promotions. Whatever your goals are, bullet point a few steps that will help you reach those goals in the coming weeks.