JonOnWeb

CSS properties problems with Outlook 2003, 2007, and 2010

February 14th, 2012 No Comments

You may already know that CSS support is different between 2003, 2007, and even 2010. While the later two has more similarly aligned on what are supported and what now, there are major differences for Outlook 2003.

The post here mainly deals with MailChimp’s template programming and Outlook clients. The problem arises when I decided to program editable HTML templates for my campaigns. I took one from their gallery and modify from it, only I went a bit too far and ran into many troubles with Outlook.

Key findings for me:

MailChimp seem to add div elements to editable images and text regions, as I’ve discovered that a blank div definition within a table cell gives double spacing
Simply avoid padding for any elements within a table cell. This is especially true when MailChimp’s template uses div to define editable regions within a table cell
As indicated by Michelle Klann’s “Email on Acid – CSS Padding in Outlook 2007 and 2010″:
“One of the more critical conversions that you should be aware of is that Outlook 2007 and 2010 will often move your CSS from div’s and headings into nested paragraph and spans. Sometimes, it keeps the outer container, other times it eliminates it entirely.”

Read the rest of her article here.
MailChimp templates allows you to define editable CSS styles for your users, while it is really powerful it does have its limitations and more importantly, it opens up the possibility of breaking the template if its not defined properly

Design your own site – find your color

February 12th, 2012 1 Comment

Design your own site is a series of simple blog posts on how to do your own website design, then hand it off to a programmer friend / relative (we always have one) to complete.

One of the first thing you should consider when designing your own website is color. Knowing what color complement or contract one another may be a subjective matter, but there are always rules and common sense we can apply to make it more appealing.

Since this is a simple blog post, I won’t go into the theory or principle of it, I’d rather give you a URL and start playing with it yourself.

Color Scheme Designer 3 – nifty, interactive website that use a simply color wheel to show you options: complement (2 colors), triad (3 colors), tetrads (4 colors), etc. it will also shows you light and dark variants of these colors and their associated RGB hex code for HTML coding. See for yourself with the screenshot here:

jQuery hover activate remote image map

January 27th, 2012 2 Comments

This site enhance request came a while back, but I’ve been thinking how to archive it using jQuery.

Before I go any further, it’s worth mentioning that since Magento uses prototype.js framework, implementing jQuery alongside will require the use of

jQuery.noConflict();

And replace $ operator in your jQuery function with ‘jQuery’.

So, the request came in one of the CMS page within Magento, where there is an unordered list menu and in a separate div, an image which is a collection of all unordered list menu items with legend markers. A screenshot of that page is below:

jQuery menu highlighting image map

So now the jQuery part. I needed the following action to happen when the unordered list item is hovered on:

Corresponding number within the image will ‘light up’ – which in css is a change of background color and font color
The corresponding bubble of that number will appear on top of the number – which in jQuery is the simple fadeIn() function

But there were many consideration associated with this:

jQuery hoverIntent was used so that when the mouse is going through the unordered list on top quickly, the buttons at the bottom won’t flash like a police car. In this case the default delay was found to be sufficient
Because the bubbles (<span> elements) on top of the green dots (<li> elements) are within that list item, z-index was an issue in IE. So to avoid major re-work of the logic of the code, overlapping green dot will be hidden while the “offending” bubble fires

switch (a)
{
    case "dot-hovered-on":
       jQuery('button-that-appears-on-top-of-the-bubble').fadeOut();break;

etc...			}

Switch-case were used because there were only several cases where bubble appears underneath certain green dots, and they are not parent-childern of each other

In order to animate the background color change and font color change, jQuery UIplugin was used

varname.animate({
   'backgroundColor' : '#color',
   'color' : '#color'
}, duration-animation-in-ms);

Because I utilized css3 elements, including box-shadow, border-radius and in certain cases rgba colors to give opacity, PIE.js was used to bring compatibility to IE 8 and below.

I did not use their .htc and used their .js file instead, which means I have to write js script to call it.

if (window.PIE) {
   jQuery('html-elements-with-css3').each(function() {
	PIE.attach(this);
   });
}

The final result can be viewed here. IE 8 tested.

Rookie mistake with csv importing

January 26th, 2012 No Comments

One of the reason why Magento was selected as our online catalog system was its flexibility on attributes and making them searchable on the fly. Another reason was it’s built-in bulk import using csv files.

One of the required field for each product record was ‘image’ – Well, when I say required I simply mean that if you have the ‘image’ column in your csv file and records within that column, it must exist or the Dataflow import will error out that record and skip to the next one.

Trouble is after the import is completed it won’t get you a screen log of which record was skipped. So in my case there were about 10% images missing from a 500 row import, so I thought “ok, I just locate the missing SKU in the catalog, and find out where the missing image went, upload them and re-import the whole thing, simple!”

