This story was written by Keith Dawson for UBM DeusM’s community Web site Develop in the Cloud, sponsored by AT&T. It is archived here for informational purposes only because the Develop in the Cloud site is no more. This material is Copyright 2012 by UBM DeusM.

Web Design & Development Tools, 2012

.NET Magazine's 20 best of the year.

Designers and developers may disagree over what tools should appear on a best-of-2012 list. Here are .NET Magazine's 20 favorites.

It's an odd list, as much for what it does not contain as for what it does. Because the list is drawn from author Mark Penfold's monthly roundup of the best new tools, it favors what is new over what is proven, common, or useful. For example, there are no CSS pre-processors: no Less, no Sass. There are no JavaScript frameworks or jQuery plugins. Still, most Web developers will discover here at least a few tools they didn't know about.

Below are a few highlights and a table of all of .NET's favorite new tools (with a few pricing details corrected from the information given in the article).

Code editors
Until Brackets came along, it seemed like all the cool kids had been migrating to Sublime Text as their code editing environment of choice. Both show up on .NET's list, the latter in the form of version 2. (We discussed Brackets a few months back in the context of the Adobe Edge Suite of web development tools.)

Brackets has drawn a lot of the attention, in part because it is an open-source project under a permissive MIT license, and in part because it is free. Brackets has a singular advantage from the point of view of the competent HTML-CSS-JavaScript developer: it is itself written in those same languages, and so it offers unique potential for customizing to meet individual needs. Adobe's Adam Lehmam makes this point in this video introduction to Brackets, filmed last spring.

Sublime Text 2 is a very capable code editor, and over the last few years its development has been rapid, even though it was all being done by one person, Jon Skinner. Brackets has the potential of growing much faster in capability and support, because it is community-based.

Design
If you are a type geek like me, it's exciting to see the advent of a tool like TypeCast, which brings some order to the fast-expanding universe of web fonts. TypeCast lets you choose fonts from online suppliers Fonts.com, TypeKit, FontDeck, and Google, and actually put them to use in comps and test layouts before laying down any money (for those fonts that aren't free). TypeCast itself is free to use during its beta period.

Gridset, from Mark Boulton Design, is a tool to let you explore the use of grids in web layouts. It takes the math pain out of working with grids for design, prototyping, or production and makes the process interactive and fun.

.NET Magazine's best new tools of 2012

Bugherd Issue tracking Free; $99/mo. / 25 members
Fontello Icon sets Free
Proto.io Prototyping Free; $49/mo.
Foundation 3 Responsive template Free
Dreamweaver CS6 Web design $30/mo.
Cloud9 IDE Free; $12/mo.
Sencha Touch 2 Mobile dev. framework Free
Adobe Edge Inspect Mobile dev. debugging Free; $10/mo.
Brackets Code editor Free
Modernizr 2.6 Cross-browser compatibility Free
Trello Project management Free
TypeCast beta Type selection Free while in beta
Gridset Grid editor $12/set or $18/mo.
Yeoman Web dev. framework Free
Emmet CSS shorthand Free
Sublime Text 2 Code editor $59
Microsoft WebMatrix 2 IDE Free
PhoneGap 2.0 Cross-mobile compatibility Free
Firefox 18 Browser Free
Photon DOM 3D lighting Free

Related links