20 HTML5 Tools for Web Designers


HTML5 is rapidly changing the way web sites are created and managed. We have rounded up twenty of the best HTML5 Web apps to add to your HTML5 toolbox.



1.html5 toolsInitializr is a site that lets you create an HTML5 template. This can be a boilerplate HTML5 template, a responsive HTML5 template or a Twitter Bootstrap HTML5 template. Kick-start your new project today.


HTML5 Demos

2.html5 toolsHere are some excellent experimentation demos under HTML5 that have been put together. It started with just 5 demos, but has expanded considerably since then. This includes text content not inside a text box, but editable nonetheless and easy geo location look-up.


Web Apps Tracker

3.html5 toolsFor the more technically minded, this web apps tracker from the HTML5 organization lists the current bugs and other issues present within the language. It it possible to drill down into each issue, and see how it manifests and what is being done to address it with a new implementation, alteration or bug fix.


HTML5 visual cheat sheet

4.html5 toolsThis is a handy HTML 5 Visual Cheat Sheet that is downloadable. It lists all the major attributes within the latest version of this language. The Cheat Sheet is uploaded to Flickr for easy access.


Switch To HTML5

5.html5 toolsStarting from scratch with HTML5? Don’t want to create a HTML5 template from a blank page? Then use this flexible form-based generator instead. It’s free and can save you time.


Cross browser HTML5 forms

6.html5 toolsHTML5 has a host of features like calendars, sliding widgets, client-side validation, and more. However, too few web browsers are currently sophisticated enough to make use of these options. The author of this web post has created some code to get over this hurdle.


HTML5 Test

7.html5 toolsWant to know how well your desktop or mobile web browser conforms to the latest HTML5 standard? This includes individual ratings for each recent version of the browser, and is divided up into separate browsers for the desktop, tablets, smartphones and more. With ratings maxing out at 500, load the site and see for yourself how modern your web browser really is.


HTML5 Canvas Cheat Sheet

8.html5 toolsIf you cannot remember all the new canvas commands and options, then this cheat sheet is definitely for you. Available as a graphic or PDF download free of charge.


Lime JS

9.html5 toolsLime JS is a HTML5 game framework which makes it much easier to built quick games that can be loaded on to any touchscreen-capable browser or device. This removes the need to create a separate game for each mobile platform, using their propitiatory coding language, to be cross-platform.


HTML5 Reset

10.html5 toolsAny programmer who starts a new web site has to begin from somewhere. We all have our own set of default documents to begin with, but often they are missing key sections that we never have time to add in. The creators of HTML5 Reset have done the heavy lifting for you and created a set of downloadable templates for HTML, CSS, etc. There is even a blank HTML5 WordPress theme to use as a default theme if you like, etc.



11.html5 toolsThis is a smart HTML5 based app where you can draw wire-frames, complete design mock-ups and UI concepts, all without the need for expensive software.



12.html5 toolsSpriteBox is a unique web app that lets web designers use the background-position property to align different areas inside a block area on the page.



13.html5 toolsPatternizer is great fun to play with. You can mess around with the controls and create a great texture pattern with it.



14.html5 toolsLimeWeave is a HTML5 editor which can show you what the HTML5, CSS and JavaScript effects should look like, ideally. Lots of options and big buttons to easily switch modes.


99 Lime

15.html5 toolsIf you want to save time with putting together some new elements, layouts and code using HTML5, CSS and jQuery, then 99 Lime can really help you out.


On/Off FlipSwitch

16.html5 toolsIf you have ever wanted to create a slick on/off switch for a web page, then this site can do it for you. You can create custom graphical switches with selectable coloring, sizing and in different styles.


Online 3D Sketch Toy

17.html5 toolsThis online sketch toy is a great one for the kids, not just adult web designers! Play around with the many colors and even share your modest little creation on Facebook afterwards.


SVG to Canvas Converter

18.html5 toolsConvert your vector artwork in the SVG file format over to the HTML5 canvas format ready for a live HTML5 web page.


CanvasLoader Creator

19.html5 toolsThis free online tool can help designers and coders generate already scripted preloaders (both spinners and throbblers) for their HTML5 projects.


Create – Make Anything Editable

20.html5 toolsCreate is a web editing interface that works with a CMS. Within most updated, HTML5-compatible browsers, this code can be loaded in to make any editable areas of the web page accessible for changes right there on the page, rather than only from inside a HTML textbox element. Create can be configured to work with many different editors and also content management back-ends too.

One Response

  1. Mwirotsi