10 Online HTML5 Tools For Web Designers

By / Oct 4, 2011 / Tools
shares

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.

32 Comments

  1. aledesign.it
    October 4, 2011

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

    Reply
  2. Sander
    October 4, 2011

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

    Reply
  3. Damien
    October 4, 2011

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

    Reply
  4. David Hancock
    October 4, 2011

    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!

    Reply
  5. Web design london – Evan Skuthorpe
    October 4, 2011

    a great assortment of tools, thanks.

    Reply
  6. Ian Devlin
    October 4, 2011

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

    Reply
  7. André Andrade
    October 4, 2011

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

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

    Reply
    • Sam
      October 4, 2011

      @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

      Reply
  8. Yashodhan Deshmukh
    October 4, 2011

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

    Reply
  9. Otreva
    October 4, 2011

    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.

    Reply
  10. Steve
    October 4, 2011

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

    Reply
  11. 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.

    Reply
  12. Bilal Irfan
    October 5, 2011

    That’s a heap of great information. Thanks

    Reply
  13. greta herlin
    October 5, 2011

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

    Reply
  14. 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?

    Reply
  15. Angie – Portland Web Design
    October 5, 2011

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

    Reply
  16. Loveish Kalsi
    October 6, 2011

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

    Reply
  17. Seb Ashton
    October 7, 2011

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

    Reply
    • sam
      October 8, 2011

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

      Reply
  18. Designrshub
    October 22, 2011

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

    Reply
  19. Joseph
    November 18, 2011

    Great resources. A list worth checking

    Reply
  20. Diseño web Argentina – Ariel EAWEBAGENCY.com
    November 21, 2011

    Great resources, see it translated at our site. Regards

    Reply
  21. 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.

    Reply
  22. Dheeraj Bansal
    December 2, 2011

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

    Reply
  23. 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.

    Reply
  24. Roy M J
    January 18, 2012

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

    Reply
  25. Web Design Dubai
    January 24, 2012

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

    Reply
  26. Avinash
    February 9, 2012

    Great collection thank for the awesome list of tools :)

    Reply
  27. Nandini
    May 11, 2012

    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/

    Reply
  28. Tom
    September 21, 2012

    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)

    Reply
  29. Peter Drinnan
    September 30, 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.

    Reply
  30. iran
    November 20, 2013

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

    Reply

Leave a Reply