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