eCommerce and

I finally get to say it, “The Lakers are NBA Champions!”  I did so much smack talking last year that I ended up losing my bet and the Lakers lost in the finals, so this year I decided to not say anything until it was all over.  So, Father’s Day is this weekend, and other than that it’s time to move on to the week in eCommerce.

• Google changes public stance on PageRank Sculpting with nofollow, Matt Cutts gives a detailed analysis here and Marketing Pilgrim gives a synopsis here.  Changes to be aware of: Distribution of link juice is either passed on or it vanishes, SEO’s no longer have the ability to allocate PageRank value using nofollow.


• Has Bing raised public interest?  Yes.  Does Google fear Bing, like the New York Post reports?  I doubt it.  I tend to lean more towards Clint Boulton’s opinion that Google’s respect for Bing was revealed when they launched “Explore Search”, a page that features many of Google’s functions in an easy to read format.



• Online shoppers plan to spend more on dear old Dad this Father’s Day than offline shoppers.


• Social media can be used by marketers to engage and acquire focus groups. 


• Writing headlines sounds so simple, but getting started can be the difficult part for the writer; Copyblogger offers nine proven formulas for these troublesome times.
  

The possibilities are endless with a bathroom remodel. Discover your classic side with a clawfoot tub, experiment with fresh bathroom vanities and coordinate it all with matching faucets. Shop PlumberSurplus.com 24 hours a day, 7 days a week for all of your bathroom needs.

• Dear Jane is working on an experiment that deals with brand perception.  She put together a visual representation of the brands she uses on a typical day and her findings were quite interesting.  She is also asking the community to participate.


• The search engines are improving search capabilities but are we the users capitalizing on them?


• Decency as a sales tool…. What a concept!


• Friendly fraud, online retails equivalent of shoplifting or consumers just gaming the system?


• Social networking is taking off, so don’t walk into the process blindly, let those who have learned their lessons along the way provide some assistance.
  

For the best prices, on the largest selection of faucets, from your favorite brands like Kohler, Danze, and, American Standard shop PlumberSurplus.com 24 hours a day, 7 days a week.

I try not to discuss technical subjects in my posts because, being a developer, I understand that most of the stuff I find fascinating just wouldn't be interesting to most of you. But sometimes I run across something that's both useful and understandable, and I have to share it. So I hope you'll bear with me.

Cross-browser compatibility is a major headache for web developers. The web is built on standard protocols like HTML, CSS and Javascript. This is great, because it allows all sorts of different computers to communicate with each other. However, there are many different browsers out there to interpret these standards: Internet Explorer, Firefox, Safari, Opera, Chrome, and many more. And each of these browsers comes in multiple versions. And every version of every browser interprets the standards a little differently. Sometimes that's because the standards aren't clear, but usually the browser is simply in error, or a decision was made not to support the standard. So instead of being a simple job of following the standard when developing web sites, a web developer has to consider the unique behavior of the most common browsers to make sure most users see the website correctly. Usually this is done by developing in a more "standards-compliant" browser and then trying to fix the quirks in other browsers while not accidentally introducing any in the original. It's a balancing act that involves a lot of knowledge of the browsers' inner workings.

Troubleshooting Browser Errors

So, I ran across a strange bug on our website, PlumberSurplus.com, that I knew immediately was a browser problem, but hadn't seen the problem before. There were several "divs", or blocks of content, on a page that were displaying differently in different browsers. In Firefox and Internet Explorer, the page looked something like this:

However, in Google Chrome, the page looked like this:

Obviously, Chrome was displaying the page differently than the others. To understand why, we have to dig into CSS, the standard web language that dictates how pages are formatted. CSS works hand-in-hand with HTML: in CSS, HTML elements are given attributes whose values determine how the elements are formatted. For example, you could take some text in HTML and use CSS to make it bold. In this case, the first div (in red) has a CSS attribute called "display" that's set to "inline-block". That means that the div acts like a solid block, that doesn't wrap or change shape because of things around it, but that it also stays inline, so that if there's text around it, it fits right in as part of the text. We'll revisit this later. The second (blue) div has an attribute called "float" that's set to "right". This means that instead of simply being inserted into the text of the page, the div gets attached to the right side of the page (or the section it's in), and the rest of the content flows around it. The third (green) div has no special attributes associated with it; it's just there to illustrate page flow.

So it looks like what's happening is that the first div is forcing the second div down in Firefox and Internet Explorer, but flowing around it in Chrome. Let's do some tests to find out why. First, let's get some text in there to see better how the content flow works. Here's how Firefox looks:

