So you want to begin #HTML5 Animation?

A while ago we produced the HTML5 Cheat sheets that went down a treat amongst pro web developers. But what about those of us who are completely new to HTML5 and want to take advantage of it’s powerful features without the in depth coding knowledge?

I researched and put together a list of the top 5 Animation suites to get you a head start on creating some punchy graphics for your web pages.

1./ Purple – $20 Mac OSX App for HTML5  iPhone, iPad and web animationsPurple HTML5 Animator

Hmmm, this was the cheapest of all the apps, looks beautifully built. But it has strong limitations in that it’s only for Mac users and that there are no mouse over or button animation features. Another nasty hiccup was browsing their demo site, I came across a browser incompatablity issue and graphics wouldn’t display. The animation demos looked nice on my iPhone but didn’t scale and couldn’t interact so there is still some room for improvement.

“SAY WHAT!@#%^!? – I thought we were supposed to be moving away from Flash and all it’s hiccups!?”

Yes – currently unless your browser supports ‘WebKit’ Extensions, you can’t view the work you put all that effort into. Purple say that in the next update of Firefox 5, this compatibility issue will be resolved, and therefore their HTML5 WebKit animations will be supported.

2./ Tumult Hype – $50

The graphics user interface of this suite seems particularly well thought out. You have the full options of animations given to you whether you are trying to create mouse-over animation etc. I Love this suite and at 50 Squids I think they hit  great affordable pricepoint with me. Now if only I had a mac. Hype is only available for Mac and they have no plans to produce a version for windows.

3./ Hippo – $30Hippo HTML5 Animator

They have gone to the effort of creating some really easy to understand tutorials for their software suite. The pricepoint is a really attractive low $30, matched only by the fact the tool feels a little clunky and buggy at times. This seems to match the windows platform hiccups as a PC user I have steadily gotten used to. The demos in their gallery show a great range of capability with mouse-over animation and button functions recently added. The Developers behind this tool are active which gives me great confidence there is more to come with this animation suite, and their support team seem really approachable. Definately a thumbs up for the beginner with HTML5, including anyone fearful of animation and timelines.

4./ Adobe Edge – $PREVIEWAdobe Edge HTML5

Adobe Edge is in preview beta release so grab it while you can. I was quick to end up being disappointed, just like Flash was known for it’s user ‘unfriendly’ workflow. Adobe Edge starts off appearing to have a more intuitive layout, but seems to be lacking many editing tools. I’m sure this is just a limitation of using the Beta release, but I’m sorely limited to be able to create new concepts when I want to trace different shaped paths, or cropping windows.

5./ Sencha Animator – $199Sencha HTML5 Animation

Wow this suite has it all, but the beginner can be easily scared off or confused at the layout of the purchase pages. Sencha has been around the longest and probably has the most stable editing suite out there. There is an amazing array of tools coding window, and even a nicely laid out support forum. But where this is let down is that it’s currently the most expensive on the market, and as a beginner sure enough it’s the lowest priced software Sencha is offering, but look down the list or at the sidebars and there’s a lot of cross navigating to developer architect tools, higher priced packages, amazing training courses in different softwares, and you suddenly become bewildered at your first attempt with coding HTML5 to think; ‘maybe you should get used to a simpler tool before investing 200 bucks?’

Summary of HTML5 Animation tools

Overall I think Tumult Hype is the winner for me, because of it’s GUI useability and function range. So much so I might have to go out and purchase a Mac just to get on this editing platform. In the mean time Hippo Animator will do as long as I can cope with it’s buggyness. I must have crashed the software 3 times in one session already! :(’s New Infographic Tool

It’s no secret that infographics have become a big craze for the past couple of years. More and more people want visual presentations of complex information that are enjoyable and easy to digest.

To accommodate this thirst for fun information, has developed a new platform that allows you to effortlessly create your own data visualizations. You simply browse a gallery of templates and themes, and select one to customize and tweak. Not only is it designed for you, but it draws in data such as demographics and statistics for you from Facebook and Twitter too.

Because infographics are becoming more valuable and desirable, prices for them are going up as well, so this tool ends up being a great alternative for those who need a quick and easy graphic. It’s a free service to everyone, and companies can even connect with any of the designers who contribute to the website. Premium accounts, which they charge for, are also available for those who wish to have something a lot more specific designed for them. They simply reach out to one of the designers to provide that special attention. will be adding more datasets to pull from in the future, so there will be no need to only rely on Facebook and Twitter. There will also be a lot more modifiable themes and graphics to choose from in the next few months.

SMO Periodic Table and App Map

Web hosting is our specialty, but we also like to share useful information with our community of web business owners that want to optimize their promotion and web traffic acquired from Social Media.

We have selected some of the top tools for Social Media Optimization [SMO] and configured these apps into 2 visual solutions for describing or selecting them. The SMO Periodic Table and App Map can be easily printed or posted on your website using the provided HTML code.

SMO Periodic Table
Click to Zoom

Right Click to see full image

Prints on:

  • Letter (8.5″ x 11″)
  • US B (11″ x 17″)
  • Super B (13″ x 19″)


Google Reverse Image Search

Here is a much underutilized tool for web sleuths tracking down the original owner behind an image.

  • To determine fake profiles
  • To find out about copyright theft
  • To check against image rights
  • Who else is selling your product? Stealing your idea?

Say you were just tweeted at by what you suspect is an automated profile, (what is known as a bot). Here is a useful way to determine if the name behind that image really is that person.

Take the image URL, or copy it and upload it here:

Now you should get a listing of locations wherever Google found the same image or even it’s derivatives.

Watch the following video for an example of checking whether a profile is using someone else’s image, and check to see who is using yours!

Cool Tool For Illustrating your Blog Posts

Bloggers out there! Ever struggled to find the right imagery to accompany your articles? I found a cool web browser based sketch pad called OdoSketch.

It’s intuitively simple to use; minimal tools, and so with hardly anything to complicate the task, I compiled my sketch using only my laptop touch pad.

Graphics designers will be pleased to see a palette of beautiful neutral colors, rendered onto a textured canvas to make it look better than your own real-life scribbles on paper.

So – now whenever you’re stuck with what to illustrate your writing with, you can create something online and embed it with the provided embed codes. It even renders a live, fast forward version of your sketching, to bring it to life for a few seconds.

I’ve found another use for it, to use my sketches as title cards along with any other future video tutorials I do.

Track Your Social Media

social media tracker

Now you can assess who is arriving to your landing pages via the links you post out in the social ether, by categorizing them with InMotion Hosting’s QuickTagger.

Simply categorize where you want to publicise your links, and QuickTagger will do all the coding for you and spit out an extended link that google will interpret and tally up visitors for you in Google Analytics.

It also generates a Shortened Link from tweetburner – where if you have a free account set up there, will give you your audience location geo-demographics.

Handy stuff if you want to make sure you are really engaging your audience.

Watch our video on how to start using QuickTagger:


Click here to go to our QuickTagger page.

Animate Your Google+ Profile Page

Advanced Photoshop Animation Techniques

InMotion Hosting Google Plus Page

Download your Photoshop Template Here:

Google+ Brand Pages are going to be the new focus for marketers as they realize that this is part of the system that Google is weaving together to measure the relevance of online interactions between a brand and its audience.  In an effort just to make Google+ Brand Pages really pop and relay their message, I found a cool way to stuff more punch into the headline banner – by animating your Brand’s message.
Continue reading “Animate Your Google+ Profile Page”