Designing in HTML5 and CSS3

I’ve previously raised the issue of the dearth of decent HTML5 editing and design tools. Applications such as Dreamweaver support code hinting, and display preview capabilities for much of the HTML5 and CSS3 syntax, but there’s still no help available should you want to make use of the extra capabilities.

We’re still stuck in the traditional cycle of write code/save/preview in browser, which means that development is slow. Microsoft’s Expression Web has better support for some of the CSS3 enhancements and, helpfully, warns you that these features aren’t supported by all browsers.

We’re still stuck in the traditional cycle of write code/save/preview in browser, which means that development is slow

I decided to convert to HTML5 one of our own sites that’s been long overdue a makeover.

I set out with my trusty copy of Expression Web in hand, with a view to redesigning this site so it would look great in modern browsers, but acceptable in older ones, too.

The process was surprisingly easy: boxes with curved borders appeared, expanding tabbed menus made without the use of any graphics, and it became a very satisfying design experiment.

Textbox tests

Next I performed some tests with the wide range of input textboxes that HTML5 offers.

This capability I believe will prove useful to web developers, and save more man-hours than the much talked about but limited new “video” tag.

Depending on the value in the “type” parameter in your HTML, you can now define a simple textbox to behave like everything from a search box to a date-picker with pop-up calendars, without requiring any other code (although currently only Opera supports this last option).

These new types for the HTML5 Input tag are:

• Autofocus: the textbox gets focus irrespective of its location on the page
• Color: displays a colour picker
• Date: displays pop-up calendar control for a selection of dates
• Datetime: similar to the date option
• Email: provides basic checking for valid email address syntax
• Month: similar to the date option
• Number: displays a spin-box for a selection of numbers
• Placeholder: displays a greyed-out line of text to prompt the user about the input required
• Range: displays a slider for a selection of numbers
• Search: displays a textbox with a button to clear the box
• Time: similar to the date option
• URL: provides basic checking for valid URL syntax
• Week: similar to the date option

To view the effects of these components in various browsers, take a look at the screenshot below that shows the input box open in several browsers.

You’ll notice the page looks significantly different in each, but not so broken as to be unusable – and the page as a whole still works, which is the main consideration.

With these tests completed, I was feeling sufficiently confident to start converting the old site over to HTML5, while still hoping for a proper design tool that might help me with some of the more complicated effects I might want to implement – in particular, a way to produce animations without Flash.