10 Online HTML5 Tools For Web Designers

By / Oct 4, 2011 / Tools

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.

10 Online HTML5 Tools For Web Designers

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.

html5 sprite box

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.

html5 sketch

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.

html5 Fonts

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.

html5 velocity sketch

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.

html5 patternizer

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.

html5 XRay

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!

Automatoon

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.

html5 audio maker

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.

html5-svg-to-canvas

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.

html5 Ajax Animator

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.

  • http://www.aledesign.it aledesign.it

    So a great list by innovation on html 5! Thanks for sharing!

  • http://www.sanderlubbers.nl Sander

    Some great and helpful tools wich I’m definitley plan on using, thanks for sharing!

  • Damien

    Awesome list! I love the font testing tool that is genius! thanks

  • http://davgothic.com David Hancock

    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!

  • http://www.oldworldcreative.com Web design london – Evan Skuthorpe

    a great assortment of tools, thanks.

  • http://www.iandevlin.com Ian Devlin

    “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.

  • http://www.estudiosite.com.br André Andrade

    Facilita muito na Criação de Sites em HTML 5, muito bacana!

    Greatly facilitates the creation of sites in HTML 5, very cool!

    • http://www.jquery4u.com Sam

      @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

  • http://yashe2409.com/ Yashodhan Deshmukh

    Every rarely you get to see all this stuff together thank you very much for the post

  • http://www.otreva.com Otreva

    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.

  • http://steve.maraspin.net Steve

    @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!

  • kat

    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.

  • http://www.allwebutilities.com Bilal Irfan

    That’s a heap of great information. Thanks

  • http://gretaherlin.com greta herlin

    This is a total find. I learned tons just scanning through it. Thanks

  • b0ggy

    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?

  • http://420creative.com Angie – Portland Web Design

    Whoa, some of these tools are pretty sweet! Thanks for sharing – looking forward to trying a few of them out.

  • http://stylishwebdesigner.com/ Loveish Kalsi

    Some really useful tools here. I also believe that html5 and jquery together can kill flash.

  • http://www.sebashton.com Seb Ashton

    http://www.spritecow.com is the best sprite generator aide i’ve used

    • http://www.jquery4u.com sam

      @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!

  • http://www.designrshub.com/ Designrshub

    Wow. Thanks for these lists. It would be helpful, soon.

  • http://eamdevelopers.com Joseph

    Great resources. A list worth checking

  • http://www.eawebagency.com Diseño web Argentina – Ariel EAWEBAGENCY.com

    Great resources, see it translated at our site. Regards

  • Robert Lang

    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.

  • http://Techreuters.com Dheeraj Bansal

    online 3D Sketch is the best and reliable tool for HTML5. Even working on low bandwidth internet very smoothly.

  • http://www.mugeda.com Jack Stanley

    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.

  • http://www.roymj.com Roy M J

    Simply Great Collection..Ill surely be using some among these in my upcoming projects and also planning to use one for my own site..

  • http://www.greenapplestudio.eu Web Design Dubai

    Great list of tools, although I think HTML5 will be a viable option somewhere around 2014-2015.

  • http://www.techmywish.com/ Avinash

    Great collection thank for the awesome list of tools :)

  • http://www.jademagnet.com Nandini

    Nice article. Can we add this on our blog for designers on Jade Magnet

    Check some more tools for website design at http://blog.jademagnet.com/micro-blog/useful-tools-for-web-designers/

  • http://www.a5-animator.com Tom

    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)

  • http://www.pdvictor.com Peter Drinnan

    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.

  • http://www.construoseusite.com.br iran

    Excelente para Criação de Sites em HTML.
    Very good post. Enjoyed the site man!excellent for sites in html.