HTML5 Online Tools & Resources

Not known to many web designers, there are some really good online tools & resources which web designers should definitely take advantage of to help create those new innovative designs and stay ahead of the field! We have collected 10 of the best Online HTML 5 Tools & Resources for Web Designers. Enjoy!

Compressing images is all the rage these days and putting all your images in a “sprite” will both increase the speed of your image transitions and loading times. This Online Sprite Box Tool can help you design your images into sprites using this awesome jQuery, CSS3 and HTML5 tool.

This is no ordinary sketch tool, it uses the power of HTML Canvas to create 3D drawing. To rotate the canvas in 3D, you need to hold down SPACE and then DRAG horizontally with your cursor. You can also make the drawing vibrate and draw in dashed lines too. Pretty Cool.

As a designer, choosing a decent font can be a tough process! Use this awesome font bookmark to instantly view any web page in a new font without changing any HTML or CSS! Harness the power of HTML5 and @font-face by dragging the font.ttf files into the top toolbar and they will appear in a list for quick view. There are hundreds of free websites just type in “Free Fonts” into Google.

Velocity sketch is a unique online HTML5 canvas drawing tool which you can create strange looking web like things. I did a quick one (in the screenshot) but I’m sure you web designers can be creative with such a tool and create something quite awesome.

This online tool coule be pretty useful for web designers when it comes to creating page and header backgrounds or even heading backgrounds. I uses the power of HTML canvas to provide you with the pattern your looking for in seconds! It has heaps of options and is really easy to use! Great stuff.

With Online XRay Tool can quickly view details of page elements on any webpage at the click of a button! Simply drag the bookmarklet on their website into your bookmarks, visit the webpage you want to analyse, click Xray bookmar then click any element on the page. It also can handle HTML5 elements such as canvas and provide you with the design information you need.

I think with the introduction of the the audio tag in HTML5 we will start seeing more and more websites utilize the power of audio. This is an online audio maker tool which can help introduce you to the new audio features HTML5 has to offer. There is also a online HTML5 video maker tool which does a similar thing.

A HTML5 powered web-based animation suite (that has evolved from it’s Flash IDE alternative). It is now a cross-platform/cross-format animation tool that works both online and offline! You’ll need to have Google Chrome installed, see a quick video tutorial to get you started. Great tool for HTML5 animation beginners.

About the Author

Sam Deering is a professional JavaScript & jQuery developer and founder of a popular jQuery Blog. He is currently working as a Web Developer for Flight Centre Australia.

Sam

A misconception or presumption I think not. I see your already using HTML5 so you should already know its powers. For every 1 person that thinks Flash will be around in a couple of years, there are 99 that think it “will be dead”. A few things to get you started:

– Flash doesn’t work well with Mac OSX, causing the CPU to work much harder than it needs to when running flash applications. Main reason why flash isn’t good for laptops or mobile devices.
– Flash doesn’t work with touch screen compatibility.
– YouTube now has a HTML5 Beta running, so you can choose to watch most videos in HTML5 instead of flash.
– You won’t get all those nasty “You don’t have Flash installed messages” anymore.

Steve

kat

October 5, 2011

Overall this article is a great introduction to new tools for HTML5 but some editorial unsupported by facts slipped in there.

Flash doesn’t work with touch screen compatibility or Mac OSX (and I suppose you also meant iOS there).?I’ll be sure to let my clients know so they can kill all the iPad apps we’ve been developing in Flash. I wonder why they paid for the all the touch screen applications I’ve worked on in the past 4+ years.

But in all seriousness, I work in a team that includes HTML/HTML5/PHP/Javascript/CSS/CSS3/JQuery and Flash developers. Nobody I work with who actually builds thinks Flash is going to be dead.

HTML5 is a great advance for site-building, but it is only one sector of the interactive world.

Bilal Irfan

greta herlin

b0ggy

October 5, 2011

Sam, I have some questions for you:
– are you a programmer?
– if the answer on the first question is yes: do you have experience in low-level programming language or the most advanced “programming language” (actually is a script language) that you know is JavaScript?

If you want to make something simple in Flash, an animation, you don’t need to have any OOP or programming knowledge you can just drag & drop the things around in the Flash Professional. This isn’t the power of Flash and will not be the power of HTML5, jQuery or any animation tool that appearing on the web.

It will take another decade for the softwares to be able to generate a code that will have the same quality with the ones made by an educated human mind.

I don’t understand why you guys don’t stop to compare the Flash with HTML 5. There are different technologies! This article’s title is: 10 Online HTML5 Tools For Web Designers. Why you don’t let us know what are that 10 good tools without writing bad things about Flash?

Joseph

Diseño web Argentina – Ariel EAWEBAGENCY.com

Robert Lang

November 25, 2011

This HTML5 tool is also cool: http://shapecatcher.com
You can draw something and it pattern matches Unicode characters for you. For example I use it whenever I need a pretty arrow in my design, i.e. I draw it on that site and I can use the characters in Illustrator. Also good for symbols in logos.

Dheeraj Bansal

Jack Stanley

December 29, 2011

You definitely should check this out:

http://www.mugeda.com

===
Mugeda is a cloud based HTML5 animation platform, where you can create, share, and publish organic HTML5 animation contents, all in your browser, without any download or installation. The created animation content can be used in a wide range of applications like ads, games, tutorials, cartoons, and can be viewed on any devices including PC, smartphone, and tablets.