Aug 31 2011

8 Best HTML5 Tools Every Web Designer Should Have

HTML also known as HyperText Markup Language is always been one of the favorite coding language among designers. But HTML is always considered as the basic language to design websites. However, the era has changed from the last 1-2 years with arrival of HTML5 which has all the ingredients to create awesome websites with great special effects and much more you can imagine.

When HTML5 launched, it became the talk of the town because mostly very designer was excited with release of new markup language.

The main reason behind popularity of HTML5 was it is much beyond designing websites and also includes several features that even fulfill the needs of creating web applications which was not present in the previous versions of HTML.

Several other reasons that makes programmers to use HTML5 is its easy to learn and use, easily readable, vast range of features and much more. So, why not try the most advanced version of HTML and create something unique that your clients and visitors love.

This is the reason, I am comprising a list of best HTML5 tools that will help you to take advantage of new markup language to its fullest.

Hit the jump button and dive into the list of 8 best HTML5 tools every web designer should have in its kitty. If you know any other html5 tools that you feel suits best in this list, do not hesitate to share with our readers in comments section below.

1) Switch to HTML5

2) Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites. Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.

3) Cross Browser HTML 5

4) Wallaby

“Wallaby” is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML.

5) HTML 5 Canvas Cheat Sheet

There are cheat sheets for just about anything out there but I couldn’t find one for the HTML5 canvas element, so I decided to do something about that, mostly for my own sake but if other people find it useful that’s just all the better.

6) Limejs

LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.

7) HTML 5 Reset

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it’s time for our best practices to catch up, and we thought we’d put our files out there for everyone to use. By no means do we see this as the One True Way to start every project, but we think it’s a good starting place that anyone can make their own.

8 ) HMTL 5 Test

The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn’t finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers.

If you liked this article, you may also like

3 Comments

  • I created intuitive css shortcuts with AutoHotkey ( http://www.autohotkey.com/ ). For this I write first 3 characters of the property or if it’s with dashes, I include every first char after dash. I also prefix it with dot to make it really unique. Shortcut is replaced by the corresponding property when I hit space.

    So here are some examples:
    .mar = margin:px
    .marb = margin-bottom:px
    .bortw = border-top-width
    .wid = width:
    .bac = background:url()
    .baci = background-image:url()

    etc..

    Also cursor is put where either before ‘px’ or in case of background before ‘)’. Or where one thinks is more intuitive.

    Atleat 3 characters are unique enough to cover all the properties.
    There’s nothing to learn if you know css properties.
    It works in every editor as AutoHotkey works globally.

    I can share the code if you’re interested. Just write hkirsman@gmail.com

  • HAML and Stylus: Never write broken HTML or CSS again.

  • My alltime favorite tool: Skybound Stylizer – An Exotic Visual CSS Editor http://www.skybound.ca/

Leave a comment