As you can see, the first div is right in the content flow where it's supposed to be, and the second div is sitting on the right as the content wraps around it. Looks good so far. Here's Chrome:

This looks pretty much the same except for one subtle change. The second div is one line higher than in Firefox. Why is that? I've colored the text to demonstrate. The black text is all before the floating div. The blue text is actually after the floating div, but since the div floats, it wraps around it so it looks like it comes immediately after the previous text. So the difference between the two browsers is this (and this is important, so I'm setting it out):

In Firefox and Internet Explorer, a floating div floats below all previous content. In Chrome, a floating div only floats below content that is directly above it.

W3C (Wide Web Consortium) Standards

So, which is correct? For that, we turn to the World Wide Web Consortium, W3C, the standards body that determines the specifications for CSS. Now, just as there are several versions of each browser, there are also several versions of CSS. The main version of CSS in use for some time has been CSS2.1, but recent browsers have begun adopting parts of CSS3 (which is itself still in development). However, for our purposes they are identical. They give these rules for positioning floats:

4. A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
8. A floating box must be placed as high as possible.

Those rules are somewhat technical, but the two most important ones here are six and eight. Rule six says that a floating div can't be higher than any line of content that came before it. Rule eight says that, unless another rule conflicts, a floating div should be as high as possible. So, looking at the pictures again, it looks like Firefox and Internet Explorer both line up with the bottom of the previous line of text, whereas Chrome lines up with the top. That means that Firefox and Internet Explorer violate rule eight; Chrome is indeed in the right.

However, now we need to know what to do to fix the issue so that all the browsers display the same thing. There are two ways to do this: we could fix Firefox and Internet Explorer to display correctly, or we could "fix" Chrome to display the same as the other browsers. In this case, I actually wanted all the browsers to put the floating div below the first div rather than to the side, so I chose the second option. My fix was to change the first div from "display:inline-block" to "display:block". This took it out of the content flow and pushes everything after it to the next line, like so:

That includes any floating divs below it, so now the second div is positioned the way I want it (as in the first picture) even in Chrome. Since there wasn't any text on the page in that section, it didn't interrupt the content flow. If there was text there, I would have had to find a way to keep the first div as "inline-block" while pushing the float down; possibly by moving the floating div itself lower in the content flow.

If, on the other hand, I had wanted to make Firefox and Internet Explorer work the way Chrome does, allowing the floating div up beside the first, I would simply have to move it to just before the first div in the content. That way it wouldn't be below the div at all: it would be first, and the div would "wrap around" it by staying to its left. Both solutions are relatively easy once you understand why each browser is behaving the way it is, but it took some digging to do that. I wasn't able to find anyone else detailing this discrepancy, so I hope this post is helpful to you web designers out there, and for the rest of you, chalk it up as a glimpse into the life of a developer.
 

The possibilities are endless with a bathroom remodel. Discover your classic side with a clawfoot tub, experiment with fresh bathroom vanities and coordinate it all with matching faucets. Shop PlumberSurplus.com 24 hours a day, 7 days a week for all of your bathroom needs.

Don’t forget Mother’s Day on Sunday!  For now let's review the week in eCommerce:

• Speaking of Mom… Search Engine Guide recommends using the “Mom Test” if usability is a concern.


• Copyblogger is strategically helping others fight the blogging war for attention, and I do mean “strategically”.


• SEOBook challenges “What do your non customers have in common?”


• Andy is scratching his head over Google’s Chrome commercial that is scheduled to run this weekend.


• I actually haven’t read the Bruce Clay's blog in a while but this post by Virginia caught my eye.   She makes a few really good points about how annoying it can be when someone blatantly steals your content, but she also points out that you don’t have to stoop to their level.  I guess it hit close to home this week, considering when I checked out one of our competitors websites I found that they were using nearly our exact ad copy on one of their banners:

Little Giant has been hard at work engineering pumps that their most loyal customers have been waiting for. PlumberSurplus.com is your destination for the new Little Giant TSW Sump Pump System and their NXTGen Condensate Pumps.

