I'm a Worldwide Developer Evangelist for Adobe. My job basically entails me traveling the world and talking about the developer tools and technologies that Adobe has to offer or that we support. I'm also the author of Driving Technical Change. It's about convinving reluctant co-workers to adopt new tools and techniques. Terrence is a DZone MVB and is not an employee of DZone and has posted 40 posts at DZone. You can read more from them at their website. View Full User Profile

HTML5, Browser Lab, Typekit and New Design

07.19.2011
| 7555 views |
  • submit to reddit

I just got done with a site redesign. I had a few goals:

  • Fool around with new semantic HTML 5 elements
  • Use web fonts for typography
  • Do some jQuery for interactivity
  • Do a proper mobile version

Semantic HTML5
It seems like such a geeky little thing, writing header instead of div id="header", but I was shocked at the improvement it made. Much fewer divs made the HTML code so much easier to read, and so much easier to detect an improperly closed div.

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.

References
Published at DZone with permission of Terrence Ryan, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Mitch Pronschinske replied on Wed, 2011/07/20 - 12:35pm

Follow up post By Terry Ryan today:

"A few months back I did a post about rewriting my site with HTML5. It just got reposted by DZone. It picked up a few reads including one from the Product Manger for BrowserLab, Bruce Bowman.

He took me to task for claiming that you had to be a CS5 customer to use BrowserLab. To quote Bruce:

While it is true that when registering CS5 apps, you are given an opportunity to also get a CS Live account, which includes BrowserLab, it is not required to buy a CS application - anyone can register for a free BrowserLab account, even if they don't own any Adobe products. All that is required is an AdobeID. They just need to go to http://browserlab.adobe.com and follow the prompts to sign up.

Awesome, BrowserLab is free. Go forth and correct for the fact that browser companies love features and hate developers!"

Sirikant Noori replied on Fri, 2012/03/30 - 2:09pm

Very informative post. Do you know how much should I take HTML5 into consideration while my company's website is being redesigned? I don't really understand the ins and outs of it, but will it make our site defunct before long, or will we be able to manage and adjust?

Java Exam

Carla Brian replied on Mon, 2012/07/09 - 6:42pm

Along the way, we’ll see that HTML5 semantics are carefully designed to extend the current capabilities of HTML, while always enabling users of older browsers to access the content. - Mercy Ministries

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.