(The following is a cross-post from the Lean Designs blog)

It gives me great pleasure to announce that you can now create hybrid width layouts using Lean Designs, letting you create professional looking websites in a fraction of the time compared to doing it by hand.

To understand the significance of this new feature and how to use it, we need to go over a bit of terminology:

Three types of layouts

Fixed Width

In a fixed width layout, the site is given a fixed, constant width which is then displayed (usually centered) in the browser. With this type of layout, you cannot use any of the excess space in the browser except for specifying the page’s background style (white in the example below).

Example:

Until today, fixed width layouts were the only type of design you could create with Lean Designs.

100% Width / Fluid Width / Liquid Width

In a 100% width/fluid width/liquid width layout, the width of the site is based on the width of the browser. Because the position of the the elements are based on the width of the page, they’ll appear differently to visitors depending on the width of their browser.

Example:

Fluid widths are not currently supported by Lean Designs.

Hybrid Width

Hybrid width layouts, as the name implies, takes pieces of both the fixed width and the 100% width layouts. With this type of layout the outer elements can have 100% widths, but their contents are held in a fixed width, centered container.

Example:

With today’s release, you can now create this type of design using Lean Designs. Note that the term hybrid width is not a standard web design term, but we needed a way to differentiate this type of layout from the fixed width and 100% width layouts.

Creating Hybrid Width Designs in Lean Designs

Creating hybrid width designs in Lean Designs is a piece of cake:

1. Add a DIV element to your designs

2. Position it against the left side of the canvas

3. Stretch it so that it spans the entire width of the canvas

When you export it, Lean Designs will recognize that you want this element to have a 100% width and generate the appropriate HTML/CSS.

For example, let’s add an H1 element, assign it an id of logo, assign the red element an id of header, and export it. This is what it will look like in the browser:

And here’s the HTML/CSS that Lean Designs generates:

Pretty cool huh?

OneHub Example

Lest you think this is only for creating simple, ugly sites, check out the following example of OneHub’s homepage re-created using Lean Designs in about 10 minutes:

In the editor:

Exported to HTML/CSS: (click here to view site)

Hope you like it. If you don’t have an account, you can sign up for free and create your own design in minutes.

As always, drop us a note if you run into any bugs or have ideas for improvement.

matt / matt@leandesigns.com

Here’s what’s going on:

About a month ago I changed jMockups’s name to Lean Designs. The primary reason for the change was a shift in focus away from creating website mockups towards actually creating websites, as that’s what most users wanted. It has taken a while, but today I launched a version of Lean Designs that lets you do just that. You can read more about it here. And check out the demo here.

Next to the initial launch in October, today’s release represents the largest milestone in the project’s nearly one year history. I’m incredibly excited about its potential to disrupt the web design industry. Don’t get me wrong: it’s got a long way to go. There’s a thousand ways it can be approve improved, but the fundamentals are in place. Now its all about pressure and time.

Onward.

In keeping up with my monthly progress reports, here’s an overview of what went down in March. (See also: January, February)

Preceden

One of my goals in March was to spend more time working on Preceden. I normally devote most of my free time to jMockups, but am trying to improve how I balance the two, given that Preceden actually turns a profit. I spent about 15% of my 120 hours online working on Preceden during March (up from about 5%), which is a big step in the right direction.

Preceden had 16,845 visitors during March (including embedded timelines) that generated 78,925 pageviews. There were 35 upgrades to the pro account, which generated $895 in revenue (up from $522 in January and $580 in February). However, I spent $540 in order acquiring 11 of those customers while experimenting with Google AdWords. After subtracting the hosting fees and AdWords expenses, I wound up with a profit of about $285.

While I’m disappointed that AdWords did not yield a positive ROI, I’m glad I took the time to do it. I’ve had it in my head that AdWords would be an easy road to four figure profits and as long as I believed that, I wasn’t terribly motivated to work on it (sounds stupid, I know). With the knowledge that it won’t be as easy as I once believed, I’m forced to get back into the game.

jMockups

While I continue to make a lot of good progress with jMockups, traction remains elusive. The trough of sorrow is aptly named. :)

jMockups had 9,914 visitors during March that generated 19,922 pageviews. 6,812 of those visitors were a result of posting about the launch of the new specifications tool on HackerNews.

Paid signups skyrocketed from 1 to 2 during March, yielding $38 in revenue. Subtract about $200 in monthly expenses, and I’m still out a bit each month.

On a much more positive note, I received an acquisition offer for jMockups towards the end of the month. The company a good fit, but I think I’ve barely scratched the surface of what’s possible with jMockups and it would therefore be a huge mistake to sell right now, regardless of the price. Plus, if I were to sell it, I’d start building something new almost immediately, so what would be the point of moving on as long as I’m still passionate about it?

Blog Posts

On the jMockups Blog:

The New jMockups Mockup Editor (Mar 4)

Improving the Website to Mockup Converter (Mar 8)

Share Your Website Design to Help Others Get Started with Theirs (Mar 11)

jMockups Introduces Mockup Templates to Make Web Design Easier (Mar 12)

jMockups Can Now Automatically Create Detailed Specs of Your website Mockups (Mar 20)

The Customers Have Spoken: We Want to Export Our Mockups to HTML/CSS (Mar 21)

Baby Steps Towards Mockup to HTML (Mar 28)

New Default Design for jMockups Image Elements (Mar 29)

Ajaxified Mockup Deletion (Mar 30)

On this blog:

February in Review: Life Tracking, Major jMockups Updates, and Preceden’s Best Month Yet (Mar 4)

How to Calculate Your AdWords ROI for a Freemium, One Time Purchase Web App (Mar 5)

AdWords: Week 1 Results (Mar 13)

A/B Testing Preceden’s Homepage – Round 1: 37% Improvement (Mar 13)

Preceden’s 15 Days @ $30/day AdWords Results (Mar 29)

The signal-to-noise ratio on some of these is a lower than I’d like, but these hey-here’s-what-I’m-doing posts are usually pretty quick to write and at least they get something out there (a strategy I’d recommend to anyone who wants to blog but doesn’t know what to write about).

Also, in an effort to get more involved in the local startup scene, I’ve started attending the monthly Lean Startup Circle Boston and Boston BizSpark meetups. If you attend either, drop me a note so we can hook up at the meeting.

Onward.

In December I announced a $4K/month challenge, where I try to reach $4K/month in profit from my web apps by the end of 2011.

In this post I’ll give an overview of what happened in February. Click here to see January’s report.

By the numbers:

1) According to RescueTime, I spent 121 hours working over the course of the month, which equals about 30 hours/week or 4.3 hours/day. (Not including day job.)

2) 10,578 people visited Preceden. 529 people signed up for an account. 20 people upgraded to a paid account. Revenue: $580. Total time spent working on Preceden: 0 hours.

3) 5,303 people visited jMockups. 302 people signed up for an account. None upgraded. Revenue: $19.

4) 9 blog posts:

Three on this blog:

jMockups and Preceden January Review – 5 Feb

Seeking Alpha Testers for jMockups Import Tool (cross post from the jMockups Blog) – 6 Feb

Launch! jMockups Website to Mockup Converter – 19 Feb

Five on the jMockups Blog:

New Keyboard Shortcuts to Make Designing Mockups Easier – 3 Feb

Seeking Alpha Testers for new jMockups Import Tool – 6 Feb

New Homepage Design, Some A/B Testing, and Why Data Can Be Misleading – 11 Feb

Website to Mockup Converter Launched – 19 Feb

Reengineering jMockups for Optimal Performance – 26 Feb

And one as a guest post on Sebastian Marshall’s blog:

Nine Tips for Getting Started with Life Tracking

Overview:

In terms of progress, February was a huge month for jMockups. For a good chunk of December, January, and early February, I was busily building and preparing for the launch of the Website to Mockup converter. The official launch was on Saturday, 19 Feb while I was in NYC with Chris Conley and Mike Nicholaides. All in all, it went fairly smoothly, though there were some issues rooted in the slowness of the jMockups editor. The week following the launch I reengineered the editor to eliminate the performance issues. Today was another huge update: the launch of the redesigned mockup editor. In a nutshell, compared to a month ago jMockups has a sexier design, an improved user interface, vastly improved performance, and one major new feature: the Website to Mockup converter.

