Tag Archives: animation

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 →

HTML5 unleashed: EWC Presenter is one app for all your visual content needs

Banner Presenter

EWC Presenter is a new HTML5 based web application that allows everyone to easily create content in HTML5; we’re talking about presentations, infographics, banner ads, animations and virtually all other visual content in between.

But before getting into the nuts and bolts of this app let’s remember the days not too long ago when you would visit a site and your browser would warn you to download a later version of Flash or Silverlight (Microsoft’ answer to Flash). For content publishers (ex. designers and developers would have to spend extra time to adjust the same content for number of browsers, displays and devices because content had to be optimized for different flavors of various browsers in particular Internet Explorer?). Those days are over thanks to HTML5, but the challenge to utilize HTML5 has been reserved for advanced level designers and developers; at least until now.

A quick look back: not so easy to use, or is it?
Unless you have been completely disconnected from new trends on the internet, by now you know that HTML5 is quickly becoming the standard for creating all types of content that is supported by virtually any device (web, tablet and smart phones) and any platform be it Mac or Windows. This is a huge victory for both consumers and content creators who have been waiting a long time for this level of standardization.

HTML5 is an extension of HTML, the code that is the foundation of web page code and and combined with CSS3 (3rd iteration of Cascading Style Sheets) it serves as the fabric and glue that hold your content together to form a web page. You may not know HTML code, but you stare at tens if not hundreds of pages per day rendered in HTML including this one.

Most of us just don’t have the time or experience to have to deal with code and would rather just visually form our content the same way we consume it. This is one of a few reasons why in the past Flash became so popular among designers. Designers don’t like to code; they are visual beings and Flash was a tool that virtually eliminated the need to code and allowed creating interactive content more easier than ever before. 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 →