March 18, 2024

10 Online HTML5 Tools For Web Designers

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

Share

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

      @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

  1. Steve Reply

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

  2. kat Reply

    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.

  3. b0ggy Reply

    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?

    1. sam Reply

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

  4. Robert Lang Reply

    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.

  5. Jack Stanley Reply

    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.

  6. Peter Drinnan Reply

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *