New tools for web design and development: October 2012


Mark Penfold’s October round-up of the best new tools covers 10 utilities for spicing up your frontend

It’s what’s up front that counts. Or so they say. And as far as web development goes, ‘they’ may well be right. Very few users care about the clever coding that may or may not have gone on server-side. This month’s crop of new tools reflects the importance of getting the frontend right.

And that frontend has very many faces these days. From HTML email newsletters to mobile web apps, to CSS frameworks, there’s all of a sudden a lot more to think about technically for pretty much any new project.

Standout contribution though, has to be awarded to Typecast, which takes on one of the most challenging – possibly the most enjoyable? – aspect of frontend development. Typography.

Given the importance of type to the web, and the vast history of the typographic arts, connecting these two up is a worthy endeavour. What’s really exciting is that this process is still in its infancy.

1. Mailrox beta

Price: Free during beta

Mailrox starts from a simple premise – that creating email newsletters is a tedious task for all concerned. Designer, developer or marketer – everyone could save time if there was an app that simplified the design process, generated the code and supplied a re-usable template.

It’s a good idea but Mailrox isn’t there with the execution yet. Plenty of work needs to be done up front in Photoshop before you upload your comp to the site for slicing into layout areas. That’s not too bad but it puts a lot of extra work into the loop if you need to iterate.

Once you’ve got a final uploaded, creating your own HTML is complicated by the fact that it’s always wrapped in unstyled elements you seemingly have no access to. The underlying concept is certainly worth pursuing, but the beta phase will be make or break for Mailrox.

Mailrox beta

Titian, in goal, are you sure? Mailrox has a few rough edges to work out in beta

2. Typecast beta

Price: Free while in Beta

Thanks to the great leap forward in web fonts, typography is becoming an increasingly important element of the web designer’s job. But, the simple fact that there’s now thousands of fonts to choose from doesn’t actually make the job any easier. For that, you’ll want Typecast.

Typecast allows you to choose your fonts from suppliers, TypeKit, Fontdeck and Google. But it also allows you to actually create comps, style them and compare them side-by-side with alternative designs. Then just publish a URL when you want feedback. No need to actually buy the fonts until you’ve decided on a final signed-off solution.

The interface is so intuitive you’ll be knocking out new page concepts in no time. There’s no doubt this is a great way to experiment with type on the web, and the results speak for themselves. Whether this is actually time-saving is debatable – for the typographically challenged it could be a huge (but enjoyable) rabbit hole down which to disappear.

Typecast beta

Typesetting the web as it should be done. So much so that Monotype just bought the company, lock-stock. Now that was a fast turnaround

3. Anchor CMS

Price: Free

With the human population to web CMS ratio approaching 1:1, do we need another blogging content management system? Well, yes, but only if it’s as lightweight and easy to work with as Anchor.

Teaming a good old PHP/MySQL (5.3+) set-up with a clean, function-based approach to templating provides Anchor with its spartan appeal. The docs are minimalist too, but if you have a fondness for PHP this isn’t a problem as the code itself is clear enough that bit of hacking around will have you up to speed in an afternoon.

It might be nice to have a bit more in the way of tutorials and so on, but it’s early days. Anything could happen. Well, not literally anything, but y’know…

Anchor CMS

Administering with Anchor is simplicity itself

4. Uiji.js

Price: Free

If the idea of generating HTML using JavaScript doesn’t immediately chill your blood then it’s time for you to have a look at Uiji.js. It’s a jQuery plug-in that streamlines the creation of DOM elements on the client side, thereby employing local knowledge to make code more robust and easily ported.

This approach isn’t to everyone’s taste: it mixes templating and logic, which are usually seen as best to keep apart – they have a tendency to cause trouble when left together. However, the ability to pass in objects and have jQuery render your page on the client is temptingly easy with Uiji. And if you’re going to do this anyway, it’s nice to have a smooth syntax to accomplish the job.


