Other Browser Compatibility Issues

In my last post I talked about how small things such as the type of image you are using could appear different in some browsers than in others.  Here I am going to discuss some areas that you need to play close attention to between browsers when you are coding. The two most common things that I run into are padding and borders around elements and bad code auto-correcting. I'm going to focus on Internet Explorer and FireFox when discussing these issues. Other popular browsers such as Google Chrome, Safari and Opera act closer to FireFox than Internet Explorer. 

Padding and Borders

When you add a margin to an element such as a table, a div, or a paragraph, the margin is outside of the element. Padding that is added is inside the element and borders are on the edge of the element between the padding and the margin.  The image to the right shows where each of these fall in relation to one another. The white area is the element area.  The light blue area is the padding.  The black line is the border.  The light green area is the margin.  So if you specify a width of 200px, a margin of 5 pixels, padding of 10 pixels and a 1 pixel border, in FireFox, the entire area that the element will be covering is 210 pixels; 200 pixels with the border and padding inside that 200 pixels, and 5 pixels on each side outside of the 200 pixels for the margin. In Internet Explorer, the entire area that this element is covering is 232px; in Internet Explorer the element goes to the width that you set, then all padding, borders and margins push that width out. 

To get around the issue with padding and borders in FireFox and Internet Explorer, I put DIVs with the width around everything, then on other elements, I don't specify widths, only use the padding and margin.  If you have a main DIV with the width, and have the rest of the DIVs use 100%, this will get around this issue.

Auto-Correcting Bad Code
There are always times when the code isn't exactly perfect on the page.  Often this happens when you make changes and don't quite remove all of the code that you are replacing. When you view your pages, you can spot issues where the code is not correct if your page does not load entirely in Internet Explorer. When Internet Explorer comes across code that is incorrect, in most cases the browser will simply stop the code there.  So your page will look as if it is only partially loaded.  In these cases you can view the page source and scroll down to the last thing that you can see in Internet Explorer.  Here is where you will find the code that needs correcting.  In other browsers such as FireFox, when there is code that is not opened or closed correctly, the browser will simply add or ignore the necessary tags in order to display the page correctly.

Trouble with Transparent PNG Images

As a website owner, you should check your own website in many browsers online, especially browsers that Google Analytics indicates that your customers are using to make sure that your website looks and works the same for all customers.  I have had merchants come to me many times when they notice in their Google Analytics that orders on some browsers are great and orders on other browsers are never completed and they want to know why.  I will look at their website and find out that their website looks completely different in another browser, or their website was not setup correctly so it does not work in a browser that interprets the code differently.

One thing that has become increasingly popular and more common are PNG images with transparencies.  There are a lot of benefits to using these images including that some elements can load faster because instead of having a background color built into your image, the background color will be part of your page and can load immediately.  Another benefit is if you have an image on top of something else, such as a gradient image around your page content or a seal image over the corner of your page, those images can be transparent. If they are PNG images they will automatically match edges and colors with what's behind them.  The issue with using PNGs is that older browsers, such as Internet Explorer 6, do not support PNGs.  Below is a screenshot in IE 8 on the left and IE 6 on the right.

You see that in IE 8 (left) the image matches the background, because the image is transparent in some parts.  In IE 6 (right) all areas of the image where there should be transparency, instead it is gray. The transparency is not supported in IE 6 and earlier.

Internet Explorer is the default browser on Windows computers, so there is a huge percentage of customers using Internet Explorer to browse the internet. I suggest to merchants that not only do they check current versions of browsers, but also past versions of browsers in case their customers have not upgraded their browsers to the latest versions.  If you are using Google Analytics you can also look at your reports to find out what versions of various browsers customers are using. Log into your Google Analytics account and go to Visitors > Browser Capabilities > Browsers, then click on each browser to see it broken up into versions.  Below is a screenshot of a report in Google Analytics for one of the websites I do regular website work for.  You can see that although version 9 of Internet Explorer is the newest version, over 60% of Internet Explorer customers are using version 8.  There are some customers using version 7 of Internet Explorer, and even some using version 6.  You may think that since it is less than 3% of the customers coming to the website are using version 6, that you don't need to code specifically for IE 6, but if you look at the number of hits, that small percentage accounts for over 100 visitors. That's over 100 people that may be coming to your website and may not want to order because of how the images in the store look.

