It's time for some good news. In my first HTML5 post, Getting ready for HTML5, dated September 19th, 2010, I stated that I set November 13th as my deadline to ready kimcrawley.com and buchalterconsulting.ca for HTML5 and CSS3. Well, it turns out I'm well ahead of schedule. My sites will now be HTML5 ready the day after tomorrow, Friday, October 8th.
In this post, I'll describe how I'll be doing it, and why I think it's time to upgrade NOW. If you're a web designer, you may be curious about how I came to that conclusion, and what I'm going to do about Internet Explorer. You may want to review my previous posts in the Project HTML5 series:
- Getting ready for HTML5
- Getting ready for HTML5- New tags, part one
- Getting ready for HTML5- The video tag...
- Getting ready for HTML5- New tags, part two
- Getting ready for HTML5- Browser support...
- Getting ready for HTML5- New tags, part three
- Getting ready for HTML5- Which tags have been dropped?
Like most vigilant web developers, I keep a careful eye on my hits. I check hits for this blog, kimcrawley.com, and buchalterconsulting.ca on nearly a daily basis. I use handy, free tools that Google has available. For this blog, blogger.com keeps a Stats tab in my user profile. For the two domain name sites, I use Google Analytics. Both tools offer very similar metrics. I can analyze where my hits are coming from (Directly? Using a search engine? From a link on an external site, which one?), which OS or devices visitors are using, which screen resolutions users have, and which web browsers, down to version numbers, visitors are using to access my websites. That last measure can help me determine if I should implement HTML5/CSS3, and how.
For the curious, here's a screenshot of the browsers visitors have been using in the last week to visit kimcrawley.com:
So, despite the commonly spoken about statistic that Internet Explorer (IE) makes up about 40% of web use these days, my visitors have been using IE to visit kimcrawley.com only 25.95% of the time. Considering IE's shoddy support for HTML5 and more recent features of JavaScript (see Getting ready for HTML5- Browser support...), I suppose that's a bit of a relief to me. As I mentioned before, Google Analytics also breaks down which browser versions visitors are using.
Here's a screenshot of last week's Firefox stats:
More of my visitors have used Firefox last week than any other browser. Firefox 3.5 (beta 4) and above have some good support of HTML5/CSS3. 87.66% of my Firefox visitors are using 3.5+. That's very reassuring.
Here's the breakdown for IE:
Only the brand new IE9 has some substantial support for HTML5. And even IE9 has weak support of HTML5 in contrast to the other major browsers' newer versions. None of kimcrawley.com's hits in the last week came from IE9. Considering my IE hits made up 25.95%, that's a significant percentage of my visitors that don't have HTML5 ready browsers.
My Chrome stats:
I'm currently using the latest version of Google Chrome at the time of this post, 7.0.517.24 beta, to surf the web. Google Analytics makes it possible for me to store a cookie in my browser so that Analytics doesn't track my own page views of kimcrawley.com, kimcrawley.blogspot.com (this blog), and buchalterconsulting.ca. That's crucial, because I don't want my own hits to skewer my metrics. So, my own visits aren't included in these Chrome stats. Chrome 6 has some HTML5 support, and Chrome 7 has even more. Only 3.23% of my Chrome hits last week for kimcrawley.com are from Chrome 5. So my Chrome visitors are pretty much ready for HTML5 and CSS3. I've got to consider that some of my Chrome hits are coming from Android phones. So, I've just got to consider how my websites look on a smartphone.
Here are my Apple Safari stats:
All of those versions of Safari have pretty good support of HTML5/CSS3. Nothing to worry about there. I've got to keep in mind, though, that some of my Safari hits are coming from iPads and iPhones. As I don't use Flash in kimcrawley.com and buchalterconsulting.ca, that shouldn't be too much of a concern. I've just got to make sure that those sites look good at lower screen resolutions. This blog HAS embedded some Youtube videos, and those DO require Flash. People visiting this blog with an iPad or an iPhone won't be able to enjoy those videos.
Finally, my Opera stats:
Opera 10.6 has excellent support for HTML5/CSS3. Each Opera hit kimcrawley.com got in the last week was from a different version. Two of those hits are 10.6+. I expect, fairly soon, I'll stop getting hits from older versions of Opera. But for now, a number of my Opera hits are from older versions. That's something to consider in my readying for HTML5.
Other browsers (including BlackBerry) made up about 6% of kimcrawley.com's hits in the past week. I assume BlackBerry 9700's browser supports HTML 4.1 instead of HTML5. But, RIM promises excellent HTML5 support on the new BlackBerry PlayBook coming out in early 2011. (See Don't get an iPad, wait for RIM's PlayBook.)
In conclusion, about 70% of my visitors are already ready for HTML5. By 2011, especially since I think the PlayBook will be a commercial success, that number will be quite a bit higher.
But, in readying my websites for HTML5, Internet Explorer's continued popularity is a major hurdle. I was thinking recently, there should be a way to get around that with JavaScript. It turns out I was correct!
I found a freely available JavaScript applet for enabling HTML5 on Remy Sharp's blog. So, by Friday, I'll be using that applet on both kimcrawley.com and buchalterconsulting.ca. Thanks, Remy!
So, in addition to using Remy's applet, these are the other major changes that will be made to my websites early this Friday:
- I'll be getting rid of all occurrences of <center>, <font>, etc. and make sure that I only use tags that are supported by HTML5. Obviously, I'll be using more CSS, but it'll become a habit for me sooner rather than later.
- This blog will finally be using video that can be enjoyed without Flash. (Cough, cough, iPhone... Cough, cough, iPad...) What I'll do for videos in this blog for now on is that I'll use the new <video> tag. In between <video> and </video> is where the code goes for browsers without <video> tag support. In THAT space, I'll embed Flash. That way, if visitors have support for EITHER Flash or the <video> tag, they'll be able to enjoy video in my postings from October 8th, on.
- I can finally slap <!DOCTYPE html5> on the top of all of my webpages in kimcrawley.com and buchalterconsulting.ca. Newer browsers will no longer be forced to run QuirksMode, and I can submit them to html5gallery.com and html5websites.net. More importantly, I can validate the webpages on both sites through W3C's Markup Validation Service.
All of that should be ready no later than 2pm EST, October 8th. Yay!
That doesn't conclude the Project HTML5 series on this blog. In the near future, I'll conclude the series with a post or two about CSS.
kimcrawley.com
twitter.com/kim_crawley
No comments:
Post a Comment