Nunchucks in your face Firefox! Nunchucks from above Apple! With the launch of my new HTML5 site KenMorico.com I felt I had to really bring out some skills to create the kind of site I wanted… a creative, HTML5, cross-platform site with search engine optimization (SEO). It felt like 2000 all over again. Some browser features work here, some work there, and nothing consistent. Throw in the mix iPhone, iPad, and other mobile devices and your head starts spinning faster than a BP CEO.
HTML5 – Smart Choice for the Long Haul, Not the Short
Since Web sites take a long time to build, but stay live for years, I decided it was worth the effort to make it work. HTML5 is the future. A few challenges with my site: getting video to play onload, loop, and get manipulated via javascript commands.
Did you know that Firefox supports the HTML5 video tag, but not the loop attribute? So you can’t just make videos loop. You need to write out code to make it unload and load videos. Safari and other browsers support this. But not this so-called “advanced” browser.
What About Apple?
What about Apple products? iPhones don’t support video on page load. Only full-screen video when a user clicks on a video image. Of course, Apple says this is by design, because of bandwidth issues on the phone. With AT&T’s new stingy data plans, this is understandable. iPad supports video on load, but when I was in line for the new iPhone 4 a person loaded my site and the video displayed but wouldn’t play. I suppose it was because he was on a 3G connection.
HTML5 video isn’t all the same either. Apple and Microsoft browsers use H.264 encoded videos. Firefox uses OGG encoded videos. That means for every video you post, you need to encode two videos to make sure it reaches the widest audience.
Just when you thought iPhone targeting was simple, the new iPhone 4 has quadruple the resolution of the original iPhone. Targeting a browser by resolution gets fuzzy when a mobile display has the capabilities approaching a desktop display. Viewport meta tags get confusing and stylesheet setup complex.
In all, the new site was challenging, and I continue to tweak it for mobile displays, but worth the effort. I feel like an HTML5 hero. My nunchucks are prepped for more HTML5 projects.
[UPDATE 5/7/2011: many popular Web plugins like the JWPlayer video player and the Blubrry PodPress now support HTML5 fallbacks for browsers (or flash fallbacks if you choose). Research your web plugins and software to see if there is an update.]
Leave a Reply