It’s the rage on the internet and just one in a long line of buzzwords from the internet: HTML5. Many of my technically inclined followers know of HTML5. Even my followers who have been on the Internet in the past few months may have heard of it. The promises it makes are wild and varied: spectacular video, ground-breaking graphics, awesome apps, and astounding audio. But what does HTML5 mean, and why is it good? And more importantly, how is Zombie Zen using it?

What is it?

To understand the new craze, one must understand a bit of web history. HTML is the language of the internet—the set of symbols that tells your browser what data a website has. As the years progressed, HTML became a little bloated and had too much information about how to display this information, so another language sprung up: CSS. CSS only delivers style to pages. It makes designers jobs easier because one change in CSS can propagate to many pages. But HTML still had a problem, and CSS couldn’t help that.

HTML was still centered around the idea of a page. When you get down to it, HTML is designed very much like a very crude word processor. Naturally, people wanted to do something more useful with the web so they added wondrous technologies like JavaScript, Flash, XHR, and many other cryptically named gizmos. Each one of these things was a bit browser specific, and many developers kept writing the same things over and over. As a result, a group of companies formed the WHATWG and started a new version of HTML.

What does it do?

In short, HTML5 gives:

• Standard video
• Real browser-native audio
• Offline storage
• New form widgets
• More standardized data formats

Another standard that has cropped up at about the same time is CSS3, which gives some interesting features like rounded corners, animations, and text shadows.

Together, these two technologies make it easy for any web designer to create amazing effects in the new generation of browsers with little effort. Many sites have sprung up just to demonstrate the power, and one example is Zombie Zen.

Case Study: Zombie Zen

Zombie Zen was is in need of a drastic redesign; the scarlet on gray that I had sketched very late at night when I had first uploaded to Zombie Zen was dismal. I finally was fed up with it and decided that Zombie Zen needed a face lift. I also wanted to leverage the many benefits that HTML5 had brought forth, but without alienating my readers. It was a tall order. However, to my delight, I saw that many of you used Chrome, Firefox, Safari, and even a few with IE8. These standards-based browsers were exactly what could handle these new additions. I set off to work.

One of the big features for me was being able to mark up the header, footer, and navigation of the page with HTML5 elements specifically for that purpose. It makes it much easier to debug HTML problems, and it also makes it more accessible to users with disabilities. Having semantic information makes it much easier for programs, users, and developers to get access to information.

I also leveraged CSS3 to obtain some nice eye candy. For instance, each one of the buttons on the sidebar is created using the same image: a glass texture image. The rest is created using rounded corners, borders, and text shadows. The links at the top of the page have a slight gray box that appear behind them when you hover your mouse over them. If you have a WebKit browser (i.e. Safari, Chrome, or iPhone OS), you’ll also notice that they gracefully fade in. The great advantage to CSS is that if your browser doesn’t support a feature, it doesn’t break the site.

For my final touch, I also added a couple fun bits to the website. Every time you go to a different page on Zombie Zen, the footer will display a fun quote. The new logo I did in an afternoon with Photoshop. Also, page load times are significantly faster due to some nifty CSS optimizations.

Conclusion

HTML5 and CSS3 certainly changed the way I thought about designing a website, and I’m not even using the most revolutionary aspects of it yet. However, keeping up with standards and using the latest technology is a practice that helps the web and gives people a better experience when using the web.