I was struck recently by a video I watched on Fora.tv, Google's Vic Gundotra: Mobile Phones as Answer Machines. In the video, Vic Gundotra describes how he was having lunch with a friend and his four year old daughter. His friend asked him a question and he replied, "I don't know." His daughter piped in, "Daddy, where's your phone?!" At first he thought nothing of it, but then he and his friend realized that his four year old had surmised that when information was needed, one could simply pull out a phone to obtain it. Remarkable! I have a two year old, and even he has displayed what I perceive as a shift in thinking about information retrieval from my generation to his. We were recently watching "Mickey Mouse Clubhouse" on TV and I said to him, "You and I are going to go to the store." He got in the car, climbed into his car seat, and asked me for my iPhone. He turned it on, unlocked it, and started the YouTube app so that he could continue to watch "Mickey Mouse Clubhouse" clips in the car. Naturally I had to search for the clip, but I am amazed that he is aware of this resource portability.

Until I owned a "cloud-enabled" phone, I was skeptical of the mobile revolution. Sure, I have recognized Generation Y as the text message generation, but until recently I hadn't seen the utility in being connected to cloud applications via a sensory-based platform. My 49 year old father-in-law once proclaimed to me that online shopping would never overtake physical retail shopping in overall revenues. Though I am sure people will still want to go to the grocery store to make sure their melons feel ripe, I'm not sure I believe that the shopping experience or buying decision process will look anything like it does today in 20 10 5 years. More and more, I use the cloud to make buying decisions. What's more, I find myself diving ever-deeper into my phone while I'm shopping in physical retail stores. Whether I'm doing price comparisons, or reading product reviews, or searching for similar products or services, I find that I'm more inclined to trust information found from reliable sources in the cloud than I am information found at a retailer's store. 

I wonder… how will cloud-connected customers affect eCommerce and vice-versa? More specifically, how will this affect PlumberSurplus.com, OutdoorPros.com, and any other venture we decide to undertake? Well, in order for us to be able to make an impact in mobile, we have to know what success looks like in order to understand whether or not we can execute in an easy and scalable way. With this type of marketing in its infancy, how can we really measure this? 

I came across this article today, Search Giants Encounter Challenges in Mobile Ad Market.  In the article, Frank Reed discusses a company that starts off with mobile ad campaigns running on five mobile Internet networks. After only one day, the company pulled Google and Yahoo campaigns because they were not effective. Frank cites two reasons as the primary hurdles for behemoths like Google and Yahoo in the mobile ad market: "First, the ads that are run on their traditional platform don’t often translate or fit well in the mobile environment... Secondly, the position of the ads on a mobile device will not correspond to the ‘top of the page’ and ‘right hand column’ look that is now ingrained in everyone’s way of seeing and reacting to the ads." These seem like relatively easy problems for resource heavy organizations like Google and Yahoo to overcome over time. However, it's a good indicator to me that mobile advertising isn't mature (certainly not mature enough for a small business like ours to throw money at).

In order for us to be able to be effective in mobile, I think three things need to happen. First, testability. We need to be able to stare at an anticipated baseline of performance and easily test and measure performance. Second, match ad campaigns to targets. Mobile advertising seems like a moving target at this point. This seems pretty tough to do. Finally, figure out how to take advantage of the sensory aspect of today's mobility. Phones have eyes, ears, skin, they know where you are, they know where you've been, they know who your friends are... how do we leverage these to create an experience that leads a customer to buy?

No matter what happens, at this point, I'm pretty convinced that the way my son finds information and shops when he's my age will be very different than the way I do those things now. I can't wait to see what happens next.

For the best prices, on the largest selection of faucets, from your favorite brands like Kohler, Danze, and American Standard shop PlumberSurplus.com 24 hours a day, 7 days a week.

So we have finally started utilizing Twitter so feel free to follow us to keep up to date on our latest activities.

This week’s eCommerce review:

• According to a post by Bruce Temkin, as we add functionality to our websites we may be decreasing the ease of navigation, and according to his numbers it looks like there is plenty of room for improvement.


• To niche or not to niche, that is a great question, especially if your competition is trying to dominate you via SERPs!  Search Engine Land takes a look at microsites in relation so SERP’s.


• Tools every Google Analytics professional should have.


• Avinash, well known analytics guru, goes over the basics of daily, weekly, and monthly unique visitors.  The summary of the lesson is to pretty much forget those metrics, and instead look at absolute unique visitors over a given time period.  Gotta love simplicity.


• As someone who feels the need to justify reasoning, I can completely identify with this post from Future Now, On a Scale From 1 to 5 Surveys Stink. Here’s Why!
  

The possibilities are endless with a bathroom remodel. Discover your classic side with a clawfoot tub, experiment with fresh bathroom vanities and coordinate it all with matching faucets. Shop PlumberSurplus.com 24 hours a day, 7 days a week for all of your bathroom needs.