I hope that this post encourages merchants to take a look at their own store to see if their store is cross browser compatible. Even if you hire third party companies to do your web design, you'll want to test for yourself to see that all of your customers are able to see your site the way that you have it setup.

Browsers I Check:
IE 9, 8, 7, 6, 5.5 (Windows, you can also check between XP, Windows 7 and Vista, because I have seen some differences in the past)
FireFox (Mac and Windows)
Safari (Mac and Windows)
Chrome (Mac and Windows)
Opera (Mac and Windows)
Mobile Phone Browsers

Resources For Checking:
Checking Versions Of IE: http://ipinfo.info/netrenderer/
FireFox Download: http://www.mozilla.com/en-US/firefox/fx/
Safari Download: http://www.apple.com/safari/download/
Google Chrome Download: http://www.google.com/chrome/
Opera Download: http://www.opera.com/download/
View In A Mobile Browser: http://www.marketcircle.com/iphoney/

Gift Certificates to Entice Customers Back

One clothing store that I like to frequent is Express. They do a yearly or biyearly sale where once I spend $XX I get Express Dollars which I can spend a week or two later. This special is timed so that they have a new batch of clothing available at full price when I come back to spend my Express Bucks; I love coming back because I know that because of my purchase a week or so earlier, I now have $10/$20/$50 that I can spend at Express.  They've created a small sense of urgency by putting a time constraint on the Express Bucks; if I don't spend them I lose them. This same idea can be carried out in your ShopSite store.

Your best customers are your existing customers; you want to treat them well.  After a customer places an order, send them a gift certificate (ShopSite Pro) for the shipping total that they paid on their last order, or for a percentage of their last order. This nice little surprise will give them a good feeling about your website and may entice them to come back to your store for another purchase. You don't want these gift certificates to be indefinite, so you will want to make sure that you specify an expiration date on each one.  Give the customer enough time to receive their current order, but not too much time that they forget that they have the gift certificate.  With your gift certificate email you may want to also advertise some hot products, or upcoming products so the customer is more excited about shopping with you.

Now you may think, "how is this different than a coupon?" With a coupon, customers HAVE to spend money to save money.  Yes, it is tempting for potential sales, but the gift certificate method gives customers credit in your store without spending any additional money. They've already placed an order with you, so they have already spent some money, but now they have this credit that is just sitting their for them to use. Make your customers feel like they are the reason you are in business!

Utilizing Information in Google Analytics

There is a ton of information that is available to you through your Google Analytics account.  In order to use this information to better your website and improve your weaknesses you first need to understand what it all means.  There is so much to know that I can't possibly cover it all here, but I will address some of the areas I find helpful in my Google Analytics account.

Your Visitors
In your Google Analytics dashboard, click on "Visitors" on the left.  This will bring up a screen which typically displays the number of visitors on your website (you can customize this to specify exactly what information you want to see by default). The two reports under Visitors that I find very helpful are "Visitor Loyalty" and "Browser Capability." Knowing who your customers are will help you offer incentives specifically for them.  For example, under Visitor Loyalty, if you have high amounts of repeat customers, you can offer daily deals so that regular customers are rewarded.  If you do not have a high percentage of repeat visitors, you will probably want to increase that, and you can offer incentives to encourage customers to come back.  If your customers come to your website only one time, then daily deals will not be that appealing.  Instead, for customers who only come once, you will want to send them emails with coupons or deals to remind them of your website and cause them to revisit.  Another option would be to advertise upcoming sales, such as "this weekend only" or "labor day sale." The one warning on this is that it could cause current customers to wait to purchase, and you may end up losing the sale if they forget to return.  You will want to make sure that if you advertise upcoming sales, that the sales are not too far in the future, no more than a day or two.

Under Browser Capability you will want to see what type of browser your customers are using, and what browser functions may be turned off.  For example, if a large percentage of your customers are using mobile browsers (I would say that 10% or more is a large percentage for mobile browsing) you will want to make sure that your website looks good on a mobile browser, or may even be specific to mobile browsers.  If your website has too many functions such as hover over menus or hover over information blocks, mobile browsers are not going to see those. You may also consider setting up CSS specific to mobile browsers or even different pages for mobile browsers. Be aware if you use flash, JavaScript or cookies in your web design that the majority of your customers are using browsers that support those.

