Zillow’s Business Model

ZillowBusinessModelI recently took some time to explore Zillow’s business model using Alexander Osterwalder & Yves Pigneur’s Business Model Generation methodologies.  Zillow exists in a very tumultuous time for the real estate industry as the industry struggles to protect the quality and syndication of data, while still attempting to market homes in an increasingly transparent digital world.  For these reason’s and others I found the company very interesting.  I decided that I would post my findings, should anyone be interested in exploring them.

Here is the link to the PDF where I take a closer look at Zillow’s Business Model.

 

Top Life Hacks of 2014

life-hacks-copy

Fancy Hands

Fancy Hands is an incredible service for saving time. Use them to schedule appointments, research, or do other tasks so that you can focus on what you need to do. Do you get a haircut? You can schedule a recurring task for them to book a haircut for you at whatever frequency you feel appropriate. They integrate with your Google calendar. They also have a mobile app. Recently, I had them call and ask about upgrades for Delta, research a possible handyman, and call and order a gift certificate to be sent to my house for a present.

Soylent

I know, I know, I know, we all like to eat. Soylent isn’t about replacing your social meals, or your family meals. It’s not about trying to diet. And it’s not about an incredible taste.
Soylent is a way to save money on meals, assuming they are less than $3. It’s a way to get a good amount of nutrients that the human body needs, when you need it. Think about the amount of time and money you spend on eating. Just replace some of that, it makes a huge difference. It gives you time back when you need it, and you can enjoy meals when you don’t.
Obviously, this strategy is predicated on the assumption that we know what is supposed to go in our bodies. However, it begs the question, how well do you normally eat and what do you put in your body. It’s probably not better than the nutrients you’re getting from Soylent.

Online Grocery Ordering and Pickup

This probably only applies locally in the sense that Amazon Fresh is not in my area yet. However, right now on Healthy Living you can go on, order your stuff, drive up and pick it up. Once you get in a rhythm you can just hit “re-order” it will populate all the items that you recently ordered back into your cart, and you can modify from there, saving yourself even more time. It costs $7 for the service but if you go over $150 it’s free, and its pretty easy to go over $150 at Healthy Living.
If you have any cool time or money saving tips to share, please let me know! Hopefully these tips help people get some time back.

Schema.org Markup of a SERP / Product Listing

Microdata is great but, how do you use Google rich snippets to add multiple products to a single page?  Schema.org recently released their product example markup.  This gave me a chance to create the ideal markup of a SERP using schema.org markup.  Check it out here. Microdata is evolving with the support of major companies. Things are converging around microdata and schema.org with the support of Bing, Yahoo, and Google. This gives us web developers an opportunity to utilize this standard, but also presents the challenge of trying to piece together how it should be used on each page, and how often. With this in mind I put together a sample SERP (search engine result page.)

This page does the following:

Schema.org Logo

W3C CSS Validator

W3C Validator

Here is the sample code for a schema.org item listing:

<div class='results' itemscope itemtype="http://schema.org/ItemList">
	<meta itemprop="itemListOrder" content="Descending" />
	<!-- this could be an h2 if you want to affect the outline -->
	<strong itemprop="name">Name of Items</strong>
	<div class='item' itemprop="itemListElement">
			Item 1 information, description of the item.  Includes some basic comparison details.
	</div>
	<div class='item' itemprop="itemListElement">
			Item 1 information, description of the item.  Includes some basic comparison details.
	</div>
</div>

Here is sample product markup:

<div itemscope itemtype="http://schema.org/Product">
	<h3 itemprop="name">Item 2 Title</h3>
	<img itemprop='image' src="bmw2.jpg" alt='Item 2 Description' />
	<span itemprop="description">
		Item 2 description of the item.  Includes some basic comparison details.
	</span>
	<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
		<span itemprop="price">$44,550.00</span>
		<link itemprop="availability" href="http://schema.org/InStock"/>
	</div>
</div>

And here is the code for putting it all together:

<div class='results' itemscope itemtype="http://schema.org/ItemList">
	<meta itemprop="itemListOrder" content="Descending" />
	<strong itemprop="name">2 Items</strong>
	<div class='item' itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
		<h3 itemprop="name">Item 1 Title</h3>
		<img itemprop='image' src="bmw1.jpg" alt='Item 1 Description' />
		<span class='description' itemprop="description">
			Item 1 description of the item.  Includes some basic comparison details.
		</span>
		<div class='pricing' itemprop="offers" itemscope itemtype="http://schema.org/Offer">
			<span itemprop="price">$45,500.00</span>
			<link itemprop="availability" href="http://schema.org/InStock"/>
		</div>
	</div>
	<div class='item' itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
		<h3 itemprop="name">Item 2 Title</h3>
		<img itemprop='image' src="bmw2.jpg" alt='Item 2 Description' />
		<span class='description' itemprop="description">
			Item 2 description of the item.  Includes some basic comparison details.
		</span>
		<div class='pricing' itemprop="offers" itemscope itemtype="http://schema.org/Offer">
			<span itemprop="price">$44,550.00</span>
			<link itemprop="availability" href="http://schema.org/InStock"/>
		</div>
	</div>
</div>

Using Pinterest with FancyBox

Pinterest FancyBox 2 IntegrationWhat is the most obvious use of social for a photo browser? Well, pinterest of course. With it’s emerging social applications pinterest, the online scrapbooking tool has great implications when integrated with photo browsing tools. The “pin it” button has the ability to pin any photos to any of your boards and it has great applications for online marketers of products. It was only natural that I added this ability immediately on one of the sites that I consult on.
FancyBox2 can be a little quirky to extend though, so I’m writing a quick how-to on the install.

Check out the demo here.

How this is done:

The key to accomplishing this is to recognize that fancybox has an event called “beforeShow”. This is shown below. All I did to make this work is add the Pinterest markup to the title object in the beforeShow function. Read the comments below in the code to see what each component is doing.

Here is the code:

//NOTE: this uses fancybox 2
$(document).ready(function() {
  $('.fancybox').fancybox({
    //set the next and previous effects so that they make sense
    //the elastic method is confusing to the user
    nextEffect: 'fade',
    prevEffect: 'fade',

    //set the position of the title
    helpers : {
      title: {
        // title position options:
        // 'float', 'inside', 'outside' or 'over'
        type: 'inside'
      }
    },

    beforeShow: function () {

      //if you already have titles
      //on your fancybox you can append
      if(this.title) {
        //set description to current title
        //this will set what posts
        var description = this.title;

        //add pinterest button for title
        this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
            encodeURIComponent(document.location.href)+
            '&media='+
            //put the path to the image you want to share here
            encodeURIComponent('http://scottgale.com/blogsamples/fancybox-pinterest/'+this.href)+
            '&description='+description+'" class="pin-it-button" count-layout="horizontal">'+
            '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>'
            //add title information
            +'<span>'+this.title+'</span>';

      //if you don't already have titles
      //you can just make the title the pinterest button
      } else {
        //add pinterest button for title
        this.title = '<a href="http://pinterest.com/pin/create/button/?url='+
            encodeURIComponent(document.location.href)+
            '&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
            encodeURIComponent(this.href)+
            '&description=Pin from ScottGale.com" class="pin-it-button" count-layout="horizontal">'+
            '<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';

      }
    }
  });
});

Five Tennis Tips for Your Own Career

Business Career Tennis TipsRecently watching some great tennis players, who were also board members of Dealer.com, I was reminded of some great corollaries of tennis to web development and to a career.  Here are five tips that are born from tennis but apply to a great many fields.  These tips that I elaborate on were originally published in Tennis magazine as advice from Azarenka’s (top women’s tennis player) coach. These help to give me motivation and clarity.  I hope they can do the same for you.

1.  Practice with the intensity of a match.
Yes you need to be confident, but confidence alone is overrated.  It doesn’t matter how confident you are if you don’t put in the work and are not disciplined enough.  When I get the chance to go speak in front of an audience I’ll admit I’m confident.  I even have to be careful not to get over confident.  But, here is the thing, I spend a lot of time preparing.  I research the company, I look at their social feeds and projects they are involved in.  I take a lot of time to learn the most about my audience that I can.  It helps give me the confidence when I go to present.  Yes I can change on the fly, but put the work in so that when it’s game time, you’re ready.

2.  Stay calm, but not too calm.
Whether you are a speaker, coder, or manager you want to make sure you can be counted on in a crisis.  This means keeping your cool so that you can reason your way through the situation.  That said, it’s important to recognize when something is big, it’s what gets you going, it’s what pumps you up to perform.  You can’t sluff off everything and deaden your reaction too much.  Recently, I had to save an account, and I realized I could come at it from two perspectives:

Option 1:  We’ll do some fixes for them, and hope they stay.

Option 2:  We’re going to do what it takes to save the account and make them happy.  This is an opportunity for success.

I took option 2 and saved the account.  I got myself fired up about the account, did my research, and worked with my staff to get them pumped up about saving the account.  I made sure they respected the client, and the changes we put in place improved usability for many of our other clients.

3.  Find a teaching pro who lets you develop your way.
Mentors in business are important and I’ll admit, I’ve never really had one.  I think back to certain points in my career where I would have loved some advice.  Most of my bosses were either too busy to offer advice, or didn’t know themselves.  I did, however, have an amazing tennis mentor, who actually managed to extend me multiple career opportunities including teaching tennis and my first real website development gig besides consulting.  Find someone who can help you grow and develop your way.  Find someone that shares mutual respect with you in your organization and utilize them to help you grow.

4.  Go back to basics when you are losing.
Sometimes no matter how much you love something, you can lose site of the basics.  Especially if you get too comfortable in an existing position.  It’s easy to build the foundational skills, then build up on top of that, then forget the foundation.  I recently experienced this in my own career.  Early on my management career I had spent a ton of time working on performance management.  Then as I had accumulated more and more direct reports, I got in a bad habit of not putting enough time and energy into each person.  When a reorganization put me with my most recent boss, he didn’t see any of the historic effort I had put into it, just some of the bad habits I had developed over time.  I had to remind myself to get back to basics.  Here is a good list of some of the basics that I liked to fall back to:  http://www.inc.com/geoffrey-james/keep-the-boss-happy-8-rules.html .  Remember, you’re not going to be 110% every single day, make sure you have the foundation in place to fall back to when needed.

5. Enjoy the game.
If you aren’t having fun at your job, it’s time for a change.  Yes frustration occurs, you struggle, claw, muddle, work your way through tough situations.  Last year, Azarenka considered retiring from professional tennis.  Azarenka’s grandmother told her the story of her life to contrast from her own emphasizing the hardships through work that she had experienced.  She convinced her to continue.  Azarenka went on to win the Australian and Wimbledon this year.  The point is, it’s possible to love something, and have your moments of frustration and doubt, so don’t confuse the two.  I have a lot of things that I love to do, and I have had a lot of different roles that I enjoyed.  Find the things that you love, because, life is short, don’t make it about the money.  If you find that thing you love, you will be successful at it, the money will follow.  Work, even though it is work, is done best when fun.

Coverflow using CSS 3D Transforms

As HTML5 and CSS3 technology grows, WebKit CSS 3D transforms are emerging and allowing web developers to do some great things within the browser. To exemplify this, I’ve put together a CSS coverflow demo that functions inside the browser using CSS 3D transformations, reflections, multiple background attachments, and touch events.

View the Demo (best in Chrome or Safari)CSS Coverflow 3D Transforms for WebKit

This works on the iPad and iPhone as well using gestures, swipe left to right or right to left to change the item. This example uses Paul Bakus’ code as a base and building it out with lots of new tech.

Here is the step by step on how I built it.

Step 1: Create Perspective

To build the CSS 3D transform you have to first find your wrapping div and add -webkit-perspective: 500px; to it. For this I used the “bd2” class wrapper.

.coverflow .bd2 {
-webkit-perspective: 500px;
margin: 0;
height: 60%;
border: none;
overflow: hidden;
width: 100%;
position: relative;
}

The perspective gives the illusion of depth on the z axis.

Step 2: Apply the CSS 3D Transform
Then apply the CSS 3D transform rotation depending on the location of the image:
var webTransform = "rotateY("+(side === "right"? 55 : -55 )+"deg)";

When the transform is applied it uses the perspective to calculate how much movement is required. You can play with this by expanding and contracting the window to see how the browser deals with it. The perspective code is very important, your rotation won’t work without you defining it.

Step 3: Enhance the view with the reflection
To do the reflect was pretty simple. I used the -webkit-box-reflect with a transparent gradient so that it would fade the reflect out. Here is the code:

.coverflow .hproduct img {
-webkit-box-reflect:
below 0px
-webkit-gradient(linear, left top, left bottom,
from( transparent ), color-stop(0.5, transparent),
to( rgba(50,50,50,0.7) )
}

You also have to make sure that your containing div is tall enough to pick up the reflect. I placed some webkit specific code in there because for other browser’s it doesn’t need to be as tall.

@media screen and (-webkit-min-device-pixel-ratio:0) {
.hproducts .hproduct {
height:225px;
}
}

Note: All subsequent steps are extra enhancements to make the coverflow that much better.

Step 4: Allow for scaling
There are a few cool tricks I used to make this allow for scaling. By using multiple background attachments I was able to allow for the slider to scale as the window size changes. Here is the example:

.coverflow .slider {
position: absolute;
bottom: 5px;
left:0;
margin:0 10%;
width: 80%;
height: 19px;
background: url(files/scrollbar-left.png) no-repeat top left,
url(files/scrollbar-right.png) no-repeat top right,
url(files/scrollbar-center.png) repeat-x;
}

I also put a width of 100% on the containing div to allow for it to scale.

Step 5: Capturing the touch gestures
I attempted to use jswipe for this to no avail. So, my solution was to attach a couple events and code this without the help of a plugin. The key to this is 3 events: touchstart, touchmove, touchend. Here is how I utilized these:

document.ontouchend = function() {
//swipe left
if( self.swipeLeft && self.swipe ) {
self.moveTo(self.current-1);
$("div.slider").slider("moveTo", self.current, null, true);
//swipe right
} else if(self.swipe) {
self.moveTo(self.current+1);
$("div.slider").slider("moveTo", self.current, null, true);
}
}

document.ontouchmove = function(e){
//move only if you swipe across
if( Math.abs(e.touches[0].pageX – self.startX) > 150 ) {
if( (e.touches[0].pageX – self.startX) > 5 ) {
self.swipeLeft = true
} else {
self.swipeLeft = false;
}
self.swipe = true;
}
}

document.ontouchstart = function(e) {
self.startX = e.touches[0].pageX;
self.swipe = false;
}

Basically this detects the range of your swipe and if it is from left to right large than 150 pixels it moves the images accordingly. The ontouchend can be replaced with any function to perform the needed action. The W3C has recently posted a link for touch events here: http://www.w3.org/TR/touch-events/

Step 6: Deal with all the other browsers
Believe it or not, not every browser is equal, so to build out this I used the philosophy of progressive enhancement.

So here are some samples based on what features you have:

If you have no JavaScript, you get something similar to this:
CSS Coverflow No JavaScript Fallback

Running IE7, you get something like this:
IE7 CSS Coverflow

Running FF, you get something like this:
FireFox CSS Coverflow Image

Step 7: Rejoice! You made it.
There are a number of great techniques used for this all rolled into one. CSS -webkit-box-reflect, CSS RotateY, multiple background attachments, touchstart, touchmove, touchend, and browser compatibility handling. These are exciting new additions to browser technology. Browsers are evolving to make our tasks as designers and developers easier. It’s an exciting time to be a web developer.

QR Generator

A QR Code is a two-dimensional code, readable by QR scanners, mobile phones with a camera, and smartphones. Text, Data, and most importantly URLs can be encoded onto these codes. QR codes are growing in popularity.  As I work on a post outlining the features, pitfalls, when to use, and when not to use, I thought it would be worth posting an easy QR generator in case anyone wants to try these out.

For a QR iPhone Reader I use this one: http://itunes.apple.com/us/app/scan/id411206394?mt=8
But if you are looking for a QR reader that has more options, copy to clipboard etc, try: http://itunes.apple.com/us/app/qr-scanner/id377643590?mt=8

Why JavaScript Pop Ups are Evil

For over a decade of website design, Pop-Ups have been finding their way onto websites of all kinds. Anything from the giant click here flashing button that pops up a new window to embedded aggressive pop ups with questionable means have forced us users to constantly hit the close button. I have to admit, I have built my share of sites that have embedded pop ups. Why have I done this? Well because I was a party to a project where the client communicator, whether that be the project manager, or just their account representative was unable to steer them away, even though every usability fiber of their being was screaming “Bad Idea!”.
Today I arm you with the logic to build a successful argument against why poorly executed pop-ups are not only a bad usability experience but can negatively impact the user experience and quality conversion. And, if you are a client wanting pop-ups or some variant, listen up!

Poor User Experience
Autotrader, Amazon, Google, Zappos why have they all given up the landing page pop-up? It seems obvious doesn’t it? User experience. When a user lands on your site they have a very specific goal in mind. Every site is different, every site has its own set of goals, and its own set of needs that it can fulfill for the user. We know that for many inventory-driven sites, the user will go immediately to inventory and narrow inventory items into manageable chunks.  One user that lands on your site might be looking for the service phone number, while one user might be interested in the BMW 3-Series with the Sport Package. When a user lands on your site, you need to fulfill these needs as quickly as possible. You MUST organize what they see into manageable chunks of information (7 items or less if I had to put a number on it) so that they can get to where they are going with the least amount of resistance. This basic philosophy is what increases conversion and fulfills the overall goals of the site.  This has been proven time and time again.

When pop-ups are used on a landing page as an onLoad event, this throws all these fundamentals right out the window. When you take over the page, or pop-up a layer that forces the user to interact with whatever comes into the forefront you are not satisfying the users needs. It is merely a distraction for over 80% of the people that have a different goal in mind than what you are popping into their face. Yes, if you pop-up, say, a car special, into someone’s face, you will get more leads for that specific special, but at what cost? You will be passing up a much better and more important conversion when a user finds exactly what they are looking for. You are also going to lose a lot more people when they bounce.

Some Stats on Pop Ups and Bounce Rates
So here is the nitty gritty. In March (of 2010) I started tracking the amount of time it takes for users to close pop-ups across thousands of sites that we run at Dealer.com. The result? 7 months has shown that the most common time it takes to close the pop-up is 3 seconds. This is basically (with the load time included) the amount of time it takes for the user to find and click on the close button. We can see from this observation that we are creating a barrier to satisfying the users needs.

Recently I ran a test to prove another hypothesis. That the bounce rate would actually increase when adding a pop-up. I ran the a/b test over the period of a month and found the following:

Test: A/B pop-up
Bounce Rate without the pop up: 28.62%
Bounce Rate with pop up: 31.75%

So we can see that there was a 3.13% increase in the bounce rate while the pop-up was added.

Just Pop-Ups?
You might hear a lot, “well this implementation is different.”. Lots of other proposals occur around taking over the page with an interactive advertisement etc. Remember, these are pop-ups in disguise! In fact, they may be worse because it will take the user longer to find the close button! Take some time and think about the user experience and conversion. Apply the understanding of the stats and the arguments above to come to the right conclusion that benefits everyone.  A great replacement to the pop up is allowing for a promotional area on the site to feature the appropriate item of interest AND MAKE SURE IT LINKS TO SOMETHING.  That way if the user does like what they see, they can click and find more information, but they don’t have to click to close it to get to where they need to go.

Conclusion
Pop-Ups will get you more leads for a specific event at the cost of impacting other conversion areas and impacting the user experience. Do your best to help your client realize this before they make a mistake that will cost them money. As the web developer or project manager you want to make sure that you advise your client to make positive strides toward their online marketing presence.  Don’t be afraid to suggest alternative approaches such as a promotional area on the landing page.  As a client, web developer, project manager, and anyone involved in making an online marketing presence: put the user first and how your site helps them, conversion and great success will follow!

Internet Explorer 6 and the Universal Stylesheet

Anyone who has done any website development in the last decade knows the web developers worst enemy.  It’s a browser plagued by security Issues, compatibility problems, poor build efficiency, and slow render times.  It’s a browser that came out 9 years ago but just hasn’t fully gone away.  Yes, you guessed it, it’s Internet Explorer 6.  In this article I will present all the problems and some real solutions for the browser that just won’t die, so that my fellow web developers can present a convincing argument to rid ourselves of the IE6 dependencies once and for all.  By using Google Chrome Frame, serving the Universal Stylesheet, and setting client expectations we can get some real solutions together for moving the web forward.

The Problems
Compatibility
Web Development is surging forward at an incredibly rapid pace.  With the emergence of CSS3 and HTML5 a lot of common older front-end issues have been solved.  Chrome, FireFox, and Internet Explorer are all working to ensure the best compatibility with what the W3C has put forth.  So where is IE6 in all of this?  Nowhere.  There is no support for CSS3 and HTML5, and why should there be?  Microsoft built this browser in 2001, NINE years ago, (thats 200 in internet years.)  So to experience the web as best as we can, we have to move forward.
My old web app only works in IE6
Wow, so you haven’t done any new development in 9 years to correct this?  Yikes first of all.  Statistics show that IE6 usage is higher during the week than the weekend.  Which points to employers still forcing IE6 browser usage on employees.
Efficiency
Time spent for (IE7, IE8, IE9, FF, Chrome, and Mobile) = Time spent for IE6.
Given any web project, it takes a front-end web developer the same amount of time to develop a site for IE7, IE8, IE9, FF, Chrome, and Mobile as it does for JUST IE6.  This is because of the number of incompatibility issues, hacks, wrangling and just general lack of support that IE6 has.  This creates a huge waste of time for all companies attempting to make things look identical in this browser.  It’s time to get rid of this, so we can take the web forward.
Speed
IE6’s rendering engine is so incredibly slow that even the Google Chrome Frame plugin layer, running on top of IE6 executes the loading of the page faster than IE6’s native rendering engine.  This problem is exacerbated further by companies trying to make advanced web techniques work in this ancient rendering engine.

The Solutions
Google Chrome Frame
This doesn’t solve everything, but it is very important that IT professionals take the time to understand how this works, because it is a very mis-understood piece of software.  The only time this plugin runs, is if the website you are browsing has the appropriate meta information that tells the plugin to launch.  So it is a perfect scenario if you are an IT person and you have to have your users running IE6 still.  This is because a user on your network running IE6 will run in IE6 mode until they go to a site that says “launch chrome frame” at which point it will switch over to a much better browser with standards support that doesn’t suffer from all the problems listed above.
Serve the Universal Stylesheet
Andy Clarke has come up with a great solution for IE6’s problems: the Universal Stylesheet.  The universal stylesheet applies a simplified layer to the content so that IE6 renders content quickly.  It slims down the page significantly and allows for pure content.  This works under the principal that content is king and that by allowing for just pure content makes the browsing experience faster and gets the user to where they need to go quick.  In fact, on the sites where I have served the Universal Stylesheet the bounce rate of IE6 vs other browsers has been only a nominal +5% differential.  Andy Clarke’s universal stylesheet info can be found here: For a beautiful web.
Set Client Expectations
Make sure that your client knows up-front that IE6 will not look the same as modern “Grade A” browsers.  It’s a good idea to build this into the contract.  In all cases where I have said this, clients have been ok with this.  If a discussion ensues then I hope that the points I have brought up here help to relay the problems and solutions.  Make sure they understand that IE6’s browser share is low and rapidly decreasing.  IE6 makes up 6% of web traffic.  Over the past year IE6’s browser share has dropped over 40% and continues to fall.

To all website clients out there; Google, Amazon, YouTube, Facebook, have all dropped support in different areas of their systems for IE6.  IE6 is dying, few people use it anymore and fewer still will use it next month.  More and more people are shifting to modern browsers and mobile options with excellent web standards support.  As web developers we are focusing on the now and on the future for you.  Let us do that, and put the past behind us.

To my fellow web developers; It’s time to stand up and rid ourselves of this browser.  This article outlines the necessary steps going forward for how, learn the techniques and use them, lets take the web forward and make our departments and jobs more efficient.


IE 9 and the Future of Web Standards

Internet Explorer 9 Homepage, IE9Recently it was announced that for the first time in over a decade Internet Explorers global market share has dropped below 60%.  Although in my personal experience the stats don’t reflect that, it is an important moment for web developers.  At one point in history (not long ago) when you asked most web developers what browser to install, the answer would invariably come back; FireFox.  Interestingly though, FireFox has plateaued a bit, and WebKit based browsers are now impinging the dominant IE market share.  We’ve seen an emergence of WebKit based browsers, especially Chrome in recent statistics.  This is widely attributed to the simple fact that Chrome focused on the two things that people really care about on the web; speed and standards support.

This trending competition in the browser space is a great thing.  Nobody wants innovation stunted by having everyone dependent on one browser.  Web standards are a great thing as well,  because it enables proper content delivery to all, no matter the browsing engine.  Here is where the philosophy of Google, Microsoft, and Mozilla have combined: The “Same markup” notion.  This is where both competition and web standards can flourish.  All these companies have recently stated the philosophy of code rendering the same way, no matter what browser you are in.  You may be browsing using the Trident rendering engine for IE9 or the WebKit rendering engine for Chrome and Safari.

The problem is when reality catches up with us.  Lets face it, Microsoft has never been that great about web standards.  FireFox has found it’s niche but there are still subtle differences between Mac and PC in rendering.  The WebKit rendering engine has different versions for Chrome, Safari, and mobile.  It is my hope that these companies working together with the w3c can help developers to solve some of these problems and bring website development into a more mature environment.

Microsoft released the second developer platform preview for IE9 this month.  They have been working with the w3c to add and support the standards.  They have been quite involved, but previously, even after being involved they did not support a number of standards.  Why will this round be different?  It appears they are more engaged.  When I head to “An Event Apart” in two weeks, Microsoft is speaking on how to kill IE6.  They are there speaking to the web developer community and with the w3c.  When I tested IE 9 this week I noticed that it does have a few encouraging signs of progress:

1. IE9 now supports the use of CSS3 selectors.  When I tested this on CSS3.info I confirmed that all of the selectors were supported.
2. IE9 supports CSS3 rounded corners!  Thank the lord!  It’s about time.  Where are you guys on box-shadow?

Internet Explorer 9 rendering ScottGale.comI have included a screen shot of scottgale.com rendering on IE9 with a couple tweaks.  Still no drop-shadow, but I do get some corner rounding, which is a big start.  You can see that it is picking up the rounding for the select boxes, the submit button, and the bottom corners.

They also mention that they support CSS3 media queries for mobile, netbooks, and full desktops.  However,  my dream would be that these are not necessary.  I see this as a baby step for Microsoft in the right direction, hopefully they can keep that going.

In the spirit of competition and standards, these companies need to come together and do what is best for web developers.  If these companies can’t pull together the “Same markup” philosophy then don’t expect developers to get behind the spirit of browser competition.  What will happen is everyone will start touting a single browser that is fast and supports web standards.  For Microsoft with their sliding browser percentage, it’s time to step up and help improve the lives of the web developers and the end users.  It’s time for all the companies to come together and make real web standards happen.