The UIJI.JS home page – one massive function and it’s almost all over

5. Scripted

Price: Free

Browser-based, as opposed to cloud-based, code editors are becoming more popular these days, and Scripted is a good example of why. Though it’s still in the early stages of development, this little app provides JS/CSS/HTML coders with a friendly interface to some nice features including code hinting, linting and a mass of keyboard shortcuts.

The interface needs a little work but, not too much. What makes Scripted appealing is its bare-bones functionality. You’ll need Node.js installed – and a recent version at that – but there are no other dependencies. Well worth keeping an eye on.

Scripted: content assist in full effect

6. BootMetro

Price: Free

Don’t knock it till you’ve tried it, seems to be the message coming back about the new Windows 8 Metro interface. Well, thanks to BootMetro, your web apps can take that same UI for a spin without having to pay Redmond for the pleasure.

Still in beta phase, there are kinks that need to be worked out – but BootMetro is a pretty convincing Metro-style UI framework. Based on Twitter Bootstrap, its underpinnings are pretty solid; so if you’re intrigued by the new MS approach, this provides a really low-pain approach to experimenting with it.


BootMetro, it’s just so colourful, you have to reach out and touch it

7. Thinkin’ Tags alpha

Price: TBC

Though it’s billed as a rapid prototyping environment, there’s a lot going on in Thinkin’ Tags. It’s more like a full-on IDE with a focus on the YAML CSS framework. If that floats your boat then it’s excellent; if not then it’s still interesting, but a bit less compelling.

It’s worth reiterating is that this isn’t, the serialised data format, but the CSS framework. And secondly, Thinkin’ Tags also handles other frameworks (well, Blueprint is in development and others are planned). And it’s an impressive piece of kit, given that it runs in the browser.

Plus, considering all the WYSIWYG functionality and ‘production-ready’ code it’s surprisingly flexible – that’s not to say actually flexible, but certainly very intuitive to use.

Thinkin' Tags alpha

Achtung! Is about right – Thinkin’ Tags has got it going on


Price: Free – $49/month

A good prototyping tool should enable you to get up and running fast, but also provide enough depth that you can refine your ideas to the point where they don’t need you leaning over a user’s shoulder saying things like, “Just ignore that bit for now”. does just this.

It also handles all the touch gestures you might want, tackles animations and provides for sharing and commenting. It’s smooth to use and thankfully, there’s a free plan too.

Thanks to that game is going to be a smash, probably

9. Bootsnipp

Price: Free

Bootsnipp provides a free space in which Bootstrap developers can pool their resources, sharing the load involved with coding the markup for common (and not so common) development tasks.

Bootstrap is great, no doubt about that, but there’s still plenty of graft in developing modules – polls, forms, nav bars and so on – pulling together the various elements that make a site usable. In that endeavour Bootsnipp is massive help. Or at the very least a good starting point.

Submissions are now open, and the site has plans to add a voting system to rank the inventory. This could be the birth of a great resource.


Forty snipps are currently up – can you add to that?

10. WebZap 1.0

Price: $15

There’s growing number of dedicated prototyping tools out there but few, if any, have the power and flexibility of Photoshop. Without even getting into the skill and technique already invested in Adobe’s flagship by most designers it’s easy to see why this is where so many web sites start life. But it could be easier, couldn’t it?

To this question WebZap answers in the affirmative. This PS extension installs a neat little palette complete with all the basic elements a mock-up requires: layouts, forms, buttons, navigation and so on… so you can get basic comps together in minutes, then style until your clients are beaming.

Layouts are based on the 960 grid, and exporting an element ready for development is as simple as select and click. If Photoshop prototypes fit your MO, then Webzap needs your attention.

WebZap 1.0

Dummy everything: Webzap enables you to focus on design, not donkey-work

If you have come across any cool tools recently that haven’t made our list but you think they should have, please let us know in the comments. Equally, if you’ve created a tool that you’d like us to feature in the next roundup, shoot us an email!