Traffic Sources
I think that the key here is knowing how your customers find you, and appreciating your channels. If you have affiliates which refer traffic, consider offering those affiliates a revenue share to encourage more traffic from them.  Another option would be for those traffic sources that bring you many hits but maybe not as many sales, try offering a coupon code on the affiliate website.  This will both increase the hits from that affiliate, and will cause more of those hits to become sales. You may decide that some traffic sources are not generating sales and that it may not be beneficial to invest in that source at this time.

Website Content
In the website content reports I like the "Top Pages," "Top Landing Pages" and "Top Exit Pages." Your top pages are where you will want to focus some of your efforts and make sure that those pages have your main content easily viewable on the page.  If your top pages are product category pages you'll want to make sure that best selling products are listed high or prominently on the page.  If your top pages are content pages you will want to make sure the content is relevant to your website and directs customers where you want them to go or to the best information on your website.  Top Landing Page reports are especially good if you are using affiliates or you have advertising that references those pages.  Top Exit Pages are the pages where you will want to make the most changes or improvements.  These pages are the pages where customers are leaving your website. You can study these pages to find out why customers are leaving after looking at these pages.  If they are your order.cgi pages, it may be because shipping prices are too high.  If your top exit pages are customer service pages it could be some of your store policies that are scaring customers away.  When you make changes to these pages, make sure you note the changes in Google Analytics and see if your changes improved the page status.

Goals
Google Analytics goals are great for tracking advertisements, cart abandonment and specials on your pages where you hope that a specific banner or graphic will generate a certain result such as submitting comments or placing an order.  To learn how to setup a cart abandonment goal please refer to my previous post, Cart Abandonment Funnel.

Ecommerce Tracking
If you have setup your website in Google Analytics to track ecommerce then this section will let you know such things as your top products, your website's conversion rate and average order value.  This section can help you focus to boost those areas.  For example, your top products should be highlighted or featured in your store.  You can offer specials or get reviews/testimonials for those products.  For the average order value, if orders in your store are typically at a certain amount, offer discounts to encourage just above that amount.  If all orders in your store average $75-$100, try offering free shipping for orders over $100, or 5% off for orders over $100.  This will encourage customers who are close to that threshold to add a small product to reach that amount.

Cart Abandonment Funnel in Google Analytics

Google Analytics is a great resource for anyone setting up an online website.  Google Analytics has many tools from information on how customers are finding you, where your best traffic sources are coming from, and what your top pages are.  You can use the information that Google provides to enhance your website and really push your top areas. Another thing that you can do with Google Analytics is find out where your web weaknesses are. You can do this by finding out what your top exit pages are or tracking your cart abandonment. Customers may leave your website for many reasons, and finding out where they are leaving your website can help you pin point what's 'scaring' them away. Below are the steps for setting up a funnel in your Google Analytics account to track cart abandonment in your ShopSite store.

Start by logging into your Google Analytics account, clicking on the website you would like to setup the funnel for, and clicking on "Edit."

 

Next scroll down to the Goals section and click to add a new goal. Name your goal, make it active, and set its position in relation to your other website goals.  If this is your only goal you can have it be set 1 goal 1. For the goal type select "URL Destination." 

Once you select "URL Destination" the page will be updated and provide you with new fields. For the "Match Type" select "Head Match." For the "Goal URL" you will want to enter the URL to your thank you screen, everything after your root domain. For example, my website is laurenhillsdesign.com, my thank you screen would be at something in a similar format to https://www.laurenhillsdesign.com/cgi-bin/sc/thankyou.cgi. So I would enter "/cgi-bin/sc/thankyou.cgi" into that field.  You can enter a goal value if you want, but this is not necessary if you are using this funnel for tracking abandonment. Once you have entered your goal URL, click the link to "yes, create a funnel for this goal."

For this last section you will want at least two steps.  The first step is the shopping cart screen, and the second step is the checkout screen.  You do not enter the thank you CGI URL because that has already been set up as the completed goal URL.   Your last section should look something similar to the following:

Now you are done.  You can save this goal, and wait.  The amount of time you wait depends on the number of hits your website is getting.  When you are ready to check this goal you can log into your Google Analytics account, click on your website profile, then click on "View Report." In the left navigation bar you will have a link to view your goals. Next week I will write more on analyzing your goals.  You may want to also check out my article on streamlining your checkout process to minimize your cart abandonment. http://laurenhillsdesign.com/ecommerce-tools/streamline-your-checkout.html

Can Your Customers Find You?

