Archive | HTML5 Animation

RSS feed for this section

Reduce the File Size of Your Animated Gifs Using HTML5 Video

Gfycat logo design - A gif and HTML5 video hosting service.

I built a lot of animated gifs for clients when I first started working online. The file size of my gifs could get rather large even after optimizing them in Fireworks so I would sometimes need to make the same thing in Flash. Flash was good for reducing the file size of my gif animations but using it opened up a whole host of other problems. So when I came across a new website called Gfycat that claimed to be able to reduce the file size of an animated gif by turing it into a HTML5 video, I had to try it.

You should see what I created the other day as an animated gif or HTML5 video. If only my previous paragraph is showing, please refresh the page. If you see an animated countdown that never ends, please refresh the page. If you see floaters, please visit your eye doctor and then refresh the page.

I embedded my HTML5 Blog animation using the Gfycat embed feature which is still in the early alpha stage. There are some hiccups using the embed feature. The biggest one I found was that on mobile devices the gif will show instead of the HTML5 video. If my embedded animation is not working for you, please visit it on the Gfycat website here: http://gfycat.com/YoungDisfiguredBonobo. That link was randomly generated. Yes, “YoungDisfiguredBonobo” is not my handy work. Gfycat URLs consist of this structure: AdjectiveAdjectiveAnimal. I didn’t know what a bonobo was so when I first saw it I thought the link was “YoungDisfiguredBono”. It gave me a chuckle.

Funny HTML5 Video Names automatically generated by Gfycat

Gfycat did do a good job at reducing the size of the animated gifs I uploaded. The HTML5 Blog animation I made went from a size of 3.2 MB as an animated gif to 917 KB as an HTML5 video. Results will vary. There is an example on the Gfycat website of a 4.5 MB animated gif that when optimized into an HTML5 video, the size went to a spectacular 286 KB. Continue Reading →

Best HTML5 Business Website

Screenshot of an HTML5 Business Website

I had a web design client a few years ago who fell in love with a Flash website and he wanted something similar for his business. Sure, the website was attractive but I knew it wasn’t practical for what he wanted to achieve. Search engines hated Flash and from previous experience, I had learned that if you build it, they won’t come. I believe and still do that a business website built entirely in Flash will fail, which is rather obvious now but wasn’t back then. Fast forward to 2012 and now the Flash website my client wanted could be created and widely supported using HTML5 technologies. The HTML5 website would be search engine friendly, require less bandwidth, load fast, work on mobile devices like the iPad, and not require the user to download a plugin in order to see the site. Continue Reading →

Flash is Dead


This “Flash is Dead” animation was made with the new HTML5 design software called Adobe Edge. Yes, Adobe is indirectly assisting with the death of one of their products, Flash. It seems like everyday HTML5 gets closer to eliminating the need for Flash.

This HTML5 animation is just a brief glimpse of what the preview version of Adobe Edge can do. Continue Reading →