10 Must Have HTML5 Tools to Simplify Web Design


This is an article for those designers & developers who really need to do something about HTML5 applications. So I’m not gonna repeat the popularization education about HTML5 development and importance, cause every one already know about that. I collect 10 HTML5 tools for different aspects of use, which will simplify your HTML5 web designing.

1. FindmebyIP

Main Function: a website that list the browsers’ support of HTML5 in details.
Suitable For: people who want to check the specific HTML5 support from different browsers.

Pros: online & free tool, easy to check.


2. Video JS

Main Function: a HTML5 video player base on javascript. It has 3 core parts: an embed code, a javascript library and a HTML/CSS skin.
Suitable For: Webmasters who run video sites and need to make the video a consistent look and compatible with different platforms (browsers and devices).

Pros: Free & Open Source. Lightweight.
Cons: You need to a bit coding customization yourself.


3. Flash to HTML5 Online

Main Function: one of the leading online flash to HTML5 convertors in the world. It converts whole SWF file to HTML5 format with precision on text, line and image.
Besides, it has the installable version for windows and Mac.
Suitable for: designers who need to transfer from flash to HTML5 and decompile SWF to FLA/FLEX.

Pros: online and free flash to HTML5 convertor, awesome flash decompile, easy to use.
Cons: only AS 1.0 is supported.


4. Sketchpad

Main Function: an online drawing and painting tool which developed in HTML and JS only. It is a customized tool to editing and drawing the images in the way you want.
Suitable for: designers who need to use element and a lot JavaScript to create an impressive painting application.

Pros: online tool, convenient, user friendly interface.


5. Initializr

Main Function: Templates are the most attractive feature of this tool. It generates clean and customizable templates for you to design.
Suitable for: designers who start up a new HTML5 boilerplate based project. It is really good helping hand.

Pros: excellent helper for new design, customization.


6. Lime JS

Main Function: a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers. This tool is great, just have a try.
Suitable for: designers who have the demand to develop game applications on mobile & desktop platforms.

Pros: nice HTML5 game framework starter.


7. Modernizr

Main Function: a small JavaScript library that detects the availability of native implementations for HTML5 & CSS3 websites. It allows you to target specific browser functionality in your style sheet. You can make best use of the specialty of HTML5 & CSS3 in the browsers no matter whether it supports HTML5 or not.
Suitable for: developers who have the HTML5 website demand.

Pros: nice analytic tool of native browsers for best use of its availability.


8. Online HTML5 Audio Maker Tool

Main Function: a tool provides audio solution for different browsers, which enables you to experience audio tag of HTML5 and make different formats audio for different browsers.
Suitable for: designers who need to add audio to HTML5 websites.

Pros: support different audio formats, online & open source, lightweight.


9. HTML5 Visual Cheat Sheet

Main Function: essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. It allows you to find at a glance everything you are looking for.
Suitable for: all HTML5 website developers.

Pros: a really helping hand for design work.


10. Font Dragr

Main Function: Drag and drop your true type (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts in the left hand side module and it will be added to the list.
Suitable for: designers who have font issue during HTML5 developing.

Pros: no coding, no uploading, just drag and drop and testing on any website.


Well, I hope some of these tools could bring help for your web designing. If you have other cool tools about HTML5, don’t hesitate to share with us in the comment.

  • November 3, 2011
8 Best Free Stock Video Websites for Tiktok, Reels, and Shorts Top 5 PHP Frameworks: Fast and Secure