Hype for webdesign? (Complete Website)

Hi, I just tested Hype and its a great tool!
However, is there a reason, why not to use hype for a complete website project?
SEO could be one reason, I found but is there something else, I´m not aware of?

Thank you and best wishes!

Many have used Hype for complete websites and there are a few in our Animation gallery, but you may find that Hype is missing some features depending on what you’re trying to do. What kind of site are you hoping to build?

Hype is really helpful for Web Designs. It provides a rich set of tools for styling, but sometimes you need to get hands-on. Every element’s inner HTML is only a couple clicks away and all of your changes are rendered on the fly, giving a live preview as you edit. The integrated JavaScript editor lets you write custom functions triggered by user actions. The Hype JavaScript API can manipulate the scenes from inside or outside of the embedded Hype content.

I use web apps, first Freeway, now Rapid Weaver, and testing Sparkle which has a lot of similarity to Pages 09 in its interface and he plans on many new web app features being added.

I create all the cool stuff in Hype, and have Sparkle for the other features and as a container for the Hype items. Have to admit that I need to learn Javascript.

in my experience is better to join multiple techniques.

The faster way to build a responsive site is by RapidWeaver ( also for beginners) and then, via iframe you can embed any hype element, also in the interface and not only in the content.

the responsive behaviour depend on the theme but in RW you can find a lot of profesional themes.

Dear Michelangelo
I´ve been trying to use HYPE in my RapidWeaver project; I don´t know if you can help me but the thing is, I can see the animation with in RW and also in safari in preview mode; this is using the technique found here (https://www.dropbox.com/s/3i7eto8y4qxyiph/RapidWeaver_Hype%20Tutorial%202.zip?dl=0) the problem is when I upload my page to my website, the animation won´t work, I just find the page with an empty space. I wonder if I need additional coding or something. I haven´t tried your technique as I want to use Stacks and not frames.
Just in case you know.
Fernando Biancardi

So I’m currently trying to use Hype with Sparkles as well. There are some features that don’t exist yet in Sparkles so I’m trying to embed the html from Hype onto the pages in Sparkles. However I can’t seem to get the animations from Hype to display. Since you’re the first person I’ve seen mention using the two together I was wondering if you had any suggestions.

Here’s a very late response:

Key issues are load times and Google rankings. One of the issues is that the content that is “above the fold” (using the newspaper term) must load very quickly or you’ll take a rankings hit. This means that all the content that will fit in a browser window when first landing on a page should be up within a second or two. The closer to instantaneous the better. When figuring out where the fold is, you have to make allowances for people with high resolution monitors and still have room to spare.

All of your cool, resource-heavy content needs to be below the fold and loading in the background while the visitor is taking in the above-the-fold content.

Another issue is with menus. A drop-down menu requires a much larger live area than the menu bar itself so you may have to create separate drop-downs for each main menu item and have them jump in and out of the window so you don’t have a huge area that blocks interaction with the content below the menu bar.

The best solution for me has been to create the shell of the site using a dedicated page design app, to have the Hype content on separate layers and to keep the resource-heavy stuff down the page, and to do the menus in the web design app. When creating a vertically scrolling page, I prefer to create an inline layout that alternates vertically between blocks of Hype content and blocks of content designed in the web app. Sometimes I will have a tiny Hype element integrated into the block of web app content (such as a small slide show of detail photos or a cool series of animated button-sized Hype animations with the button actions set by the web app.

2 Likes

Trey Yancy has covered it better than I could at this point.

Am still just testing various things with Sparkle, it does have an odd layout and distribution of the various controls throughout the menus, there are some decent youtube tutorials on it. I am not a fan of the minimalism nonsense that Apple seems to have spawned and Sparkle has bought into the silliness, but they are getting the gaps filled in.

Duncan Wilcox who seems to be their tech support guy who answers the tech inquiries, is quick and to the point, he tends to boil the answer down to what is needed. Quick and to the point is what is needed in app documentation and he does a good job of distilling down the verbiage.

Send him a copy of your Sparkle file.

Thanks will do!

I’m dealing with this issue myself!

I found a work around for the drop down menu, and it’s similar to what you said. I am however facing load time issues, and I’m pretty certain it’s because everything loads together. Is there no way to pause certain documents from downloading until specified ones have finished?

I’m a novice to web design, so a lot of that last paragraph went over my head.

Break it into scenes. Have the first scene very light weight – perhaps transparent with a few objects in the Hype animation. Place the Hype animation on a layer floating on top of an image or fill placed by the web app.* Now use the Inspector to turn off the preloading for all items not in scene one. This will give you a very fast load. When scene one jumps to scene two, that is when the loading takes place.

Note that the “scene” mindset does not have to represent a major content change like slides in a Power Point. You can have multiple cumulative elements of the same logical scene, each of which is actually a different scene that loads / plays in sequence just as if they were all animated in one single scene. When each new group of elements load, the next scene is automatically triggered. This way you could conceivably have the entire cast of the Ten Commandments piling onto the screen, but as the loading time of the first scene is all that matters to Google, the other elements can be set to load one at a time while retaining the elements of the previous scene.

  • This can be very handy. For example, I have a very gentle stucco wall image with some nice shifts in tone and color. I use this in the web app for a standard cover background for all my Hype-created product and features animations. As the background is managed by the web app, in only has to load once. As Hype does not yet offer a site-wide combined resource folder, if such a background placed in each Hype animation, it would have to load it over and over again for each instance.
2 Likes