7 HTML5 Tools Every Web Designer & Developer Should Know

1. Initializr

This is a great Boilerplate-based template generator that allows you to create a clean, professional web template in less than 15 seconds. You can choose the functionalities as well as exhibit some control over compatibility and server configurations you wish to use. After selecting your options, you can download a zip file that contains all the components for your web template. Initializr is a fantastic tool for busy programmers, beginners, or anyone who wants to update or create web content in HTML5 quickly and easily

2. Modernizr

Modernizr is a small, simple JavaScript library that lets you use CSS3 and HTML5 while maintaining a fine level of control over older browsers that may have compatibility issues. Instead of making broad assumptions about each browser, Modernizr uses feature detection to determine exactly which of your programming features will be supported. Using this tool gives you control over fallbacks by providing JavaScript objects that control properties for each feature of your content based on the support level of browsers. As a bonus, Modernizr provides support for styling and printing elements of HTML5.

3. Sproutcore

One of the greatest complaints of web developers is the seemingly unavoidable latency involved in many web applications. SproutCore is a great solution to this problem because it allows designers to build desktop-style applications without using plugins. It also eliminates the latency problem by moving all business logic to the web client. All code in SproutCore is written in JavaScript and it enables touch support for mobile devices. So if you want to design web apps that perform like destop applications, give SproutCore a try.

4. Font Dragr

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.

5. HTML5 Test

Is your browser ready for the HTML5 revolution? HTML5 Test will let you know. The website will get you a full report of video, audio, canvas, etc capabilities of the browser you’re currently using.

6. Wallaby

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

7. HTML5 Reset

Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We’ve been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved.