Time to Leave Childish Things Behind

I make no secret of my religious beliefs; however, I do try to keep my religious convictions on my personal blog, My Experiences as …. That said, there is a very familiar passage in the Bible, it has been quoted in many Hollywood movies, so I’m sure it is ok to use in this context.

When I was a child, I talked like a child, I thought like a child, I reasoned like a child. When I became a man, I put the ways of childhood behind me.
1 Corinthians 13:11

This verse is referring to our relationship with God and how we can respond in ignorance, holding to our ignorance, and even fighting over our broken ideas because “that’s the way we have always done it.”

This, I think, applies to web development too. I started learning as a teen, playing in HTML1 before CSS ever existed. Things have changed so much in the last 15+ years since I first learned how to use HTML. Sadly not all industries have kept up with the changes. It is a well known and documented fact that IE has dragged it’s feet, holding to “cutting edge” CSS2 and XHTML. IE9 is the first to support any semblance of the latest and greatest, but so much of CSS3 and HTML5 is simply not supported, or well supported in IE9.

Most importantly, IE9 is only available in Vista and Windows 7. Windows XP is the most well adopted version of Windows and based on the fact that I’ve been in offices using Windows 98se it will continue to be around for another 10-20 years.

Who cares if IE doesn’t keep up?

If you are in the design and development community, you know why this is a real issue. But if you are outside that specific group then you may not understand what is going on. Right now we are dealing with 3 separate battles.

Modern Browsers v. Old Browsers

This is the most obvious issue, and one that receives the most face time. Even Microsoft is realizing they need to step up their game with videos mocking just how pathetic the IE browser had become, but it really is bigger than that. Firefox was the biggest competitor to IE in previous years and had been the developers choice with Safari being the most likely choice for Mac users for several years. Chrome is the new kid on the block, and they are really making a showing. I checked my analytics and Chrome is the most popular browser on this blog with nearly 40% of the share and Firefox is now down to 35%. IE is 4th with only 6% of the visitors, but think about my demographic. Most people coming here are looking at my tutorials on development, which means they are much more tech savvy. By comparison, my mom’s blog — which is a craft blog — has nearly 50% of her visitors using IE. Half of that, or 25% of the total, are on IE8. That is substantial.

The browser developers are fighting, trying to get the best technology to win that share, so you have some introducing browser specific ways of doing things that were introduced in CSS3 before it was finalized. This means that to make your code work right in the major browsers you have to write out annoying code like

.rounded-corners {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}

Fortunately, users on Firefox, Chrome, and Safari are less likely to hold onto older browsers, but even this simple technique will not work in IE version less than 9.

Additionally, validators will flag this markup as invalid. Because of the way browsers interpret CSS it doesn’t really matter, but in a complex site this can add quite a bit of uneeded code to achieve a specific look that plays well in most browsers.

New Methods v. Classic Techniques

In addition to dealing with changing technology, I find that I’m called in to deal with broken sites on a regular basis, either via the support forums, or for my own clients. When I come into code that was done by a previous developer I often find that it is full of HTML markup that should have gone the way of the dodo 10 years ago. Font tags, most tables, image maps …. Those were great back when they were introduced. It allowed at least some level of control over how the site was laid out. Since CSS came on the scene there has been a much better way to deal with this kind of markup (and so much more). In fact, some of these tags that should not be used are not supported by HTML5. You can read about that in the w3.org article on the differences in HTML4 and HTML5. Other elements are allowed, but don’t mean anything unless you style them with CSS to mean something.

The problem is, not only are there site out there that were created in the early days, but many developers continue to use these old and outdated techniques, not knowing that there are better solutions, or not understanding the better solutions. This means that browsers will have to continue to support these methods long into the foreseeable future. While this may seem like a simple issue, as we look into the next front of this war we will see it is actually quite complex.

Mobile v. Traditional

This is the real crux of the matter. We are already seeing a huge push in the mobile market. Today less than 3% of users come to my site on a mobile device. Who cares right? Well last year less than point five percent (I typed that out because I want you to think about that for a bit longer) came to my site on a mobile device. That works out to be a much more substantial growth than the big browser war transition from FireFox to Chrome. Over 400% growth in mobile traffic, and this is something that is happening everywhere.

Since I just finished developing a great video plugin to build my Production theme on I can tell you that there are issues to deal with when creating semantically correct markup while also getting videos to play on mobile devices. This is because mobile browsers don’t have the vast memory and power available to a desktop or laptop user. The browser has to cut out the fat, so they don’t support flash and a few other older techniques that were hacks to begin with. I occasionally have clients try to get me to put flash into their sites and I all but refuse. It is bad for SEO, it is bad for performance, and it is bad for the future.

That is what brings us to the real issue in this multi-front war.

We are Educators

At least we should be educators. Pioneers in the old west moved out ahead, learned how to survive, then came back and taught others to survive. The west was tamed because of those brave men, but not because they learned and then kept quiet. They educated the masses and infected them with a desire to see in fact the things they read about.

We must make a decision going forward. Will we simply try to get the site to work the same, the exact same, on all devices? Will we make 3 different sites that must be maintained independently? Will we learn to make great and functional sites that will downgrade gracefully onto other browsers?

I suggest we do the latter so in closing let me share a recent experience.

A client asked me to build some JavaScript into a menu. It is pretty simple script, merely intended to slide a background from the main color to the hover color smoothly. The site already had a good deal of JS on it and that had already led to one problem I fixed, a conflict between two scripts, and I was hesitant to introduce more. I mentioned to the client that this could be done in CSS3 using the new animation property. CSS animation is kind of like magic, especially when you play around in some of the super cool HTML5 and CSS3 environments that have been created. There is even a Zelda like game that was created without any flash or JavaScript. Check out BrowserQuest if you haven’t already. It is a great way to see exactly how cool these techniques can be and waste a good half hour or more of your life (purely educationally though of course).

After a brief period of education on what it does, and assurance that in older browsers the over will still work, just without animation, we moved forward. It took less time than trying to get the JavaScript working every would have and is much lighter. Plus it is moving the web forward, taking ground in this war we must fight.

Now one might argue that using the JS method would work on all browsers and should be preferred over newer techniques, but consider this. If we continue to pander to older browsers, using those same excuses, then people will never see the need to upgrade. If we make a great site that is still great, but not animated (for example) in older browsers, then users with older browsers won’t know they are getting short changed unless they use a newer browser. If they see the difference on a newer browser then they might upgrade, which is a win, or they might not think the animations are worth the hassle. That is not a problem either. In fact, it is only a problem if you create a site that is functionally inferior in one environment or another, hence my refusal to use techniques that are going to present a functional problem, like Flash, across browsers.

So, do you agree that it is time to leave childish things behind? How ready are you to embrace CSS3 and stop using older development techniques?