I just discovered a great tool for making super slick HTML 5 sites and wanted to share it with you. It enables you to make these beautifully animated sites easily and without having to learn any of the complex CSS and javascript usually required.

What is HTML 5?

(skip this if you already know what it is;-)

For those who don’t know what HTML 5 five is, a basic explanation is that it is a type of website coding that allows many cool features such as animation of elements on a page. To give you a little history, before HTML 5 was available, the only option available to designers was animated Gif images like you see on terrible myspace pages and Flash which requires extra software to view and typically takes some time to load and uses a lot of computer thinking power to view.

HTML 5 is such a new technology that unless you are running the latest browser, you may not be able to see it in action. If you would like to see some examples of what HTML 5 can do, check out Apple’s HTML 5 showcase here.

Easy to Use HTML 5 Tool

As I said above, coding websites for HTML 5 takes some extra knowledge beyond normal website programing. You need to know some javascript and also learn some new CSS classes and commands. For most people who don’t do web design as a full time profession, and even for some who do, this is one of those things that may not be worth the extra time and effort just yet.

For those of us who have been looking for a great tool to help ease the learning/implementation curve, it is finally here! Developed for Mac by two previous Apple Engineers, Hype is the HTML5 creation app that allows you to make animations and interactive content viewable on on desktops, smartphones and iPads with no coding required.

I wanted to see how the software worked and if it would be as easy as it looks like they have made it in the videos on the Hype site. I spent about 10 minutes to put together a quick demo and was really impressed. It was so easy to make a very slick looking animated intro for my logo which, just as they promised, can be viewed in any modern browser. You can check out my test run here (just click refresh to view again).

I did this without writing a single line of code! The way the keyframes work, is one keyframe is a starting point and the other is and ending point, so if you want an object to move across the screen, you set one key frame on one side of the screen and then a couple seconds later, set the other key frame and move the object to it’s final position. Hype takes care of the rest and codes it all up nicely for you.

My initial impression is that this will be a great tool for any web designer out there who is looking for an easy way to put together HTML 5 animations for clients or themselves. Check out the example page here to see what others have done.

Hype is currently available on the Mac App store for an introductory price of $29.99 and should be able to pay for itself many times over with just a single project.

Have you tried it out yet? I’d love to hear what you think about it in the comments.