Meanwhile, Preceden had its best month yet. 20 paid signups resulting in almost $600 in revenue. Long term I believe that jMockups has much more potential than Preceden, yet it’s a little unnerving that the thing I’m spending so much time on is hardly making any money and the thing I’ve ignored for the last seven months is growing and bringing in decent revenue. Rather than spend 100% of my time on jMockups and none on Preceden, I’m going to aim for a 85/15 ratio in the future. I keep saying it, but a few A/B tests, SEO, and target AdWords campaigns could have a huge affect on Preceden’s revenue so it’s time to start doing something about it.

Finally, I’ve been doing life tracking for 2+ months now and have had some great results from it. Tracking + slow, incremental improvements go a long, long way. Check out my post on Sebastian’s blog for more details.

One last thing: I really enjoy talking with folks about their startups and poker bot work, so if there’s anything I can help you with or you just want to say hey, please shoot me an email.

Thanks for reading — Matt

Today is the official launch of the new jMockups Website to Mockup Converter, which lets you import any existing webpage into jMockups, allowing you to redesign and share it in minutes.

You can check it out here: Website to Mockup Converter.

And here’s the video demo:

Saturday probably isn’t the ideal day to publicly launch a new feature, but I’m in NYC this weekend with Chris Conley and Mike Nichoaides, two talented developers I originally met through some Philly on Rails meetups a while back. What better time to launch than among friends who have been following my progress and helping me since jMockups’ inception?

In the past I probably would have posted it on HackerNews minutes after I pushed it out to the site for people to start using. The problem doing it that way is that without a lot of people testing it beforehand, you run the risk of discovering major bugs in the midst of getting a lot of traffic. Then you have to choose between trying to fix it immediately (which due to your haste can introduce other bugs) or waiting for the traffic to die down (in which case a lot of people might have already experienced the bug). This has happened to me more times than I’d like to admit.

With this launch, I made it available to a few folks last weekend, then about half the existing user base on Wednesday. And sure enough, there were a lot of issues that I hadn’t anticipated. For example, when you work with bookmarklets you need to make sure that you prevent the browser from caching the code:

http://www.jmockups.com/javascripts/bookmarklet.js?x=’+(Math.random())

I wasn’t doing that a week ago and so I was making changes to the bookmarklet code but users weren’t getting the updates because their browser had cached the original version. Thankfully only a handful of people had tested it at that point. Imagine if several hundred had: most of them would never get the updated versions of the file, forever forcing them to use the original version of the bookmarklet. Not good.

By launching it in stages I identified issues like that and resolved them prior to the influx of traffic, making this a much less stressful day than previous launch days have been. Knock on wood…

Anyway, dear reader, I’d love to get your thoughts on the new Website to Mockup tool. Feel free to email me or leave a comment below. Thanks!

Cross post from the jMockups blog:

###

As promised in my 2010, 2011, and a $4K/month challenge post, I’m going to do a quick recap each month of the progress I’ve made with towards achieving that end.

Here’s what happened in January.

Preceden

Total Sign Ups: 510

Upgrades to Preceden Pro: 18 (3.5%)

Revenue: $522

Progress: I spent a total of about 5 hours working on Preceden in January, which was split between reverting December’s pricing plan changes and with integrating Mixpanel last week to start getting better insights into how people are using the tool. To date I haven’t spent any time trying to optimize the conversion funnel, which gives me high hopes that I can at least double it with some calculating A/B tests.

jMockups

Total Sign Ups: 135

Upgrades to jMockups Pro: 0

Revenue: $19

Progress: I spent a lot of time working on jMockups in January, with a focus on improving the user experience, fixing bugs, and making progress towards launching the new website import tool later this month.

Most of the major changes were covered on the jMockups Blog:

• jMockups Updates – Property Inspector Position, Import Progress, and Bug Fixes (Jan 9)
• jMockups has a Fresh, New Look (Jan 17)
• New Way of Editing Text (Jan 21)
• jMockups User Survey (Jan 22)
• Olark Integration: Say Hi (Jan 23)
• Using Canvas Pixel Caching to Reduce jMockups’ Rendering Time By 80%+ (Jan 28)

In early January I began working with a talented San Fransisco-based JavaScript developer on jMockups with the intent of eventually bringing him on as a co-founder if the partnership went well. We got along extremely well and I was thrilled with how quickly he was picking up the code, but personal circumstances prevented him from continuing. So back to one.

jMockups is somewhere in the trough of sorrow right now:

And there’s even been several crashes of ineptitude thanks to some poor QA practices…. so I’m on my way :)

My primary goal in February is to launch the new website import tool, which will let you import any existing website into jMockups, allowing you to redesign and share it in seconds.

Before I launch it (and it’s 95% ready), I want to fix a few bugs, improve a few existing features, and set up some more in depth analytics to prepare for the potential influx of visitors after I launch it. There’s nothing worse than launching an amazing new feature only to have 50% of the new visitors run into a bug that sends them away with a poor taste in their mouth…. except for never launching it at all, I suppose.

According to RescueTime, I spent 120 hours working in January, or about 27 hours/week.

Life

January was kind unique month for me because of how much time I spent on the road for my day job: 11 days completely away from home and another 6 partially away. 27 hours/week is a bit high for me — average is about 20 to 25. The extra hours were only possible because I was traveling and did not have anything else to split my time with.

On New Years Day I began doing daily life tracking, which was inspired by several posts Sebastian Marshall has written on the topic. I’ve been tracking how much I eat out, how much I exercise, how much I spend, my finances, sleep schedule, etc. This deserves its own post, so I’ll save the details for later, but in a nutshell it’s given me some astounding insights into my life (positive and negative) and by making a few minor changes I’ve already had incredible gains from it. I highly encourage you to try it out if you’re looking to improve some aspects of your life (start with Sebastian’s posts).

With that, back to coding.

A few months back with what seemed like two months of work left to do, I publicly committed myself to launching jMockups in four weeks. The number of things I wanted to get done prior to launching was daunting, but I desperately needed to get the product out there and in the hands of actual users to start collecting feedback.

How’d it go? I didn’t launch it in four weeks; I launched in less than three.

Public accountability is a powerful thing. Sebastian Marshal writes about his own experience:

If I hadn’t set this goal and been accountable publicly, to my friend and to everyone who reads here, I wouldn’t have done it in two weeks. Honestly – I’m pretty internally motivated, but I’ve had a lot of stuff going on the last two weeks, it wouldn’t have happened. But it did happen, largely because I was publicly accountable.

This productivity hack that works especially well for me. I’m an INTJ on the Meyers Briggs type indicator and one of our defining characteristics is the value we place on competence. By publicly committing myself to launch, I put my own competence on the line so I did what it took to meet the goal. Practically this meant postponing a lot of the things on my todo list until after the launch, working some long nights and weekends, and taking a week off of work.

Publicly committing myself worked well for me once, so I’m trying it again.

The Scene

I spent most of 2010 building. I launched Preceden in late January and continued working on it through May. In June I started working on jMockups and launched it in late October. My focus in 2010 (and largely 2009 and 2008) was on learning and building. I knew I eventually wanted to make money off of the apps, but money wasn’t my primary goal.

I’ll be with my current job until October 2012 so I can’t pursue this full time just yet. Because I have a day job I’ve never had to rely on my web app income to survive. It’s always been like Oh, I had another sign up. That’s nice. That’s got to change.

October 2010–a mere 21 months away–will approach fast. In order for web app development/entrepreneurship to be viable long term, I have to start making more money. My true passion lies in building things–not money–but without money I can’t spend my time building things.

The Goal

I don’t have exact numbers (which is part of the problem), but Preceden currently makes about $500/month and costs $70 to operate. jMockups makes $24/month (whohoo!) and costs about $200/month to operate (doh!). Taken together, I’m making about $250/month.

It’s not entirely fair to value the apps in terms of their current profits, but that’s obviously a big part of it. Preceden targets a small niche and has a small goal: be the best timeline tool. jMockups targets a large niche and has an ambitious goal: improve the way people design websites. Long term, jMockups has the potential to be a home run; Preceden doesn’t.

With that in mind:

My goal is to make $4,000 per month from Preceden and jMockups by the end of 2011.

That’s about 16x what they make now. If a public commitment isn’t scary, it’s probably not ambitious enough. And since this is terrifying, I figure it’s a good number to shoot for.

I’ll make monthly progress updates starting at the end of January.

The Plan

Preceden has a marketing problem. It’s is a quality tool that has a lot of happy users, but not enough people know about it. I need to get more people to the site and need more of them to convert to paying customers. My plan with Preceden is to start marketing it heavily (via things like AdWords), perform lots of A/B testing, and optimize the hell out of it by way of extensive analysis. If I can get Preceden to a point where outbound marketing has a measurable positive ROI, I’ll be in really good shape.