Well, that’s where my rookie mistake came in. By re-importing the entire sheet and not separating out the error rows, all records were updated, including the new image, Magento see, “oh another image for that SKU, ok, he must have two images of that product he wants to show”. So now I have 90% SKU with two of the same product picture.

So note to self: Identify the rows that gave the Dataflow error, separate them into a separate csv file and re-import. Don’t be lazy and re-run the same file.

Fine-tune Magento Quick Search

January 25th, 2012 No Comments

This is a quickie and more available around the web. By default, Magento quick search will return all keywords search phrases matches within the query string. For example, if you enter “12 oz cylinder bottle”, it is treated as 4 keyword search even if you identified “Fulltext” in your admin panel. In my case it’s quite messy because the description is the searchable field and it also contains another string of numbers which might contain 12… for exmplale, “12mm”, “12ml”, etc.

First off I utilize the “Search Terms” function within the admin panel to setup synonym for “12 oz” to “12oz”, I also identified popular search terms and set up appropriate landing pages redirect for those.

But there’s still a lot of messy results that this search page didn’t account for, so I found this code modification method to help the situation. By way of changing the search type to finding exact phrase or word. This is form Ecommerceoffice:

in app/code/core/Mage/CatalogSearch/Model/Mysql4/Fulltext.php line 345

if ($like) {

$likeCond = ‘(‘ . join(‘ OR ‘, $like) .’)';

}

Change the word “OR” to “AND”

It made a difference. Not huge but enough for more relevant search results to come up and less relevant results to not show. I did have to modify the way I craft the product description so it will search better, but it’s time well spent.

Sorting Advanced Search Results in Magento CMS

January 25th, 2012 1 Comment

By Default, Magento sorts your search return in ascending order. Unsurprisingly, it also returns by relevance of search. Sounds great, right? Well, it led to a problem on my site.

As you can see, I have good control of each searchable attribute, so the problem lies in “Capacity”. As you can see it is a input text box.

When user attempts to put in “24″, for example, the default search order will return items with “124″ in front of all the other items with “24″, which is not really what the user wants. As shown below…

After about three days of searching, trying different things like looking for ways to search “exact phrase” with no avail. I found a surprisingly simple solution from Stack Overflow:

“In your template, in the /catalogserach/form.phtml file, Within the

<form id="searh_form" ... >

tag, add

<input type="hidden" name="order" value="relevance">
<input type="hidden" name="dir" value="desc">

This sorts the search results in descending order, which in my case sort the “24″ in front of “124″.

New Job – New Responsibility

November 4th, 2011 1 Comment

Got a new job recently and part of my responsibility will be to increase inbound inquiries by increasing site traffic – which in the immediate term means better organic positioning.

So I’ve embarked on a journey to optimize the website through different means. Some background info: I’ve been working on some SEO / SEM as a contractor for this website for a while, but now that I am actually part of the organization, I have to step up my SEO game and really dive deep into the site.

First thing I did was to identify all the strengths we have going for this website: 5,000+ product pages, monthly addition to page catalog, search engine friendly URL and META data, re-deployable, educational content…

So some of the things that is not so good: Very competitive keyword set, non e-commerce website (catalog only), low overall organic keywords positioning.

Day 1: What the competitors are doing

Perhaps the most telling piece of information I’ve gathered so far on their organic search competitors are their link count and authority. After a quick visit to the Open Site Explorer, here is what I’ve found:

Competitor 1:

Competitor 2:

Competitor 3:

Me:

My initial thought was – wait, this is not right, something is missing, how can me with so much more inbound links be ranked so much lower then my competitors? But then I saw my Domain and Page authority isn’t exactly the best either, so there clearly needs work…

I sampled several links from all competitors and realized that many of these links are from blogs, not just in the no-follow comment sections but mentioned directly in the articles. This brings me to strategy 1: Get some blog connection with relevant content for link-backs.

Next to took a trip down Google Webmasters tools. This is frankly a bit of a surprise for me as I realized the sitemap file I auto-generated before isn’t really doing a good job of telling Google what to crawl and what not to. Since I have Magento Community as a content engine, there’s a lot of directories related to the system that Google shouldn’t be crawling… So I had to update the robot.txt and disallow crawler access to the directories. Then I decided to scrap the auto-generated sitemap route and manually create one to see if I can improve my indexed page count and really get Google’s attention to those important landing / category listing pages. Two things I’ve learned form this exercise:

Set up individual Update Frequency Correctly: Based on this blog post about Google Sitemap Update Frequency and Sitemap Stats, my product pages should be set to “Never” for Update Frequency, and “Monthly” for category listing pages when I plan to upload new products monthly. This way I can get Google to crawl more pages, new pages, and important pages then everything at “Daily” or “Monthly”.
Set the Priority straight. I’ve noticed that I put almost all pages at Priority 1, but when I think about it, the scale of 0 to 1 is really relative, why would I want the never changing about pages to be priority 1, same as the category landing pages which I plan to use as major landing pages for keyword optimization? I switched that around and place a priority to close to 0 for these About Us pages and close to 0.9 and 1 for several key category pages.

I re-submitted the sitemap to Google and almost immediately the Google picked up all pages I have in my sitemap files. Then I demoted some URL Google currently has as sitelinks. I’ll see what effect this will have for Google sitelinks and overall result in organic search in about two weeks time.

Next is a big one. Google Webmaster Tools reports that I have 1,046 URLs that is not found by the crawler, 865 restricted by robots.txt and 46,112 unreachable… This is frankly worrying because it effectively telling Google that my site has a lot of broken links and crawl rate will likely decrease. Upon further examination all of these 1,046 URLs are from the old version of the site! So I have to first re-direct all these pages to the appropriate pages, and also have Google remove these URLs from its index.That’s going to take hours if not days, but nonetheless must be done because it’s hurting my ranking just having these around. Steps on how to remove them can be found here.

The importance of claiming your place in Google Places

December 20th, 2010 No Comments

If you search Google Maps for your company name, or keywords related to your product / service in the Google search box, you might start to see a small map with a list of businesses near you in the search result. This is because Google has been placing an importance on location-aware searches in their results.

With a healthy increase of mobile users searching the web via their mobile devices, it it time for you to consider putting your business on Google Places. Different than the traditional search where the unique identifier is the website URL, Google Places (or Bing maps, Yahoo local listings, etc.) uses your business phone number has the unique identifier. You can enhance your listing, correct the map marker (very important), add photos, videos and web URL on the listing, and last but not least, reviews from customers for all to see.

To get started, simply search for your business phone number to see if Google has your listing, then you can enhance and modify information associated with the listing, and publish it after you verify ownership via one of two ways: 1) Phone which is almost instant and, 2) Postcard mailing which takes between 4- 8 weeks. The reason why this is so important in your SEM campaign is two fold:

First, you give your potential customer pinpoint accuracy on your location. I’ve often found that as accurate as Google wants to become, map markings are sometimes off. By giving you the ability to fine-tune your map marker’s location, you can allow searchers a more accurate position of your business, especially if they want to use the Google map to give them directions.

Second, Google does gather customer reviews from different sources, InsiderPages, Yelp!, Angieslist are just three examples Google index reviews from, which means it’s time to grab those listings and start monitoring your customer feedback there.

All these add to an ever important element of SEM: Brand Reputation Management. I’ve seen more and more companies reaching out to SEM experts for “damage control”. A bad review came up without their knowledge, and their first question were “can you delete this?” My answer is always “No, you shouldn’t.” But I’ll explain why you shouldn’t in my next post.

Functionality vs. Personality

December 15th, 2010 No Comments

So, I was meeting with a client presenting their new website prior to launching it today. About every 10 minutes or so the client would say “Oh, I’d like to see this in the site because Company X does it.” Many of the comments did have merit and some even added value to the visitor experience.

Surprisingly, they insisted on having a “Client Login” even though there is no client portal at the back end to support it. “Oh we have to have it because people expect to see one.” was their rationale. “We understand there isn’t a client portal right now, but that will lead them to a “Contact Us”, for the information, to which we can reply ‘we’re working on it.’”

This may sound a little bit ridiculous to most, but far too often for SEO companies optimize their sites for keywords that aren’t directly related to their specific products and services. Frequently I see them selecting keywords that are very generic simply because they have high search volume on Google.

Here’s an example of what that. Imagine a cosmetic chemical formulation company optimizing their sites for “cosmetic products” or “consumer cosmetic products”. Sure they may deliver high search volume, but how qualified are the results? And, how much of a conversion rate can you really expect from an optimization tactic like this?

And here’s another observation. When it comes to website functionality, I’ve seen way too many instances where companies will focus on adding the newest functionality just to make their brand appear ‘cool’ and lose their original sense of purpose in the process. Have you ever seen sites with ten different contact forms for one purpose? How about weather and traffic reports on a “Contact us” page when they don’t ever expect visitors to actually visit their office? And, last but not least, an idle Twitter feed on the home page? The point is, to make your website achieve its true purpose and deliver the results you want, re-evaluate its functionality and use it to enhance your brand’s unique personality through that functionality rather than letting lots of unnecessary functions and activities damage your brand online.