KimCrawley.com- Bright Ideas: CSS

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:

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

Here's my much awaited post about which tags have been dropped in HTML5. These are the tags people like myself have to get into the habit of not using.

If you want to read about the NEW tags in HTML5, and other posts in my Project HTML5 series, here's a handy index:

Tags we've got to stop using:

The <acronym> tag. If you must, use <abbr> instead.

The <applet> tag has been replaced by <object>.

Stop using <basefont>, and use CSS to format font size. I will soon do a post in the Project HTML5 series about CSS3 and how to implement those standards.

Same goes for the <big> tag. No longer supported in HTML5.

Arrgghh! Here's my Achilles heel. The <center> tag. I use it so much in kimcrawley.com and buchalterconsulting.ca. Readying those sites for HTML5 will basically involve removing all <center> tags, and using new CSS commands. I will let you know when kimcrawley.com and buchalterconsulting.ca will be supported, later in the HTML5 series, hopefully by the second week of October.

The <dir> tag has been dropped, use unnumbered lists, the <ul> and <li> tags, instead.

<font>, same with <basefont> and <big>, use CSS instead.

Yippee! <frame>, <noframes> and <frameset> are dropped in HTML5! No more frames!

<s> and <strike> have been dropped, use CSS and <del> for ~~strikethrough~~ text.

<tt> is no more, use CSS to implement teletype text.

No more <u>, use CSS for this, too.

<xmp> was dropped, use <pre> for preformatted text now.

So, in a nutshell, when we want to format text by changing font size, font, font colour, alignment etc., we've got to stop using HTML tags, and use CSS3 instead. I remember how long it took for CSS to even be useable in most browsers. CSS took a long time to catch on. But now, HTML5 means we absolutely must use CSS to format text. So, if I change my mind about a font size, for instance, all changes will be made at the top, instead of going directly to the text I want to change. Having started learning web design in 1994, this is a habit I must practice, practice, practice. And no more <center>, but when I get used to not using it, I'll wonder why I liked the tag so much.

Frames have been dropped in HTML5, and that's worth celebrating. Frames are bad for SEO. Frames are bad for the accessibility of your webpages for blind people. (For that reason, I've got to always use the alt attribute with the <img> tag, too.) And, have you ever visited an external link in a website that uses frames, and got stuck in their frames?

And the new <video>, <audio> and <canvas> tags are very exciting. With <video> and <audio>, there's a handy way to integrate multimedia in your webpages without using Flash. Think of how many people are surfing the web on their iPads and iPhones, unfortunately. (See my post, Don't get an iPad, wait for RIM's PlayBook.) And with the <canvas> tag, well, the sky's the limit!

Upcoming posts in my Project HTML5 series will be about CSS3 and how I'm optimized my sites, kimcrawley.com, and buchalterconsulting.ca, for HTML5.

kimcrawley.com

twitter.com/kim_crawley

KimCrawley.com- Bright Ideas

Follow this blog with bloglovin

Wednesday, October 6, 2010

Getting ready for HTML5- no more delays!

Monday, October 4, 2010

Getting ready for HTML5- Which tags have been dropped?