jMockups has a product problem. The tool is good, but not great. Trying to change the way people design websites is hard (I probably should have picked a more narrow niche to start with, but that’s another story). I’ve been adding two or three new features a week since it launched in October, but I haven’t spent much time on the other things it takes to create a successful web product. For example, there’s currently way too much friction from when a user arrives at the site and to when they create a mockup that they’re happy with. And it shows in the usage metrics (75% of new users create 1 mockup and never come back). In 2011, I’ll continue working on the product but I’ll place a stronger emphasis on usability, education, and building a community. The revenue should follow from doing these things well.

I have a sole founder problem. But not really. I like the independence of working alone, but having someone else to build with and bounce ideas off of would be great. I’m not going to spend a lot of time actively searching for a cofounder, but if the opportunity presents itself I’d definitely give it a shot. (Interested? Drop me a note: matthew.h.mazur@gmail.com)

###

So here’s to 2011. I don’t know how things are going to turn out, but hopefully with this public commitment they’ll turn out a little bit better than they otherwise would have.

Yesterday I launched jMockups! You should check it out: http://www.jmockups.com

It was thrilling. I was talking to Chris and Mike on Skype yesterday evening and my wife came over and wrote on my notebook, “You are HYPER“. That describes how I was the entire day. Launching is a drug.

Some links:

• Read the original HackerNews post and comments.
• My musings about the launch on the jMockups blog.
• On adding the ability to copy and paste.

You should follow me on Twitter here.

I’m taking Sebastian Marshal’s advice and making a public commitment right now to launch jMockups, the web-based high fidelity mockup tool I’ve been working on since June, by November 3rd.

The jMockups editor – the part of the app where you actually create the mockups – works pretty well. There are a few bugs, but they’re relatively minor and should be easy to resolve. That’s not to say that I am done with its development – far, far from it – but I don’t plan on making any major changes to the editor between now and the launch. It’s a decent minimum viable product.

So why not launch? Two words: billing integration.

After talking with a bunch of folks, I decided to charge for jMockups from the start. I’ve went back and forth on this, but ultimately I think it does go a long way towards defining the product and it eliminates the need for a transition down the road, which was a major headache when I did it for Preceden.

When I first started integrating billing I came up with a multi-tired pricing model that went something like this:

• Free: Up to 5 mockups
• Basic: $19.95/mo for up to 50 mockups
• Standard: $49.96/mo for up to 150 mockups
• Pro: $149.95/mo for unlimited mockups

The problem is that I have no data to base either the prices or the limits on. It’s all just guessing on my part. I don’t know how heavily people are going to use it or how much they are willing pay for that ability.  Hell, I don’t even know IF people will use it.

I could change the limits and the prices down the road, but then I could be in a situation where some customers are paying different prices than other customers for the same product.  There are ways around this, but they’re all complicated and I’d rather just wait and see what happens.

And who knows, maybe there’s some other way to structure the premium plan other than by the number of mockups a person can create. Maybe, for example, the tiers are based on customized shared pages or the ability to collaborate. If I start with a model based on the number of mockups and then decide I want to change it completely, I’m going to be in a tough spot.

My current plan is to let customers create up to five mockups for free and unlimited mockups for $19.95/month after that (a freemium model). By limiting it to two plans right now, I’ll be able to expand it to four or five down the road once I have more data.

Additionally, anyone who signs up for the $19.95/mo plan, which I’m calling jMockups Pro, will automatically be upgraded to whatever the highest plan is down the road without incurring additional charges. So if I do eventually introduce a $149.95/mo plan with a killer feature set, anyone who signs up for the jMockups Pro plan will get those same features for the same $19.95/mo. This helps keep it simple right now and it rewards the early adopters who take risk by signing up for a new, unproven product.

Anyway, recurring billing integration is new to me so it’s taking a while to set it all up correctly. More on this in another post.

Meanwhile, I’m currently waiting for the paperwork to go through for jMockups LLC so I can set up a business checking account which I can tie to a merchant account to use with Authorize.net, the payment gateway. If I don’t launch by November 3^rd its going to be because one of these steps is taking longer than I anticipated.

And with that, it’s off to work.