If you haven’t heard, HTML5 is taking the web by storm! It is currently being enhanced by experts to provide us Web Designers & Developers with awesome new revolutionary web page features!
HTML5 Background Information
For those of you who are new to HTML5, here is some quick background information to get you up to speed.
- HTML5 is the new language for presenting content on the Internet (at the time of writing this article it is still in beta but soon to be released in 2012).
- HTML5 brings new features making it easy to incorporate video, audio, fonts, drag & drop, web graphics & animations into your web pages.
- HTML5 is backwards compatible to don’t worry about your old designs in HTML 4 or XHML1 they will work just the same!
- jQuery has started killing Flash, HTML5 will finish it off for sure.
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!
Online Sprite Box Tool
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.
Online 3D Sketch 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.
Online Font Testing Tool
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.
Online Velocity Sketch Tool
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.
Online Pattern Generator Tool
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.
Online XRay Tool
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.
Online Automatoon (animation) Tool
Automatoon is pure HTML5. Since no Flash is used, your animations will play just fine on iPhones, iPads, Android devices, and all common web browsers. Awesome-atoon!
Online HTML5 Audio Maker Tool
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.
Online SVG to HTML5 Canvas Tool
Most vector art packages (Illustrator, Inkscape etc) can export as SVG (Scalable Vector Graphics) and with this tool you can convert your SVG file into it’s HTML5 canvas equivalent.
Chrome Ajax Animator Tool
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.
So a great list by innovation on html 5! Thanks for sharing!
Some great and helpful tools wich I’m definitley plan on using, thanks for sharing!
Awesome list! I love the font testing tool that is genius! thanks
Nice article. There are some tools in there that I have yet to hear of, but might come in handy. Thanks for bringing them to my attention Sam!
a great assortment of tools, thanks.
“jQuery has started killing Flash, HTML5 will finish it off for sure.”
Sites really need to stop spreading such fallacies. I expected better from WDL.
Facilita muito na Criação de Sites em HTML 5, muito bacana!
Greatly facilitates the creation of sites in HTML 5, very cool!
@aledesign.it, @Sander, @David Hancock, @Evan Skuthorpe, @André Andrade,
Thanks guys glad you liked the article.
@Damien,
I agree the font tool is pretty cool!
@Ian Devlin,
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.
The list goes on…
Thanks,
Sam
Every rarely you get to see all this stuff together thank you very much for the post
Thanks Sam.
I haven’t heard of all of these but I like the Online Spritebox Tool. It is such a great tool to speed up use of websites.
@Ian why you say so? It seems to me like flash has lost much of its popularity nowadays… And HTML5 won’t make it improve it… 😉 just my2cc
BTW Cool post, thanks for sharing!
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.
That’s a heap of great information. Thanks
This is a total find. I learned tons just scanning through it. Thanks
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?
Whoa, some of these tools are pretty sweet! Thanks for sharing – looking forward to trying a few of them out.
Some really useful tools here. I also believe that html5 and jquery together can kill flash.
http://www.spritecow.com is the best sprite generator aide i’ve used
@Yashodhan Deshmukh, Otreva, Steve, kat, Bilal Irfan, greta herlin, b0ggy, Angie, Loveish Kalsi,
Thanks guys, much appreciated!
@Seb Ashton,
Awesome tool mate, great addition to the list!
Wow. Thanks for these lists. It would be helpful, soon.
Great resources. A list worth checking
Great resources, see it translated at our site. Regards
This HTML5 tool is also cool: https://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.
online 3D Sketch is the best and reliable tool for HTML5. Even working on low bandwidth internet very smoothly.
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.
Simply Great Collection..Ill surely be using some among these in my upcoming projects and also planning to use one for my own site..
Great list of tools, although I think HTML5 will be a viable option somewhere around 2014-2015.
Great collection thank for the awesome list of tools 🙂
Nice article. Can we add this on our blog for designers on Jade Magnet
Check some more tools for website design at https://blog.jademagnet.com/micro-blog/useful-tools-for-web-designers/
Thanks for sharing these tools! 🙂 I’d also like to add another one to the list:
http://www.a5-animator.com (beta test until 30/09/2012)
I recently started using Hippo Animator. It is very simple but I found the animations perform much better than those from other tools.
When I got into very complex animation the javascript did break but I was able to fix it by editing the javascript directly.
Excelente para Criação de Sites em HTML.
Very good post. Enjoyed the site man!excellent for sites in html.