Imagine you create the following mockup and you want to export it to HTML:

Translating this design to any kind of quality HTML/CSS would be extremely difficult, to say the least.  Initially my idea was to absolutely position any elements that overlapped like this within a parent DIV created specifically for containing them. It would be a huge mess, but how else could you do it?

While talking this over with a friend he brought up a great point: who am I building this tool for?

Folks with no coding or web development experience? Web developers? Web designers? It matters a lot and I didn’t have a very good answer. When I started jMockups I envisioned designers eventually using it instead of Photoshop. If that’s true then why build an export to HTML/CSS tool? Professional web designers are probably going to code the site on their own sites. If that’s true (and asking a few designers confirms it), then I’ve been building an export tool for people that are more than likely never going to use. Smooth.

Here’s a better idea: Build a web design tool for web developers and constrain the design using a grid system so they can’t create ugly, difficult-to-export pages like the one above.

And with that, Lean Designs, the new jMockups, was born.

960gs Export Progress

The following is a result of several weeks of initial work plus about a week of tailoring it to the 960 grid system.

Here’s a 960gs-constrained layout created in the Lean Designs editor:

And here’s the corresponding HTML output (with the 960gs bookmarklet activated so you can see the alignment):

This HTML generation algorithm will correctly analyze a 12 column, 960gs-constrained layout and create the appropriate DOM hierarchy with correct grid_xx and prefix_xx class names.

Needs a lot of work before its ready for production, but it’s getting there.

The Road Forward

How do you merge an unstrained web design tool with a constrained web development tool?

I’m not exactly sure yet, but I think it will go something like this:

1) Create a separate mode for the editor where you can only create a 960gs layout and let people use that. You won’t be able to add HTML elements, apply styles, or anything like that, but it should be best damn 960gs generator on the net.

2) Add the ability to let users drag HTML elements onto the canvas but constrain the locations so that they can only fit within the 960gs blocks and they can’t interfere with other elements.

When 2 is done and it works well, developers should be able to design a complete 960gs-based page in the Lean Designs editor and export it to quality HTML/CSS. It’s going to take some time, but it’s within sight.

Follow me on Twitter for the latest updates.