I’ve been seeing a lot of mentions of Hype, a new web authoring tool that focuses on CSS animations and transforms, or as they call it, HTML5. It sounded interesting; anything that makes the creation of some of the more modern CSS effects like transforms easier has my attention. They’re not that hard to create by hand, but I don’t create Postscript files by hand any more the way I did in the late 1980s, so it stands to reason that there will eventually be tools to make this sort of thing easier that work well. But before plunking down my thirty bucks, I did a little research into how the tool actually does what it does, looking at the example sites and reading the documentation. I’m way too picky about my code to trust a tool like this without looking under the hood first.
I watched the tutorials on the site, and it appears to have a well thought out interface. If you’ve used timeline-based animations in Flash, this won’t look like it’s from another planet. Beyond that, since I haven’t actually used the software, it’s hard to say, but my first impression on that front is positive.
Leaving aside the question of whether a plague of gratiuitous CSS animation is really an improvement on the long-standing plague of gratuitous Flash animations, how does the code the tool generates stand up?
Not well.
Looking at the examples on the product’s web site, we find that the typical source code of a Hype-generated site looks something like this:
<div id="hoffmannaustin_hype_container" style="position:relative;overflow:hidden; width:1024px;height:690px;">
<script type="text/javascript" src="http://static.tumultco.com/hype/gallery/↵ HoffmannAustin/HoffmannAustin_Resources/↵ hoffmannaustin_hype_generated_script.js?74512"></script>
</div>
There is almost no HTML5 in your HTML5 document. All of the content you’ve so laboriously animated? That lives in a Javascript created by the tool. When Teh Googlebot comes to visit, it will see the following on a Hype-generated web site:
In other words, you won’t show up in Google at all. Further, if you need to update your site and you’re not near the computer where you created your Hype site, you’re not going to be able to edit the code by hand to fix that glaring typo that one of your customers called out to you on the trade show floor. Not that you would want to; the HTML that they’re generating inside that Javascript is a mess, a mix of divs, spans, and (OMG!) font tags, with nary a header tag in sight. So even if they were generating actual HTML, you probably wouldn’t want to use it, because Google would still find it a mess to parse. Years of research into search engine optimization are completely ignored here.
All that CSS that’s making it easier to update your site comprehensively? It’s all inline, totally defeating the purpose of CSS. If you want to incorporate some of the effects generated by Hype into your existing site, good luck. Hype appears to want to own your whole site.
But hey, you’ll get some whizzy effects, particularly in modern browsers.
I’m not averse to whizzy effects. And I figure any technological advance like this is going to be abused initially, just as early desktop publishers used way too many fonts at first, and as Flash developers made long, large, pointless splash screen animations and then tried to put a band-aid on their creations with the addition of the Skip Intro link. It’s part of figuring out what works, and that’s fine. Go wild. Make art. But not with Hype. Not if you’re trying to actually accomplish something with your web site.
Color me unimpressed.
Tags: hype
Posted at 10:36 AM
Please note: your e-mail address is required, but will not be posted on the site. I reserve the right to delete any inappropriate posts.
This site is copyright © 2002-2012, Ralph Brandi.