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.

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.

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.