Your website is setup, customized, and looking good.  You have a domain name that is catchy and easy to remember.  Now ask yourself, can your customers find your store?  This is not a trivial question.  I have been to websites that I really liked, but down the road, I only remember something like "the website was blueish with orange accents...what was that URL?" You want to make sure that you have a few different ways of channels that customers can go through in order to find your website. I have listed some options below.  Some are ones that you can do on your own, whereas others you will need to work with other companies and websites.

Google Product Search

Using ShopSite, you can easily push your products to be listed in Google's Product Search.  This is not like eBay or ShopZilla where you actually go to eBay.com or ShopZilla.com to search the products.  Instead, Google has promoted their Product Search on many Google screens such as the Google header, part of the Google web search results, and in many Google control panels such as iGoogle.

With Google Product Search, you upload your products to Google, they are listed in the search results, and when customers click on the product, the customer is sent to your website to view details and to purchase the product. Google does not take a percentage of the order.  There is no cost to be listed in the Google Product search. This is a great way to get some additional traffic to your website. To be sure that you are getting the most out of the Google Product Search, you will want to make sure that you specify the categories that your products should be listed in.  You can find the correct category structure to add for your products at the following URL:

http://www.google.com/support/merchants/bin/answer.py?answer=160081&hl=en

Blogs and Feeder Websites

With so much information easily available online, customers are getting more savvy about purchasing products.  Believe that your customers are researching about products before they purchase. This includes reading blogs, information websites and forums on what the best product is, how to take full advantage of a particular product, and to find additional features, add-on products, or unique accessories for what they are interested.  So, to help your customers you should include lots of product information on your website, as well as have a blog or feeder website where all you do is post information about your products.  For example, if you sell jewelry, you may have a website about hot new jewelry trends, jewelry material and maintenance, or DIY jewelry projects. If you sell camping gear, you may have a blog or website about important features to look for when you are buying camping gear, great camping locals and how-to's, and camping blunders. One example of this is REI.com and their blog FindOut.REI.com/blogs. Think of these blogs and feeder sites as customer service sites.  If you walk into a store and no one helps you, or the staff can't answer your questions, you are less likely to purchase from that store.  However, if you go into a store where you feel like they are working for you and treating you like a preferred customer, you are more likely to purchase there, and come back, regardless of product price. On your website you can link to your blog or feeder site, and on your blog you can link back to your website.  If you choose to go with a feeder site, you will need to purchase a new domain, and make the domain separate from your website, and focused on getting to customers who are interested.  So instead of camping-gear-online-info.com, you may want something akin to campers-guide.com. With blogs, there are many free blog services out there such as blogger (what I'm using) or WordPress, which can be installed on a domain by your host.

Link Sharing

Share your link with similar interest websites.  If you link to related websites and they link back, you can share customers.  With this you will want to make sure that the websites don't directly compete with you (sell the same products) but sell similar products or have information that your customers may be interested in.  For example,  Gap.com links to their other websites, OldNavy.com, BananaRepublic.com, etc. Another example is ShopSite.com.  ShopSite has an Additional Services page where they link to other companies that merchants may be interested in such as live chat services, email campaign services, SEO services, etc. 

Post On Forums

I mentioned how customers are becoming more savvy about researching products before purchasing, so make sure that your store name appears where customers are doing their research.  One example of this is with parts stores such as motorcycle parts of car parts.  There are tons of forums talking about enhancements, modifications or tweaks that people can make to their motorcycle or car.  On these forums people will also advertise selling products or list places to get deals on products.  You don't necessarily have to advertise your store in order to get traffic, but again, just provide customer support. I have see this in my own experience on motorcycle forums, and on the ShopSite.com user forums.  There are designers and hosting providers who will regularly respond to posts by merchants that may not be their clients.  The merchants gain more confidence in these designers and hosting companies and will often contract with these designers and hosting companies directly to do work or to host their website.  People want to know they will be taken care of if they purchase/hire you, so by posting on forums you are giving customers the assurance that you know your stuff, are friendly, and will be beneficial to work with or purchase from. 

Get To Know Your Channels

As you begin setting up all these various channels, make sure that you have some type of tracking enabled on your website.  Many merchants use Google Analytics because it is free and easy to setup on your website.  This will give you an idea of what channels are providing you with the most traffic.  You can then focus or expand those channels to take better advantage of the customers that are coming to your website.