HTML5, Browser Lab, Typekit and New Design

The danger here is that much like the “Tables are evil, use css instead of tables in all cases” stupidity that happened in the shift from tables to css, there will be a cry of “divs are evil, use semantic tags” in the ramp up to HTML5 sites. I really wish we could trick the irrationally passionate to scream “Not using the correct element for the correct job is evil, use the correct element for the correct job.” But I guess that doesn’t flow as well.

The one issue I ran into was the utter failure of all versions of IE with HMTL 5. I couldn’t get CSS styles for any of my header, footer, etc. tags to render. IE only accounts for 20% of my readership – enough that I can’t ignore, but not enough to build a separate site for. Luckily there is a technique called the HTML5 Shiv that gets it to work.

Web Fonts
Web fonts are simply awesome. After 15 years of working with the web, it’s a revelation to have a wider range of font selection at the ready. (I’m aware of both font stacks and SIFR, but this kicks both of their asses.)

Being an Adobean, I wanted to use an Adobe font for the site. Typekit is our exclusive partner for Adobe fonts on the web. It was awesomely easy to set up and get working.

The one problem I ran into occurred on Firefox. Every other browser rendered the fonts beautifully; on Firefox, plain san serif fonts flashed on the screen for a second. Firefox makes up close to half of my traffic, so I had to get that fixed. This is a known issue with Typekit and Firefox, and there is a solution.

jQuery and Mobile design
Other things came up that forced me to speed up the schedule for getting this done. I skipped a lot of interactivity, because quite frankly, it’s a personal site with a blog, not an interactive app. They would have been nice, but not necessary. I’ll be revisiting this as I get time to do things.

I checked the site on a few of my mobile devices. While not optimized for mobile, it works pretty well, so it’s good enough for now. I really need to do this, but let’s face it, no one is desperately reading my site to find out something on the run. My stats just don’t bear that out – today. But I will address this soon.

BrowserLab
It took me a week to design, markup, test, and implement the new site. (Not working on it full time.) I could never have turned it around so fast without BrowserLab. BrowserLab allows you to test the site on multiple OSes and browsers in one interface. You can compare multiples in one shot, and even overlay the sites to detect differences. It made extremely short work of cross browser testing and integration.

You get free access to BrowserLab by registering any CS5 application. If you have CS5, do it; it frickin’ rocks.

Conclusions
It’s been about two years since I altered my site. In that time it’s shocking how much has changed,
and how much has stayed the same. We have new techniques, new browsers, new options galore. IE is still the dominant browser and it still sucks for developers. I spent most of my time designing the site, but I spent most of my hair pulling time working out the cross browser crap. Which seems par for the course from two years ago.

With four major players in the browser space along with prominent smaller ones, I don’t see this getting better anytime soon. Unless of course WebKit based browsers just crush everyone else. But the stats don’t bear that out yet. (Although, if mobile growth projections are true, we might see that in the next few years.)

I’ll point out that one of the major tools that helped me with cross browser issues was BrowserLab. I got better typography through an Adobe font collection at Typekit, and I used Adobe tools to do all of the work on the site. For all of the HTML 5 FUD thrown at Adobe, I have to say, I think we’ll be just fine.